Design of Everyday Things Don Norman on Design

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 AC 2 or AC 3 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” 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=d. VUgd 8 ot 6 BE 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