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 12345 67 Which doors are easy to open? Which doors are hard to open? Why?

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. My parent’s microwave 5:45

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

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

36. Goals, Execution, Evaluation Physical System 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)

37. Seven Stages - All Together 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 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

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. Goal: Minimize Gulfs Gulf of Execution Conceptual model Affordances Natural mappings Gulf of Evaluation Make state visible Feedback

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

51. Error Prevention Guidelines Eliminate modes or provide visible cues for modes - no invisible modes Maximize recognition, minimize recall Design non-similar motor sequences for commands Minimize need for typing Test and monitor for errors and engineer them out Allow reconsideration of action by user (e.g., removing file from trash) Avoid ambiguous and unclear prompts and messages - as in next set of examples!

52. Great Examples

53. Error Recovery Guidelines Provide appropriate type of response Gag - Prevent user from continuing Erroneous login Warn - Warn user an unusual situation is occurring Bell or alert box Nothing - Don’t do anything (Careful, user must determine problem) move file to bad place Self-correct - Guess correct action & do it Spell-check correction Dialog - System opens dialog with user Go into debugger on run-time crash

54. Error Recovery Guidelines Provide undo function Provide cancel function from operations in progress Require confirmation for drastic, destructive commands Provide reasonableness checks on input data Did you really mean to order 5000? Return cursor to error field, allow fix Provide some intelligence Guess what they wanted to do Provide quick access to context-sensitive help

55. Error Message - What to Say Error:Error code -37 Description:Disk full Prescription:Disk full; recover disk space Prescription + aid:Disk full; recover space by deleting files or defragmenting Prescription + offer:Disk full; proceed with disk defragmentation? Otherwise delete files.

56. How Does This Example Fit In?

57. Norman summary 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

58. Design Principles, Guidelines, Heuristics Guidelines, practices to help designers No “cookbooks”, no universal checklists Are neither complete nor orthogonal Can all be “broken”, often to satisfy another rule Have underpinnings in psychology or experience or common sense Understand the higher level principles that apply across situations, display types, etc. Implement the standards and guidelines

59. Usability Principles Categories Learnability Support for learning for users of all levels Flexibility Support for multiple ways of doing tasks Robustness Support for recovery Always think about exceptions, suitability

60. 1. Learnability Principles Ease with which new users can begin effective interaction and achieve maximal performance Predictability Synthesizability Familiarity Metaphor Generalizability Consistency

61. 1.1 Predictability I think that this action will do….

62. 1.2 Synthesizability Support for user in assessing the effect of past operations on current system state

63. 1.3 Familiarity Does UI task leverage existing real-world or domain knowledge? Really relevant to first impressions Use of metaphors Potential pitfalls

64. 1.4 Generalizability Can knowledge of one system/UI be extended to other similar ones? Example: cut & paste in different applications Aid: UI Developers guidelines

65. 1.5 Consistency Likeness in behavior between similar tasks/operations/situations/terminology Dialogue boxes always have yes/no/cancel buttons

66. Consistency (cont’d) Avoid special cases and special rules For command line systems - consistent syntax Find consistency between commands, unify them - as in Unix pipes for file I/O and for process inter- communications

67. (In)Consistency Example - Macintosh Drag a file icon to: Folder on same physical disk Folder on another physical disk Different disk Trash can Result: File is moved to folder File is copied there File is discarded

68. 2. Flexibility Principles Multiplicity of ways that users and system exchange information Dialog Initiative Multithreading Task migratability Substitutivity Customizability

69. 2.1 Dialog Initiative Not hampering the user by placing constraints on how dialog is done User pre-emptive User initiates actions More flexible, generally more desirable System pre-emptive System does all prompts, user responds Sometimes necessary

70. 2.2 Multithreading Allowing user to perform more than one task at a time Two types Concurrent Input goes to multiple tasks simultaneously Interleaved Many tasks, but input goes to one at a time

71. 2.3 Task Migratability Ability to move performance of task to the entity (user or system) that can do it better Spell-checking, flight controls For what kinds of tasks should the user be in control?

72. 2.4 Substitutivity Equivalent values can be substituted for each other Point at spreadsheet cell vs enter name Give temperature via slider or by typing

73. 2.4 Substitutivity Flexibility in details of operations Allow user to choose suitable interaction methods Allow different ways to perform actions, specify data, configure Allow different ways of presenting output to suit task & user

74. 2.5 Customizability Ability of user to modify interface By user - adaptability Is this a good thing? By system - adaptivity Is this a good thing?

75. 3. Robustness Principles Supporting user in determining successful achievement and assessment of goals Observability Error Prevention Recoverability Responsiveness Task Conformance

76. 3.1 Observability Can user determine internal state of system from what she perceives? Browsability Explore current state (without changing it) Reduces memory load But don’t overwhelm user with information either Reachability Navigate through observable states Persistence How long does observable state persist? Observability also aids learnability

78. 3.1 Observability - Role of Feedback Feedback helps create observability Feedback taxonomy (generally don’t need all of these) “I understand what you have asked me to do” “I am doing what you have asked me to do” “And it will take me this much longer” Song and dance routine to distract user (busy interval as opposed to idle interval) “And here are some intermediate results to keep you happy until I am done “All done, what’s next?”

79. 3.1 Observability – Forest + Trees Acrobat Reader with ToC to give context Forest is the bookmarks, tree is the single page

80. 3.1 Observability - Scroll Bar Scroll bar size indicates % in view - but does not indicate absolute sizes. Can add other info, such as Page 5 of 12

81. Operation visibility Can see avail actions Menus vs. command shell Grayed menu items provide context

82. Visibility Minimizes User Memory Load Recognition is better than recall Make visible! Describe required input format, include example and default Date: _ _ - _ _ - _ _ (DD-MM-YY) Also avoids errors

83. 3.2 Error Prevention Make it hard for the user to make an error Don’t let the user do something that will lead to an error message

84. 3.3 Recoverability Ability to take corrective action upon recognizing error Forward recovery Ability to fix when we can’t undo Backward recovery Undo previous error(s) Abort operation underway Only makes sense if is a slow operation Encourages experimentation (hence learnability) by reducing cost of making mistakes

85. 3.3. Recoverability

86. 3.4 Responsiveness Users perception of rate of communication with system (not always right) Response time Time for system to respond in some way to user action(s) Response OK if matches user expectations Once user enjoys fast response, is hard to go back to slower response Dial-up versus DSL or Cable Modem

87. 3.4 Responsiveness Response to motor actions Keyboarding, mouse movement - less than 100 msec. Rich Human Factors literature on this Consistency is important - experimental result Users preferred longer but more consistent response time Times that differed 10% to 20% were seen as same

88. 3.4 Responsiveness

89. 3.5 Task Conformance Does system support all tasks user wishes to perform in expected ways? Task completeness Can system do all tasks of interest? Task adequacy Can user understand how to do tasks? Does it allow user to define new tasks? Extensibility

90. Usability heuristics (Nielsen 2001) Visibility of system status Match between system and the real world User control and freedom Consistency and standards Help users recognize, diagnose and recover from errors Error prevention Recognition rather than recall Flexibility and efficiency of use Aesthetic and minimalist design Help and documentation

91. Universal design principles equitable use flexibility in use simple and intuitive to use perceptible information tolerance for error low physical effort size and space for approach and use http://www.design.ncsu.edu/cud/univ_design/princ_overview.htm

92. User experience goals Satisfying Fun Entertaining Enjoyable Helpful Motivating Aesthetically pleasing Motivating Rewarding Emotionally fulfilling Support creativity …and more

93. Example Most important usability principles for Bus stop kiosk Instant messenger Flight control

94. Styleguides Codify many of these principles for a particular look and feel Mac OS, Windows, Motif, Palm, Blackberry Developed in concert with toolkit, but go beyond toolkit

95. Excerpt from OS X Styleguide Drag and Drop Overview Ideally, users should be able to drag any content from any window to any other window that accepts the content’s type. If the source and destination are not visible at the same time, the user can create a clipping by dragging data to a Finder window; the clipping can then be dragged into another application window at another time. Drag and drop should be considered an ease-of-use technique. Except in cases where drag and drop is so intrinsic to an application that no suitable alternative methods exist—dragging icons in the Finder, for example—there should always be another method for accomplishing a drag-and-drop task. The basic steps of the drag-and-drop interaction model parallel a copy-and-paste sequence in which you select an item, choose Copy from the Edit menu, specify a destination, and then choose Paste. However, drag and drop is a distinct technique in itself and does not use the Clipboard. Users can take advantage of both the Clipboard and drag and drop without side effects from each other. A drag-and-drop operation should provide immediate feedback at the significant points: when the data is selected, during the drag, when an appropriate destination is reached, and when the data is dropped. The data that is pasted should be target-specific. For example, if a user drags an Address Book entry to the “To” text field in Mail, only the email address is pasted, not all of the person’s address information. You should implement Undo for any drag-and-drop operation you enable in your application. If you implement a drag-and- drop operation that is not undoable, display a confirmation dialog before implementing the drop. A confirmation dialog appears, for example, when the user attempts to drop an icon into a write-only drop box on a shared volume, because the user does not have privileges to open the drop box and undo the action. (Color added for emphasis.)

96. Your project Which principles or guidelines are most important for your project? What does that principle mean for your design? How might you measure success?

97. Next time Prototyping and storyboards Visual/graphic design Web design Skim chapter 2. Read 21. Review 5.7, 5.8, 6.4.