1. ©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Fun with Icons Wednesday Project Milestone: Paper Prototype

2. ©2001 Southern Illinois University, Edwardsville All rights reserved. What Do These Mean? Icons designed as warning symbols

3. ©2001 Southern Illinois University, Edwardsville All rights reserved. Why Use Icons? Provide imagery that allows for immediate recognition. Help improve recall. Reduces the need for interpreting text. To speed search for actions To save space To help interfaces become language independent Going global

4. ©2001 Southern Illinois University, Edwardsville All rights reserved. Icons & Information Processing Icons provide imagery that allow for recognition rather than recall of an object or action. Imagery of an icon must be meaningful to be effective in providing quick recognition Symbols must have a strong, direct association with the desired meaning “A picture is worth a thousand words” But which thousand words? Symbols must not only be meaningful to you but also to your user

5. ©2001 Southern Illinois University, Edwardsville All rights reserved. Icons & Information Processing Shallow & Deep Analysis Shallow analysis is the processing of surface features, such as lines in pictures. Deep analysis is the processing of semantic features, such as meaning and relationship to other concepts Meaningfulness depends on the icon’s ability to provide for a deep analysis.

6. ©2001 Southern Illinois University, Edwardsville All rights reserved. What Do These Mean? Icons from an email application Interface Hall of Shame

7. ©2001 Southern Illinois University, Edwardsville All rights reserved. Attributes of Meaningfulness Familiarity – frequency of which something occurs in everyday activities More familiar images/words are easier to recognize Highly familiar images/words may cause confusion –Users must disassociate the common meaning and associate the intended meaning Imagery – the ability of something to elicit an image in one’s mind

8. ©2001 Southern Illinois University, Edwardsville All rights reserved. Imagery: What do these file folder icons mean?

9. ©2001 Southern Illinois University, Edwardsville All rights reserved. Imagery

10. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Context – the overall setting in which an icon is being used. Temperature warning or weather report?

11. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Function – the task for which it is being used. Nouns are generally easier to represent than verbs Icons can act as mnemonic tags Sometimes mix of icons and text can improve recognition

12. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Representational Forms – representing the underlying concept Concrete representations: direct representation Abstract representations: expression of a quality apart from the object Combination

13. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Representational Forms Resemblance icons: pictorial of underlying concept Exemplar icon: depicts a typical example Symbolic icon: refers to a higher level abstraction than the image itself Arbitrary icon: no relation to the underlying concept

14. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Which are: Resemblance? Exemplar? Symbolic? Arbitrary?

15. ©2001 Southern Illinois University, Edwardsville All rights reserved. Factors that Effect Meaningfulness Underlying Concept – what is being represented Concrete objects are generally easier to represent Actions or abstract concepts must be conveyed through some indirect representation

16. ©2001 Southern Illinois University, Edwardsville All rights reserved. How Do I Draw an Icon? Find an icon editor: http://themes.tucows.com/editors/editicon.htm http://themes.tucows.com/editors/editicon.htm Icons are a standard 32 X 32 pixels Determining the appropriate amount of detail is important As little as possible but still get the message across

17. ©2001 Southern Illinois University, Edwardsville All rights reserved. Icon Exercise Get into your Discussion Groups Design Icons for the concepts on the hand-out Draw them each on a separate piece of paper but DO NOT label them. Be sure everyone’s name is on them. Tape them on the board when you are done.