1 / 51

Design of Everyday Things

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

clara
Download Presentation

Design of Everyday Things

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Designing for the User “Darn these hooves! I hit the wrong switch again! Who designs these instrument panels, raccoons?”

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

  4. Discussion • What did you take away from DOET book?

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

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

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

  8. Fun Examples 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? 1 2 3 4 5 6 7

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

  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 • Bad • Car stereo - Knob for front/back speakers • Space Shuttle seat adjustment Mercedes control – side of seat BMW control – on center console

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

  34. 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) Gulf of Execution User Goals Physical System Gulf of Evaluation

  43. Goals, Execution, Evaluation Goals 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 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

More Related