GUIs these days run the entire spectrum of icon usage. Some use practically no text or labels anywhere, while others literally have no icons whatsoever (such as a typical blog ). In the 1990s major software applications established precedents for toolbars that defaulted to a display of icons only, with the first few quickly becoming standard across both applications and software vendors.

GOOD: STANDARD ICONS

Figure 1 shows the toolbar icons for several different products from Microsoft® and Corel® from 1999-2003. There were certain toolbar actions that applied to all of the applications and—thankfully for the user—the same icon was used for the same action in the case of New, Open, Save, Cut, Copy, Paste, Undo, and Redo. Because users became familiar with these options in one product, they were readily recognizable and usable in the others.

Though the icons are mostly the same, there are some interesting things to note, including the fact that even though Microsoft and WordPerfect® used the same Print icon (Figure 1), clicking the icon in Microsoft products sent a print job to the printer immediately, whereas in WordPerfect and Corel Presentations, clicking the printer icon invokes the Print dialog. Using the same icons for similar but different actions can be frustrating to the user. Former WordPerfect users have long despised the fact that the Microsoft printer icon causes them to accidentally send print jobs before they were ready.

Other actions which might seem common for applications, such as Search, have yet to have standardized icons. Figure 2 shows the Visual SlickEdit® toolbar with the last two icons in the graphic being Search and Search Next. Note that SlickEdit also has a unique icon for New Document as opposed to the Blank Document icon in all four applications in Figure 1. The Undo icon is also slightly different with the addition of a dash and dots (morse code?) below the arrow and no Redo icon is shown at all. (I’m not sure why they would have Undo, but not Redo, when the pair have been standard for so long.) Though the SlickEdit toolbar has no text, the tooltips are very descriptive.

ADVANTAGES OF ICONS

So where did this idea of toolbars of icons come from, anyway? Toolbars made it so the user didn’t need to click through a menu structure to find the desired action. And using icons on the toolbar has several advantages, including:

• Icons are great for saving space
• If the icon is quickly recognized, it can help a user quickly get to the desired action.
• Icons add visual interest
• The same icon used in multiple areas of the application for the same concept helps the user with learning and association

BETTER: TEXT ONLY

Another option is labels alone with no icons. Though the applications shown in Figure 1 used icons by default, the user was given the option of displaying icons, text, or both. Text alone works well if every label is a single word, but the WordPerfect toolbar shown in Figure 3 uses New Blank Document as the label for its first action, which is only visually delineated from the next action by the mouse hover. Not so great.

Of course if only using one or the other, then labels are the most important. Text is (obviously) more descriptive and more specific than an icon could ever be. However a single word can sometimes be problematic due to the fact that it may have multiple meanings or it may not be clear whether it is a noun or a verb. I have spent countless hours in countless meetings where the exact word or wording was discussed in order to get the desired meaning across. I always get nervous in those discussions when working with an application that will be translated into multiple languages. How do we make sure that our precise meaning in English is correctly represented in the other languages? The documentation must fill in the gap, but most users only look at documentation or seek help when they have exhausted all other options.

BEST: ICONS COMBINED WITH TEXT LABELS

Microsoft followed research findings in 1997 when Outlook Express® was released with both icons and text as the default display (see Figure 4). This should be the default in every application! Of course, the user has the option to change the display to either icons alone, text only, or both, as well as the option of either large or small icons. Well done.

Other applications in that time period were providing similar options, though the default was icons only. The four applications in Figure 1 are shown with icons that are readily recognizable for most users, but each also has icons that very few users would have any clue about unless they were regular users. (That’s why an application should display both icons and labels by default.)

In 1998 Corel apparently wasn’t sure what layout it liked best with regard to displaying both labels and icons on its toolbars. Figure 5 shows the Corel Presentations toolbar with labels directly beneath the icons, similar to Outlook Express.

Figure 6 shows the WordPerfect toolbar with the label to the right of the icon, and the property bar with labels under the icons. It’s a strange inconsistency within the product (and the suite), but it’s relatively easy to determine what goes with what.

ADVANTAGES OF COMBINED ICONS WITH TEXT

Icons combined with text have several advantages, including:

• Text alone on a toolbar, when some items are more than a single word, tend to run together, especially when framing around the individual items often only shows up when it has focus from the mouse hover or keyboard tabbing
• Only a handful of icons are recognized standards in the eyes of most users and so text provides the important definition or label (tooltips should give additional information—never the identical text as the label)
• Users will learn the icons’ meaning much more quickly when a label is present

THE STATE OF TOOLBARS TODAY

The latest versions of software continue to use variations of the toolbar icons developed over the last 20 years, but unfortunately the default is still to show icons only, as seen in Figure 7. The icons have moved around quite a bit from older versions and some are still very recognizable as part of the standard from years past. Many of the new icons are obvious, but several would definitely benefit from labels.

A FINAL NOTE

Don’t design new icons for standard functionality. You don’t want the user to have to try to figure out what your clever icon represents just to use the product. If there is already an established paradigm, then use it. Remember that the user simply wants to accomplish their task as quickly as possible.

KEY DESIGN POINTS

1. The default should be to use icons combined with labels, allowing users to choose either or both as they become more familiar with the application.
2. Don’t design new icons for old ideas, and don’t reuse old icons for different ideas.
3. New ideas need new icons, but keep them simple and let text and tooltips give the necessary detail.