1. 1 Human-Computer Interaction Icons Direct Manipulation

2. 2 Lecture Overview DefinitionDefinition Advantages and disadvantagesAdvantages and disadvantages Factors affecting meaningfulnessFactors affecting meaningfulness Form and functionForm and function Design guidanceDesign guidance ClassificationClassification

3. 3 Icons: Definition Pictographic symbols - focus on essential featuresPictographic symbols - focus on essential features Represent underlyingRepresent underlying objectsobjects data structuresdata structures processesprocesses in a form which corresponds to the real world in a form which corresponds to the real world Can be entertaining, clever and visually appealingCan be entertaining, clever and visually appealing

4. 4 Advantages of Icons RecognitionRecognition Users remember meaning more easily than for command namesUsers remember meaning more easily than for command names Searched and selected faster than textSearched and selected faster than text CompactnessCompactness Can often convey meaning more rapidly than symbolic languageCan often convey meaning more rapidly than symbolic language Use less space than textUse less space than text More features can be presented on one screenMore features can be presented on one screen

5. 5 Advantages of Icons (Cont’d) ComprehensibilityComprehensibility Can convey objects, data and actionsCan convey objects, data and actions UniversalityUniversality Relatively language- and culture-independentRelatively language- and culture-independent Facilitates porting to international marketsFacilitates porting to international markets Plenty available for re-usePlenty available for re-use Micons (moving icons or animated icons)Micons (moving icons or animated icons) Can represent dynamic aspectsCan represent dynamic aspects (No clear evidence better than static)(No clear evidence better than static)

6. 6 Disadvantages of Icons AmbiguityAmbiguity Dependent on user, task and contextDependent on user, task and context Cannot completely replace words in some complex situationsCannot completely replace words in some complex situations Costly / difficult to design good new iconsCostly / difficult to design good new icons Micons - if too many on screen, can be distracting and jerky in movementMicons - if too many on screen, can be distracting and jerky in movement

7. 7 Factors Affecting Meaningfulness of Icons ContextContext Specific vs GeneralSpecific vs General Easy --------- Difficult to deduce meaning Easy --------- Difficult to deduce meaning TasksTasks Visual vs VerbalVisual vs Verbal Easy ----------Difficult to designEasy ----------Difficult to design

8. 8 Factors Affecting Meaningfulness of Icons TextText Addition increases understanding - especially if abstract, vague, large icon setAddition increases understanding - especially if abstract, vague, large icon set Microsoft Excel Tooltip

9. 9 Icons: Addition of Text

10. 10 Psion 3a Icons ‘More’ icon ‘More’ icon

11. 11 Factors Affecting Meaningfulness of Icons ConceptConcept Concrete vs AbstractConcrete vs Abstract Easy ---------- Difficult to designEasy ---------- Difficult to design DiscriminableDiscriminable From other iconsFrom other icons

12. 12 Range of Icon Functions (Rogers, 1989) FunctionExample LabelingMenu item IndicatingSystem state WarningError message IdentifyingFile storage ManipulatingTool for zooming and shrinking ContainerObject for placing discarded objects Gestalt patternStructure in programming language

13. 13 Design of Icons Poorly understood by computer professionalsPoorly understood by computer professionals Everyday icons are the subject of much research e.g. flight arrivals /departuresEveryday icons are the subject of much research e.g. flight arrivals /departures Trend towards higher quality graphicsTrend towards higher quality graphics

14. 14 Design Guidance General HCI guidelines applyGeneral HCI guidelines apply Re-use / re-work existing designsRe-use / re-work existing designs Test representation with usersTest representation with users Avoid symbols unless meaning already knownAvoid symbols unless meaning already known Use icon design tools to experimentUse icon design tools to experiment

15. 15 ISO Standard’s Classification Interactive iconsInteractive icons Mediate user interaction with software applicationMediate user interaction with software application Non-interactive iconsNon-interactive icons Status indicatorsStatus indicators

16. 16 Icons Classification (ISO/IEC Based) Icons InteractiveNon-interactive ObjectPointerControlTool Status Indicator Container Data Device Folder In-basket Document Chart S’sheet Printer Telephone Selection Text Graphics Cut/copy Spellcheck Up/down arrows Fill Eraser Pencil Hourglass ‘LEDs’

17. 17 IBM Common User Access Workplace Environment (1988): 3 Categories of Icons ContainerContainer DataData DeviceDevice

18. 18

19. 19 Lecture Review DefinitionDefinition Advantages and disadvantagesAdvantages and disadvantages Factors affecting meaningfulnessFactors affecting meaningfulness Form and functionForm and function Design guidanceDesign guidance ClassificationClassification