Transcript Icons - Ulster University

Human-Computer Interaction
Icons
Direct Manipulation
1
Lecture Overview
•
•
•
•
•
•
Definition
Advantages and disadvantages
Factors affecting meaningfulness
Form and function
Design guidance
Classification
2
Icons: Definition
• Pictographic symbols - focus on essential
features
• Represent underlying
• objects
• data structures
• processes
in a form which corresponds to the real world
• Can be entertaining, clever and visually
appealing
3
Advantages of Icons
• Recognition
• Users remember meaning more easily than for command
names
• Searched and selected faster than text
• Compactness
• Can often convey meaning more rapidly than symbolic
language
• Use less space than text
• More features can be presented on one screen
4
Advantages of Icons (Cont’d)
• Comprehensibility
• Can convey objects, data and actions
• Universality
• Relatively language- and culture-independent
• Facilitates porting to international markets
• Plenty available for re-use
• Micons (moving icons or animated icons)
• Can represent dynamic aspects
• (No clear evidence better than static)
5
Disadvantages of Icons
• Ambiguity
• Dependent on user, task and context
• Cannot completely replace words in some
complex situations
• Costly / difficult to design good new icons
• Micons - if too many on screen, can be
distracting and jerky in movement
6
Factors Affecting Meaningfulness of Icons
• Context
• Specific vs General
• Easy --------- Difficult to deduce meaning
• Tasks
• Visual vs Verbal
• Easy ----------Difficult to design
7
Factors Affecting Meaningfulness of
Icons
• Text
• Addition increases understanding - especially if abstract,
vague, large icon set
Tooltip
Microsoft Excel
8
Icons: Addition of Text
9
Psion 3a Icons
‘More’
icon
‘More’
icon
10
Factors Affecting Meaningfulness of
Icons
• Concept
• Concrete vs Abstract
• Easy ---------- Difficult to design
• Discriminable
• From other icons
11
Range of Icon Functions (Rogers, 1989)
Function
Example
Labeling
Menu item
Indicating
Warning
Identifying
Manipulating
Container
System state
Error message
File storage
Tool for zooming and shrinking
Object for placing discarded
objects
Structure in programming
language
Gestalt pattern
12
Design of Icons
• Poorly understood by computer professionals
• Everyday icons are the subject of much research e.g.
flight arrivals /departures
• Trend towards higher quality graphics
13
Design Guidance
• General HCI guidelines apply
•
•
•
•
Re-use / re-work existing designs
Test representation with users
Avoid symbols unless meaning already known
Use icon design tools to experiment
14
ISO Standard’s Classification
• Interactive icons
• Mediate user interaction with software application
• Non-interactive icons
• Status indicators
15
Icons Classification
(ISO/IEC Based)
Icons
Interactive
Container
Folder
In-basket
Non-interactive
Object
Pointer
Data
Selection
Text
Graphics
Document
Chart
S’sheet
Device
Printer
Telephone
Control
Tool
Cut/copy
Spellcheck
Up/down
arrows
Fill
Eraser
Pencil
Status
Indicator
Hourglass
‘LEDs’
16
IBM Common User Access Workplace Environment (1988):
3 Categories of Icons
• Container
• Data
• Device
17
18
Lecture Review
•
•
•
•
•
•
Definition
Advantages and disadvantages
Factors affecting meaningfulness
Form and function
Design guidance
Classification
19