Design Principles

1. Design Principles Don Norman on design and HCI Basic process and guidelines for interaction design

2. Part 2 • Create list of requirements, including usability criteria • Brainstorm LOTS of ideas • Be wild and crazy • Design space = all the variations and tradeoffs you might make • Explore at least 3 designs • Sketch, storyboard, scenarios • Poster in 2 weeks – present your designs for feedback

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

4. 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 • http://www.jnd.org/

5. Discussion • What did you take away from the book?

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

8. Much better…

9. Important Concepts • Affordances • Visibility • Conceptual models • Mapping • Feedback • Constraints

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

11. Door Opening Affordances • Which doors are easy to open? • Which doors are hard to open? • Why? 1 2 3 4 5 6 7

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

13. Norman Mantra • Complex things may need explanation, but simple things should not • If a simple thing requires instructions, it is likely a failed design

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

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

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

17. Simple Example • Bathroom faucets • Two functions • Hot/cold • Flow

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

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

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

21. 5:45 My parent’s microwave

22. My microwave

23. Which is Faster for Setting Time?

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

25. Which is better? or

26. Mapping Example: Euros • Size::value

27. Mapping Example: Stove Which controls which?

28. Why not this?

29. Yikes!

30. Why Not Design Better • Stove • Speakers Physical, monetary, convenience, aesthetics, etc., constraints dictate otherwise

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

32. Constraints • Limitations on what can be done • Physical - keys • Semantic - menu graying • Cultural - Colors • Logical - When all above don’t apply • What if we had to remember which side of the plug was the large one?

33. Constraints

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

35. Head 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 Knowledge in Head vs. Knowledge in the World

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

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

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

39. Gulf of Execution Conceptual model Affordances Natural mappings Gulf of Evaluation Make state visible Feedback Goal: Minimize Gulfs

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

41. Moral … … slips happen

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

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

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

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

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

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

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

49. 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 constantly a problem

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