11.2.

Using Iconns in
Using Icons in Interaction Design
12.
We
havelooked:at some of the Interaction Design
he ways
explore in which
ages We noW
how they can be people interact with
they affect the way in which used in
how
aid these types of tasks.
we search
for interaction designs.icons and im-
things and how they can We will see
be used
We also look:at how images caan be used to to

tateof small portable devices. We

must be awaremaximize the limited
have evolved and use hem in predictable of the screen real es-
different
ciples involved in icon creation. ways. We then consider conventions that
some of the
prin-

1.2.1. Search

MAXIM
Humansrespond first to the physical qualities of icons and then to their
semantic associations.

e process visual stimuli first by their physical qualities and then by their mean-
ard, Moran, & Newell, 1983). In other words, an icon will stand out i
O t s physical attributes are emphasized. Real-life situations, however, are far
HeOmplex, and we do not fully understand the extent to which icon attributes
alfectsearch
activities in actual user environments. There is significant evidence,
however, to suggest that the intensity of an icon's physical characteristics is an im-
portant factor.
text targets
Studies show that people perform better with icon targets than with
Repokari,
hers are
are ma
many
hat
Saarela, & Kurkela, 2002). The benefit of
not as
using icons also increases
variable in appearance
when
as im-

to search; text is usually The icons, how

tend to
CIns immediate impact.
ever must b be. Ons
Icons tend to have a stronger
their advantage.
differentiated or they lose trom

manyNhen
others eople.
C1ently one syubol
must
distinguish be
target) they
must
characteristics
earch for an icon
physical
icon's

Tnanipulated
pulaobjects help
ers i c o n s to represent
of a n
distractors). The intensity does the
use ofic indi-

SCTeen
Cates that
to
avoid confiusion.The
the things
is,
question

they are

theyct be
looking

fully
for?
understood
Research

and ma-

eople tofind be fully

nipulated
must
they do; however, a n icon's
attributes

from
their
application.

propriately for peo to

benefit
questions:

this co hould ask

the
following

Ontext,
Do possible the designer or
size?

color,
DoIs ythetheyexp targets have the same
shape,
and placed

have f $ame amount of

detail?
appropriately
grouped

on the screen
xpected functior available
and
Onality
Chapter 11 lcons

These questions only cover some of the physical attributes and are by no means de
finitive. However, they suggest the complexity involved in icon design and selec-
tion. Let's look at some of the physical attributes that can affect the way we perceive
icons and how they can be used to aid search activities. We look at the following
attributes
Detail
Color
Size
Shape
.Location

Detail
MAXIM
2
Theré is a.range of acceptable detail.that will
benefit icon search
Whereas some research indicates that greater detail
because it provides helps people to recognize icons
more information |(Biederman, 1987), other research shows that
users
recognize simple cartoon-like-hages more quickly
Byrne (1993) found positive results in search tests with (Ryan Schwartz, 1956).
&

plex icons, suggesting that icons with a simple as opposed to com-

ones.
high level of detail are inferior to simple
From these results we can conclude that there is
that will benefit icon a
range of acceptable detail
search, provided there is
interference with other infor
no
mational aspects of the icon. This
removed. Rubens and Krull implies that extraneous detail should be
(1988) call this process
applied in two ways-by removing details from leveling. Leveling can be
porating it at the
an
early conceptual stages existing design or by incor
of design.
Both procedures are appro-
priate and are
usually used iteratively between initial conception and usabilty
testing.

Color
MAXIM
Varying the color, size, or shape of an icon will make it easier to locate.
Color can be used to help
use discretion. The number people distinguish
of visually distinct between icons; however, you
nust

ceptual system, and distinguishing color colors is linited by the er

tractors are similar to the targets hunan
becomes more difficull it the P
target in color.
Murch (1987)
suggests that it is best to use
colors. Marcus (1995)
recommends approximately six easily discrimi le to nated

a maximum 5 2 colors if we want peoP

 11.2. Using Icons in Interaction Design

e m e m b e r
their meaning. Galitz(2002) uggests using a maximum of four colors at
one screen.
time on any
Although it might be confusing to be presented with so many varying opin-
t h eessence of the advice is to use color economically. Each of these guide-
ons,
ioes may have validity in particular situations, but they all stress that color should
in
to the minimum amount required for the successful completion of the
be imited
limited

user's task.

MAXIM

When applying color, start with fewer.colorsadditionalones can be added

later
Interface designs that conform to a strict useof color can be expanded later too
to eliminate
use one or two more, if absolutely necessary, but it is far more difficult
extraneous colors later in the design process.

Size
but there is standard re-
Most contemporary systems use standardized icon sizes,
no

freedom in inage size allows

quirement for the size of the images on the icons. [This
and an appropriate use ot image Size can
us to
vary the perceived size of the icon,
aid the user during icon search.
situation by mak-
for instance, for the File icon, one can take advantage of this
dimension. This is more in
g vertical dimension greater than its horizontal
its
document. To meet the required area
ping with the dimensions of a real-world
leaving the vertical
,the horizontal dimension of the image must Wereduced,
be
still use the square area for
qual to the icon's 16- o r 32-pixel requirement. and uses less ot the allot-
On, but the image contained in it is re-proportioned
ted canvas Figu
(Figure 11.1).
26 by 26 for a 32-pixel-squ.are
recommends an image of 24 by 24
or
ico 2 on the image
while le:aving r o o m
fora S1Ze is adequate for detail recognition icons that have to be placed
in close
border or perceived
p« space between
proximity.
Shape
MAXIM
lcon
images
er
should have distinctive shapes.
As we just but the image on the
Con shape is standardized: icons are square,
to allowsforn
to e will likely be stnaller than thei
fornave to be Remember, the image
whiteOwpace
spac e r s and
between icons.
c a n use irregular
space, so w e
shapes and maintain some
 should differ from icon to icon. Varying the shapes of.he images
Image shape icons and make them easier to
will increase the distinctiveness of the cate on a
busy screen.

Location

MAXIM
Icons may facilitate search if their. location is properly designed.
*AL

Research has shown that there is a relationship between an icon's shape and its lo-
cation, This relationship is influenced by the user's familiarity with the icon's shane
Familiar shapes mean more to people than location, but people will use
location
the shapes are not familiar (Moyes, 1994). Research has shown that ease of
is an overiding factor. People tend to
learning
rely on the attribute that is most easily
learned and overlook other characteristics.

11.2.2. Screen Real Estate

MAXIM
Icons can save screen real estate.

Computing devices are

getting smaller and more
have
smaller screens, but they often have increasedpowerful. These smaller deviCes
Conserve screen
space, it would seem natural
functionality. Given the need
to use icons because
compact than text. they arc nore
Often, hat can be communicated
lengthy textual explanation. For this with a small icon would otherwise r
on
maps where space is reason, icons have been traditionaliy
at a
premium. We have to be careful, however, d an
icon is not
understood or if its becaudis
cernible, it does not matter how relationship to the underlying functionany
much space is e be
Comes unusable.
saved, because u *
One way
are
help
to
short labels that people to learn the meaning of icons is to tips.
These

to use tool
make it hard to see the pop up when the cursor u etool
tOol tip
tip na
hovers over an
and can screen behind it, but the user can ime
still clíck the icon. This of the s
of the
screen

still see udOstomical way

use
space and maximize momentary overlapping is an
informauon in a small screen ecot.
Images are processed more quickly than text, and environie
icons take
tak ment. Andethis
advantage ol
by affording experienced users a
expert, such as a graphic more efficient
designer using a drawingworking
under

env
unde

stand the word probably

"rectangle" represent the "draw program,

"func

would
to ram,
tionality, but a simple rectange he canv
t h e c a n v a s "

e
b e

n
find among image
a and
easier of
many other rectangle, O,
to a space

less
would take up
u
commands.
 11.2. Using Icons in Interaction Desi

design, practical necessity is

always an important issuc. The size and
display
f the display well as other user
as
issues, such as the user's level of legibility
a y a large role in deciding whether to use icons
acy
computer liter-
or text or some
he two. As always, the parameters involved, such as combination
choices, a n d s o on, color, number of
require frequent usability testing. shape,

11.2.3. Conventions
mething usually done in a
is certain way, it becomes
ention, and people expect it to be done in that
common practice or a con-
way. For example, writing from left
to right is a convention for many languages, and writing from right to left is a con-
vention for others.\

MAXIM .

lcon conventions should be used whnever they

are appropriate.
There are many conventions, and generally
think about them until
we do not
we are presented with
design that does not adhere to them. This usually makes
a
the user stop and ponder the situation. This
obviously represents a decrease in effi-
ciency and can also become very annoying. Conventions should be used whenever
they are aPpropriate.

Let's look at that have become conventions. The Web is

some symbols an inter-
esting place to start because it is still evolving, and at a rapid pace, so we get to see
conventions evolve in a shortened time span.
The World Wide Web has been nurtured in large part by commerce. The busi-
ness world seized on the Web's potential for publicizing merchandise and trans-
Dusiness. In the process, a language of symbols evolved that enabled the
ce ranster of information and facilitated the interactions involved in buying and
selling.
e of the first symbols to evolve was the shopping cart, an abstraction ofa
Dure Object that has become synonymous with the act of collecting products to
rchase. There ar
are slight variations in the implementation of the shopping cart
huncti
eanineOng sites, but for the most part, people can predict the belavior and Fi
aning of this icon whenever they come across it (Figure 11.2). \

ture Another
r
vention often seen on the Web is the use of tabs to indicate site struc-
such as areas
Amaz
of of related
related activity. Tabs are used by many large Internet businesses
n . c o m , Apple.com, and Sun.com (Figures 11.3 and l1.4).

Your oo A35 Your Account W Cart IT Your LIsts o| Help I ai

mazon.comkBooks
wse
ecs eseles he NewYork Mgazines Corporate AaroneurargainT

Figure 11.3 Amazon.com tabs.

 iPod iTunes Mac QuickTime Support
Store
Software Made4Mac Education ProMaciwork Developer
Mac OSX
Hot NewsGet a MaC Hardware here to Bu

Figure 11.4 Apple.com tabs.

Sites that sell music use the symbols shown in Figures 11.5 and 11.6 to ind
that an aural sample of a song or musical composition is available. ndicate
Where would we be if couldn't find way home
we
(Figure 11.7 our

Figure 11.5 Audio icon- Locks are common indicators of secure connections
(Figure 11.8).
speaker.
Many sites use arrows or hand
images to indicate "previous" and "next"
convention, the Ru
right-pointing arrow;or
hand indicates the
the left-pointing arrow or hand
indicates the previous page. Thisnext page, and
based on the left-to-right convention of convention is
be intuitive for cultures that
Western text presentation, and
read from would not
right to left or
top to bottom.
Most sites with search
functions use a version of the icons
Figure 11.6 Audio icon- beginning of a search (Figure 11.9). t o initiate the
the user understands Again, the implication of the first symbol is that
notes.
fies English, which is a risky bet on the Web. The
"proceed with the search," but it also functions second icon signi-
in
The figure of
a
left-to-right linguistic world.
and
a
globe has become a
common symbol for the World Wide
magnifying
a

Web (Figure 11.10).glass combined with the Web,

globe indicates a search of the entire
The Web searchi
icon brings up issues of
accept your view of the localization. People in otner pa
the world may not
Figure 11.7 Home icon.
hemisphere. When representing the globe: they might live in a
particular hemisphere. globe, it is a good idea
dilereany
to avoid
portrayng
On the other
indicate
hand,
might want to take
you
particular geographical
a

area. The use ofadvantage of localized sym ols

to indicate nationality or national flags is a conven
global location.

Secure Login
Figure 11.8 Secure
Connection icon.
Search Amazon.com
GO

Figure 11.9 Amazon.com Search.

 n s in inter
tion Design

Figure 11.10 Web Search icon.

careful when using stereotypical symbols to

Da

represent different
the risk
run the alienating th
risk of alienating the very
people you hope to reach. Beforecultures; you
h design, it is a good idea to consult native residents for
with a proceeding
to use.
their impression of the
symbols you plan

1.2.4. Context
lcons do not exist in a vacuum; they appear on
ments, such as scrollbars, pull-down menus, text,
screens populated by other ele-
ceive icons in relation to all these other screen
graphics, and other icons. We per-
context. Context supplies a
elements, that is, in relation to their
frame of reference
The power of context can be demonstrated
by considering the effect of yelling
Fire" in crowded movie theater as
a
The opposed to yelling "Fire" on an artillery range.
exclamation is identical, yet the meaning and effects of the word are quite
diferent.

MAXIM
cons have no meaning without context.
Withov
ut
context, icons are meaningless.
aement Horton (1994) offers the following
to
summarize this concep
Icon; + Context, +
viewerk meaningijk
functions
ing Consider
functions the
w rmatting icons B, , and U. The only time we associate format-
hervise
therwise, theywith
are these symbols is when we see them in the Format toolbar.
r e simply letters with particularformatting styles applied to them.
The Justify text
tothe firxt iconand the Columns icon in Microsoft Word are iden- Ch'ien K'un
acle thethe1 first and secord hexagrams, respectively, used in the ancient Chinese or- a b
Ching (Figure 11.11).
Ching
f we we
re working in Figure 11.11 IChing hexa-
ay toing symbols. Howev Microsoft Word,
differentiat we would not misconstrue these icons
grams.
ehrentiate
augh the co owever, taken out of context and seen in isolation, there is no
e Conte etween the two meanings. These symbols are given meaning
Context in
which they
Teenontext
andà can bee affected by
are viewed.

by atfected
the qu affecte
by the color, shape, size, or number of elements on a
uaities of contrast and distinctiveness. During a search, users
Chapter 11 lcons

icons to locate a set

of possible t a r .
examine the visual features of s, and then
first
they examine the labels
andl names to n a r r o w
down the possibiliti.
bilities (Byrne, 1993).
such as its size, differs greatly from that of atall the oth-
If one attribute of an icon,
and therefore is easier to locate. If an icon ieOth.
ers, it becomes more distinct, not con-
greatly with the
e other screen
distinct-if it does not contrast
elem
textually
becomes more difficult to locate. Finding a yellow icon among blue icone nts-it
not be difficult. Finding a five-sided yellow icon among six-sided vell Would
would require more time. icons
Icons can be seen in many different contexts:

.Physical
Cognitive
Metaphorical
Temporal

Physical Context
Physical context can be affected by factors such as location, juxtaposition, contrast,
and density.

Location--The way in which icon is

perceived is affected by its location on
an
the screen
People become acCustomed to
Cauons, and they might not look in unusualfinding particular icons in specific o
standard locations for certain screen placesyConventions have evolved op
elements(Consider the placement of toolbars
at the top left-hand corner of most windows and the order of
File, Edit, and Help.
People relate to these common labels as ifpull-down menus
they were snapec
icoas). Tonsistent icon placement aids users in their
searches.
Contrast-Differences in color, size, and
shape
between icons can ffe th
users perception of them. The degree
ments can
of differentiation between screenele
be used to convey meaning,
can also be used such as similarity or nonre
iCon that is
to
communicate unavailable function:onality. For instance. an
grayed out as
lying functionality is not opposed to colored in informs the user that uc des
available.
dxtapositionThe placement of icons next each other to
Tunctionality, or it may make an icon may nt re

lated functionality should be dfficult to find.]Icons that ice

placed in close proximity. However.
cons

should not
be placedeach other to
near proximity. Howel
certain e r r o r s . F o r i n s t a n c e

the Save and Delete

icons should be
avoid critical user eno m eah

Oner to avofd haring a user placed safe distance

a away
clíck on the wrong one
VDensity-The density of the screen (the in
erro
affects how icons on that numberpf elements " Uundedby
screen are perceivedJf an image is
many other stimuli, it p presentedi

will be
isolation. It has been suggestedperceived diffefently than if t
present on any one that onl small number ofTcons nssho n ss h o u l d

mundanis, 19
199%)

screen to increase
their effectiveness ndant
ia
 Cognitive C o n t e x t

nitive
The cogniti context f
icon is cletermined by factors
an
related to the uscr's per-
The1al knowledge, including level of experience as well as emotional state and
People are also alfectedl by the dlifficulty of their tasks. If someone is ex
ectations/Pe in-
focesed
tentlyfocr on one aspect of task completion, he or she might not even see other
elements hat make up the screen context. The nature of the task environment can
also
also affect icon perception. Shneidlerman and Plaisant suggest that"while you
working on visually oriented tasks, it is helpful to 'stay visual' by using icons,
are

whereas, while you are working on a text cdocument, it is helpful to 'stay textual' by
using textual menusShneiderman & Plaisant, 2005)

Metaphorical Context
As ve have seen, an icon's capacity to communicate can be augmentecdl by its place-
ment within a collective metaphor( The most common collective metaphor in con
temporary GUIs-the desktop-is basecd on the real-world
office mode)This model
is the essence of the Microsoft Wincdows and Mac OS X interfaces
which
The desktop concept was originally popularized by the Apple Lisa,
was

Xerox Star. This

based on work done at Xerox's Palo Alto research facility on the
that desktop
arrangecd on a
metaphor is characterized by file and folder images
are

complete with a recycle bin or trash can. These icons are parecl-clown images,
meant to be realistic. Yet
the collective metaphor
pped of all detail, ancl are not
cohesive environment
e oftice environment ties them together and creates a

that is familiar.

Temporal Context
Marcus arrangement of signs in space and time."
9 8 ) defines as"The
context to reflect
h objects on the s c r e e n change
WOrk with applications the various
then respond to this al-
the ces actions, We
ifferent that result from o u r
ystem states
time, until a t:ask is
tered visual conte interchange progresses
over

Ontext. This dynamic

complete. context in which
the
and the system,
iconsDuring this dialog the user
are viewed alogue between are grayed out (when the associated
icons icons
functtionality is evolves. with n e w sets of
Ca Sometimes
aOnali entire toolbars
not available), and sometimes shifts of
icons with these
appear, to ffacilitate goals.)We must design in-
Context
in in minnd;particular

eract with the otherwise

task
unfortunate visual
combinations may o c c u r as users

system.
L25. alization-Localization
imagesa partic
on are ten
often superior to
labels
because they do not depend
agnostic" and
consConsidered to be be "language

thereforeticular
to
language.
to ha.guage.
have gre
They
Seater potential
are
considered

for the global

to
community.
1This is why images