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.
12 Comments
Also,
mind those situations when even after clicking in the right place, you get a totally unexpected result. Like in Safari: how many times have I clicked on the top left red circle on the browser that is suppose to close the window and got instead a minimising action?
Its a very good point, you make.
Kinda like that film -cant remember the tittle- where someone placed the coffee and the nuclear-war buttons side to side, and the president of the USA often mistakes them.
Posted by Angel Luis Gonzalez at 10:41 am on 22 June, 2009.
That kind of thing drives me nuts. Twitter web interface for friend requests is another offender - http://www.iamsteph.com/web/2009/twitter-usability-fail
Posted by Steph at 11:27 am on 22 June, 2009.
While we’re at it, why does the (+) button on iTunes make the window *smaller* ?
Posted by James Pearce at 12:32 pm on 22 June, 2009.
I’ve never had Safari minimize from clicking the red ‘close’ circle. Is this a quirk of the Windows Safari interface?
Posted by nathan at 11:22 pm on 22 June, 2009.
No, Nathan, it happens often in my MacBook Pro. Even with Safari 4. Perhaps I should record a video of my screen?
Posted by Angel Luis Gonzalez at 7:19 am on 23 June, 2009.
This really crosses over into the same regards to web development. When creating a list item that says something along the lines of ‘About’ and I sometimes have about 10px of space below or above the next list item. But maybe my ‘About’ font-size is only 9px. Why would I want the user to have to pinpoint in like an Air Force pilot trying to land on the deck of a ship when I can set display: block and use as much of the area around my ‘About’ click area as possible? Small rant but seemed relevant.
Posted by Matt Dyson at 8:34 pm on 23 June, 2009.
@Matt
I agree with you 100%, a worthy rant.
Large click targets are an easy usability win.
Posted by Des at 8:45 pm on 23 June, 2009.
Fitt’s Law - named after the uncontrollable fits of anger induced when misclicking on the irrecoverable secondary action
Posted by Lar Veale at 6:32 pm on 24 June, 2009.
http://dasneueschwarz.de: not messing with the buy-me button.
Posted by le bons at 5:55 pm on 27 June, 2009.
True - This particular Spotify issue gets me several times a day
Posted by Jimmy Coleman at 3:22 pm on 7 July, 2009.
The clearest for me is the return button besides the delete one in my MacBook Pro; it costed me more than one misspelled or unfinished twitt.
Posted by Angel Luis Gonzalez at 3:27 pm on 7 July, 2009.
I just wish that designers would think ahead a bit while designing. They should try to think of how their designs would impact actual usability. Some designs leave me wondering why the designer didn’t make use of all the available space more judiciously (instead of clubbing buttons into small localized clusters on the webpage).
Posted by Ashley Adams at 7:14 am on 10 July, 2009.
1 Trackback
[...] are no small changes and Every pixel counts – Des Traynor with two insightful articles on user interface [...]
Posted by Developer Links – 27-07-2009 | Ross Duggan at 5:18 pm on 27 July, 2009