View
48
Download
0
Category
Preview:
Citation preview
Dissertation for MA Degree
The Evolution of Icons how computer icons have changed over 40 years
Sardjawati Suleiman
Student No 04052484
15 August 2005
MA in Electronic Media
School of Humanities Oxford Brookes University
Contents
Abstract 1
1 Computer icons in context 2
1960s command line interface 3
1970s a tale of the mouse 4
1980s Apple introduces GUI 5
2005 Which GUI do you use 5
3 Icons for the computer interface 6
4 Theory of icon creation 8
What is an icon and why use them in HCI 9
Why do icons work 10
Symbol and icon types 11
Computer interface icons and metaphor 12
Metaphors in icon creation 13
Icons as visual language 15
The evolution of icons in computer interfaces 16
5 Technical aspects of the icon creation process 16
Icon size 18
6 Aesthetics in icon creation and design 18
Icon style and consistency 18
Perspective lighting and shadows 19
Colour use and transparency 19
Materials icon details and composition 20
7 Icon creation process 21
Preparation 22
Drawing 23
User feedback professional and practical 23
10 Icon creation things to avoid 24
11 Conclusion 25
Current and future development of icons 25
What will replace icons and when 26
Appendix A Abbreviations and acronym glossary 27
Appendix B List of websites relating to icon creation 28
Bibliography 28
List of FiguresFigure 1 Icons in context this thesis seeks to focus on computer icons 2
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License) 3
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License) 4
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003) 5
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005) 6
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons 7
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003) 10
Figure 9 Ideas for metaphor use in creating icons by icon type 14
Figure 10 Examples of culturally dependent metaphor icons 14
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005 18
Figure 13 Macintosh OS X icons at varying colour depths and sizes 20
Figure 14 Example of materials paper plastic metal and glass 21
Figure 15 Icons featuring multiple element compositions 21
Figure 16 Summary of multiple recommended work flow ideas for icon creation (multiple sources) 22
1
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The Evolution of Icons how computer icons evolved over 40 years
Sardjawati Suleiman
Keywords
Computer icons human computer interaction (HCI) graphical user interface
(GUI)
Abstract
This dissertation seeks to explain how computer icons have come to be so
widely used in HCI over the past 40 years It presents a simple rubric of icon
creation in the hope that this will aid understanding of the complexities of
creating better icons The thesis demonstrates that although the WIMP-GUI
model is seen as less than ideal an estimated 90 per cent of computers use
it With no clear alternatives at present icon technology has been improved
significantly over time and some early weaknesses have been at least
partly alleviated Icons are now ubiquitous parts of the interface for almost
all computer users and have significant advantages in making computers
relatively easier to use particularly for novices This confirms theories from
cognitive psychology that show how human use and understanding of icon-
like symbols predates HCI I briefly introduce some of the concepts and ideas
likely to be most useful for creators of icons This is followed by key points on
the technicalities aesthetics and practical creation processes needed in order
to create icons that work While the past lsquosuccessrsquo of icons is defined purely
in terms of diffusion within the marketplace they now form an integral part of
modern HCI
2
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
1 Computer icons in context
The word icon originates from the Greek lsquoeikonrsquo meaning image Historically an icon
was a graphic symbol relating to religion (Wikipedia 2005a) but today lsquoiconrsquo means
many things This thesis is concerned with a particular kind computer icons For the
purpose of this study an lsquoiconrsquo is defined as
A visual representation or symbol used as part of computer graphical user
interfaces within the WIMP model Icons are clickable and facilitate user
interaction
Figure 1 illustrates the focus of the dissertation It refers to the broad issue of human
computer interaction (HCI see Appendix A for full list of abbreviations) and user
interfaces (UI) The body of research relating to HCI is large but the subset that
refers to icons has surprisingly little cohesion particularly in tracing their 30 years
of historical evolution The thesis begins by considering this history in the context of
computer interface evolution but then presents a four part rubric as a guide to how
icons can be understood and efficiently created
Figure 1 Icons in context this thesis seeks to focus on computer icons
Humanneeds
Tasks tobe performed
Computertools
HumanComputerInteraction
WIMPinterfacemodel
COMPUTERICONS
require
making use of
needingcommonly using a
making use of
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
Contents
Abstract 1
1 Computer icons in context 2
1960s command line interface 3
1970s a tale of the mouse 4
1980s Apple introduces GUI 5
2005 Which GUI do you use 5
3 Icons for the computer interface 6
4 Theory of icon creation 8
What is an icon and why use them in HCI 9
Why do icons work 10
Symbol and icon types 11
Computer interface icons and metaphor 12
Metaphors in icon creation 13
Icons as visual language 15
The evolution of icons in computer interfaces 16
5 Technical aspects of the icon creation process 16
Icon size 18
6 Aesthetics in icon creation and design 18
Icon style and consistency 18
Perspective lighting and shadows 19
Colour use and transparency 19
Materials icon details and composition 20
7 Icon creation process 21
Preparation 22
Drawing 23
User feedback professional and practical 23
10 Icon creation things to avoid 24
11 Conclusion 25
Current and future development of icons 25
What will replace icons and when 26
Appendix A Abbreviations and acronym glossary 27
Appendix B List of websites relating to icon creation 28
Bibliography 28
List of FiguresFigure 1 Icons in context this thesis seeks to focus on computer icons 2
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License) 3
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License) 4
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003) 5
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005) 6
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons 7
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003) 10
Figure 9 Ideas for metaphor use in creating icons by icon type 14
Figure 10 Examples of culturally dependent metaphor icons 14
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005 18
Figure 13 Macintosh OS X icons at varying colour depths and sizes 20
Figure 14 Example of materials paper plastic metal and glass 21
Figure 15 Icons featuring multiple element compositions 21
Figure 16 Summary of multiple recommended work flow ideas for icon creation (multiple sources) 22
1
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The Evolution of Icons how computer icons evolved over 40 years
Sardjawati Suleiman
Keywords
Computer icons human computer interaction (HCI) graphical user interface
(GUI)
Abstract
This dissertation seeks to explain how computer icons have come to be so
widely used in HCI over the past 40 years It presents a simple rubric of icon
creation in the hope that this will aid understanding of the complexities of
creating better icons The thesis demonstrates that although the WIMP-GUI
model is seen as less than ideal an estimated 90 per cent of computers use
it With no clear alternatives at present icon technology has been improved
significantly over time and some early weaknesses have been at least
partly alleviated Icons are now ubiquitous parts of the interface for almost
all computer users and have significant advantages in making computers
relatively easier to use particularly for novices This confirms theories from
cognitive psychology that show how human use and understanding of icon-
like symbols predates HCI I briefly introduce some of the concepts and ideas
likely to be most useful for creators of icons This is followed by key points on
the technicalities aesthetics and practical creation processes needed in order
to create icons that work While the past lsquosuccessrsquo of icons is defined purely
in terms of diffusion within the marketplace they now form an integral part of
modern HCI
2
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
1 Computer icons in context
The word icon originates from the Greek lsquoeikonrsquo meaning image Historically an icon
was a graphic symbol relating to religion (Wikipedia 2005a) but today lsquoiconrsquo means
many things This thesis is concerned with a particular kind computer icons For the
purpose of this study an lsquoiconrsquo is defined as
A visual representation or symbol used as part of computer graphical user
interfaces within the WIMP model Icons are clickable and facilitate user
interaction
Figure 1 illustrates the focus of the dissertation It refers to the broad issue of human
computer interaction (HCI see Appendix A for full list of abbreviations) and user
interfaces (UI) The body of research relating to HCI is large but the subset that
refers to icons has surprisingly little cohesion particularly in tracing their 30 years
of historical evolution The thesis begins by considering this history in the context of
computer interface evolution but then presents a four part rubric as a guide to how
icons can be understood and efficiently created
Figure 1 Icons in context this thesis seeks to focus on computer icons
Humanneeds
Tasks tobe performed
Computertools
HumanComputerInteraction
WIMPinterfacemodel
COMPUTERICONS
require
making use of
needingcommonly using a
making use of
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
11 Conclusion 25
Current and future development of icons 25
What will replace icons and when 26
Appendix A Abbreviations and acronym glossary 27
Appendix B List of websites relating to icon creation 28
Bibliography 28
List of FiguresFigure 1 Icons in context this thesis seeks to focus on computer icons 2
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License) 3
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License) 4
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003) 5
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005) 6
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons 7
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003) 10
Figure 9 Ideas for metaphor use in creating icons by icon type 14
Figure 10 Examples of culturally dependent metaphor icons 14
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005 18
Figure 13 Macintosh OS X icons at varying colour depths and sizes 20
Figure 14 Example of materials paper plastic metal and glass 21
Figure 15 Icons featuring multiple element compositions 21
Figure 16 Summary of multiple recommended work flow ideas for icon creation (multiple sources) 22
1
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The Evolution of Icons how computer icons evolved over 40 years
Sardjawati Suleiman
Keywords
Computer icons human computer interaction (HCI) graphical user interface
(GUI)
Abstract
This dissertation seeks to explain how computer icons have come to be so
widely used in HCI over the past 40 years It presents a simple rubric of icon
creation in the hope that this will aid understanding of the complexities of
creating better icons The thesis demonstrates that although the WIMP-GUI
model is seen as less than ideal an estimated 90 per cent of computers use
it With no clear alternatives at present icon technology has been improved
significantly over time and some early weaknesses have been at least
partly alleviated Icons are now ubiquitous parts of the interface for almost
all computer users and have significant advantages in making computers
relatively easier to use particularly for novices This confirms theories from
cognitive psychology that show how human use and understanding of icon-
like symbols predates HCI I briefly introduce some of the concepts and ideas
likely to be most useful for creators of icons This is followed by key points on
the technicalities aesthetics and practical creation processes needed in order
to create icons that work While the past lsquosuccessrsquo of icons is defined purely
in terms of diffusion within the marketplace they now form an integral part of
modern HCI
2
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
1 Computer icons in context
The word icon originates from the Greek lsquoeikonrsquo meaning image Historically an icon
was a graphic symbol relating to religion (Wikipedia 2005a) but today lsquoiconrsquo means
many things This thesis is concerned with a particular kind computer icons For the
purpose of this study an lsquoiconrsquo is defined as
A visual representation or symbol used as part of computer graphical user
interfaces within the WIMP model Icons are clickable and facilitate user
interaction
Figure 1 illustrates the focus of the dissertation It refers to the broad issue of human
computer interaction (HCI see Appendix A for full list of abbreviations) and user
interfaces (UI) The body of research relating to HCI is large but the subset that
refers to icons has surprisingly little cohesion particularly in tracing their 30 years
of historical evolution The thesis begins by considering this history in the context of
computer interface evolution but then presents a four part rubric as a guide to how
icons can be understood and efficiently created
Figure 1 Icons in context this thesis seeks to focus on computer icons
Humanneeds
Tasks tobe performed
Computertools
HumanComputerInteraction
WIMPinterfacemodel
COMPUTERICONS
require
making use of
needingcommonly using a
making use of
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
1
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The Evolution of Icons how computer icons evolved over 40 years
Sardjawati Suleiman
Keywords
Computer icons human computer interaction (HCI) graphical user interface
(GUI)
Abstract
This dissertation seeks to explain how computer icons have come to be so
widely used in HCI over the past 40 years It presents a simple rubric of icon
creation in the hope that this will aid understanding of the complexities of
creating better icons The thesis demonstrates that although the WIMP-GUI
model is seen as less than ideal an estimated 90 per cent of computers use
it With no clear alternatives at present icon technology has been improved
significantly over time and some early weaknesses have been at least
partly alleviated Icons are now ubiquitous parts of the interface for almost
all computer users and have significant advantages in making computers
relatively easier to use particularly for novices This confirms theories from
cognitive psychology that show how human use and understanding of icon-
like symbols predates HCI I briefly introduce some of the concepts and ideas
likely to be most useful for creators of icons This is followed by key points on
the technicalities aesthetics and practical creation processes needed in order
to create icons that work While the past lsquosuccessrsquo of icons is defined purely
in terms of diffusion within the marketplace they now form an integral part of
modern HCI
2
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
1 Computer icons in context
The word icon originates from the Greek lsquoeikonrsquo meaning image Historically an icon
was a graphic symbol relating to religion (Wikipedia 2005a) but today lsquoiconrsquo means
many things This thesis is concerned with a particular kind computer icons For the
purpose of this study an lsquoiconrsquo is defined as
A visual representation or symbol used as part of computer graphical user
interfaces within the WIMP model Icons are clickable and facilitate user
interaction
Figure 1 illustrates the focus of the dissertation It refers to the broad issue of human
computer interaction (HCI see Appendix A for full list of abbreviations) and user
interfaces (UI) The body of research relating to HCI is large but the subset that
refers to icons has surprisingly little cohesion particularly in tracing their 30 years
of historical evolution The thesis begins by considering this history in the context of
computer interface evolution but then presents a four part rubric as a guide to how
icons can be understood and efficiently created
Figure 1 Icons in context this thesis seeks to focus on computer icons
Humanneeds
Tasks tobe performed
Computertools
HumanComputerInteraction
WIMPinterfacemodel
COMPUTERICONS
require
making use of
needingcommonly using a
making use of
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
2
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
1 Computer icons in context
The word icon originates from the Greek lsquoeikonrsquo meaning image Historically an icon
was a graphic symbol relating to religion (Wikipedia 2005a) but today lsquoiconrsquo means
many things This thesis is concerned with a particular kind computer icons For the
purpose of this study an lsquoiconrsquo is defined as
A visual representation or symbol used as part of computer graphical user
interfaces within the WIMP model Icons are clickable and facilitate user
interaction
Figure 1 illustrates the focus of the dissertation It refers to the broad issue of human
computer interaction (HCI see Appendix A for full list of abbreviations) and user
interfaces (UI) The body of research relating to HCI is large but the subset that
refers to icons has surprisingly little cohesion particularly in tracing their 30 years
of historical evolution The thesis begins by considering this history in the context of
computer interface evolution but then presents a four part rubric as a guide to how
icons can be understood and efficiently created
Figure 1 Icons in context this thesis seeks to focus on computer icons
Humanneeds
Tasks tobe performed
Computertools
HumanComputerInteraction
WIMPinterfacemodel
COMPUTERICONS
require
making use of
needingcommonly using a
making use of
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
3
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
2 A brief history of icon use in computer interfaces
Icons are a fundamental part of the so-called Windows Icons Menus Pointers
(WIMP) model of the computer graphical user interface (GUI) This first appeared on
a commercially sold computer in the early 1980s after more than 10 years of research
development Icon evolution is tied to the development of the computer mouse This
was first created by Douglas Englebart in 1963 coincidentally the same year that a
very early GUI application called Sketchpad was demonstrated by Ivan Sutherland
(Sutherland 2003) Together icons and lsquomousesrsquo provide a direct manipulation (point-
and-click) interface that while widely criticised has become almost ubiquitous
1960s command line interface
Before GUI keyboard input was the usual method of HCI using a command line
interface (CLI) Keyboard input is still used in even the latest GUI and advanced
computer users still argue that CLI is the fastest and most efficient UI as interaction is
so precise Consequently professional programmers often use CLI Although different
again Archy a UI designed by Jef Raskin (Raskin 2005) also predominantly uses only
the keyboard in order to speed interaction
However CLI is difficult to learn For all but the most basic operations a user must
learn commands type them accurately and interpret the computer response This
Figure 2 oNLine System demonstration 1968 a hypertext system using a computer mouse (Wikipedia 2005d ndash photos used under Creative Commons License)
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
4
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
requires familiarity with a keyboard and high finger dexterity creating difficulties for
novices and the very young or elderly As a result before GUI computers were used
predominantly by experts were difficult to commercialise and were largely limited to
text based operations For these reasons other more intuitive UI were sought
1970s a tale of the mouse
In 1968 Englebart demonstrated the oNLine System (NLS) in which a mouse was used
to click on words Based on early work by Vannevar Bush (Wikipedia 2005c) this was
one of the first direct manipulation UI The importance of this event for computing is
so well recognised that it has been called lsquothe mother of all demonstrationsrsquo (Wikipedia
2005d) In 1970 the mouse was refined by Bill English at the Xerox PARC research
labs introducing the rollerball mechanism still common today Led by Alan Kay Xerox
PARC went on to develop the first GUI operating systems (OS) based on WIMP and the
first icons were born This developed into the first commercial GUI called Xerox Star
(Figure 3)
By the late 1970s Apple had begun to adapt many Xerox PARC ideas for its own
use (Pang 2001 Tuck 2001) For reasons of cost Apple discarded some of the more
sophisticated features of Xeroxrsquos icons such as names within icons and icons that
Figure 3 The original Xerox Star GUI 1980 four years before the Macintosh (Wikipedia 2005d ndash graphic used under Creative Commons License)
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
5
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
changed state (Kay 1990 Smith Irby et al 1982) Some of these features are only now
beginning to reappear (see Section 11 below)
1980s Apple introduces GUI
Apple introduced its own icons in the Lisa computer in 1983 and refined them further
for the Macintosh OS in 1984 This was the first computer using a WIMP-GUI to find
enduring success The rest so to speak is history Microsoft Windows 10 appeared
in 1985 using the same principles developed by Xerox and over the next 30 years
numerous other WIMP-GUI have come and mostly gone (see Figure 4 Wichary 2003
Tuck 2001)
2005 Which GUI do you use
Today it is difficult to estimate the exact proportion of computers that use WIMP-GUI
but we do know which OS are used when browsing the Internet and it is reasonable to
assume that the proportions are similar for all computers (see Figure 5) In mid-2005
more than 90 per cent of all computers used a version of Microsoft Windows and 3
per cent used Macintosh A further 35 per cent used Linux which while less certain
Figure 4 From Mouse to Windows time line of major developments relating to evolution of icons within GUI (based on Wichary 2003)
Ske
tchp
ad
(Su
the
rlan
d)
Mo
use
(En
gle
ba
rt)
On
-Lin
e S
ystem
(En
gle
ba
rt)
Ba
ll mo
use
(En
glish
)
Xe
rox A
lto
Xe
rox S
tar
Ap
ple
Lisa
Ap
ple
Ma
cinto
shW
ind
ow
s 10
TO
S
Am
iga
OS
Ne
XT
ST
EP
Win
do
ws 3
0
Ma
cinto
sh S
ystem
7
Win
do
ws 3
1
OS
2 2
0M
ac O
S 8
Win
do
ws 9
5M
ac O
S 8
5B
eO
S
IRIX
Rh
ap
sod
yA
mig
a O
S 3
5
Win
do
ws 2
00
0
Ma
c OS
XW
ind
ow
s XP
KD
E 3
0
GN
OM
E 2
0
Be
OS
Ze
ta
Win
do
ws V
ista
1960 1965 1970 1975 1980 1985 1990 1995 2000 2005
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
6
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
probably means the GNOME or KDE GUI so in total around 965 per cent of all
computers probably use WIMP-GUI today
The WIMP-GUI first appeared over 40 years ago and its market dominance grew over
the last 30 years Today icons are common in interfaces for mobile phones personal
digital assistants (PDAs) MP3 players digital cameras and so on People learn to
recognise and interact with icons from an early age (Moyes 1994) While some hope for
an improved HCI solution icon use is intuitive and clearly successful
3 Icons for the computer interface
Wersquove seen how icons first appeared in HCI but over the past 30 years icons have
changed and improved significantly Today icons are created and designed both by
professional HCI designers and by amateurs who simply enjoy icons for their own
right A Google exact phrase search for lsquoicon designrsquo returned about 66200 hits in
August 2005 Among these are a few increasingly famous design houses specialising in
Figure 5 OS market share as derived from Internet server access 2003 2004 and 2005 to July (W3Schools 2005)
2003 2004 2005
0
20
40
60
80
100
o
f in
tern
et users
Windows Macintosh Linux Unknown
Note Windows includes WIndows XP Windows 2000 Windows 98 Windows NT and Windows 95
Macintosh includes Mac OS 9 and Mac OS 10
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
7
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons (see Appendix B for some examples) This is a change from the past when icons
and symbols were mostly developed by in-house designers (Marcus 2003 Pezzoni
and Chavis 1996) Today even Microsoft and Apple outsource some of this work to
consultants Icons have become increasingly sophisticated and their creation has
become a specialisation
However creating professional level icons requires a multidisciplinary expertise that
covers aspects of HCI user experience graphic design and ideally even knowledge
of some cognitive psychology theory Figure 6 presents a rubric for the icon creation
process seeking to cover all of the most important aspects from understanding the
Figure 6 The Icon Creation Wheel a creative rubric for developing computer icons
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
8
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
theory to actually producing icons It has four core elements
1 Theory
2 Technical aspects
3 Aesthetics
4 Processes
Each of these is considered in turn Together they present a systematic method for icon
creation
4 Theory of icon creation
Professional icon creators can gain a great deal from theory Research relating to HCI
cognitive psychology semiotics visual languages and even some philosophy can be
helpful even in small doses (Hicks 2004 Marstall 2004) Such study helps provide a
thoughtful understanding of how people interact with GUI Space allows for a mere
introduction in this dissertation
Since 1984 a host of research has considered the WIMP-GUI model Much of this has
been post hoc analysis while some urges improvement or even replacement of the
model entirely (for example Raskin 2000 Negroponte 1990 Norman 1990) Many
researchers consider WIMP restrictive and static forcing users to adapt to the interface
rather than providing the flexibility to adapt to usersrsquo needs (see Norman 1990 Gentner
and Nielsen 1996 Grudin 1990 Mandelkern 1993 McCormack 2002 Shneiderman
1982 van Dam 1997 Zanino et al 1994)
Taken together the research considers many aspects of WIMP-GUI but not all studies
relate to icon use Those that do broadly cover
bull Reasons for icon use within HCI
bull Icon use within the WIMP model
bull Appropriate icon design
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
9
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
There appear to be few studies that have followed the evolution of icons over time Even
in research proposing so-called lsquopost-WIMPrsquo solutions icons or similar representative
graphics (not always called lsquoiconsrsquo) are often still proposed (van Dam 1997) Icons are
part of WIMP but non-WIMP interfaces do not preclude an evolved form of icons
What is an icon and why use them in HCI
It is debatable which came first computer icons or research into computer icons Icons
were certainly not just a brainstormed idea Alan Kay generally recognised as the
originator of icons in GUI did considerable study on how to make HCI as humane as
possible
ldquoThe work of Papert convinced me that [] interface design [should be]
intertwined with learning Bruner convinced me that [] it is best to
learn something kinesthetically then iconically and finally the intuitive
knowledge will be in place [to] allow the more powerful [] symbolic
processes to workrdquo (Kay 1990 p 195)
Kayrsquos goal however was simply to make his revolutionary interface as useful and as
easy to learn as possible He summarises this goal as
ldquoDoing with Images makes Symbolsrdquo (Kay 1990 p 196 original
capitalisation)
The interface that Kayrsquos team devised and which he later helped to implement in the
Macintosh remains fundamentally unchanged today A multitude of studies have
later reapplied aspects of cognitive psychology to explain icon use in the WIMP-GUI
While impossible to summarise all this work here a little understanding can go a long
way and the following areas provide significant beneficial understanding to anyone
concerned with icon creation
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
10
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Why do icons work
Icons are therefore symbols which leads us back to cognitive psychology and human
understanding of and affinity for visual information This is the field of semiotics
(Chandler 2002) which itself developed from the study of signs by Peirce (1931 in
Barr et al 2003) Peirce described our understanding of symbols as three interacting
relations that trigger semiosis to create meaning (Figure 7) The effect relation
determines how users perceive the relation between the Object and the Interpretant
(Barr et al 2003) Simultaneously the representation relation requires the symbol
to clearly convey the Objectrsquos meaning Finally the interpretation relation defines a
userrsquos interaction with the representamen A simplified explanation of this is that users
should correctly perceive the meaning of an icon the function it represents and its
perceived use Again Peircersquos work was mostly applied to computer icons in hindsight
but whether knowingly or not Susan Kare the designer who created the first icons for
Macintosh and for Windows 30 summarises this theory when she says
ldquoAn icon is successful if you can tell someone what it is once and they donrsquot
forget itrdquo (Zuckerman 1996)
Figure 7 Peircean Triad as applied to a lsquoPrintrsquo icon (adapted from Barr et al 2003)
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
11
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The goal of any icon designer is to create the relationships described by Peirce and in
doing so fulfil the succinct rule for success that Kare proposes
Symbol and icon types
In addition to this system of interpretation Peirce developed numerous classifications
of signs of which the following taxonomy is useful for icon creation
bull Iconic Signs represent meaning by resemblance For example a document icon
visually resembles the document file it will represent when printed
bull Indexical Signs represent function For example a printer toolbar icon
represents the print function
bull Symbolic Signs relate meaning purely through convention For example a
triangle rotated 90deg is widely recognised as lsquoPlayrsquo but only by convention
Furthermore there are three commonly used icon types within WIMP-GUI and these
can be related directly to Peircersquos taxonomy
bull Application icons denote specific software programmes and usually launch the
programme by double clicking
bull Toolbar icons occur within software programmes (including the OS) on
toolbars and in menus and usually activate functions by single clicking
bull Object icons or System icons represent folders documents and objects other
Figure 8 Proposals for icon creation by type as related to Peircersquos taxonomy
Type of computer icon
Application icon
Toolbar icon Object icon
Examples
Peircersquos taxonomy
Iconical Lo M Hi
Indexical M Hi M
Symbolic M M Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
12
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
than software programmes
Understanding Peircersquos taxonomy provides a rough goal when creating icons of
each type (Figure 8) Iconic symbols are less suitable for Application icons as these
represent an intangible software function Toolbar icons are most likely iconical (actual
objects) or indexical (specific functions) but can also be symbolic (the lsquoundorsquo command
for instance) Object icons are generally tangible parts of the UI such as folders and
therefore mostly recognisable iconical icons These remain general ideas rather than
rules but are useful when conceptualising icons
Computer interface icons and metaphor
Use of metaphors within the WIMP-GUI model form a major stream of research (see
Draper 1996 Gentner and Nielson 1996 Hemenway 1982 Honeywell 1999b Matsey
1996 Richards Barker et al 1994 Rohrer 1995 Smilowitz 1996 Tarpey 2003) This
is related to but quite different from using a metaphor when creating a symbol
such as an icon (see below) Metaphors used in GUI are conceptual metaphors used
to add a recognisable element to the UI for novice users The so-called lsquocomputer
desktoprsquo is now a universal theme in modern GUI Icons sit on top of this lsquodesktoprsquo and
extend the metaphor by representing documents folders and waste paper baskets
Understandably the computer desktop has been an easy target for criticism due to its
over simplification (Gentner and Nielson 1996 Rohrer 1995)
However Kay (1990 pp 199-202) dismissed the idea of this metaphor altogether
While a lsquocomputer desktoprsquo may be a metaphor of a genuine desktop Kay points out
that the two are different entities simply employing the same label A computer desktop
is a far more powerful (or lsquomagicrsquo in Kayrsquos words) entity He also notes
ldquoMy main complaint is that metaphor is a poor metaphor for what needs to
be done [through a computer interface]rdquo (Kay 1990 p 199)
This highlights a gap between post hoc research and the original HCI aims Normanrsquos
argument (1990 2002) that any UI should be practically invisible making apparent
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
13
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
only the task at hand supports this view of UI metaphor research being diversionary
Draper (1996) also notes that metaphor merely acts on the userrsquos understanding of the
interface
ldquo[Metaphors provide a] system for improving the guessability of a system
by referring to its parts by names of entities in some other world [] This
can also be done in a command line language as well as in a mouse and
icon interfacerdquo (Draper 1996)
The assumption is that users know a real lsquodesktoprsquo before they use an electronic one
but today as computer use begins in primary school or before that is not necessarily
such a given assumption As the WIMP-GUI is now so widely used and well tested
many of the original UI metaphors are taken for granted and so take on their own
meaning and arguably cease to be metaphors at all
Metaphors in icon creation
Conceptual metaphors within WIMP-GUI and icon graphic metaphors are related but
not equivalent Whether one accepts the desktop as a metaphor of a lsquodeskrsquo or simply as
a computer term using a postage stamp icon for an e-mail programme is undisputedly
a metaphor for the applicationrsquos function Every user has a preexisting knowledge of
real life objects and an innate understanding of signs and symbols so using metaphors
for icons leverages that knowledge Both Apple and GNOME interface guidelines
emphasise metaphor use for icons (Apple Computer 2005b GNOME 2005) although
Microsoft does not (Microsoft Corporation 2005) Apple advises
ldquoTake advantage of peoplersquos knowledge of the world by using metaphors
to convey concepts and features of your application Metaphors are the
building blocks in the userrsquos mental model of a task Use metaphors that
represent concrete familiar ideas and make the metaphors obviousrdquo
(Apple Computer 2005a)
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
14
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Metaphors are used for all icon types and allow a greater range of design options
particularly for application icons They are less appropriate for toolbar and object icons
since they could obscure understanding of function (Figure 9) However Galitz (1997
p 529) recommends traditional images rather than newer ones since they are more
widely recognised In this vein modern GUIs have standardised some metaphors into
established usage for example the magnifying glass icon meaning lsquosearchrsquo (Hicks 2004
p 7 Marstall 2004)
Use of metaphors can be problematic as many are culturally based and can cause
confusion when software is used in international markets ndash as most is nowadays For
example lsquoStoprsquo signs and post boxes (Figure 10) are different from country to country
although American versions are now so common in GUI that again they are widely
understood
Metaphors based on body parts should be avoided so as not to cause offences (see
Section 10) The American and Japanese ignorance of the British lsquoVrsquo sign is an example
In addition metaphors can be needlessly obscure In the Macintosh OS users may not
Figure 9 Ideas for metaphor use in creating icons by icon type
Type of computer icon
Application icon
Toolbar icon Object icon
Examples of icon metaphors
Metaphor Use M Lo Lo
Key Hi highly appropriate M moderately appropriate Lo less appropriate
Figure 10 Examples of culturally dependent metaphor icons
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
15
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
immediately notice the Compass metaphor for the Safari web-browser (its name is also
a metaphor)
As Marstall (2004) points out metaphors allow icons to encapsulate almost any idea
and stimulates standardised visual language Moreover while some traditional users
and HCI experts worry about the excessive use of icons the use of metaphors rather
than more direct iconical symbols alone can also add a level of visual enjoyment to the
experience of using a computer
Icons as visual language
Icons are widely recognised and accepted in many forms of UI Many have become
standardised and so contribute to a new form of visual language that computer users
now take for granted (Hurford 2004 Marcus 2003) This too relates back to theory
Written Chinese which also originates from pictures demonstrates the human ability
to read pictures with semantic meaning in the same way we interpret icons (Honeywell
1999a Kurnianwan et al 2001 Marcus 2003 p 40-2 Marstall 2004) Roman-
script language readers use the left (lsquoanalyticalrsquo) side of their brains while speakers
of Chinese-based languages are said to use the right (lsquoartisticrsquo) side of their brain A
consequence of this is that significantly fewer Chinese and Japanese suffer problems
such as dyslexia because symbol recognition is more intuitive (Spaeth 2003)
We naturally understand symbols and there are many systems that use them (see
International Organization for Standardization 2005) There are at least two examples
of visual languages developed based on our ability to recognise symbols They are
Charles K Blissrsquos Blissymbolics and Yukio Otarsquos LoCos (Lovers Communication
System) (see Marcus 2003) Both employ sets of symbols that have been successfully
shown to aid communication across cultures and by people unable to use more complex
writing systems
Symbols are naturally intuitive and pervasive in all societies and fields It is natural
therefore that icons should have been successful as a means of HCI
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
16
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
The evolution of icons in computer interfaces
However since the 1984 Macintosh both WIMP-GUI and icon use have been criticised
This criticism suggests that icons are
bull Too difficultabstractobscuresmall to understand
bull Not colourful enoughtoo colourful
bull Culturally based
bull Irrelevant due to text labels
Over the past 30 years however icons have evolved markedly Wichary (2003) showed
how icons changed and improved solving some though not all of these criticisms
Figure 11 illustrates icon evolution after 1980 from simple black and white symbols to
128 x 128 pixel fully photo-realistic scalable graphics
Now that icon use is ubiquitous and so widely understood arguably icon interaction is
often transparent progressing towards what Norman (1990) required as an invisible
interface By the recent high standards any icon that is not immediately understood
clearly fails in its purpose and there are still many such examples but on the whole
icons are today much better than they were even five years ago Icons will continue
to improve partly as their creators better understand the concepts described here In
addition to some basic theory icon creators need to understand technical aesthetic
principles and to have a clear path for icon development These are discussed in the
following sections
5 Technical aspects of the icon creation process
Today technical requirements for icon creation are provided through HCI guidelines
for the main OS (Apple Computer 2005b GNOME 2005 Microsoft Corporation 2005)
Each OS style is different so creators need to consider them separately and a lot of the
guidelines relate to aesthetic requirements (see Section 6) The one aspect dependent
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
17
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yea
rO
SR
eso
luti
on
Co
lou
rTr
ansp
aren
cyP
ersp
ecti
veC
om
men
ts
1981
Xer
ox S
tar
72 x
72
1-bi
t-
Fro
ntD
ocum
ent amp
fold
er ic
ons
still
use
d to
day
icon
s ch
ange
de
pend
ent o
n st
ate
of o
bjec
t rep
rese
nted
1983
Lisa
48 x
24
1-bi
t-
Fro
ntLi
sa u
sed
non-
squa
re p
ixel
s
1984
Mac
into
sh32
x 3
21-
bit
-F
ront
Man
y ic
ons
still
in u
se
1985
Win
dow
s32
x 3
21-
bit
-F
ront
Hig
hly
inco
nsis
tent
1985
Am
iga
Var
ious
2-bi
t-
Fro
ntV
arie
d di
men
sion
s amp
sta
tes
1985
TO
S`
32 x
32
1-bi
t-
Var
ied
-
1989
NeX
TS
TE
P48
x 4
88-
bit
-V
arie
dIn
itial
ly 1
-bit
but
col
our
intr
oduc
ed e
arly
on
Sha
ding
co
mm
on
1990
Win
dow
s 3
032
x 3
24-
bit
-F
ront
Des
igne
d by
Sus
an K
are
1991
Mac
OS
732
x 3
24-
bit
-F
ront
Som
e sh
adin
g
1992
Win
dow
s 3
132
x 3
24-
bit
-F
ront
Som
e sh
adow
s im
prov
ed c
onsi
sten
cy
1993
OS
2 2
032
x 3
24-
bit
-F
ront
Con
sist
ent u
se o
f sha
dow
s
1994
Mac
OS
832
x 3
28-
bit
-Is
omet
ric
Hig
hly
cons
iste
nt 2
6deg is
omet
ric s
lant
1995
Win
dow
s 95
32 x
32
4-bi
t-
Som
e is
omet
ricIn
cons
iste
nt l
ater
8-b
it ic
ons
adde
d
1996
Mac
OS
85
32 x
32
8-bi
t-
Isom
etric
1997
BeO
S32
x 3
28-
bit
-Is
omet
ricIs
omet
ric g
rid n
on-s
ymm
etric
cle
ar c
olou
r sc
hem
e us
ed
1998
IRIX
Vec
tor
4-bi
t-
Isom
etric
Mirr
or v
iew
of M
ac O
S 8
1999
Am
iga
OS
35
48 x
48
8-bi
t-
Isom
etric
Hea
vy d
ither
ing
2000
Win
dow
s 20
0032
x 3
224
-bit
-S
ome
isom
etric
Orig
inal
des
igns
bet
ter
shad
ing
2001
Max
OS
X12
8 x
128
24-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic H
ighl
y vi
sibl
e w
hen
scal
ed
2001
Win
dow
s X
P48
x 4
832
-bit
8-bi
tIs
omet
ricC
lear
col
our
sche
me
and
stro
ng ic
on d
esig
n st
yle
2006
Win
dow
s V
ista
25
6 x
256
32-b
it8-
bit
Isom
etric
Pho
to-r
ealis
tic
Not
e
Fig
ure
11 E
volu
tion
of ic
ons
(com
pile
d an
d ex
pand
ed fr
om W
icha
ry 2
003)
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
18
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
on OS architecture is icon size
Icon size
Icon size is determined by pixel resolution This differs by OS and by icon type (see
Figure 12) and it is important to understand how icon sizes change as users interact
with the UI If an icon is too small for instance it becomes difficult to use (Lee
2003) In addition as monitor resolutions increase actual icon size on screen is
proportionately reduced Until a UI is invented to replace WIMP entirely icons will
continue to increase in size as an aid to clarity but creators need to be aware of current
icon minimum and maximum required sizes
6 Aesthetics in icon creation and design
One of the reasons icons are popular among general computer users is that they create
an attractive visual experience Aesthetic considerations in icon creation are therefore
of increasing importance Icons have come a long way from the low resolution 1-bit
(black and white) graphics used on the Xerox Star
Icon style and consistency
Icons should form a clear role in HCI going well beyond simply lsquolooking prettyrsquo With
the exception of some application icons almost all icons are created in sets with similar
style and it is essential that the style provides a high level of consistency in order to aid
Figure 12 Maximum and Minimum icon resolutions for current major operating systems 2005
Mac OS X Windows XP GNOME 20
Min Max Min Max Min Max
Application icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 48 x 48
Toolbar icons 16 x 16 32 x 32 16 x 16 32 x 32 24 x 24 48 x 48
Object icons 16 x 16 128 x 128 16 x 16 48 x 48 24 x 24 96 x 96
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
19
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
understanding and memorisation Icon consistency was rightly criticised in early GUI
designs but it has gradually improved As part of this the production of lsquostock iconsrsquo is
becoming a major business providing software developers with lsquooff the shelfrsquo icon sets
featuring consistent style
Style and consistency is apparent in three factors laid out in OS guidelines and icon
creators endeavour to make all three aspects consistent throughout an icon set
bull Perspective lighting and shadows
bull Colour use and transparency
bull Materials icon details and composition
Perspective lighting and shadows
The earliest icons were simple two-dimensional graphics Modern icons are usually
isometric with Microsoft even providing a specific isometric grid in its guidelines
Apple recommends that application icons appear to be sitting in front of the user on
a desk while toolbar icons appear to be on a shelf Equally isometric icons have a
recommended lighting angle and corresponding use of shadows Since the introduction
of Mac OS X photo-realistic icons have became common too
Such details allow for more easily recognised and memorised icons but remain only
guidelines with many application icons created with different perspectives Once again
consistency of style within a particular icon set should be the overall goal although a
set that is too removed from the general style of an OS would look out of place
Colour use and transparency
Used correctly colour helps convey meaning and aid learning of icon functions (Galitz
1997 p 528) Colour icons appeared at a surprisingly early date but it is only with the
advance in hardware capabilities that 32-bit (167 million colours) icons have appeared
allowing enhanced contrast shadows and lighting Recent icons also include 8-bit
transparency to further define icons in relation to the background Again consistency is
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
20
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
vital and some guidelines recommend specific colour palettes (Microsoft Corporation
2005)
There remains a major problem with colour however In all major UI too much colour
can be distracting especially when an icon is shrunk so icon creators need to produce a
single icon in various sizes and colour depths
Figure 13 illustrates this problem It shows a fairly complex decorative icon for OS X in
its 13 forms As the colour depth and icon size decreases it becomes progressively more
difficult to see For the best results each icon must be prepared individually in each
size and colour depth However with the exception of the smaller toolbar icons current
guidelines encourage icon creation to begin with the largest resolutions and highest bit
depths This can cause problems so icon creators must be aware of how their designs
look at smaller resolutions and be prepared to adjust them individually to improve
readability
Materials icon details and composition
Icons are becoming increasingly sophisticated in their graphic representation Apple
recommends that icons should be realistic Windows XP guidelines suggest a simpler
slightly cartoon-ish finish But as a point of style creators can choose appearances
Figure 13 Macintosh OS X icons at varying colour depths and sizes
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
21
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
based on any material such as glass metal wood and so on (Figure 14)
In addition icons are now large enough to include multiple elements This offers the
opportunity for metaphors and object realism but like colour can become distracting
and cluttered (see Figure 15) Hodgkinson and Bell (2000 p 274) suggest a useful
rule of thumb of no more than 3 to 5 elements in a 48 x 48 pixel icon Again simplicity
and consistency are vital with multiple elements only used where they clearly add
to meaning and understanding (Horton 1996 p 371-2 Galitz 1997 p 524 Apple
Computer 1996 PyrusMalus 2005)
7 Icon creation process
Once theory technical aspects and aesthetics are understood icon creation can begin
Both Apple and Microsoft provide basic work flows for icon creation (Apple Computer
2005a Microsoft Corporation 2005) and there are numerous hints and tutorials
Figure 15 Icons featuring multiple element compositions
Figure 14 Examples of materials paper plastic metal and glass
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
22
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
elsewhere (GNOME 2005 Hicks 2004 Hodgkinson and Bell 2000 Horton 1996
Iconfactory 2005 Marstall 2005 McCown 2005 Pezzoni and Chavis 1996) These are
summarised in Figure 16
Preparation
Perhaps because some experts consider it too obvious to include Hicks (2004 6-7) is
the only reference that notes the importance of prior research and of studying existing
Figure 16 Summary of recommended work flow ideas for icon creation (multiple sources)
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
23
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
icons A better understanding of existing icons helps with the initial brainstorming and
concept drawings At this point the general design scope and composition of icons
needs to be fixed with the client
Drawing
The actual method for drawing icons depends largely on individual preference and
choice of software tools but the process shown in Figure 16 fits with that suggested by
Apple Microsoft and Hicks Individual elements will each undergo the same process
After ideally receiving further feedback from the client the designer can produce
relevant resource files ready to be slotted into the software package
User feedback professional and practical
Arguably at this point we reach the most important stage user testing and feedback
Something that has received much research attention (Eisen 1990 Christou and
Jacob 2003 Moyes 1994 Seoul 1996) Recognised interface gurus are never shy of
giving opinions about what is a good or bad icon (Gentner and Nielson 1996 Nielsen
1990 Raskin 2000 pp 168-75) but in the end the usersrsquo views are paramount In
addition to Karersquos lsquoshow once remember alwaysrsquo rule (see page 10) if novice users can
understand an icon it will generally work well One commentator even goes as far as
saying
ldquoThe [best] User Interface Guru is your mumrdquo (Jones 2003)
For those lacking the testing budgets of large companies this is excellent advice and a
practice used by even famous designers on occasion
If beta users can safely interpret the icons and interact with them correctly and the
programmer is also happy the final icon versions can then be produced and an icon set
is born
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
24
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
10 Icon creation things to avoid
There are now more than three decades of past experience in icon creation to learn
from This is summed up in the GNOME interface guidelines (GNOME 2005) in terms
of what to avoid and form an excellent piece of additional advice
1 Avoid name suggestive graphics
Icons should suggest an applicationrsquos function not its name Many software
companies violate this rule by using logos
2 Do not include meaningful text
As icon resolutions increase adding the application name becomes a
temptation but this makes icons difficult to translate and read
3 Do not rely on information your users will not have
All icons should be associated with their purpose Icons based on puns or
obscure metaphors are confusing This is another argument against logos as
icons and again is violated frequently
4 Do not include extraneous information
Particularly as icons often need to display at varying sizes overly complex
multi-element icons are difficult to interpret
5 Do not include body parts in the icon
Body parts can be easily misunderstood and should be avoided Even a pointing
finger can be misread and be seen as offensive in some cultures
6 Do not employ violent imagery
Icons representing for example dynamite could be misinterpreted by novice
users to mean a destructive process and should be replaced by another
metaphor
This concludes discussion of the Icon Creation Wheel (Figure 6 page 7) Icon creation
should be a fun rewarding activity but it is also highly technical and worth doing well
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
25
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
11 Conclusion
Through the use of computers icons have permeated our everyday lives No longer just
a tool for experts computers appear in all kinds of electronic items making difficult
tasks easier and quicker Since 1984 the Microsoft Windows and the Macintosh OS
have become pervasive throughout personal computers and both use WIMP-GUI
meaning that icons are now a standard feature of computer use everywhere While
WIMP-GUI continues to have its detractors icons have become relatively sophisticated
and arguably increasingly well designed
This thesis proposes a systematic rubric for the necessary knowledge for icon creation
There has been many previous studies of icons at a more micro level and practical
guidelines for design are also common but the detailed synopsis presented here is
rather unique Given greater space a more detailed discussion of theory would be
helpful for some but at present it is hoped that the rubric is practically useful
Current and future development of icons
Icons are a new visual language that has evolved in the age of new media Although
experts seek for a better solution general users of GUI now accept icons as readily as
they do road signs or even written words Future generations will learn icons at an even
earlier age and accept them with even less cognitive effort
In recent years technical aspects of computer icons have advanced significantly
Icons have become larger and more photo-realistic and therefore capable of better
expression of meaning Icon creation has become more consistent and standardised
even across different OS This too is a process of learning that has occurred through
the 40 years of history behind personal computing and GUI As hardware becomes
more powerful ever more complex icon graphics become possible and as the market
for PCs has concentrated into just a handful of OS so marketing has promoted the
standardisation of the GUI ndash sometimes referred to as a process of being forced into a
critical mass
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
26
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Yet many would argue that this is not an ideal method of HCI Indeed it is significant
that advanced computer users often revert to keyboard input spurning direct
manipulation with the mouse wherever possible in order to speed up their interaction
(Raskin 2000 Raskin 2005) Others may argue that a lsquoprettyrsquo interface may detract
from completing the final task at hand (as suggested by Norman 1990 2002) There is
still therefore plenty of room for improvement in HCI and icons too will continue to
improve and develop particularly again in terms of consistency and standardisation
What will replace icons and when
Icons are a part of the WIMP model of GUI but are often found in newer experimental
models too At present apart from some remaining CLI there are no widely used UI to
replace WIMP-GUI in the general market Until one appears icons will remain
Icons will however evolve We can already envisage the use of 3-D and hologrammatic
icons although it is unlikely these would add significantly to icon functionality
More important many newer icons will change state either through animation or
replacement to reflect changes to the object they represent These already exist in for
example picture folder icons in Windows XP or the iCal icon in Mac OS X
Looking further into the future it is almost certain that computers will one day be
controlled by voice or even thought alone eventually removing the need for both the
mouse and the keyboard Further innovations such as hologrammatic projection
displays may even reduce physical display sizes far below the current minimum Even
then icons may survive as a means to represent data and objects
Such things remain largely in the realms of science fiction for the present but they are
unlikely to stay there for too long The humble computer icon that became known to the
mass market back in 1984 is no longer a simple 32 x 32 pixel black and white graphic
symbol It is now full colour and large enough to be appreciated as a work of art Icons
will continue to evolve and remain part of our computing experience for many years to
come
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
27
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix A Abbreviations and acronym glossary
CLI ndash Command Line Interface(s) A user interface to a computerrsquos operating system or an application in which the user responds to a visual prompt by typing in a command on a specified line receives a response back from the system and then enters another command and so forth (taken from httpwwwlinuxcomguidesLinux-Filesystem-Hierarchyglossaryshtml)
GNOME ndash GNU Network Object Model Environment A computer desktop environment for UNIX and UNIX-like operating systems often used for Linux It is the official desktop of the GNU Project (taken from httpenwikipediaorgwikiGNOME)
GUI ndash Graphical User Interface(s) A programme that lets the user interact with a computer system in a highly visual manner Graphical user interfaces usually require a high-resolution display and a pointing device such as a computer mouse (taken from httpwwworeillycomcatalogdebianchapterbookglossaryhtml)
HCI ndash Human Computer Interaction The study of how humans interact with computers and programmes It is an academic field spanning computer science and many aspects of psychology and ergonomics (taken from httpenwikipediaorgwikiHuman-Computer_Interaction)
KDE ndash K Desktop Environment A free desktop environment and development platform built that runs on most Unix and Unix-like systems often used for Linux (taken from httpenwikipediaorgwikiKDE)
NLS ndash oNLine System A revolutionary computer collaboration system designed by Douglas Engelbart during the 1960s and demonstrated in 1968 The NLS system was the first to employ the practical use of hypertext links the mouse raster-scan video monitors information organized by relevance screen windowing computer presentation and other modern computing concepts (taken from httpenwikipediaorgwikiNLS_28computer_system29)
OS ndash Operating System(s) The basic software that makes a computer run An OS schedules tasks allocates storage handles the interface to peripheral hardware and presents a default interface to the user when no application program is running (taken from httpwww7designavenuecomglossaryhtm)
PC ndash Personal Computer(s) Generally a computer designed to be used by one person at a time Early models performed only simple tasks such as word processing programming or game play (taken from httpenwikipediaorgwikiPersonal_computer)
PDA ndash Personal Digital Assistant(s) A handheld computer that serves as an organizer for personal information It generally includes at least a name and address database to-do list and note taker (taken from httpwwwwirelesstechiqcomnews294-wirelessTechIQ_newshtml)
UI ndash User Interface(s) This is a general term referring to the way a human interacts with computer programmes There are many forms of user interface and the term can be equally employed to relate to microwave ovens as to PCs (based on httpwwwideaengcompubentsrchglossaryhtml)
WIMP ndash Window Icon Menu Pointer A model of GUI by which a user interacts with a computer through the use of these four elements The user employs a mouse to postion a pointer on objects such as icons and windows clicking on them to cause interaction The WIMP model is the most common in personal computing at present but is a subject of much controversy and criticism Many researchers claim to be searching for an idea ldquopost-WIMPrdquo solution (based on httpwwwarchivemagcoukglossWhtml)
WIMP-GUI ndash a graphical user interface based on the windows icon menus pointer model
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
28
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Appendix B List of notable websites relating to icon creation
Apple Human Interface Guidelines httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesindexhtmlapple_refdocuid20000957
Fast Icons httpwwwfasticoncomstockiconshtml
Firewheel Design httpwwwfirewheeldesigncom
Delicious Monster httpwwwmikematascom
GNOME Interface Guidelines httpdevelopergnomeorgprojectsguphig20iconshtml
Hicks Design httpwwwhicksdesigncouk
IconFactory httpwwwiconfactorycom
Jasper Hauser httpwwwjasperhausernlicon
Microsoft Windows XP Icon Guidelines httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp
PyrusMalus httpwwwpyrusmaluscom
Symbol and sign databases httpwwwsymbolscomgraphicsearchhtml
httpwwwsymbolsnet
httpwwwomniglotcomwritingblissymbolicshtm
The BettsBro httphomepagemaccomadambettsthebettsbroportfolioiconshtml
Yellow Icon httpwwwyellowiconcom
Yellow Lane httpwwwyellowlanecom
Bibliography
Apple Computer (2005a) Human Inferface Design Principles [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGHIDesignchapter_4_section_2html ] Accessed 20 July 2005
Apple Computer (2005b) Introduction to Apple Human Interface Guidelines [httpdeveloperapplecomdocumentationUserExperienceConceptualOSXHIGuidelinesXHIGIntrochapter_1_section_1htmlapple_refdocuidTP30000894] Accessed 20 July 2005
Barr P J Noble and R Biddle (2003) Icons R Icons ACM International Conference Proceedings No 36 Fourth Australian User Inferface Conference on User Interface
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
29
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Adelaide Australia 25-32
Chandler Daniel (2002) Semiotics the basics London Routledge
Christou G and R J K Jacob (2003) ldquoEvaluating and Comparing Interaction Stylesrdquo Lecture Notes in Computer Science 2844 406-9
Draper S W (1996) Interface Styles [httpwwwpsyglaacuk~steveIntStyleshtml] Accessed 20 July 2005
Eisen H A (1990) ldquoIconer A Tool for Evaluating Iconsrdquo SIGCHI Bulletin 21 (3) January 23-5
Galitz W (1997) Create Meaningful Icons in W Galitz The Essential Gide to User Interface Design New York Chichester John Wiley 521-39
Gentner D and J Nielson (1996) ldquoThe Anti-Mac Interfacerdquo Communications of the ACM 39 (8) 70-82
GNOME (2005) Gnome 10 Usability Project Chapter 9 Icons [httpdevelopergnomeorgprojectsguphig10iconshtml] Accessed 20 July 2005
Grudin J (1990) The Computer Reaches Out The Historical Continuity of Interface Design CHIrsquo90 Proceedings ACM 261-8
Hemenway K (1982) Psychological Issues in the Use of Icons in Command Menus Proceedings of the 1982 conference on Human factors in computing systems Gaithersburg Maryland 20-3
Hicks J (2004) ldquoCreating Application Interface Iconsrdquo Design Inflight 1 (2) October 6-11
Hodgkinson R and D Bell (2000) Bits amp Pcs Design Icons for Software Interfaces [httpwwwtechscribecouktaiconshtm] Accessed July 2005
Honeywell P (1999a) ldquoDesigning Icons for the Graphical User Interfacerdquo Digital Creativity 10 (2) 67-78
Honeywell P (1999b) Evaluating Appropriate Interface Metaphors [httpw3iconscompdfEvaluatingInterfacepdf] Accessed March 2005
Horton W (1996) Designing Icons and Visual Symbols Conference on Human Factors in Computer systems 1996 ACM 371-2
Hurford J R (2004) ldquoHuman Uniqueness Learned Symbols and Recursive Thoughrdquo European Review 12 (4) October 551-65
Iconfactory (2005) Getting Started with Icon Design [httpwwwiconfactorycomdeveloperasp] Accessed 20 July 2005
International Standard Organisation (2005) The International Standard Organisation (ISO) Home Page [httpwwwisoorg] Accessed 1 August 2005
Jones H (2003) Great UI Design Lies Kuro5hin 11 January [httpwwwkuro5hinorgstory2003110448100235] Accessed July 2005
Kay A (1990) User Interface A Personal View in Brenda Laurel (ed) The Art of Human Interface Design Reading Mass Addison-Wesley 191-207
Kurniawan S H G Ravindra SShih Heloisa M (2001) Involving Chinese User in in Analyzing the Effects of Languages and Modalities on Computer Icons Proceedings of the HCI International 2001 Universal Access in HCI Towards an Information Society for all Mahwah New Jersey 367-71
Lee J (2003) We Could Just Start Carrying around Pictures of Saints or Something [httpsedimentsemifatnetentry20030708-175509html] Accessed 20 July 2005
Mandelkern D (1993) ldquoGuis The Next Generationrdquo Communications of the ACM 36 (4) 36-40
Marstall J (2004) A Word Wrapped in Light [httpwwwfirewheeldesigncomsparkplugarticles] Accessed 10 May 2005
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
30
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Marstall J (2005) The Icon Canvas [httpwwwiconmastercomtutorials2php] Accessed 20 July 2005
Matsey G (1996) Icon Development [httpwwwacmorgchapterstrichinewslettersaug96iconhtml] Accessed 20 July 2005
McCown M (2005) How to Make an Icon [httpwwwrailheaddesigncomdownloadsvariousHow_To_Make_An_Iconsit] Accessed 20 July 2005
Microsoft Corporation (2005) Creating Windows Xp Icons [httpmsdnmicrosoftcomlibrarydefaultaspurl=libraryen-usdnwxphtmlwinxpiconsasp] Accessed 20 July 2005Marcus A (2003) Icons Symbols and Signs Visible Languages to Facilitate Communication Interactions 10 37-43
McCormack J (2002) ldquoEvolving for the Audiencerdquo International Journal of Design Computing 4 (Special issue on Designing Virtual Worlds) 14
Moyes J (1994) When Users Do and Donrsquot Rely on Icon Shape CHI lsquo94 Boston MA ACM 283-4
Negroponte N (1990) The Noticeable Difference in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 245-6
Nielsen J (1990) Designing User Interfaces for International Use Amsterdam Netherlands Elsevier
Norman D A (1990) Why Interfaces Donrsquot Work in Brenda Laurel (ed) The Art of Human-Computer Inferface Design Reading Mass Addison-Wesley 209-19
Norman D A (2002) The Design of Everyday Things New York NY Basic Books
Pang A S K (2001) Of Mice and Zen Product Design and Invisible Innovation in the Apple Mouse Green Library Stanford University [httpinstruct1citcornelleducoursessts355micezenpdf]
Peirce C S (1931) Collected Papers Cambridge Mass Harvard University Press
Pezzoni M J and J C Chavis (1996) Icon Development at Sas Institute from a DesignerrsquosPerspective Visual Communication Society for Technical Communication [httpwwwstcorgconfproceed1996PDFsPG424428PDF]
PyrusMalus (2005) Designing Icons If a Picture Is Worth a Thousand Words How Many Is an Icon Worth [httpwwwpyrusmaluscom] Accessed 20 July 2005
Raskin J (2000) The Humane Interface New Directions for Designing Interactive Systems Boston Addison-Wesley
Raskin J (2005) About Archy [httprchiraskincenterorgaboutrchiindexphp] Accessed 20 July 2005
Richards S P Barker A Banerji C Lamont and K Manji (1994) The Use of Metaphors in Iconic Interface Design [httpwwwintellectbookscomiconicmetaphormetaphorhtm] Accessed May 2005
Rohrer T (1995) Metaphors We Compute By Bringing Magic into Interface Design [httpphilosophyuoregonedumetaphorgui4webhtm ] Accessed May 2005
Seoul Y E (1996) A Study on the Icon Design Process in the Environment of Multimedia [httpwwwidemployeeidtuenlgwmrauterbergconferencesCD_doNotOpenADCfinal_paper428pdf] Accessed 20 July 2005
Shneiderman B (1982) ldquoThe Future of Interactive Systems and the Emergence of Direct Manipulationrdquo Behavior and Information Technology 1 237-54
Smilowitz E D (1996) Do Metaphors Make Web Browsers Easier to Use [httpwwwbaddesignscommswebcnfhtm] Accessed March 2005
Smith D C C Irby and R Kimball (1982) The Star User Inferface An Overview AFIPS 1982 National Computer Conference 515-28
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
31
Sardjawati Suleiman August 2005 The Evolution of Icons how computer icons have changed over 40 years
Spaeth A (2003) Minds at Risk Time 1 September [httpwwwtimecomtimeasiamagazineprintout013675501030908-48033300html]
Sutherland I E (2003) Sketchpad A Man-Machine Graphical Communication System Computer Laboratory Cambridge University
Tarpey A M (2003) Logos Icons and Metaphors [httpwwwischoolutexasedu~atarpeyResearchPaperintroductionhtml] Accessed December 2004
Tuck M (2001) The Real History of the Gui [httpwwwsitepointcom] Accessed May 2005
van Dam A (1997) ldquoPost Wimp Interfacesrdquo Communications of the ACM 40 (2) 63-7
W3Schools (2005) Browser Statistics [httpwwww3schoolscombrowsersbrowsers_statsasp] Accessed 1 August 2005
Wichary M (2003) One Thousand Square Pixels of Canvas [httpwwwareslunaorgguidebookarticlesonethousandsquarepixelsofcanvas] Accessed 20 July 2005
Wikipedia (2005a) Icon (Disambiguation) [httpenwikipediaorgwikiIcon_28disambiguation29] Accessed 20 July 2005
Wikipedia (2005c) Vannevar Bush [httpenwikipediaorgwikiVannevar_Bush] Accessed 16 July 2005
Wikipedia (2005d) oNLine System [httpenwikipediaorgwikiImageOn_Line_System_FJCC_1968jpg] Accessed July 2005
Wikipedia (2005e) Xerox Star Desktop [httpenwikipediaorgwikiImageXerox_star_desktopjpg] Accessed July 2005
Zanino M C R Agarwal and J Prasad (1994) Graphical User Interfaces and Ease of Use Some Myths Examined SIGCPR 94 Alexandria Virginia ACM 142-54
Zuckerman L (1996) The Designer Who Made the Mac Smile New York Times New York
Recommended