the evolution of icons how computer icons have changed over 40 years

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


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


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


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


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


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


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


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


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


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


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


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


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


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


Application icon


Examples of icon metaphors

Metaphor Use M Lo Lo


Figure 10 Examples of culturally dependent metaphor icons

15


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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





Bibliography 28















1



Sardjawati Suleiman

Keywords


(GUI)

Abstract

















modern HCI

2









interaction









Humanneeds


Computertools


WIMPinterfacemodel

COMPUTERICONS

require

making use of


making use of

3





















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















11 Conclusion 25





Bibliography 28















1



Sardjawati Suleiman

Keywords


(GUI)

Abstract

















modern HCI

2









interaction









Humanneeds


Computertools


WIMPinterfacemodel

COMPUTERICONS

require

making use of


making use of

3





















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















1



Sardjawati Suleiman

Keywords


(GUI)

Abstract

















modern HCI

2









interaction









Humanneeds


Computertools


WIMPinterfacemodel

COMPUTERICONS

require

making use of


making use of

3





















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















2









interaction









Humanneeds


Computertools


WIMPinterfacemodel

COMPUTERICONS

require

making use of


making use of

3





















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















3





















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















4















(Figure 3)





5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















5










Tuck 2001)








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
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















6
















2003 2004 2005

0

20

40

60

80

100

o

f in

tern

et users




7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















7












8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















8



1 Theory

2 Technical aspects

3 Aesthetics

4 Processes


creation



















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















9










possible









capitalisation)







10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















10


Why do icons work

















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















11






















Application icon


Examples


Iconical Lo M Hi

Indexical M Hi M

Symbolic M M Lo


12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















12





























13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















13




interface
























14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















14








p 7 Marstall 2004)





understood






Application icon






15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















15



a metaphor)























writing systems



16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















16





















following sections






17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















17


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



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















18



Icon size























19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















19




























20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















20



2005)











readability






21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















21
















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















22





Preparation




23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















23





Drawing














saying






is born

24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















24

























metaphor



25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















25


11 Conclusion


























critical mass

26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















26




























come

27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















27















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















28














httpwwwsymbolsnet





Bibliography




29


























30
























31















29


























30
























31















30
























31















31















the evolution of icons how computer icons have changed over 40 years

Documents