Problem

You need to make the icons on your site immediately obvious.

Solution

Except for a few concepts where icons are part of our common visual vocabulary (such as the travel icons at right), use text labels rather than icons. The icon or thumbnail can augment the text, but not replace it.

Discussion

Because icons are not useful when they are unfamiliar, you should not rely on unusual icons for navigation. There are very few icons that are wholly obvious.

However, for those few concepts where the icons are part of our visual vocabulary, judicious use of icons can be a helpful part of your navigational scheme. For example, an arrow icon can help a “continue” or “next” link considerably, augmenting the meaning in a nonverbal way. Similarly, a magnifying glass helps a “zoom” link, and the now ubiquitous “shopping cart” icon is helpful. If you are spawning new windows for help screens or magnifying images, an icon made of overlapping squares indicates that a new window will appear.

Icons should be used when the visual clue augments the textual message. For example, a department store might pair a tuxedo icon with the word “men’s wear” to suggest formal attire. Similarly, pairing a small thumbnail with a text label would help visitors choose among different size atoms or climates.