Design process & principles User centered design.
<ul><li> Slide 1 </li> <li> Design process & principles User centered design </li> <li> Slide 2 </li> <li> What is design? achieving goals within constraints goals - purpose who is it for, why do they want it constraints materials, platforms trade-offs </li> <li> Slide 3 </li> <li> Interactions and Interventions design interactions not just interfaces not just the immediate interaction e.g. stapler in office technology changes interaction style designing interventions not just artefacts not just the system, but also documentation, manuals, tutorials what we say and do as well as what we make </li> <li> Slide 4 </li> <li> Basic HCI process of design what is wanted analysis design implement and deploy prototype interviews ethnography what is there vs. what is wanted guidelines principles dialogue notations precise specification architectures documentation help evaluation heuristics scenarios task analysis </li> <li> Slide 5 </li> <li> Traditional waterfall lifecycle Requirements analysis Design Code Test Maintenance </li> <li> Slide 6 </li> <li> Spiral Lifecycle model From cctr.umkc.edu/~kennethjuwng/spiral.htm </li> <li> Slide 7 </li> <li> Why is HCI Design Difficult? Difficult to deeply analyze human behavior Cost/features may be considered over good human factors Creativity is challenging! Easy to get design fixation </li> <li> Slide 8 </li> <li> 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 </li> <li> Slide 9 </li> <li> 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 </li> <li> Slide 10 </li> <li> 1. Learnability Principles Ease with which new users can begin effective interaction and achieve maximal performance Predictability Synthesizability Familiarity Metaphor Generalizability Consistency </li> <li> Slide 11 </li> <li> 1.1 Predictability I think that this action will do. </li> <li> Slide 12 </li> <li> 1.2 Synthesizability Support for user in assessing the effect of past operations on current system state </li> <li> Slide 13 </li> <li> 1.3 Familiarity Does UI task leverage existing real-world or domain knowledge? Really relevant to first impressions Use of metaphors Potential pitfalls </li> <li> Slide 14 </li> <li> 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 </li> <li> Slide 15 </li> <li> 1.5 Consistency Likeness in behavior between similar tasks/operations/situations/terminology Dialogue boxes always have yes/no/cancel buttons </li> <li> Slide 16 </li> <li> 2. Flexibility Principles Multiplicity of ways that users and system exchange information Dialog Initiative Multithreading Task migratability Substitutivity Customizability </li> <li> Slide 17 </li> <li> 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 </li> <li> Slide 18 </li> <li> 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 </li> <li> Slide 19 </li> <li> 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? </li> <li> Slide 20 </li> <li> 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 </li> <li> Slide 21 </li> <li> 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 </li> <li> Slide 22 </li> <li> 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? </li> <li> Slide 23 </li> <li> 3. Robustness Principles Supporting user in determining successful achievement and assessment of goals Observability Error Prevention Recoverability Responsiveness Task Conformance </li> <li> Slide 24 </li> <li> 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 dont overwhelm user with information either Reachability Navigate through observable states Persistence How long does observable state persist? Observability also aids learnability </li> <li> Slide 25 </li> <li> Slide 26 </li> <li> 3.1 Observability - Role of Feedback Feedback helps create observability Feedback taxonomy (generally dont 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, whats next? </li> <li> Slide 27 </li> <li> 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 </li> <li> Slide 28 </li> <li> Operation visibility Can see avail actions Menus vs. command shell Grayed menu items provide context </li> <li> Slide 29 </li> <li> 3.2 Error Prevention Make it hard for the user to make an error Dont let the user do something that will lead to an error message </li> <li> Slide 30 </li> <li> 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 </li> <li> Slide 31 </li> <li> 3.3 Recoverability Ability to take corrective action upon recognizing error Forward recovery Ability to fix when we cant 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 </li> <li> Slide 32 </li> <li> 3.3. Recoverability </li> <li> Slide 33 </li> <li> 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 </li> <li> Slide 34 </li> <li> 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 </li> <li> Slide 35 </li> <li> 3.4 Responsiveness </li> <li> Slide 36 </li> <li> 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 </li> <li> Slide 37 </li> <li> 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 </li> <li> Slide 38 </li> <li> 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 </li> <li> Slide 39 </li> <li> User experience goals Satisfying Fun Entertaining Enjoyable Helpful Motivating Aesthetically pleasing Motivating Rewarding Emotionally fulfilling Support creativity and more </li> <li> Slide 40 </li> <li> 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 </li> <li> Slide 41 </li> <li> 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 contents 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 existdragging icons in the Finder, for examplethere 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 persons 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.) </li> <li> Slide 42 </li> <li> 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? </li> </ul>