The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Illustrated Choices


Mac OS X System Properties

What:

Use pictures instead of words (or in addition to them) to show available choices.

Use when:

The interface presents a set of choices that differ visually, such as colors, font families, or object alignment.

Why:

Why translate a visual concept into words, when showing it visually is so much more direct? You reduce the cognitive load on the users -- they don't have to think about what "goldenrod" or "Garamond" might look like -- while simultaneously making the interface more attractive.

How:

First, each thumbnail (or color swatch or whatever) should be accurate. The user should get what he sees on the illustrated choice. Beyond that, show the differences that matter, and little else; there's no need for perfect miniature reproductions of the choices' effects. Show a simplified, streamlined, and exaggerated picture.

You can use illustrated choices in many controls: dropdown lists, radio boxes, scrolled lists, tables, trees, and specialized dialog boxes like color choosers. Ideally, you can show the user a set of illustrated choices all at once, in one single dropdown, list, or toolbar. A user can then compare them to one other immediately and easily. If you show them one at a time -- which sometimes must be the case, as with the Preview pattern (see Chapter 5) -- the user sees them sequentially over time, which isn't as good for comparing one to another.

Sometimes it's appropriate to show both the picture and the item's name. If the user would benefit from seeing both of them, do it -- they'll learn to associate the name with the picture, and thus the concept. Interfaces can teach.

If you need custom icons or thumbnail pictures, consider getting a good graphic designer to do the artistic work. Make sure she is sensitive to the visual vocabulary of the whole application, and that she understands what the choices mean.

Examples:


From Excel for Windows

When you create a chart in Excel, you see a Chart Wizard that first asks you to choose a chart type. This is a perfect use of Illustrated Choices: not everyone knows what a bubble chart or a radar chart should look like, but some people recognize the pictures of them. (Also note the use of a help text at the lower right, and the fact that the three-page elements together behave like Cascading Lists.)


From Word for Windows

A font chooser is a classic place to use Illustrated Choices. In this dropdown box from Word, the font names are written in their own fonts, thus sparing the user the need to look it up in a separate font dialog box or tool -- few Word users would know the difference between Book Antiqua and Palatino without seeing examples of them.