1

Human-Computer InteractionHuman-Computer Interaction

IconsIconsDirect ManipulationDirect Manipulation

2

Lecture OverviewLecture Overview

• DefinitionDefinition• Advantages and disadvantagesAdvantages and disadvantages• Factors affecting meaningfulnessFactors affecting meaningfulness• Form and functionForm and function• Design guidanceDesign guidance• ClassificationClassification

3

Icons: DefinitionIcons: Definition

• Pictographic symbols - focus on essential Pictographic symbols - focus on essential featuresfeatures

• Represent underlying Represent underlying • objectsobjects

• data structuresdata structures

• processesprocesses

in a form which corresponds to the real worldin a form which corresponds to the real world• Can be entertaining, clever and visually Can be entertaining, clever and visually

appealingappealing

4

Advantages of IconsAdvantages of Icons

• RecognitionRecognition• Users remember meaning more easily than for command Users remember meaning more easily than for command

namesnames

• Searched and selected faster than textSearched and selected faster than text

• CompactnessCompactness• Can often convey meaning more rapidly than symbolic Can often convey meaning more rapidly than symbolic

languagelanguage

• Use less space than text Use less space than text • More features can be presented on one screenMore features can be presented on one screen

5

Advantages of Icons Advantages of Icons (Cont’d)(Cont’d)

• ComprehensibilityComprehensibility• Can convey objects, data and actionsCan convey objects, data and actions

• Universality Universality • 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

Disadvantages of IconsDisadvantages of Icons

• AmbiguityAmbiguity

• Dependent on user, task and contextDependent on user, task and context• Cannot completely replace words in some Cannot completely replace words in some

complex situationscomplex situations• Costly / difficult to design good new iconsCostly / difficult to design good new icons• Micons - if too many on screen, can be Micons - if too many on screen, can be

distracting and jerky in movementdistracting and jerky in movement

7

Factors Affecting Meaningfulness of IconsFactors Affecting Meaningfulness of Icons

• Context Context • Specific vs General Specific vs General

• Easy --------- Difficult to deduce meaningEasy --------- Difficult to deduce meaning

• TasksTasks• Visual vs VerbalVisual vs Verbal

• Easy ----------Difficult to designEasy ----------Difficult to design

8

Factors Affecting Meaningfulness of Factors Affecting Meaningfulness of IconsIcons

• TextText• Addition increases understanding - especially if abstract, Addition increases understanding - especially if abstract,

vague, large icon setvague, large icon set

Microsoft ExcelTooltip

9

Icons: Addition of TextIcons: Addition of Text

10

Psion 3a IconsPsion 3a Icons

‘More’icon

‘More’icon

11

Factors Affecting Meaningfulness of Factors Affecting Meaningfulness of IconsIcons

• ConceptConcept• Concrete vs AbstractConcrete vs Abstract

• Easy ---------- Difficult to designEasy ---------- Difficult to design

• DiscriminableDiscriminable• From other iconsFrom other icons

12

Range of Icon Functions Range of Icon Functions (Rogers, 1989)(Rogers, 1989)

FunctionFunction ExampleExample

LabelingLabeling Menu itemMenu itemIndicatingIndicating System stateSystem stateWarningWarning Error messageError messageIdentifyingIdentifying File storageFile storageManipulatingManipulating Tool for zooming and shrinkingTool for zooming and shrinkingContainerContainer Object for placing discarded Object for placing discarded

objectsobjectsGestaltGestalt pattern pattern Structure in programming Structure in programming

languagelanguage

13

Design of IconsDesign of Icons

• Poorly understood by computer professionalsPoorly understood by computer professionals• Everyday icons are the subject of much research e.g. Everyday icons are the subject of much research e.g.

flight arrivals /departuresflight arrivals /departures• Trend towards higher quality graphicsTrend towards higher quality graphics

14

Design GuidanceDesign 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

ISO Standard’s ClassificationISO 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

Icons ClassificationIcons Classification(ISO/IEC Based)(ISO/IEC Based)

Icons

Interactive Non-interactive

Object Pointer Control Tool StatusIndicator

Container Data Device

FolderIn-basket

DocumentChartS’sheet

PrinterTelephone

SelectionTextGraphics

Cut/copySpellcheckUp/down arrows

FillEraserPencil

Hourglass‘LEDs’

17

IBM IBM Common User Access Workplace Environment (1988):Common User Access Workplace Environment (1988):

3 Categories of Icons3 Categories of Icons

• ContainerContainer• DataData• DeviceDevice

18

19

Lecture ReviewLecture Review

• DefinitionDefinition• Advantages and disadvantagesAdvantages and disadvantages• Factors affecting meaningfulnessFactors affecting meaningfulness• Form and functionForm and function• Design guidanceDesign guidance• ClassificationClassification