1. The Design of Everyday Things
Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?

2. How do you play the CD?

3. Not the “mappings” I would make.

4. Why is this bad?? CD/Tape player
Designed for physical issues rather than usage issues.
Failed to consider logical mappings.

5. The Design of Everyday Things
7 stages of performing an action
Conceptual models – the device should explain itself
Visibility and Affordances
Constraints and Mappings
Feedback

6. Seven Stages of Action Goals Evaluation of the interpretations
Intention to act
Interpreting
the perception
Sequence of actions
Execution of the
action sequence
Perceiving the state
of the world
The World

7. Two common places where the process breaks down
Goals
Evaluation of
the interpretations
Intention to act
GULF OF EXECUTION
Interpreting
the perception
Sequence of actions
GULF OF EVALUATION
Execution of the
action sequence
Perceiving the state
of the world
The World

8. Gulf of Execution GULF OF EXECUTION Goals Evaluation of
the interpretations
Intention to act
GULF OF EXECUTION
Interpreting
the perception
Sequence of actions
Execution of the
action sequence
Perceiving the state
of the world
The World

9. The Gulf of Execution
Does the system provide actions that correspond to the user’s intentions?
The difference between intentions and allowable actions is the Gulf of Execution

10. Gulf of Evaluation GULF OF EVALUATION Goals Evaluation of
the interpretations
Intention to act
Interpreting
the perception
Sequence of actions
GULF OF EVALUATION
Execution of the
action sequence
Perceiving the state
of the world
The World

11. The Gulf of Evaluation
Does the system provide a physical representation that can be readily perceived and interpreted in terms of the user’s intentions and expectations?
The Gulf of Evaluation reflects the amount of effort that the person must exert to interpret the physical state of the system and determine how well the intentions have been met.

12. The Seven Stages as Design aids
How easily can the user:
Determine the function
of the system?
Tell if the system is
in the desired state?
Tell what actions
are possible?
Determine a mapping from
system state to interpretation
Determine a mapping from
intention to physical action?
Perform the action?
Tell what state the
system is in?

13. Principles for good design
Conceptual models
Visibility and affordances
Mappings
Constraints
Feedback  Causality
Knowledge in the world
Standardization
Designing for error

14. Conceptual Model
People are explanatory creatures – we will come up with models of how things work
Rule 1 of interface design – an interface is well designed when it behaves exactly as users think it will
Put it another way: the designer’s job is to make it easy for users to create the right model of the system

15. Designer and user models
Goal: user model and design model should be identical
Design Model
User Model
Communication from designer to user is via the system image
So system image must lead user to acquire a user model equal to the design model
Designer
User
System
System Image

16. The notorious case of refrigerator temperature control
Two things to control:
Temperature of fresh food compartment
Temperature of freezer compartment

17. Instructions (already a bad sign!)
What if I just want to make the freezer warmer?

18. A sensible user model derived from the system image
“The Freezer Control controls the freezer temperature and the Fresh Food Control controls the fresh food temperature”

19. But the design model is completely different!

20. And there’s a big problem with feedback, too!

21. So how does a designer help users acquire the right model?
Visibility
Affordances
Constraints
Mappings
Feedback

22. Visibility Don’t hide controls! Make status available
telephones: hold, transfer, 3-way call etc.
VCR programming (I know this is OLD but…)
Make status available
well-designed display (e.g., progress bars)
use sound if needed (click/beep/etc.)

23. So how does a designer help users acquire the right model?
Visibility - Don’t hide things. Make the status visible
Affordances
Mappings
Constraints
Feedback

24. Affordances
Actual and perceived properties of an object that determine how it could possibly be used
A chair affords sitting
A button affords pushing
A knob affords turning
A slot affords sticking things in

25. Affordances in GUIs? Does a button icon afford clicking?
Maybe… but what does the click mean?
Meaning is arbitrary, and is assigned by designers
Norman: “‘I put an affordance there… I wonder if the object affords clicking…’ affordances this, affordances that. And no data, just opinion. Yikes! What had I unleashed upon the world?”
Bottom line – affordances aren’t as useful in GUIs as in physical design

26. So how does a designer help users acquire the right model?
Visibility - Don’t hide things. Make the status visible
Affordances - the design aspect of an object which suggests how the object should be used
Mappings
Constraints
Feedback

27. Mappings Mappings are used to determine relationships
Between actions and results
Controller and controlled
Take advantage of physical analogies and cultural standards

28. Which dial controls which burner?

31. Which knob controls which burner?

32. Which knob controls which burner?

33. Why don’t all stoves use this design. Is it ugly. More expensive
Why don’t all stoves use this design? Is it ugly? More expensive? Less safe? …?

35. Constraints Limit the range of possible actions Physical Constraints
Only some possibilities are physically possible (only one way to put a VCR tape in a player)
Semantic Constraints
Only some possibilities make sense
Cultural Constraints
Only some possibilities are acceptable
Logical Constraints
General principles: e.g., every part should be used

36. Feedback Remember that people will build models
And feedback leads to causal models: “if Y happened after X, then X caused Y”
So provide the proper feedback immediately: respond to user actions – don’t hide the results!
Did I press the button? (visual and/or audio feedback)
All actions should have effects
Promote exploration
Provide meaningful error messages

37. Wii I recently bought a used original Wii.
While trying to setup the device to use my wireless I received:
Wii Error Code 51330
What does that mean?

38. Wii It turns out that it means I had entered my password incorrectly.
BUT, I had to search the internet (see the catch 22 on this) to learn that.
Say what you mean and mean what you say

40. Dr. Diesburg’s TV Say what you mean and mean what you say.
Make sure that end users don’t see error messages that they can’t understand (and arguably shouldn’t see).

41. White House Form

42. Next Steps Readings Next Time Project
Keep reading DOET (chapters 3 and 4 due on Friday)
Next Time
Prepare two PowerPoint slides
to me by 8 AM on Wednesday
Project
Teams must be selected by next Friday