Every pixel counts

Accidental clicks like the one indicated above aren’t common anymore, thankfully. Any competent designer wouldn’t dream of leaving a destructive action so close to a typical workflow action. The submit or cancel revolution has solved many of the UI problems caused by poor grouping of actions. However there can still be confusions, especially at the points where the interface meets the browser window or operating system window.

Spotify. Every time I make a new playlist I double click the search field to perform a new search. Except double clicking doesn’t select the text, it minimises the window. Not what I wanted, at all. My target area is 4 pixels high in Spotify, surrounded by a massive click area that minimises the window.

Skype. Does this click hang up, or let me stretch the window? Two hugely different actions, with just 3 pixels between them. Apps like Skype & Spotify can easily get away with little blunders, in the same way Napster got away with using buttons as tabs, and tabs as buttons. For the rest of us, it’s important to divide actions into primary and secondary, and make sure they’re more than a couple of pixels apart.

It’s worth remembering this before using any of those widgets that hug the scroll bar or bottom corner of a site saying things like “Feedback” or “Help”. If a user wants to scroll through your site but accidentally clicks your feedback widget, they’re not impressed by fancy fade outs and curvaceous modal dialogues. The edges of the browser window are not a panacea to the “Where can I put this” problem. They’re just one more place to consider, and they’re surrounded by functionality you can’t control.