Communicating With Icons

When icons fail to effectively communicate their meanings to users, they can impose serious usability costs which greatly outweigh their worth as pictures.

The old adage, "a picture's worth a thousand words," is a nice benefit when visually representing emotional concepts or situations that encourage personal interpretation. However, personal interpretation is a huge problem when it comes to using icons in software and web design.

For example, the latest version of Microsoft Office (Office v.X) for the Macintosh boasts that over 700 icons have been created to increase usability and ease-of-use. But consider the following two sets of icons:

The icons on the left are not only established in the computer world, they're also fairly well designed. The scissors stand for "Cut;" the page with the magnifying glass stands for "Find on Page;" and even the envelope with the clock and the arrow can be (correctly) assumed to mean "Send Mail at a Specific Time."

The icons on the right, however, are not nearly as clear in their meaning. And while they may make more sense when taken in context within the application, overall they're not as effective at communicating their meanings as the icons on the left.

When icons fail to effectively communicate their meanings to users, they can impose serious usability costs which greatly outweigh their worth as pictures. Presented below are some design and usage guidelines you should consider before including icons in an information system design.

Icon Design Guidelines

• Avoid trying to communicate complex ideas or tasks with icons. For example, one online image company claims that their "Iconology" line of images "take massive concepts like technology, travel, commerce, and communications, and pack them into bite-sized icons...to be...turned on as web buttons and on e-commerce websites." The result is about what you'd expect (see image at right).
• It is often easiest to create icons that represent objects (nouns) rather than actions (verbs).
• Be sure to consider display size / monitor resolution when designing icon graphics. Since graphic images do not scale on the web like text does, you must be sure that the size chosen for the image(s) works at many different resolutions.
• Icons should be simple and clear. Avoid putting too much graphical detail in the icon. Critically examine each element in the graphic and evaluate how it relates to the essence of the intended message and whether or not the message could be delivered without it. Any extraneous decorative parts should be carefully weighed against the confusion they may cause the viewer.
• Don't just create single icons; create "icon families." Create a set of icons that are all visually distinct yet obviously belong together (level of abstraction of meaning, graphical style, formatting, etc.). The visual differences between icons should be as significant as possible from a communication perspective; otherwise, the task of distinguishing between icons adds additional cognitive workload and creates the possibility for errors of interpretation.
• Create icons that represent their real-world counterparts, when possible. Icons used to designate folders should look like what people expect them to look like: simple folders. Don't embellish your designs for the sake of design.
• Stick to established conventions when they exist. Like it or not, a Trash Can, in our modern computer age, means "delete." Similarly, a Mail Envelope more than likely has to do with communicating (either via regular mail or email. Don't reinvent the wheel.
• Use multi-dimensional coding techniques to help users distinguish between various icons. Where possible, use different colors and shapes (e.g., a red square and a green circle) to distinguish icons from each other, in case a user is having trouble viewing colors, has a miscalibrated monitor, or has printed out the screen on a black-and-white printer. Additional dimensions that can be used are patterns (for fills) and shadows (to simulate distance).

Guidelines for Icon Usage

• Use supportive text. The best way to disambiguate an icon is to provide a supportive text label along with the graphical icon. This can be done either graphically, as part of the icon, or separately as regular text. Note that if this text is to appear as HTML, then clicking on the text (as a link) should cause the same effect as clicking on the icon graphic.
• Always use "tool tips" and/or ALT text. Aside from the accessibility benefits gained from using tool tips and ALT attributes for images, these small text labels that appear (depending on browser type) can add greatly to the interpretability of your icon designs.
• Test icon meaning / interpretation with users both in and out of context. Critically evaluate which icons effectively meet the needs of the sender, the receiver, the message, and the medium. Evaluating icon designs out of context can provide additional information about how the icon can be optimized to deliver the right message.
• Use icons sparingly in your designs. Having too many icons reduces each individual icon's effectiveness as being unique and different from the other design elements. In addition, an overload of icons causes extra cognitive workload for the user.
• Make icons look like buttons that can be activated. Many icons on the web are used as navigation links. If this is the case with your design, make sure that the icons look like they can be activated as links and are not present merely to provide graphical decoration.

"Final" Words

Icon design isn't an easy task. Or, more correctly, effective icon design isn't an easy task. The "check email" icon above (from Yahoo!), although a bit dated, is still an excellent example of what you should be aiming for an icon design.

Language and cultural differences as well as individual experiences greatly influence how a user might interpret a graphic image. Provide textual descriptions and obvious, simple images to help your users understand the message you're trying to communicate.

If you find you are having a difficult time deciding on exactly what image would best represent an online, chat-based Customer Service function, perhaps you should reconsider whether or not it is worth trying to use an icon in the first place. Chances are, if you're having a hard time designing the icon, people are going to have a difficult time trying to interpret it.