1. Design of Everyday Things
Don Norman on Design & HCI

2. Today’s agenda Project scores Poster 8400 topics
Design of everyday things
Midterm review
Next week:
6:30-7:30: web design
7:45-9:15: Midterm

3. Poster March 12 (first class after spring break)
Present (at least) 3 design possibilities, get feedback
Organization:
General topic, perhaps scenario, users, requirements, etc.
At least 3 DIFFERENT designs – sketches, storyboards, perhaps descriptions or features
You can bring whatever else you have
Materials: whatever you like

4. Summary Darn these hooves! I hit the wrong switch again!
Who designs these instrument
Panels, raccoon?!

5. 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

6. Discussion
What did you take away from DOET book so far?

7. 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

8. Daily Challenges How many of you can use all the functionality in your
VCR
Digital watch
Copy machine
Stereo system
Plumbing fixtures

9. Hall of Shame Example Leitz slide projector
To move forward, short press
To move backward, long press
What happens when you get frustrated?

11. Changing Ringer Volume
Press “Program”
Press “6”
Set volume
Low - Press “1”
Medium - Press “2”
High - Press “3”

12. Much better…

13. Important Concepts Affordances Visibility Conceptual models Mapping
Feedback
Constraints

14. 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 …

15. Affordances

16. Affordances

17. Door Opening Affordances1 2 3 4 5
Which doors are easy to open?
Which doors are hard to open?
Why? 6 7

18. Affordances in interfaces
Interfaces are virtual and do not have ‘real’ affordances like physical objects
Interfaces have ‘perceived’ affordances
Learned conventions of arbitrary mappings between action and effect at the interface
Some mappings are better than others

19. Mantra
Complex things may need explanation, but simple things should not
If a simple thing requires instructions, it is likely a failed design
Norman’s 2 main principles
Provide a good conceptual model
Make things visible
Affordances is part of this

20. Conceptual Models People build their own systems of how things work
Example - thermostat
Designer can help user foster an appropriate conceptual model
Appearance, instructions, behavior...

21. Conceptual Models Mental models are not always right Two Classes:
Functional model
Stimulus - response
“Press the accelerator once, then turn the key”
At surface or superficial level
Structural model
Deeper sense of why it happens, not just what happens
“Press the accelerator to engage the automatic choke on a carburetor”

22. 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
Recognition over Recall
in the world vs. in the head

23. Simple Example
Bathroom faucets
Two functions
Hot/cold
Flow

24. Bathroom Faucets 1 Can you figure out how to use it? Are two functions
clear and
independent?

25. Bathroom Faucets 2 Can you figure out how to use it? Are two functions
clear and
independent?

26. Bathroom Faucets 3 Can you figure out how to use it? Are two functions
clear and
independent?

27. My parent’s microwave
5:45

28. My microwave

29. Which is Faster for Setting Time?

30. Mapping Relationship between control and action/result in the world
Take advantage of physical analogies or cultural understandings
Good:
Car, various driving controls
Mercedes Benz seat adjustment example
Bad
Car stereo - Knob for front/back speakers

31. Which is better? or

32. Mapping Example: Euros
Size::value

33. Mapping Example: Stove
Which controls which?

34. Why not this?

35. Yikes!

36. Why Not Design Better Stove Speakers Physical, monetary,
convenience, etc.,
constraints dictate
otherwise

37. Feedback Sending information back to the user about what has been done
Includes sound, highlighting, animation and combinations of these
e.g. when screen button clicked on provides sound or red highlight feedback:
“ccclichhk”

38. What’s wrong with this picture?

39. Constraints Limitations on what can be done Physical - keys
Semantic - menu graying
Cultural - Colors
Logical - When all above don’t apply

40. Simple Example Electric plugs
What if both sides were “big” and you had to
remember which side the “small” one went into?

41. Knowledge in Head vs. Knowledge in the World
Not easy to retrieve
Learning required, good conceptual model makes easier
Can be very efficient
Not easy first time
Aesthetics do not need to make info visible
World
Easy to retrieve
No learning, only interpretation
Use slowed by need to find the info to interpret
Easy for first time
Can be cluttered or inelegant

42. Execution-Evaluation cycle
Norman (DOET, p. 46)
Gulf of
Execution
User
Goals
Physical
System
Gulf of
Evaluation

43. Goals, Execution, Evaluation
What we
want to happen
Execution
What we
do to the world
Evaluation
Comparing what happened
with what we wanted to happen
(Gulf of Execution)
(Gulf of Evaluation)
Physical System

44. Execution Physical System 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 Physical System 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 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 Gulf of Evaluation
Conceptual model
Affordances
Natural mappings
Gulf of Evaluation
Make state visible
Feedback

49. Errors - Three Considerations
Avoiding and preventing
Identifying and understanding
Handling and recovering

50. Why errors are important
Errors are unavoidable
To err is human
Making mistakes is part of learning
Designer’s responsibility
Understand why errors occur
Minimize likelihood
Allow for recognition of error and graceful recovery (forward or backward)
design, usability engineering, self-explaining system
working memory, fatigue, learning, user differences (experience), social pressure

51. Example Studies – Errors Happen!
170 experienced UNIX users over 9 days
Individual commands had error rates of 3-50%
300 security system users over 20 months
12,117 error messages
Most common 11 errors -> 65%
2517 involved repeated errors (with no non-errors in between) within 10 minutes
 Bad error recovery/help
Kraut et al, CHI ‘83
Mosteller & Ballas, Human Factors ‘89

52. User-Computer Dialog Three phases Read-scan phase -- Perceptual errors
Think phase -- Cognitive errors
Respond phase -- Motor errors

53. Perceptual Errors Result from insufficient or poor perceptual cues
Display of objects that are visually similar
Invisible or poorly expressed states
Failure to capture user’s attention
Lack of perceivable feedback

54. Cognitive Errors
Caused by taxing the memory and problem solving capabilities
Tax recall memory
Lack of or poor mnemonic aids
Inconsistency
Lack of context or status info
e.g., where came from in a menu
Mental calculations and translations

55. Motor Errors Taxing the eye-hand coordination and motor skills
Awkward motor movements
Highly similar motor sequences
e.g., double click, click
Pressure for speed
Require a high degree of hand-eye coordination
Requiring special types of motor skills (type)

56. Mistakes and Slips Mistakes (hopefully avoidable) Slips (unavoidable)
Wrong intention
Incorrect mental model
Novice behavior
Slips (unavoidable)
Wrong execution
Skilled behavior

57. Moral …
… slips happen

58. Types of Slips
1. Capture error - Continue frequently done activity instead of intended one (similar starts)
Confirm deletion of file instead of cancel
2. Description error - Intended action has much in common with others possible (usually when distracted, close proximity)
shift key & caps lock key

59. Types of Slips
3. Data driven error - Triggered by arrival of sensory info which intrudes into normal action
Call to give someone a number, dial that number instead
4. Associative activation - Internal thoughts and associations trigger action
Phone rings, yell “come in”

60. Types of Slips
5. Loss of activation - Forgetting goal in middle of sequence of actions
Start going into room, then forget why you’re going there
6. Mode errors - Do action in one mode thinking you’re in another
Delete file, but you’re in wrong directory
Scroll wheel in PowerPoint

61. What to do? As much as possible Prevent mistakes
Allow recovery from slips

62. Error Prevention Guidelines
Eliminate modes or provide visible cues for modes - no invisible modes
Use consistent representation (color, style)
Maximize recognition, minimize recall
Design non-similar motor sequences for commands
Minimize need for typing
Test and monitor for errors and engineer them out
Allow reconsideration of action by user (e.g., removing file from trash)
Avoid ambiguous and unclear prompts and messages - as in next set of examples!

63. Great Examples

64. Error Recovery Guidelines
Provide appropriate type of response
Gag - Prevent user from continuing
Erroneous login
Warn - Warn user an unusual situation is occurring
Bell or alert box
Nothing - Don’t do anything (Careful, user must determine problem)
move file to bad place
Self-correct - Guess correct action & do it
Spell-check correction
Dialog - System opens dialog with user
Go into debugger on run-time crash

65. Error Recovery Guidelines
Provide undo function
Provide cancel function from operations in progress
Require confirmation for drastic, destructive commands
Provide reasonableness checks on input data
Did you really mean to order 5000?
Return cursor to error field, allow fix
Provide some intelligence
Guess what they wanted to do
Provide quick access to context-sensitive help

66. Error Message - What to Say
Error: Error code -37
Description: Disk full
Prescription: Disk full; recover disk space
Prescription + aid: Disk full; recover space by deleting files or defragmenting
Prescription + offer: Disk full; proceed with disk defragmentation? Otherwise delete files.

67. How Does This Example Fit In?

68. Error Message Wording - Vocabulary
Problem with previous example - some users will not know what defragmentation means!!
Vocabulary
User-oriented
Defined in advance for commonality throughout all messages (in style guide)
Alternatives to defragmentation ?

69. Error Message Wording - Tone
Sorry, command not recognized
Command not recognized :-(
Command not recognized
Command not recognized!!

70. Implications for design
Scenarios should include errors !!!
Distinguish between skilled and learner errors
Uncover errors in the existing system
how do people self-monitor (cheat sheets)

71. Midterm review How to study: Test format
Look at slides for topics, bullets, vocabulary, etc.
Find details and examples in the books as needed
Test format
25-50% true/false, multiple choice, fill-in-blank
Rest short answer, probably with one longer answer

72. Review What is usability? What is design? Why is it hard?
The user centered design process
General steps
various models – high level understanding
Waterfall vs. other models
Ethics
What concerns in working with people?
History
What’s a paradigm?
What were the major paradigm shifts? What were the impacts to HCI/users?

73. Requirements Review Functional vs. non functional
Summative eval vs. formative eval
What pieces are part of this?
User characteristics, task analysis, environment, etc.etc.
Persona – what is it and what makes a good one?
Scenario – what is it and what makes a good one?
Stakeholders
How do you gather data? Tradeoffs?
Interview, questionnaire, observation, etc. etc.
Contextual Inquiry – what is it, why, tradeoffs…
Task models
Hierarchical task analysis - how to do it?
Other models – what can they represent?

74. Humans review What are issues concerning our senses?
What are difficulties or disabilities that could occur?
Model Human Processor model of memory
What’s a chunk? Why do we care?
What are implications? (recognition over recall, etc.)
Other processes – what are they? (attention, learning)
What are the implications?
Other models of human cognition
Situation action
Activity theory
Distributed cognition
Basic understanding, Compare/contrast each

75. Interaction Review Command line WIMP Direction manipulation
Pen & mobile
Speech & natural language
Issues, advantages, disadvantages, etc.

76. Design Prototyping Visual Design What’s vertical vs. horizontal?
What’s low vs. high fidelity?
What are various methods?
Scenarios, mockups/sketches, etc.
Wizard of Oz
Issues and tradeoffs?
Visual Design
Form follows function
Graphic design principles?
Clarity, proximity, alignment, etc.

77. DOET Review What are Norman’s principles? Execution-evaluation cycle
Affordance, mapping, feedback, etc.
What are they? Why needed?
Execution-evaluation cycle
Steps of cycle, what helps reduce gulfs?
Errors
Perceptual, cognitive, motor
Mistake vs. slip
Error prevention and recovery guidelines