Human-Computer Interaction
Designing the User’s
Conceptual Model
1
Lecture Overview
• Definitions
•
•
•
•
•
•
•
•
System model
Conceptual model
System image
Mental model
Conceptual model design
Metaphors
Affordance
System images - example screen shots
2
Users’ Mental Models
Simplified representations
Not always easy to convey
3
System, Conceptual and Mental
Models, and System Image
System
Model
TECHNICAL
- Hardware
- Software
Mental
Model
C
o
n
c
e
p
t
u
a
l
- Incomplete
- Unstable
- Unscientific
- Static
- Dynamic
M
o
d
e
l
Designer / Developer
User
Mental Models Provide
Explanation and Prediction
• Provide structure to link cause and effect
• Explanation
• What am I now seeing?
• What did the system just do?
• What did I do to make it do that?
• Prediction
•
•
•
•
What can I do next?
What if I do this?
What will the system do then?
What will I see as a result?
5
Conceptual Model Design
• First: design conceptual model
• KISS
• Protect users from technicalities
• Second: design system image (i.e. user
interface) to convey conceptual model
• Each individual user will develop own model
6
Main Forms of Mental Model
Object-action
• E.g. direct manipulation drawing package
State transition
• E.g. phone, fax, ATM, menu system
• System switches between different modes of
behaviour
• User may have more than one type of model of a
given system
7
Metaphors
•
•
•
•
•
Basis of conceptual model
Allows user to infer from metaphor to system
Suggests possible operations
One application may draw on multiple metaphors
If poorly chosen, can confuse or limit
understanding
8
Metaphors
• Draws on user’s prior
knowledge and experience
• Short-cuts to understanding
complex concepts
• e.g Desktop, printer’s light box
• Scope - number of concepts
involved, e.g.
• e.g. partial metaphor s
• ruler
• calculator
9
Metaphors Forever
• Finding metaphors is easy
• Finding good metaphors is difficult
• Allow for ‘magic’
• E.g. Insert/delete row/column in spreadsheet
10
Major Metaphors and Typical
Application Areas
• Desktop metaphor
• E.g. operating environment
• ‘Webtop metaphor’
• Physical object metaphor
• E.g. object-oriented environment
• Travel holiday metaphor
• E.g. learning environment
• Ledger sheet metaphor
• E.g. spreadsheet
• Notecards
• Hypertext
11
Objects and Affordance
Obvious by shape how to use most everyday things
Theory of Affordance
“Much of our everyday knowledge resides
in the world, not in the head”
Don Norman, 1988
•
•
•
•
Perceived potential for action of an object
Property of an object with reference to the observer
No prior experience required
Information pickup - exploratory activity of looking and
moving around
13
Objects and Affordance
© Gary Larson
Implications of Affordance in User
Interfaces
• Users do not learn interfaces in detail
• Rely on fluid use of information picked up from the interface
rather than a retention of this information in memory
• Skill
• Not the accumulation of knowledge, but
• The education of attention to allow faster pickup of information
from the environment
• Attempt to let world knowledge reside in the
computer interface
• Reduces memory load
14
Affordances in Interface Design
• Pressing
• Sequential affordance
• Grab and slide
• Cut and paste
• Trade-off - knowledge in head or in interface
• Efficiency vs ease of use
• More detail displayed
• increases search time
• less memory load
15
A ‘Good’ System Image
• Familiar to users
• Matches way they think about domain
• Preferably based on a concrete metaphor
• Coherent
•
•
•
•
•
Supports learning by exploration
Hides system model
Reflects current status - changes are notified
Supports retention
Reduces need for training
16
Lecture Review
• Definitions
•
•
•
•
System model
Conceptual model
System image
Mental model
• Conceptual design
• Conceptual model as a basis for user interface
• Metaphors
• Affordance
• System image
22