APRIL 13-18, 1996 CH196

Designing Icons and Visual Symbols

William Horton

William Horton Consulting

838 Spruce Street
Boulder, CO 80302
(303) 545-6964
william @horton.com

ABSTRACT
With the proliferation of graphical user interfaces, the need ● To save space (See how much space these icons save?)
for clearly designed icons has become critical. Icon Equivalent word label
Unfortunately, not all icons are clear and easy to
understand. It is my belief that icon design should be more w Scroll down
of a science and less of an art.
Battery level is low
INTRODUCTION
Designing icons and visual symbols is for anyone— Adjust size
w
graphic artist, user-interface designer, human factors
specialist, technical writer, product designer—who must ● To speed search (Notice the distinctive shape of each of
design icons and visual symbols for use in computer these icons)
displays, technical documents, and other media where a
concept or idea must be communicated in a restricted area
or to an international audience. It is also appropriate for
those writing standards for icons and user interfaces.
Attendees will learn: Access Chart Project Alsrrn Telephone

● Where and when to use icons, words, or both. ●

For immediate recognition
● How to represent conceptual and nonvisual concepts ●
For better recall
with icons.
●
So users do not have to read
● A systematic way of designing large numbers of icons.
✘
To help interfaces go global
● How to draw icons—limitations of size and colors.
● How to design icons for an international product. HOW DO I REPRESENT IDEAS GRAPHICALLY?

Topics to be covered include: When we communicate, whether we are communicating

facts, numbers, or pure emotions, we do so through
Why use icons? symbols. They may be pictures, words, musical notes, a
How do I represent concepts graphically? tone of voice, or a facial expression. Often they are subtle
and other times, direct. Sometimes they are used so
How do I draw icons?
effortlessly that we would deny using symbols at all,
What about my international users? Sometimes they work and sometimes they do not.
Why use an iconic language? To communicate complex meanings in icons, you must
expose the viewer to a collection of symbols. For the icon
WHY USE ICONS? to evoke the desired meaning in the viewer’s thought—
You can use an icon anywhere you would use a word label: conscious or sometimes unconscious-each symbol must
to activate menus, to perform actions, to select tools, to trigger exactly the idea you intend. Each symbol must have
toggle between modes, to manipulate windows, to point to a strong, direct association with the desired meaning, not
items on the screen, to reveal the state of the data and allow just in your mind but in the mind of the viewer.
it to be changed, to represent files and directories and disks,
and to provide a way to delete unneeded items. You can HOW DO I DRAW ICONS?
also use them in publications: on the cover to represent the After you have decided what objects to include in your
capabilities of the product, in the table of contents to icon, you must decide how to draw them. Should you draw
represent the contents of each chapter, and in the chapter them in a detailed, realistic style or a simplified, minimalist
headings themselves. Use icons one?
● To help users work smarter Appropriate details make objects easier to recognize. Our
● To represent visual and spatial concepts eyes seek out detail in a scene and detail can draw our eye
to an image. However, detail can distract and clutter.
Q Copyright on this material is held by the author.

371
 CH196 APRIL 13-18, 1996

Excessive detail makes it harder to see a pattern of relation-
ships.
Which is best? The rule is simple: Include just those details
necessary for the icon to accomplish its purpose. Often a
less detailed image makes a better emblem, especially for
general or abstract concepts.
We can draw icons in five different degrees of detail and
realism:
Large, complex systems benefit most from a simple,
consistent iconic language. Imagine that you are charged
with developing an iconic language for a computer program
used by draftsmen, engineers, architects, technical
illustrators, and other design professiotr~lc
----- to
.- malr~
.------
precision engineering drawings. You m.= [i~ht invent a
language with a grammar like this:
Command = Action on Object by Method

Photograph Drawing Caricature Outline Silhouette Action

&
Draw
Object i

o
Circle 6 /
Method
iw
■
.a
Create circle By opposing
by points on points

diameter

Although each of these styles has its place, it is difficult to With a clearly defined language, a new icon is generated by
mix radically different styles in a set of icons. The best stating its concept in terms of the grammar and vocabulary
approach is to select a primary style and use it for most of of the language. For example, we can make a slight
the icons of a set. variation on the initial example by changing just the method
by which the circle is defined:
WHAT ABOUT MY INTERNATIONAL USERS?
For more and more companies, the only market that matters
is the international market where over 100 languages are i
used in business. Even products that do not cross borders
8 i!
must overcome barriers of language and culture. No
country speaks just one language and possesses a unified Drawcircleby
centerandedge
culture. India, for example, has 15 official languages that point
require 11 different scripts. If current trends continue, in
about 15 years, less than half of Americans will have
English as their first language. READINGS
Bertin, Jacques. Semiology of Graphics. Green Bay, WI:
With careful design icons can help bridge these barriers of University of Wisconsin, 1983.
language and culture. Well-designed icons can:
Bodmer, Frederick. The Loom of Lunguage: An Approach to the
● Reduce translation. Mastery of Many Lunguages. New York: W.W. Norton,
1944.
● Simplify learning.
Bruce, Vicki and Patrick Green. Visual Perception: Physiology,
● Improve intelligibility of text. Psychology and Ecology. Hove, UK: Lawrence Erlbaum
● Give products an international look. Associates,1990.
Dreyfuss, Henry. Symbol Sourcebook: An Authoritative Guide to
WHY USE AN ICONIC LANGUAGE? International Graphic Symbols. New York: Van Nostrand
Designing symbols one at a time can waste your time and Reinhold, 1984.
lead to sprawling, inconsistent sets of icons. On the other Gombrich, E. H. Art and Illusion: A Study in the Psychology of
hand, designing a coordinated set of icons: Pictorial Representation. Princeton: Princeton University
Press,1969.
●
Reduces the effort required to design, draw, test, and
revise the icons. It lets less skilled designers prepare Horton, William. The Icon Book: Visual Symbols for Computer
first-draft versions of icons. Systemsand Documentation. New York: JohnWiley, 1994.

●✌ Ensures and enforces fundamental consistency. Humphreys, Glyn and Vicki Bruce. Visual Cognition:
Computational Experimental and Neuropsychological
●
Makes icons self-explanatory and deducible. Lets users Perspectives. Hove, UK: Lawrence Erlbaum Associates,
predict what an icon will look like. 1989.
●
Helps users get started more quickly and master Jones,Scott,Cynthia Kemelly, Claudia Mueller, et al. Developing
advanced features sooner. It also helps them learn International User Information. Bedford, MA: Digital Press,
additional programs based on the same iconic language. 1992.
●
Gives your product or product line a distinct style.

372