Design of Everyday Things
Don Norman on Design & HCI
This material has been developed by Georgia Tech HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff
Pierce, Colin Potts, Chris Shaw, John Stasko, Bruce Walker, and Melody Moore Jackson.
Comments directed to foley@cc.gatech.edu are encouraged. Permission is granted to use
with acknowledgement for non-profit purposes. Last revision: February 2004.
1
Designing for the User
“Darn these hooves! I hit
the wrong switch again!
Who designs these
instrument panels,
raccoons?”
2
Don Norman
• Professor at Northwestern and
Principal of Nielsen Norman group
• Previously Professor at UCSD,
senior positions at Apple & HP
• ACM/CHI Lifetime Achievement
Award
• Prolific author
3
Discussion
• What did you take away from DOET book?
4
Here are some
• Affordances are important
• Minimize the gulf of interpretation and gulf of
execution
• Use natural mappings
• Make state visible
• Use a conceptual model that makes sense
• Provide feedback
5
Daily Challenges
• How many of you can use all the functionality
in your
– VCR
– Digital watch
– Copy machine
– Stereo system
– Plumbing fixtures
6
Hall of Shame Example
• Leitz slide projector
– To move forward, short
press
– To move backward, long
press
• What happens when
you get frustrated?
7
Fun Examples
Phones
How do you
- transfer a call
- change volume
- store a number
- ...
8
9
Changing Ringer Volume
• Press “Program”
• Press “6”
• Set volume
– Low - Press “1”
– Medium - Press “2”
– High - Press “3”
• Press “Program”
10
Affordance
• What is it?
11
Visual Affordances
• Perceived and actual properties of an object
that determine how it could be used
– Chair is for sitting
– Button is for pushing
– Door handle is for ….
– Scroll arrow is for …
– Icon is for …
12
Doors and more Doors
13
Door Opening Affordances
1
6
2
7
3
4
5
• Which doors are easy to
open?
• Which doors are hard to
open?
• Why?
14
Lack of Affordance – Example
What in the world
is this glass for?
15
Now with an Affordance!!
This sure makes
it obvious!
16
Yikes!
17
Mantra
• Complex things may need explanation, but
simple things should not
– If a simple thing requires instructions, it is likely a
failed design
18
Designing for People
• Norman’s 2 main principles
– Provide a good conceptual model
– Make things visible
• Affordances is part of this
19
Conceptual Model
• What does Norman mean by that?
20
Conceptual Models
• People build their own systems of how things
work
– Example - car
• Designer can help user foster an appropriate
conceptual model
– Appearance, instructions, behavior...
21
Conceptual Model Matching
• Cybertracker – Kalahari
bushmen can use PDAs
to track animal
migrations
• What is a bushman’s
conceptual model?
22
Example
Affordances - Insert something
into holes
Scissors
Constraints - Bigger hole for
several fingers, small for thumb
Mapping - How to insert fingers
into holes suggested by visible
appearance
Conceptual model - Suggested by
how parts fit together and move
23
Visibility
• When functionality is hidden, problems in use
occur
– Occurs when number of functions is greater than
number of controls
• When capabilities are visible, it does not
require memory of how to use
– Remind person how to use something
24
Simple Example
• Bathroom faucets
– Two functions
• Hot/cold
• Flow
• Can you figure out how to use it?
• Are two functions clear and independent?
25
Bathroom Faucets 1
26
Bathroom Faucets 2
27
Bathroom Faucets 3
• What are the
affordances?
• What is visible?
28
About that VCR…
• That old joke - “how many of you have a VCR
that is blinking 12:00?” :-)
• Still true today :-(
29
Which is Faster for Setting Time?
30
Two Important Principles
• Mapping
• Feedback
31
Mapping
• What does this mean?
32
Mapping
• Relationship between
control and
action/result
– Good:
• Car, various driving
controls
• Mercedes Benz seat
adjustment example
Mercedes control – side of seat
– Bad
• Car stereo - Knob for
front/back speakers
• Space Shuttle seat
adjustment
BMW control – on center
console
Space Shuttle Seat Adjustment
•
•
•
Seat adjustment controls are located on the left side of the seat pan and consist of a
three-position toggle switch for power bus selection and one spring-loaded, threeposition toggle switch each to control horizontal and vertical seat movement.
To operate the seat, the commander and pilot position the pwr buss sel switch to
AC2 or AC3 for power; to move the seat along the horizontal axis, the commander
and pilot position the horiz contr switch to fwd to move the seat forward and to aft
to move the seat aft. Similarly, to move the seat along the vertical axis, the
commander and pilot position the vert contr switch to up to move the seat upward
and to down to move the seat down. The commander and pilot can position the
pwr buss sel switch to off, removing power from the seat.
If the seat motors fail, the seat can be adjusted manually. However, manual seat
adjustment can only take place on orbit and is accomplished with a special seat
adjustment tool provided in the in-flight maintenance tool kit. Manual horizontal
and vertical seat adjustment controls are located under the seat pan cushion and
on the aft side of the fixed seat structure. The seat adjustment tool is a ratchetdriven, 3/16-inch allen wrench, which is inserted into the vertical or horizontal
manual adjustment to move the seat along the Z or X axis. The seats accommodate
stowage of in-flight equipment and have removable seat cushions and mounting
provisions for oxygen and communications connections to the crew altitude
protection system.
Mapping Example: Euros
• Size::value
35
Mapping Example: Stove
Which
controls
which?
36
Yikes!
37
Individual Differences
• For whom do you design?
– Everyone? Impossible
– Average? Excluding half audience
– 95%? Still may miss a lot
• Can’t accommodate everyone
38
Individual Differences
• Designers are not representative of the user
population for whom they are designing
• Don’t expect users to think or act like you
• People vary in both physical attributes and
mental/cognitive attributes
39
Example: “Big Talker”
Leonid Stadnyk uses
a cellphone at his
home in Ukraine. He
finds the keys difficult
to work.
40
Feedback
• Let someone know what just
occurred
– Can be sound that’s made
– Can be change in physical state
41
Feedback examples
http://www.youtube.com/watch?v=dVUgd8ot6BE
42
Execution-Evaluation cycle
Norman (DOET, p. 46)
Physical
System
Gulf
of
Execution
User
Goals
Gulf
of
Evaluation
43
Goals, Execution, Evaluation
Goals
What we
want to happen
(Gulf of Execution)
Execution
What we
do to the world
Evaluation
Comparing what happened (Gulf of Evaluation)
with what we wanted to happen
Physical System
44
Execution
Goals
What we
want to happen
An intention to act
so as to achieve the goal
The actual sequence of actions
that we plan to do
The physical execution of that
action sequence
Physical System
45
Evaluation
Goals
What we
want to happen
Evaluation of the interpretations
with what we expected to happen
Interpreting the perception according
to our expectations
Perceiving the state
of the world
Physical System
46
Seven Stages - All Together
Goals
What we
want to happen
An intention to act
so as to achieve the goal
Evaluation of the interpretations
with what we expected to happen
The actual sequence of actions
that we plan to do
Interpreting the perception according
to our expectations
The physical execution of that
action sequence
Perceiving the state
of the world
Physical System
47
Implications – Which Gulf does
Each of These Address?
• Make current state and action alternatives visible
• Need good conceptual model with consistent system image
• Interface should include mappings that reveal relationships
between stages
• User should receive continuous feedback
• Provide affordances
48
Goal: Minimize Gulfs
• Gulf of Execution
– Conceptual model
– Affordances
– Natural mappings
• Gulf of Interpretation
– Make state visible
– Feedback
49
Why Design is Hard
• Number of things to control has increased
dramatically
• Displays are more virtual/artificial
• Marketplace pressure
– Adding operations cheaper (computers)
– Adding controls expensive (real estate, cost)
• Errors are becoming increasingly serious
50
Try and Try Again
• Norman thinks that it often takes 5 or 6 tries
to get something “right”
• Simply may not have that luxury in a
competitive business environment
51