1. July 2, 2007Mohamad Eid Facets of Interaction: Icons Chapter 12

2. July 2, 2007Mohamad Eid Icons Human Issues Concerning Icons Using Icons in Interaction Design Technical Issues Concerning Icons Design Guidelines

3. July 2, 2007Mohamad Eid Human Issues Concerning Icons Novice User Icon-based systems do not necessarily afford novice users a self-explanatory interface An icon’s functionality must be learned and understood

4. July 2, 2007Mohamad Eid Human Issues Concerning Icons The Dual Nature of Icons People relate to icons as the representations of objects They also perceive icons as the objects themselves The symbols and metaphors we create should not prevent people from moving between these two perspectives

5. July 2, 2007Mohamad Eid Human Issues Concerning Icons Icons should not be created in isolation Consider the entire interface as a global entity, a visual ecosystem

6. July 2, 2007Mohamad Eid Human Issues Concerning Icons Real-World Expectations The associations that people have create expectations that affect their perception of an icon’s physical properties

7. July 2, 2007Mohamad Eid Human Issues Concerning Icons Recall/Recognition Icons have an advantage over text in terms of recognition and recall Recall of images is superior to that of text Images are more easily distinguished than text People have almost perfect image recall

8. July 2, 2007Mohamad Eid Human Issues Concerning Icons Icon Analysis Chart IconNameDistanceSeparation TrailDegrees Mail PerceptualShape/ 1/2 CognitiveLetter/e-mail B Bold PerceptualLetter/bold/ 2/2 CognitiveLetter ‘B’/bold command

9. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Search Search – do icons aid search activities? Humans respond first to the physical qualities of icons and then to their semantic associations The intensity of an icon’s physical characteristics is an important factor in search activities People perform better with icon targets than with text targets The icons must be sufficiently differentiated

10. July 2, 2007Mohamad Eid Physical attributes that can affect the way we perceive icons Detail Color Size Shape Location Using Icons in Interaction Design - Search

11. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Search There is a range of acceptable detail that will benefit icon search Varying the color, size, or shape of an icon will make it easier to locate When applying color, start with fewer colors; additional ones can be added later

12. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Search Icon images should have distinctive shapes Icons may facilitate search if their location is properly designed

13. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Screen Real Estate Screen Real Estate Icons can save screen real estate

14. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Conventions Conventions Icon conventions should be used whenever they are appropriate Amazon.com shopping cart

15. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Conventions Conventions Audio icon—speaker Audio icon—notes Home icon Secure Connection icon Web Search icon Amazon.com Search

16. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Context Context supplies a frame of reference We perceive icons in relation to all the other screen elements Icons have no meaning without context Icon i + context j + viewer k = meaning ijk  Horton (1994)

17. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Context Icons can be seen in many different contexts: Physical Location Contrast Juxtaposition Density Cognitive Metaphorical Temporal

18. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Context Globalization–Localization Images are often considered to be “language agnostic” Italian street signs European Union traffic signs

19. July 2, 2007Mohamad Eid Using Icons in Interaction Design - Context Globalization–Localization Signs can also be localized and reflect very specific conditions that do not exist in other locations Cow warning signDeer warning sign

20. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Terminology Icon Terminology Phonogram: a sign or symbol representing a word, syllable, or speech sound Pictogram: a picture that resembles what it signifies Abstract Shapes Ideogram: a symbol that stands for an idea or concept Logogram (Logograph): a symbol that represents a word

21. July 2, 2007Mohamad Eid Technical Issues Concerning Icons – Principles for Icon Creation Principles for Icon Creation (internal syntax) Simplicity/complexity Signal to Noise Ratio Leveling Cohesiveness Icons that perform related functions should be created as a family and should share some visual characteristics Distinctiveness The icons within each family must communicate their unique identity Familiarity Icons should be familiar to the user

22. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Deconstructing Icons Basic shapes Indicators Styles Canonical view Aggregate symbols

23. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Basic shapes Complex shapes can be created from a few basic elements Horton (1994), all graphics can be decomposed into points, lines, and areas

24. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Basic lines and points Basic shapes Basic combinations Real-life symbols Enter/Exit symbols

25. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Basic shapes Indicators can be used to convey action, state, and direction Light rays Sound waves Speed lines Shake lines Ghost images Save to folder Blissymbols: Look Listen

26. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Styles Photograph Drawing Caricature Outline Silhouette

27. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Canonical view The most common view of an object The view that typifies the object That is most easily recognized A box is more recognizable in a 3D rendering than in a 2D one

28. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Aggregate symbols Symbols can be combined to communicate complex information Search symbol “No Smoking” sign Information symbol

29. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Aggregate symbols Overlap Addition Antithesis Specification

30. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Icon Size Icons are always square and standardized at fixed dimensions Supply icons for your application in 16-color and 256-color versions and in three sizes: 16x16 pixels, 32x32 pixels, and 48x48 pixels (Microsoft Co., 2006) You need to provide at least the following files: * A 128 x 128 image (for Finder icons) … For the best-looking icons at all sizes, you should also provide custom image files (“hints”) at two other sizes: 32 x 32, and 16 x 16 (Apple, 2007)

31. July 2, 2007Mohamad Eid Technical Issues Concerning Icons - Deconstructing Icons Transparency and Background To make areas of an icon transparent, include a mask A mask may be applied to application icons that appear on the desktop There is no way to predetermine what the background color will be

32. July 2, 2007Mohamad Eid Guidelines: Use of Icons A few good icons help reinforce the user’s mental model Always, always, always user-test all icons!!! Don’t use an icon unless 95% of users familiar with the task can identify it Keep icons as simple as possible Enough information to convey the message and no more Don’t use fancy borders or frills Too much detail causes users to  take longer in recognition  become interested in the pretty picture Keep icons distinct from each other Perform tests to ensure each icon can only be interpreted as meaning one command

33. July 2, 2007Mohamad Eid Guidelines: Use of Icons (Cont’d) If using perspective or ‘lighting’, keep the direction and orientation consistent Keep the number of icons on a screen low ( <= 7) Carefully think about the size of icons Make icons small when:  They are permanently displayed  There are many possible options the user can choose Make icons big when  The user has to chose from just one or two icons  The icon is a central part of a message the user must look at now Only add colour to icons as highlight Base icons on black & white wire-frames Only use one or two colours per icon

34. July 2, 2007Mohamad Eid Guidelines: Icon Screen Design Issues Allow for different icon states Avoid jaggy lines be aware of background patterns Consider different pixel shapes Stick to a platform's graphical style Design with the lowest screen quality in mind Be careful of colour Use subtle colours Use a small palette Don't rely on colour to convey information Don't forget monochrome monitors Design distinguishable icon sets

35. July 2, 2007Mohamad Eid Disadvantages of using Icons Ambiguity If the icon has not been well designed, there may be no way for the average user to even guess what it represents. Dependency on user, task & context Every individual assigns their own meaning to an icon, and this meaning will depend on what that individual already knows Cannot always completely replace words In complex situations Cost It is difficult and costly to design a brand new icon that one can be sure will be interpreted properly by the users

36. July 2, 2007Mohamad Eid متشکرم 谢谢 ありがとう