Three meta-rules for usability design November 20, 2008

I recently saw a useful deck from Create with Context about how people really use the iPhone. The company did a bunch of ethnographic research on how ordinary users (not power users) used the iPhone, and in particular, what were common mistakes made. Based on their research, here are their eight rules of thumb for designing for the iPhone:

1. Take advantage of learned behaviors
2. Avoid interaction inconsistencies
3. Provide clear conceptual link across widgets
4. Put space between action widgets
5. Plan for accidental overswiping
6. Don’t rely exclusively on multitouch
7. Provide visual feedback for taps
8. Provide interaction affordances

The presentation provides examples of all of these rules and what sort of errors are possible when they are not followed, and is well worth the 10 minutes it takes to review.

These useful rules of thumb fall into three metarules for design that make sense under almost all circumstances:

A: (1&2) Use UI standards whenever you can

When I was GM of Netscape I drove some bad design decisions for the Netscape 8 browser based on my idea of “efficiency”. The worst one was moving the browser dropdown menus to the right hand side of the application window, up a level so that it was on the same level as the logo and the name of the current web page. See a screenshot here (look at the top right hand corner of the page, in the black background with blue text).

We did this with the best intentions – to save some pixel height and thereby create more space on the screen for the actual webpage. Of course, since this “improvement” was different from the way that every other app in the world works, many users were confused and couldn’t find the dropdown menus at all. It was a bad idea.

I think that tagclouds, once all the UI rage, have since faded from the scene for the same reason. A few years ago they were the hallmark of web 2.0, all over the home pages of Delicious, Technorati and Flickr. But they are gone from all of these home pages now. The majority of users (not early adopters) found them to be too different from the standard forms of navigation that they were used to (left hand nav bars, top nav bars, search, headline-teaser) and didn’t use them.

B: (4&5) Make sure that user error is not catastrophic

This is obvious, but worth mentioning. The team building a product are by definition experts, and this can lead to a blindness to possible modes of error. Just five user tests will turn up the biggest problems.

C: (3,6,7&8) Give users visual clues as to what does what

This is an area where designers sometimes come with the wrong instincts. Making things look good is definitely not the same as making them easy to use. In fact, sometimes these factors are contradictory.

One common example is in formatting a page to fit a screen. While the most aesthetic design has all the elements of a page fitting neatly into a grid so that nothing is “cut off” by the fold of the screen, in fact having partial images disappearing off screen is an important visual cue to users that there is more below the fold. Similarly, overly stylized icons can confuse a user as to what they represent. Also, UI that is too subtle can leave a user confused as to what is clickable and what is not, and what they should be clicking on next. Why are some web ads and social network profiles so garish and “ugly”? Because they serve not to please the eye, but to draw the eye, and they do that job well.

Keep these three simple meta rules in mind when you’re designing your user interactions.