IS4300: Human-Computer Interaction

1. IS4300: Human-Computer Interaction Icon Design Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu

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. Icons Design

3. What is an Icon? icon(def), n., pl.icons, icones 1. A picture, image, or other representation 2. (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. Icons Design

4. Icons • Icons might or might not “look like” that which they represent: 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 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? 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. 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 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. 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. 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. 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. 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.) 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 Icons Design

15. Icons can be used to represent • Objects • Classes of objects • Actions • Actions on class of objects • Properties (attributes) • Relations • ……. Icons Design

16. Designing Icons • Designing icons is non-trivial. • Designing icons is like designing interfaces. • The icon designer should: • Understand the principle of icons • Clarify the icon purpose • Iteratively design the icons • Test the icon designs 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 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. 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. 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. 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 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.’ 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.’ 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. 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. Icons Design

26. Icon Context Dimensions • The context of the icon is in several dimensions: • Physical • Cognitive • Metaphorical • Temporal 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. 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” 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. 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 - Icons Design

31. Semiotic Classification • Pierce’s (1991) semiotic classification of icons: • Iconic • Indexical • Symbolic 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. 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. 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.  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. Icons Design

36. Icon Design Guidelines • Represent object or action in a familiar and recognizable manner 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 Icons Design

38. Double Coding Example • Here’s how NOT to do it! (Found in the Tech Square Parking Garage, third level) • Why not? 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… Icons Design

40. The Noun Project • The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual languageto 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. http://www.thenounproject.com/ Icons Design

41. Icon Design - Abstractions • Is the symbolic aspect of the icon meaningful? Icons Design

42. Use a Graphics Alphabet • Use a basic graphics alphabet from which to form icons Icons Design

43. Use a Graphics Alphabet • Icons created from the graphics alphabet 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 icons by a text label Observation: Icon design has partially movedfrom symbolic to artistic Icons Design

45. What do These Icons Mean? Icons should be recognizable, memorable, and discriminable Icons Design

46. What do These Icons Mean? Answers From Window’s Start menu: Common document icons: cut open copy new paste save spell check print Any use of a graphics alphabet? Icons should be recognizable, memorable, and discriminable 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. 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 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. 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. Icons Design