IS4300: Human-Computer InteractionIcon Design

Martin Schedlbauer, Ph.D.m.schedlbauer@neu.edu

Icons Design 2

Resources & References

• The content and discussion of this lesson are based on the following resources:Icon Design Slide Deck by Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Georgia Tech, 2005.Icon Design by Robert Pastel, Michigan Technological Institute, 2008. From http://www.csl.mtu.edu/cs4760/www/Lectures/NewLectureSeries/Icons.htm.

IS4300 - HCI

Icons Design 3

What is an Icon?

icon (def), n., pl. icons, icones1. A picture, image, or other representation2. (Eastern Ch.) a representation in painting, enamel, etc. of

some sacred personage, as Christ or a saint or angel, itself venerated as sacred.

3. (Logic) a sign or representation which stands for its object by virtue of a resemblance or analogy to it

Also, eikon, ikon. [t. L, t. Gk.: m. eikon likeness, image] –Syn. 2. See image.

IS4300 - HCI

Icons Design 4

Icons

• Icons might or might not “look like” that which they represent:

IS4300 - HCI

Icons Design 5

Icons Showing Classes of Objects• Useful for relatively few

objects of any one class• The icons are still useful in

that they make a big target for selection

• Icons present an “object-oriented” view of the user interface

IS4300 - HCI

Icons Design 6

Group Breakout

• Why are you using icons in your designs?• What do you hope to achieve with them?• In general, why would interface designers use

icons?• What do they hope to achieve with the icons?• Are there any other uses for icons?

IS4300 - HCI

Icons Design 7

Goals of Icons• Recall/Recognition - In general we, interface designers, believe that it is better for

the interface to invoke recognition from the user rather than recall or requiring the user to remember commands. Generally, icons are images and frequently people recognize images quicker than words. Although short words can be almost as effective as images, images have the potential to communicate more effectively.

• Increase Information - images can contain more information than words: – “A picture is worth a thousand words.”

• Easier to learn - Again this leverages the natural ability of humans to recognize complex images compare to reading words or phases.

• Easier to use - Because more information is communicated by image or learned word, we expect that icons will be easier to use. Also icons only require clicking or moving to invoke the command, rather than typing a command.

• Save screen space - Because icons can communicate so much information, they can occupy less screen space than text.

IS4300 - HCI

Icons Design 8

More Goals of Icons• Internationalization and Universal Usability - An image or short word

does not require learning the complete spoken language to understand it meaning, so we anticipate that using icons may help make the our interface universally usable by both young and old users and across nationality

• Provoke emotion - Because images are strong provokers of emotions, we expect that icons can communicate or guide the emotions of the users. For example an icon using cartoon figures can create an informal mood comical mood while hard line drawn images may express a formal precise mood. Even the general color of an icon can communicate a emotionally state, what does yellow or red to mean to you?

• Consistency - Images can share graphical elements and help unify the entire user interface or component of the interface better than words

IS4300 - HCI

Icons Design 9

Even More Goals of Icons• Contrast - likewise the images can make better use

contrast than words to separate components of the interface.

• User Expectation - Icons are so prolific in GUI that users have grown to expect them, although this is not exactly a goal, it can be a use. User will try to use images like icons. This tendency can be exploited by the designer.

• Direct manipulation - Icons are powerful object of direct manipulation. They can represent an object, for example of a file icon representing the file and moving the file into another application.

IS4300 - HCI

Icons Design 10

Pitfalls of Icons• Resolution - If the icon is not to occupy much screen space

then few pixels are left to communicate information. – Windows uses icons at sizes 46x46, 30x30 and 14x14 pixels. – KDE uses icons at 16x16, 22x22, 32x32, 48x48, 64x64, and

128x128 pixels. – At 14x14 pixels there are not many pixels to communicate with. – Details of the image may be lost the icon not recognized.

• Detail - Although there are psychological studies indicating that humans use details in the image to recognize the image, too much detail may obscure the meaning of image and even make it hard to recognize the icon.

IS4300 - HCI

Icons Design 11

More Pitfalls of Icons• Icon Misunderstood - Designer can not assume that users will understand

the meaning of icons. – For example we all know that a circle with a diagonal means diameter. – What does a circle with a horizontal diameter mean in most of the world? – What does a fist mean? – What does it mean in Italy? – What does a hand with the thumb and index finger forming a circle mean? (OK)

• What does it mean in France? (Worthless) • What does it mean in Italy? (…)• What does it mean in Turkey? (Need to go to the bathroom.)

– In fact there is almost not a single hand gesture that it is not a profanity in some culture.

– Hortorn (1991) suggest displaying a hand only in context of doing work and displaying the hand grasping a tool. He also suggests when depicting people use stick figures and unisex rather than photos.

IS4300 - HCI

Icons Design 12

Even More Pitfalls of Icons

• Disorganization - because graphical images are strong instinctual organizer, if the designer ignores this property the GUI could appear unorganized and cause confusion.

• Mistaken Icon - because icons are so prolific, users may expect an image to be an icon.

• Object Icon Confusion - Because the icon sometimes represents an object and sometime just the icon the user can get confused what mode the icon is in.

IS4300 - HCI

Icons Design 13

And One More Pitfall

• Provoking emotion - Designers can not be certain of the emotion that is invoke. – Colors are very strong emotion provokers, so for

example what color dress should a bride wear? (in Europe white) Why? (represents purity and virginity)

– What color dress should she wear in China or India? (Not white that means death, rather red to meaning Happiness.)

IS4300 - HCI

Icons Design 14

Color Symbolism

• Horton’s Color Symbolism Table (1994)• http://

www.princetonol.com/groups/iad/lessons/middle/color2.htm

• http://webdesign.about.com/od/color/a/bl_colorculture.htm

IS4300 - HCI

Icons Design 15

Icons can be used to represent

– Objects– Classes of objects– Actions– Actions on class of objects– Properties (attributes)– Relations– …….

IS4300 - HCI

Icons Design 16

Designing Icons

• Designing icons is non-trivial. • Designing icons is like designing interfaces. • The icon designer should:

1. Understand the principle of icons2. Clarify the icon purpose3. Iteratively design the icons4. Test the icon designs

IS4300 - HCI

Icons Design 17

Icon Design

• Relies on drawing ability – hire someone to do it (there are standards and ways to critique icon design)

• Avoid meaningless, gratuitous use of icons• Too many icons quickly become illegible

IS4300 - HCI

Icons Design 18

Icon Classification• Icons can be classified as:

– Phonogram– Pictogram– Abstract shape– Ideogram– Logogram

• This classification is not disjoint and icons can be members of several classification.

• For the example the using ‘i’ for information is a phonogram and logogram. In Europe the ‘i’ icon means “information is here,” so it can also be an ideogram.

IS4300 - HCI

Icons Design 19

Phonogram Icon

• Phonogram - The iconic symbol represent the sound of the objects name. For example H for hospital, in Europe I for information, in a word processor for italic.

IS4300 - HCI

Icons Design 20

Pictogram

• Pictogram - The icon is a picture of the object. For example a cross walk for people crossing. Falling rocks for dangerous land slide on the side of the road.

IS4300 - HCI

Icons Design 21

Abstract Shape

• Abstract Shape - The icon is an abstract shape which by convention is associated with the object. Examples in math are ‘+’, and ‘-‘, while in text ‘!’ and ‘?’ are symbols query and exclamation. Science has made symbols for example the symbols for the planets and sun, male and female. Other common abstract shapes are the stop sign or the triangular caution sign

IS4300 - HCI

Icons Design 22

Ideogram

• Ideogram - The icon is is a symbol that stand for an idea or concept. For example what does the floppy disk icon in aapplication mean. It does not stand for the floppy disk, it represents the concept of ‘saving.’

IS4300 - HCI

Icons Design 23

Logogram

• Logogram - A symbol that represents a word, much like a company logo is a substitution for the companies name. Examples are an Eye for the word ‘I’, a heart for representing ‘love’ and the ‘U’ for representing the word ‘you.’

IS4300 - HCI

Icons Design 24

Group Breakout

• Find an example of each use of icons• Find an example of inconsistency in icon use• Find an example of use of a graphics alphabet from

which to form icons• Discuss emoticons in the context of iconography• Find examples of symbolic icons, and examples of

purely artistic icons (as in definitions 1 and 3 of Icon)• Are there times when icons should not be used?

When? Find an example of mis-use.

IS4300 - HCI

Icons Design 25

Icon Context• Icons do not exist in isolations. The exist in the GUI which

implies that they could be with other icons and during the interaction.

• The meaning of the icon is dependent an the icon, the context and the viewer. Changing any one of these will change the meaning of the icon. For example consider six horizontal bars align in a column. To us in a word processor they mean one or two columns to a Chinese viewer outside the context of a word processor they mean Chi’en and K’un, the first and second hexagrams in I Ching.

IS4300 - HCI

Icons Design 26

Icon Context Dimensions

• The context of the icon is in several dimensions:– Physical– Cognitive– Metaphorical– Temporal

IS4300 - HCI

Icons Design 27

Physical Location• Location - Where the icon is placed on the screen can effect it use and

meaning. For example what does at the upper hand screen mean as appose to adjacent to a list item. Also menu items at the top of the screen implies drop down menus.

• Contrast - Different color, size and shape between icons suggest different meanings. The contrast can be used to group and distinguish icons. For example a unique color icon can make the icon easy to find and important.

• Juxtaposition - Adjacent icons may infer associated icons. But should there the delete button be next to the save button?

• Density - The density of icons also affects the meaning of the icons. Many icons bunched together can imply a detailed tool kit as in photo shop. While one or two icons in a dialog box suggest that a decision must be made.

IS4300 - HCI

Icons Design 28

Cognitive Context• User’s Experience - For example the experience of a user can

affect the icon. An experienced graphic designer will interpret a circle icon to be a tool to insert a circle in the drawing.

• User’s Knowledge - Mathematical symbols will be understood by mathematicians but not by other. Likewise for astronomers, chemists. Heim’s Common Shapes and Discipline Table.

• Emotional State - is the user happy, sad, depressed?• User’s Task - The task of the interface affects the cognitive state

of the user. Shneiderman and Plaisant (2010) suggest that “while you are working on visually oriented tasks, it is helpful to ‘stay visual’ by using icons, where as, while you are working on a text document, it is helpful to ‘stay textual’ by using textual menus”

IS4300 - HCI

Icons Design 29

Metaphorical Context

• Metaphor Similarity - Typically the interface has a metaphor the icon can support that metaphor or conflict the metaphor.

• Metaphor Contradiction - consider the desktop metaphor and moving the floppy to trash can. What does that mean? But icons can be used to refine or add new dimension to the interface metaphor.

IS4300 - HCI

Icons Design 30

Temporal Context

• GUIs are interactive so they and icons exist in time.

• Icon’s appearance - Icons can appear in a separate toolbox when needed or they can become gray when inaccessible.

• Icon’s Movement -

IS4300 - HCI

Icons Design 31

Semiotic Classification

• Pierce’s (1991) semiotic classification of icons:– Iconic– Indexical– Symbolic

IS4300 - HCI

Icons Design 32

Iconic Icons

• Iconic - Signs that resemble the object they represent. For example the file folder for directories and page for file in a file browser. Although these signs are pictogram, they general do mean the abstract notation for file and directory. Rather they generally represent the actual file or directory.

IS4300 - HCI

Icons Design 33

Indexical Icons

• Indexical - Signs that indicate a consequence of the action. For example the floppy disk icon does not stand for floppy disk, rather by historical tradition to save a file a user had to insert a floppy disk. Another example is the printer icon. It does not stand for the printer, rather because there must be a printer to print, the sign stands for printing.

IS4300 - HCI

Icons Design 34

Symbolic Icons

• Symbolic - Some signs are arbitrary shapes representing the concept. The stop sign is an abstract shape. The meaning of symbol is determined by convention. Symbols can be composed of iconic and indexical shape. Consider the global with a links meaning a hyperlink, this is the combination of two logographs.

IS4300 - HCI

Icons Design 35

Icon Design Principles• Simplicity/Complexity - Recognition-by-components implies that the

more detail that an icon have the easier the icon distinguishes itself and is recognizable. But too much detail can become confusing or lose the visibility in low resolution.

• Signal to Noise - Because the icon communicates information to the user we can associate the visual Signal/Noise = Information/Interference. The information in the icon is all the graphical content that aids to the user understanding of the meaning. The interference are the irrelevant details.

• Cohesiveness - Icons that are related should have similar graphical appearance.

• Distinctiveness - Icons should be distinctive if they are to be recognized.• Familiarity - Icons should be familiar to the user. For example Apple has

four different icons for mailbox depending on the nationality of the user.

IS4300 - HCI

Icons Design 36

Icon Design Guidelines

• Represent object or action in a familiar and recognizable manner

IS4300 - HCI

Icons Design 37

Icon Design Guidelines

• Make the selected icon clearly distinguishable from surrounding unselected icons

• Make each icon distinctive• Make each icon stand out from background• Make icons harmonious members of icon family• Avoid excessive detail• Limit number of icons• Double code with text name/meaning

IS4300 - HCI

Icons Design 38

Double Coding Example

• Here’s how NOT to do it!

(Found in the Tech Square Parking Garage, third level)

• Why not?

IS4300 - HCI

Icons Design 39

Icon Design - Ambiguities

• Icons from America On Line (circa 1995)• Inconsistencies– Two different icons represent the same object, ie,

Software Library– Same icon represents two different objects, ie, Software

Library and Geographic Store• Which is a problem?

And also…

IS4300 - HCI

Icons Design 40

The Noun Project

• The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language to aid in universal communication.

• The symbols are free and simply designed.• The goal is to create a symbolic language that

can be understood by all cultures and people.

IS4300 - HCI

http://www.thenounproject.com/

Icons Design 41

Icon Design - Abstractions

• Is the symbolic aspect of the icon meaningful?

IS4300 - HCI

Icons Design 42

Use a Graphics Alphabet

• Use a basic graphics alphabet from which to form icons

IS4300 - HCI

Icons Design 43

Use a Graphics Alphabet

• Icons created from the graphics alphabet

IS4300 - HCI

Icons Design 44

Icon Design - Guess the Meaning

What do each of these signify?Any sign of a graphics alphabet in use here?Almost always want to accompany your iconsby a text labelObservation: Icon design has partially movedfrom symbolic to artistic

IS4300 - HCI

Icons Design 45

What do These Icons Mean?

Icons should be recognizable, memorable, and discriminable

IS4300 - HCI

Icons Design 46

What do These Icons Mean? Answers

cut

copy

paste

spell check print

save

new

open

From Window’s Start menu: Common document icons:

Any use of a graphics alphabet?Icons should be recognizable, memorable, and discriminable

IS4300 - HCI

Icons Design 47

Testing Icon Designs

• Imagine designing icons for a word processor. • Using the process above you develop two sets of

icons for copy, save and delete, an abstract set and a concrete (natural set).

• We want to know which is better, so we perform a test with potential users of the system.

• We need to design an experiment with potential user groups using the two icon sets.

IS4300 - HCI

Icons Design 48

Develop Hypothesis

• The first step is to state the hypothesis, i.e., the likely outcome of the test: – “Users will recall the concrete set better than the

abstract set.”

• The hypothesis delineates the independent variables, the two icon sets: abstract and natural.

• The hypothesis also delineates the dependent variable: ease of recall

IS4300 - HCI

Icons Design 49

Define Measurements

• Next we must decide how to measure easy of remembering.

• We could measure the error in selecting icons or we could measure the time it takes to select an icon.

IS4300 - HCI

Icons Design 50

Experimental Controls

• Next we consider the experimental controls. • So we design an interface that is the same

except for the icon shapes.• Limit any other variables so that the data is

not affected by other factors.

IS4300 - HCI

Icons Design 51

Experiment Method

• Next we consider the experiment method:– between-groups - each participant is randomly assigned to a

different group which performs a different level of the factor of the experiment.

– within groups - each participant perform all the levels of the factors of the experiment

– mixed - different combination for each factor.• We might choose within-groups because we assume that

learning is important factor of the experiment we split the group into two. One uses the natural icons first the other group uses the abstract icons first.

IS4300 - HCI

Icons Design 52

Collect Data

• Conduct the experiment measuring the time for participants to complete a editing task using the two icon sets.

• Collect sufficient data to achieve enough statistical power.

• Generally 20-25 test subjects is enough.

IS4300 - HCI

Icons Design 53

Analyze Results

• Now we need to analyze the results. • First we create a table of the raw test results

showing the completion time for each subject, • Next, we calculate the mean and standard

deviation for each group. • Finally we use the appropriate statistical test to

see if there’s a statistically significant different between the performance or error rate between the groups.

IS4300 - HCI

Icons Design 54

Statistical Tests

• The first step is to determine if the data is sufficiently normally distributed:– Create a Q-Q plot– Calculate the Shapiro-Wilk or the Anderson-

Darling normality test• Run an appropriate statistical test:– Student’s t-test if the data is normally distributed– Kruskal-Wallis or Mann-Witney test of the data is

not normally distributed

IS4300 - HCI

Icons Design 55

Statistical Significance

• Statistical tests determine the probability that the null hypothesis is not true, which means that we must accept the alternate hypothesis.

• Null Hypothesis:– There is no difference in the rate of selection errors

among the two icons sets• The accepted probability is generally 0.05. So if

p < 0.05 the difference is statistically significant.

IS4300 - HCI

Icons Design 56

Summary, Review, & Questions…

IS4300 - HCI