Designing icons and visual symbols

ABSTRACT

Problems with icons are common-especially on Web pages and GUIs designed by amateurs. Most of these problems can be solved with more attention to detail, more input from various viewpoints, and more testing. This checklist will help you with those tasks.

© 1997 Copyright on this material is held by the authors.

CHECKLIST FOR EDITING ICONS

A checklist is just that: a list of characteristics to verify. It will guard against obvious goofs and blind spots, ensuring you have not forgotten any conventional design guidelines. However, it cannot ensure quality and success. Only a clear focus, persistent testing, and skillful refinement can do that.

Understandable

• Does the image spontaneously suggest the intended concept to the viewer?
• Will it appear with an understandable label?
• Is the association between the image and the concept it represents consistently strong for different users?
• Is the meaning based on a direct association such as physical similarity? On a strong analogy? On a universally learned association?

Unambiguous

• Is the image associated with just one concept?
• Is that concept associated with only one image?
• Are additional cues (label, other icons, documentation) available to resolve any ambiguity?

Informative

• Why is the concept is important?
• How does this icon fit with related icons? What category does it belong to?
• How important is this icon relative to others?
• How does the user interact with the icon?
• What will selecting the icon accomplish for the user?
• After selecting the icon, what procedure does the user follow?

Distinct

• Is every icon distinct from all others?
• Does it make clear how it differs from all others it might be confused with?
• Among sets of alternatives, are the distinguishing characteristics clear?

Memorable

• Where possible, does it feature concrete objects in action? Are actions shown as operations on concrete objects?
• Is the image striking and vivid?
• Have you used it consistently throughout the interface, documentation, and training?
• Is the icon clearly identified by a label?
• Is its place in the scheme of the interface clear?

Coherent

• Is it clear where one icon ends and another begins?
• Is the icon a unified visual image, rather than a collage of points, lines, and other visual objects?
• Does the design focus and hold attention on the subject matter of the icon?
• Are secondary design elements clearly subdued relative to primary subject matter?
• Do borders serve to unify objects contained within?

Familiar

• Are the objects in the icon ones familiar to the user?
• Are objects common in the user's work or home environment?
• Can users apply what they know about the real-world object to its use in the icon?

Legible

• Is the icon always displayed with sufficient foreground-background contrast?
• Does it use sufficiently thick lines and shapes?
• Is the icon legible under actual viewing conditions of less than perfect monitors, poorly adjusted monitors, screen glare, and so forth?
• Are icons legible at real reading distances. Can a user prop his feet up on his desk, plop the keyboard in his lap, lean back and still make out icons on the screen?
• Can users with common visual defects, such as myopia, astigmatism, presbyopia, and color blindness still recognize the icon?
• Have you tested all combinations of color and sizes in which the icon will be displayed?

Few

• Is the number of arbitrary symbols less than 20?
• If large numbers of icons are used, are they built from a small number of familiar images?
• Are all icons explained in readily available online or paper documentation?
• Are all these icons necessary? Are they really the best way to meet the need?

Compact

• Is every object, every line, every pixel in the icon necessary?
• Is the border necessary? Or could its space be put to better use?
• Are icons really more compact than equally effective word labels?

Attractive

• Does the image use smooth edges and line?
• Are the parts visually balanced and stable?
• Is the image proportioned to fit available space?
• Does the image use harmonious colors, patterns, and values?

Extensible

• Can I draw the image smaller? Will users still recognize it?
• Does the image work in black and white as well as in color?
• Can the image serve as an element in an iconic language?
• Can I redesign the image as a border to surround other objects?
• Can the image serve as an emblem, trademark, or decorative element on boxes, in manuals, and in brochures?