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

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

©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

©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

©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.

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

©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

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

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

©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?

©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

©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

©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

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

©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

©2001 Southern Illinois University, Edwardsville All rights reserved. How Do I Draw an Icon? Find an icon editor: 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

©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.