Visual Design Tips for Web App Developers: #2 - Use a small set of UI affordances, and apply them consistently

Note: As of June 2013, this post is out of date. To learn more about selecting affordances and using them consistently, we recommend chapter 1, "Consistency," and chapter 8, "Controls and affordances" of our book Visual Usability: Principles and Practices for Designing Digital Applications. You can find out more about Visual Usability in our blog post about the book.

When developing a complex application, using the fewest interface elements and behaviors consistently is critical to make your application look organized and behave as expected. For example, this version of an older application has three separate ways of closing a window:



Users must close the leftmost popup by mousing out of it, the center popup by clicking a link or a nearby button, and the top popup by clicking a link that looks completely different from the one in the center popup. Having one way to close a window rather than three would reduce the number of visual cues, improving the appearance, and would help the user know what to expect from the affordance, improving usability.

Here’s another example, the editing interface from the latest version of Microsoft's Photo Gallery software.



It looks like the design and development team tried to introduce some consistency by using an “x” icon for deletion. The problem is that not all the “x” icons do the same thing – the brushstroke icons at top left and bottom delete the photo, the heavily stroked red x at upper right closes the photo file without deleting it, and the small gray x at right closes the metadata pane. All of these actions have very different consequences – especially deletion and file closure! – so their icons should not feel so closely related, or should at least be more clearly identified than they are.

Consistency can be hard to achieve when different teams are working on different parts of an application, and when features are in flux. Set logical rules for where and how interface elements appear based on knowledge of how most people will use the application and existing conventions of any related application UIs. Work to maintain the consistent language as features gel. The payoff will be an application that looks and feels professionally designed, and rules that when documented can serve to guide further development.

For more information:

• Mashable’s list of 10 web UI kits and resources for designers (just as handy for developers in a pinch!)
  
• The JQuery UI wiki has a good page about its button design, hierarchy, and behaviors.