TUTORIALS CHI 97 ~- 2 2 - 2 7 MARCH 1997

Designing Icons and Visual Symbols

William Horton
William Horton Consulting, Inc.
838 Spruce Street
Boulder, CO 803.02
(303) 545-6964
william @horton.com

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.
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?
Z, 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?
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?
D 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?
E 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?

~ 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?
Z What will selecting the icon accomplish for the
user?
After selecting the icon, what procedure does the
user follow?
[] Do borders serve to unify objects contained within?
Familiar
~q Are the objects in the icon ones familiar to the user?
Z Are objects common in the user's work or home
environment?
7~ 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'?
Z Does it use sufficiently thick lines and shapes?

1 4 6 © Copyright on this material is held by the author

CHI 97 . 22-27 MARCH 1997 TUTORIALS

Is the icon legible under actual viewing conditions [] Is the border necessary? Or could its space be put to
of less than perfect monitors, poorly adjusted better use?
monitors, screen glare, and so forth? [] Are icons really more compact than equally
[] Are icons legible at real reading distances. Can a effective word labels?
user prop his feet up on his desk, plop the keyboard
in his lap, lean back and still make out icons on the Attractive
screen? [] Does the image use smooth edges and line?
[] Can users with common visual defects, such as • "~ Are the parts visually balanced and stable?
myopia, astigmatism, presbyopia, and color [] Is the image proportioned to fit available space?
blindness still recognize the icon?
[] Does the image use harmonious colors, patterns,
Have you tested all combinations of color and sizes
and values?
in which the icon will be displayed?
Extensible
Few
[] Can I draw the image smaller? Will users still
[] Is the number of arbitrary symbols less than 20? recognize it?
[] If large numbers of icons are used, are they built [] Does the image work in black and white as well as
from a small number of familiar images?
in color?
L_.2 Are all icons explained in readily available online or [] Can the image serve as an element in an iconic
paper documentation? language?
Are all these icons necessary? Are they really the [] Can I redesign the image as a border to surround
best way to meet the need?
other objects?
Compact Can the image serve as an emblem, trademark, or
Z Is every object, every line, every pixel in the icon decorative element on boxes, in manuals, and in
necessary? brochures?

147