Design of Everyday Things

Don Norman on Design & HCI

1

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.

Designing for the User

2

“Darn these hooves! I hit the wrong switch again!Who designs these instrument panels, raccoons?”

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

8

Phones

How do you- transfer a call- change volume- store a number- ...

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

• Which doors are easy to open?

• Which doors are hard to open?

• Why?

14

1 2 3 4 5

6 7

Lack of Affordance – Example

15

What in the worldis this glass for?

Now with an Affordance!!

16

This sure makesit obvious!

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

23

ScissorsAffordances - Insert somethinginto holes

Constraints - Bigger hole forseveral fingers, small for thumb

Mapping - How to insert fingersinto holes suggested by visibleappearance

Conceptual model - Suggested byhow parts fit together and move

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

– Bad• Car stereo - Knob for

front/back speakers• Space Shuttle seat

adjustment

                                                        

Mercedes control – side of seat

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, three-position 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 ratchet-driven, 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”

40

Leonid Stadnyk uses Leonid Stadnyk uses a cellphone at his a cellphone at his home in Ukraine. He home in Ukraine. He finds the keys difficult finds the keys difficult to work.to work.

Feedback

• Let someone know what just occurred– Can be sound that’s made– Can be change in physical state

41

Feedback examples

42

http://www.youtube.com/watch?v=dVUgd8ot6BE

Execution-Evaluation cycleNorman (DOET, p. 46)

43

UserGoals

PhysicalSystem

Gulfof

Execution

Gulfof

Evaluation

Goals, Execution, Evaluation

44

Physical System

GoalsWhat we

want to happen

ExecutionWhat we

do to the world

EvaluationComparing what happened

with what we wanted to happen

(Gulf of Execution) (Gulf of Evaluation)

Execution

45

GoalsWhat we

want to happen

An intention to actso as to achieve the goal

The actual sequence of actionsthat we plan to do

The physical execution of that action sequence

Physical System

Evaluation

46

GoalsWhat we

want to happen

Evaluation of the interpretationswith what we expected to happen

Interpreting the perception accordingto our expectations

Perceiving the stateof the world

Physical System

Seven Stages - All Together

47

GoalsWhat we

want to happen

Evaluation of the interpretationswith what we expected to happen

Interpreting the perception accordingto our expectations

Perceiving the stateof the world

An intention to actso as to achieve the goal

The actual sequence of actionsthat we plan to do

The physical execution of that action sequence

Physical System

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