Icons-Land Sport Vector Icons V2€¦ · Icons-Land Vista Sport Vector Icons V2.0
1 Human-Computer Interaction Icons Direct Manipulation.
-
Upload
britton-townsend -
Category
Documents
-
view
217 -
download
0
Transcript of 1 Human-Computer Interaction Icons Direct Manipulation.
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