About Face 2.0(c) The Essentials of Interaction Design

The toolbar gave birth to the butcon, a happy marriage between a button and an icon. As a visual mnemonic of a function, butcons are excellent. They can be hard for newcomers to interpret, but then, they're not for newcomers.

Icons versus text on toolbars

If the butcons on a toolbar act the same as the items on a drop-down menu, why are the menu items almost always shown with text and the toolbar buttons almost always shown with little images? There are good reasons for the difference, although we almost certainly stumbled on them accidentally.

Text labels, like those on menus, can be very precise and clear—they aren't always, but precision and clarity is their basic purpose. To achieve this, they demand that the user take the time to focus on them and read them. As we discussed in Chapter 19, reading is slower and more difficult than recognizing images. In their pedagogic role, menus must offer precision and clarity—a teacher who isn't precise and clear is a bad teacher. Taking the extra time and effort is a reasonable tradeoff in order to teach.

On the other hand, pictorial symbols are easy for humans to recognize, but they often lack the precision and clarity of text. Pictographs can be ambiguous until you actually learn their meaning. However, after you've learned their meaning, you don't easily forget it; and your recognition remains lightning fast, whereas you still have to read the text every time. In their role of providing quick access to frequently used tools, icons must elicit quick recognition from experienced users. This is their highest priority. The pictorial imagery of symbols suits that role better than text does.

Butcons have the immediacy and visibility of buttons, along with the fast-recognition capability of images. They pack a lot of power into a very small space. As usual, their great strength is also their great weakness: the icon.

Relying on pictographs to communicate is reasonable as long as the parties have agreed in advance what the icon means. They must do this because the meaning of an icon of any kind is by nature ambiguous until it is learned. Many designers think that they must invent visual metaphors for butcons that adequately convey meaning to first-time users. This is a quixotic quest that not only reflects a misunderstanding of the purpose of toolbars, but also reflects the futile hope for magical powers in metaphors, which we discussed in Chapter 20.

The image on the butcon doesn't need to teach the user its purpose; it merely needs to have a bold and unique visual identity. The user will have already learned its purpose through other means. This is not to say that the designer shouldn't strive to achieve both ends, but don't fool yourself; It can't be done very often. It's a lot easier to find images that represent things than it is to find images that represent actions or relationships. A picture of a trash can, printer, or chart is pretty easy to interpret, but what icon do you draw to represent Apply Style or Cancel or Connect or Merge or Convert or Measurement or Adjust? Then again, perhaps the user will find himself wondering what a picture of a printer means. It could mean find a printer, change the printer's settings, or report on the status of the printer. Of course, after he learns that the little printer means "Print one copy of the current document on the active printer now," he won't have trouble with it again.

The problem with labeling butcons

It might seem like a good idea to label butcons with both text and images. There is not only logic to this argument, but precedent, too. The original icons on the Macintosh desktop had text subtitles. Even today, some Web browsers do this by default. Icons are useful for allowing quick classification, but beyond that, we need text to tell us exactly what the object is for.

The problem is that using both text and images is very expensive in terms of pixels. Besides, toolbar functions can be dangerous or dislocating, and offering too-easy access to them can be like leaving a loaded pistol on the coffee table. The toolbar is for users who know what they are doing. The menu is for the rest.

Some user interface designers have gone ahead and added labels to butcons, either across them or just below them, and left the images in place. Except in rare circumstances, screen space is far too valuable to waste this way. These designers are trying to satisfy two groups of users with two different goals: One wants to learn in a gentle, forgiving environment. The other knows where the sharp edges are but sometimes needs a brief reminder. Certainly, there must be a way to bridge the gap between these two classes of users. Next, we'll discuss some methods that don't dedicate lots of precious screen real estate to solving the problem.