Tag Archive for 'interface design'

Clusterfuck’d

Aug 30, '11  ·  Closed Tags: , , , .

You think imitation leather is the biggest problem facing interface design today? Think again.

The Windows Explorer Ribbon

The Windows Explorer Ribbon

It doesn’t even make sense to break down what’s wrong with it, because it’s basically everything[1], and reveals a baffling lack of insight into how users interact with their computers.

But at least the post gives us some interesting telemetry data from the Explorer. Data that is theoretically as applicable to any file-based OS – say OS X – as it is to Windows.

Now we don’t get much data about the data[2], but it’s still extremely interesting, and what’s so striking to me, is that Cut, Copy and Paste are in fact some of the most used commands, and they’re not even available in the Finder on OS X. It always seemed weird, but for all I knew, most people never cut and pasted files. It seems they do.

Of course the Finder couldn’t merge folders until Lion, so perhaps it’s simply a matter of it not getting enough attention at Apple, or perhaps there is a genuine reason behind this decision. I don’t know.

Another thing that strikes me, is the Refresh command. Yes kids, there was once when we would have to manually refresh the Explorer to see changes to our file system. And as you can see, it is still in wide use.

Windows 7 Screen Resolutions

Windows 7 Screen Resolutions

No major surprises there, but it’s always nice to know what the market looks like today in terms of resolution.

Anyway.

What the hell is going on at Microsoft? How did this clusterfuck come out of the same team that did this?:

Updated: Cut, copy and paste are indeed available through keyboard shortcuts in the Finder; I must have tested wrong when I wrote this post. Thank you Karl for pointing out my error.

  1. Microsoft has had a history of letting Office set the direction of their interface design, which tells you everything you need to know about why the interface is getting more and more complicated. I think Paris Lemon said it best.  ↩

  2. “This data is pretty solid and given the hundreds of millions of data points, it gives us a very clear picture of average usage across the population as a whole” is all it says, though it seems likely from later comments that it’s exclusive to Windows 7, though it doesn’t say how many users, what the demographical breakdown is or over how much time the data was collected.  ↩

Google Result Previews; Interaction Disaster Area

Nov 18, '10  ·  Closed Tags: , , .

Google recently introduced a new preview layer to their search results, which allows the user to not only preview the page before going to it, but also seeing the actual string highlighted on that page. A nice idea, wrapped in horrible interaction design.

Continue reading ‘Google Result Previews; Interaction Disaster Area‘

…And Along Came Squarespace

Nov 6, '10  ·  Closed Tags: , , .

A few months ago, Anthony, the founder of Squarespace, asked me to fly out to New York to meet with him and a few others about a possible job; a very tempting offer, but at the time unrealizable due to circumstance.

Last wednesday we shut the door on our empty apartment in Copenhagen, left the keys in the mailbox and boarded a plane to Newark, all of our necessary belongings neatly packed into as many bags as you can fit into the back of a Lincoln town car, now effectively homeless.

Everything’s a momentary blur, but as reality and the practical measures of moving settles again, hopefully soon, I’ll be stepping into my new role as Interface Director at Squarespace and a new life here in The Big Apple.

In the scheme of things, it has been simultaneously one of the hardest, and one of the easiest decisions we’ve ever had to make. On the one hand existing obligations, jobs, friends and family, not to mention a place to call home and a daily routine are not easily shed. Yet on the other, a chance to try something entirely different, to have a go at the dream of living in roots of the worlds most iconic skyline and in a sense to try an alternate reality — if only for a time — and certainly not least, to have the opportunity to work for a company I have long admired, and which over the last couple of months, as I met with the people behind it, solidified as a force to be reckoned with, a mentality straight out of my most livid day dream and a collection of people the likes of which you’d be lucky to meet in passing, if at all.

Of course, a disruption like this doesn’t spring to life without sacrifice and broken plans, and we owe much to friends and business partners for their understanding and support. But here, at the tail end of it, it seems it wasn’t much of a decision at all as much as it was coming to the realization that we couldn’t not do this.

Which leaves us here, on the 10th floor of a Soho hotel bordering Tribeca, almost in eye-shot of the Squarespace offices, starting our scavenger hunt for a new home, and a life in the big city.

Pinch me.

Getting Closer

Nov 1, '10  ·  Closed Tags: , , .

“When you want to set down an idea, you should be able to go to your computer or information appliance and just start typing: no booting, no opening the word processor, no file names, no operating system.” (xviii, Jef Raskin, The Humane Interface. 2000, Addison Wesley)

The Blackberry Playbook and Our Natural Predators

Oct 25, '10  ·  Closed Tags: , , , .

We’re pretty simple. If something sudden happens, we react. We flinch. We stop. We divert all of our attention, unwillingly, to whatever it is that could potentially be posing as a danger to our well being. We will interrupt whatever we’re doing at loud noises or when catching something out of the corner of our eye. It’s our fight or flight instinct. We can’t help it.

Now watch this, and pay particular attention to the animations:

Now if I say: “hunting tiger”?

The animation curves on the Blackberry Playbooks UI are those of a predator, just as it pounces its prey; slooow and then fast!. It’s incredibly disconcerting, causing our lizard brain to subconciously analyze the motions of something as harmless as windows on a screen for signs of danger.

This recalls Apple’s ‘Breathing Status LED Indicator’ (and Dell’s hopeless imitation), though I should mention, just for good measure, that Apple isn’t above reproach; try bringing up your dashboard, and dismiss it. Notice how the widgets fly into your face!, say like a tiger, rather than simply fade away?

Interaction design should for the most part be all but transparent to the user, so here’s my pro tip of the day: try not to emulate our natural predators.

Update: Oddly, the animation curves used for all the marketing material aren’t the ones used in this practical demo:

#NewTwitter

Sep 29, '10  ·  Closed Tags: , , .

Yes, it is a step up for power users, but I imagine it must be intimidating to n00bz and is a little too crowded for my tastes. But having finally spent some time with #NewTwitter, deeper problems make me think it got kicked out of the nest before its wings were fully formed.

Continue reading ‘#NewTwitter’

Romancing the User

Sep 5, '10  ·  Closed Tags: , , , , , .

dConstruct 2010 was above and beyond expectations, and it was, as always, pleasant putting real-world faces and mannerisms to Twitter streams. Others will do much better play-by-plays than I could hope for (the talks will be podcast, and I’ll be sure to curate my favorites then). For now, a couple of the highlights that stuck with me:

Continue reading ‘Romancing the User’

Readernaut Feedback Form

Jul 2, '10  ·  Closed Tags: , .

I love the feedback form on Readernaut. It’s at the bottom of every page, it’s as simple as it can get and Nathan actually reads and responds to them. Love it.

Stop the Browser Selecting Text When Dragging

Jun 2, '10  ·  2 Comments Tags: , , , , .

In playing around with the interface design for an as of yet unannounced — so far webkit only, and altogether largely non existing, I might add — project, I came across several nice-to-know a-ha’s and gotcha’s that are unbelievably helpful for trying to get beyond the usual flaky ‘yeah, we’re still in the browser alright’-feel of most web apps out there, one of which is the remedy to how when you’re using something like this timeline, and you end up selecting text and other elements on the page as you try to navigate it? Stuff like that makes me want to blow my brains out.

Well, saved by the bell, there’s a CSS3 property for that called user-select, it works at least in both Webkit and Mozilla, and it’s heavenly. There’s a lot of uses for it, but for something like the stuff we’re going to do, which is a lot of dragging and dropping of elements, we’ll probably end up simply adding a basic class to the BODY element whenever we don’t want text to be selected, and ét voila.

body.dragginginprogress {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

World peace. Easy as that.

It’s these small things, the things that you don’t see people writing massive colorful articles about, that really make my day.

You can see it in action in my playpen, though I won’t promise I don’t break that n the near future as I throw various things up on the wall to see what sticks.

Update: If you’re using jQuery UI, there’s also an (undocumented) function called .disableSelection().

Less is More

Apr 26, '10  ·  8 Comments Tags: , , , .

I love the engineers behind iPhone OS. They’re head, neck, shoulders and torso ahead of everyone else. It’s kind of scary in a way, as it probably shows just goes to show how far behind everything else is in contrast.

Not to pick on WordPress, I’ve just spent a good deal of time with it over the last few days, and it struck me again yesterday how, as I was testing a slew of role management plugins (argh, by the way), that I would activate a plugin, and subsequently not have the faintest clue where to look for any new UI inserted by it. Some put a single options page under Users, others inserted whole bundles of pages, some put them where I least expected it…

Contrasted with the iPhone, where when you install or update an app, from the phone itself, it will actually exit the app store and take you to the screen where the icon is, and show you that it’s being installed/updated. This usually takes 10 – 20 seconds, and you’re good to go; it’s right there ready for you.

It’s a small thing, and in the cases where you’d prefer to stay in the store it may be mildly annoying, but on a larger scale it means a lot less frustration and searching, even in a system as simple as the iPhone.

Very Symptomatic, I’d Say

Apr 26, '10  ·  9 Comments Tags: , , .

I could pull out a plethora of reasons why the media manager in WordPress needs to be the focus of the next major release after WordPress 3.0, but honestly, this particular issue seems to say everything there is to say on the subject.

Seriously now; did anyone even bother testing it? How long has it been like that?

I love WordPress; I actually really do, but you can’t just throw the first media manager that crosses your path into WordPress core and think that’s that… And I’m not just talking about this either. I’ve looked at the code; I’ve reverse-engineered the code. It’s not pretty, but more importantly, it’s symptomatic of a whole heap of problems in WordPress in general.

A Snow Leopard-esque release would do wonders; though I have to wonder if it won’t break the back of those who take it upon themselves to try it?

iBooks vs Delicious Monster

Jan 27, '10  ·  11 Comments Tags: , , .

The iBooks interface

Maybe he’ll shed some light on it himself at some point, though he’s probably under some crazy NDA. But before people start slinging mud at Apple for ‘ripping off’ the ‘wooden shelves’ look for the new iBooks app from Delicious Library, consider that Mike Matas who designed that interface for Delicious Monster worked for Apple for a couple of years (leaving in july of last year).

Update: “[Delcious Monster co-founder] Mike Matas was a UI designer on the iPad, [former employee] Lucas Newman is an iPhone / iPad engineer, and [former employee] Tim Omernick was an iPhone / iPad engineer but left a while ago to work on games independently.” #

Dieter Rams Speaks

Dec 21, '09  ·  Closed Tags: , , , , , , , .

And you should listen.

Vertical Pixels Are Friends

Aug 22, '09  ·  16 Comments Tags: , , , .

I love me some Chrome, let there be no doubt about that. On Windows it’s my browser of choice, no contest, and on OS X it’s getting to a point where it’s usable as a default browser. But, there is one thing that is really grating me on OS X.

Chrome vs. Safari

That’s Chrome’s 100 vertical picels toolbar highrise vs. Safari’s lean 72px. Even with its bookmark bar folded, Chrome is taller than Safari…

28 paltry pixels don’t seem like a whole lot, but considering that all of Google’s web apps also take up at least 25px at the top for links to other Google apps, sign out, help and settings links… Well my 13.3” MacBook Pro’s screen is starting to feel vertically challenged.

I actually ahppen to love Chrome’s ‘oversized’ address bar and on-top tabs, but something’s gotta give.

Update: After some discussion below, it should be noted that Safari actually exceeds Chrome in vertical… eh… chrome pixels if you also turn on the status– and tab-bars.

AR & iPhone, Sitting in a Tree

Aug 18, '09  ·  1 Comment Tags: , , .

I immediately imagined the possibility for a multiplayer tabletop strategy game, along the lines of Warhammer 40.000, in which there is no board and no pieces, just players. Bring the game with you, when you meet up with your opponent, have a quick round, wherever you are. I was going to say, that all you’ll need is a flat surface; but you obviously don’t even need that, when everything is virtual.

Another thing struck me. Since the iPhone knows where it is, which way it’s pointing and how it’s tilting, it should theoretically be possible for it to apply that data-over-time to a video stream and in essence create Google Streetview-like spheres; employing some clever math, no doubt.

Exciting stuff, though of course not the first example of augmented reality on the iPhone.

Augmented Reality. Here. Now.

Jul 15, '09  ·  3 Comments Tags: , , .

The distance between the dream and the substance of augmented reality is an infinity of real-world problems. But…

The implications boggle the mind, and while they do, you can read up.

Movable Tabs

Apr 4, '09  ·  3 Comments Tags: , , , , , .

At work, where I’m forced to use Windows Vista, I use Google Chrome exclusively. And a thing I’ve grown to love about Chrome, is how it handles moving tabs, which is slightly different — and better — from Safari 4b, which I use at home.

In Safari, you grab the small lined area at the top left of a tab to start dragging, something introduced with Safari 4, where before the entire tab was draggable. Once you start dragging, the semi-transparent tab follows your mouse arround until you let go of it, whereupon it either integrates itself into a row of tabs or into a new window. Most annoyingly, Exposé doesn’t work while dragging tabs.

In Chrome, you can initiate dragging anywhere on the tab, and if the tab is the last remaining member of a window, that window will disappear when you start dragging. This allows you to move a tab into a window behind the current, without first rearranging windows; quite nice in Windows’ maxmized windows regime.

Dear Apple: Please steal some of these interface tricks for Safari.

PS: I would switch to Chrome on OS X in an instant, if I could; extensions or no.

What Microsoft Does Well

Mar 19, '09  ·  15 Comments Tags: , , .

Dear Microsoft,
Fire you OS designers and have your visualization department do the OS interface instead.

… No, scratch that.

Dear Apple,
Hire Microsoft’s visualization department.

The Woes of the Digital Album Booklet

Sep 25, '08  ·  Closed Tags: , , , , , , , .

It is remarkably rare to see your latest iTMS purchase accompanied by a digital booklet in the shape of a PDF file. Remarkable because whereas a physical booklet requires the use of large color-corrected printers, ink, distribution outlets, delivery vehicles (and men), loss in profits and much more, digital booklets require only ‘print to PDF’, and you’re done. Considering that, I do wonder why all my albums don’t come with booklets.

Continue reading ‘The Woes of the Digital Album Booklet’

Interfacing with Habari

Aug 30, '08  ·  Closed Tags: , , , .

We’ve done some pretty cool work on Habari’s administrative interface over the last months, and I’d like to take a few minutes of your time to walk you through it.

Oh, and if you like what you see, please, by all means, link back here, drop some comments on Viddler and let everyone know about this, because we want to get more people hyped about Habari, and you’re the key to making that happen.

PS: Download the 93MB quicktime file for full non-aliased pleasure.