User Centered Design

11,969 views
11,649 views

Published on

A crush course in user-centered design, usability and GUI development.

Published in: Business, Technology

User Centered Design

  1. 1. Eran Toch http://www.technion.ac.il/~erant A Crush Course in Usability and User Centered Design Spring 2007
  2. 2. Agenda <ul><li>Introduction </li></ul><ul><li>User Interface Design </li></ul><ul><ul><li>GUI building blocks </li></ul></ul><ul><ul><li>GUI structures </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Good design / bad design </li></ul></ul><ul><ul><li>Usability levels </li></ul></ul><ul><li>User-centered design </li></ul><ul><ul><li>Principles and ideals </li></ul></ul><ul><ul><li>The process </li></ul></ul>Intro | UI Design | Usability | User-centered
  3. 3. What is Usability? <ul><li>ISO 9241 usability definition </li></ul>The effectiveness, efficiency, and satisfaction with which specified users can achieve specified goals in particular environments. Intro | UI Design | Usability | User-centered
  4. 4. Why is Usability Important? <ul><li>The fate of </li></ul><ul><li>the world </li></ul>2. The Apple iPhone Intro | UI Design | Usability | User-centered
  5. 5. 1. The Fate of the World <ul><li>Bush won Florida by a 537-vote margin in official results </li></ul>The 2001 Florida Ballot Incident Intro | UI Design | Usability | User-centered
  6. 6. The Florida Ballot <ul><li>5,330 Palm Beach County residents invalidated their ballots by punching for Gore and Reform Party candidate Pat Buchanan. </li></ul><ul><li>Almost half of them were 65 or older and Democrats . </li></ul>Intro | UI Design | Usability | User-centered
  7. 7. 2. The Apple iPhone Intro | UI Design | Usability | User-centered
  8. 8. Focus on Usability and Design Intro | UI Design | Usability | User-centered
  9. 9. The implications of usability Intro | UI Design | Usability | User-centered
  10. 10. Usability vs. Specification Initiation Requirement Design Specification Implementation Testing Is it too late? Intro | UI Design | Usability | User-centered We design the user interface here We test them here
  11. 11. User Centered Design <ul><li>Therefore, we need a crush course in: </li></ul><ul><ul><li>UI Design </li></ul></ul><ul><ul><li>Usability principles </li></ul></ul><ul><ul><li>User-centered design </li></ul></ul><ul><li>Note, these issues will be discussed in a very shallow manner. </li></ul><ul><li>Each of these issues deserve a course (actually, in our faculty, there are two courses on these issues). Take them! </li></ul>UI Design + Testing Initiation Requirement Intro | UI Design | Usability | User-centered Design Specification Implementation Testing
  12. 12. Agenda <ul><li>Introduction </li></ul><ul><li>User interface design </li></ul><ul><ul><li>GUI building blocks </li></ul></ul><ul><ul><li>GUI structures </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Good design / bad design </li></ul></ul><ul><ul><li>Usability levels </li></ul></ul><ul><li>User-centered design </li></ul><ul><ul><li>Principles and ideals </li></ul></ul><ul><ul><li>The process </li></ul></ul>
  13. 13. Basic Model of HCI Computer input Computation output Intro | UI Design | Usability | User-centered
  14. 14. Types of User Interfaces Graphical User Interface (GUI) Command Line Voice activated interfaces Intro | UI Design | Usability | User-centered
  15. 15. GUI Model Computer input Computation output Mouse : {x  0..1024, y  0..768} Keyboard : {I  {A..Z, 1..0,...}} Screen : {(x,y)  Z 2 } Intro | UI Design | Usability | User-centered
  16. 16. GUI Components: Simple Input <ul><li>What is the type of information received by each input field? </li></ul><ul><li>What’s the effect? </li></ul>Intro | UI Design | Usability | User-centered Text field Button Text area Link
  17. 17. Simple GUI components: Choosers <ul><li>What is the difference between a radio button and a check box? </li></ul><ul><li>What is the choice domain and the choice range of each component? </li></ul>Intro | UI Design | Usability | User-centered Combo box Slider Radio button Checkbox
  18. 18. Larger Constructs Pages (in Web-based systems) Windows (in Desktop-based systems) Intro | UI Design | Usability | User-centered
  19. 19. Composing components Tabs Areas of reference List Intro | UI Design | Usability | User-centered
  20. 20. Actions Context Task Consequences Intro | UI Design | Usability | User-centered
  21. 21. Designing Interface Elements (top-down) <ul><li>User flow: take the user aspect with the use-case model </li></ul><ul><li>Storyboard: </li></ul><ul><ul><li>Find compositions of actions / information </li></ul></ul><ul><ul><li>Find relations between compositions </li></ul></ul><ul><li>Detailed view: </li></ul><ul><ul><li>Refine each composition to the component level </li></ul></ul><ul><li>Check and integrate </li></ul>Use Case Intro | UI Design | Usability | User-centered
  22. 22. The use case model Intro | UI Design | Usability | User-centered
  23. 23. User flow <ul><li>Integrate use-case scenarios from the user perspective </li></ul>Intro | UI Design | Usability | User-centered
  24. 24. Storyboard Intro | UI Design | Usability | User-centered
  25. 25. Detailed View Intro | UI Design | Usability | User-centered
  26. 26. Agenda <ul><li>Introduction </li></ul><ul><li>User interface design </li></ul><ul><ul><li>GUI building blocks </li></ul></ul><ul><ul><li>GUI structures </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Good design / bad design </li></ul></ul><ul><ul><li>Usability levels </li></ul></ul><ul><li>User-centered design </li></ul><ul><ul><li>Principles and ideals </li></ul></ul><ul><ul><li>The process </li></ul></ul>
  27. 27. Good UI design vs. bad design <ul><li>What makes a good design different from a bad design? </li></ul><ul><li>In order to answer this question we will define the concept of usability. </li></ul>Intro | UI Design | Usability | User-centered
  28. 28. Which of these apps is easy to use? Intro | UI Design | Usability | User-centered
  29. 29. Good design <ul><li>Recognizable </li></ul><ul><li>Simple </li></ul><ul><li>Clear purpose </li></ul><ul><li>Learnable </li></ul><ul><li>Safe </li></ul><ul><li>Flexible </li></ul><ul><li>Robust </li></ul><ul><li>Good Metaphors </li></ul><ul><li>... </li></ul>Intro | UI Design | Usability | User-centered
  30. 30. Recognizable interfaces Pretty, or smart, is not necessarily Usable Intro | UI Design | Usability | User-centered
  31. 31. Patterns <ul><li>Design patterns in HCI are a good way to explore suggestions for good design </li></ul><ul><li>We would look at some patterns: </li></ul><ul><ul><li>Wizard (for simplicity) </li></ul></ul><ul><ul><li>Contextual help (for learnable interface) </li></ul></ul><ul><ul><li>Go back to a safe place </li></ul></ul><ul><ul><li>Shortcuts (for flexible) </li></ul></ul><ul><ul><li>Undo (for robustness) </li></ul></ul>Intro | UI Design | Usability | User-centered
  32. 32. Wizard <ul><li>Problem: </li></ul><ul><ul><li>The user wants to achieve a single goal but several decisions need to be made. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Take the user through the entire task one step at the time. </li></ul></ul>Intro | UI Design | Usability | User-centered
  33. 33. Contextual Help <ul><li>Problem: </li></ul><ul><ul><li>Users may need help regarding specific tasks, but would spend a lot of energy searching for it. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Place help in the context of the given task. </li></ul></ul>Intro | UI Design | Usability | User-centered
  34. 34. Computers can be SCARY Sometimes an innocent user gets into a state she don’t want to be in… And then, the terror!!! Intro | UI Design | Usability | User-centered
  35. 35. Solution <ul><li>Provide a way to go back to a checkpoint of the user's choice. </li></ul>The &quot;Home&quot; button and the “Back” Clicking the Logo in Web sites Intro | UI Design | Usability | User-centered
  36. 36. Shortcuts <ul><li>Problem: </li></ul><ul><ul><li>Power users need faster ways to execute operations than novice users </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Create shortcuts for power operations, using keyboard, combinations, icons, special menus etc... </li></ul></ul>Intro | UI Design | Usability | User-centered
  37. 37. Undo <ul><li>Problem: </li></ul><ul><ul><li>The user might regret executing some operation. </li></ul></ul><ul><ul><li>Asking the user for confirmation after executing each operation will make the interaction unusable. </li></ul></ul><ul><li>Solution: </li></ul><ul><ul><li>Enable the user to undo her operations, after they were executed. </li></ul></ul>Intro | UI Design | Usability | User-centered
  38. 38. Usability levels Component Application Project Intro | UI Design | Usability | User-centered
  39. 39. Component Level <ul><li>Familiar to use </li></ul><ul><li>Gives feedback </li></ul><ul><li>Reduces errors </li></ul><ul><li>Satisfies a given task </li></ul><ul><li>Readable </li></ul><ul><li>Self explaining </li></ul>Intro | UI Design | Usability | User-centered
  40. 40. Application Level <ul><li>Accessible </li></ul><ul><li>Gives sense of place </li></ul><ul><li>Easy to navigate in </li></ul><ul><li>Handles errors </li></ul><ul><li>Realistic Scenarios </li></ul><ul><li>Personalized </li></ul>Intro | UI Design | Usability | User-centered
  41. 41. Project Level <ul><li>Answers real needs </li></ul><ul><li>Answers current needs </li></ul><ul><li>Generates value </li></ul><ul><li>Communicate with all organization's units </li></ul>Intro | UI Design | Usability | User-centered
  42. 42. Agenda <ul><li>Introduction </li></ul><ul><li>User interface design </li></ul><ul><ul><li>GUI building blocks </li></ul></ul><ul><ul><li>GUI structures </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Good design / bad design </li></ul></ul><ul><ul><li>Usability levels </li></ul></ul><ul><li>User-centered design </li></ul><ul><ul><li>Principles and ideals </li></ul></ul><ul><ul><li>The process </li></ul></ul>
  43. 43. User Centered Design <ul><li>The objective is to create a design process that would increase the usability of the product </li></ul><ul><li>Three principles: </li></ul><ul><ul><li>Finding the user’s context of the product </li></ul></ul><ul><ul><li>Iterative process, including ongoing tests and revisions </li></ul></ul><ul><ul><li>Participatory Design - Users become members of the design team </li></ul></ul>Initiation Requirement Design Specification Implementation Testing Classic : User is involved here UCD : User is involved here Intro | UI Design | Usability | User-centered
  44. 44. Where are the differences <ul><li>Requirements gathering stage: </li></ul><ul><ul><li>Talk / view users </li></ul></ul><ul><ul><li>Identifying personas </li></ul></ul><ul><li>Specification stage: </li></ul><ul><ul><li>Interface prototyping </li></ul></ul><ul><ul><li>Usability expert analysis </li></ul></ul><ul><ul><li>Heuristic Evaluation </li></ul></ul><ul><li>Design / Implementation </li></ul><ul><ul><li>Usability Lab </li></ul></ul><ul><ul><li>Log Analysis </li></ul></ul>Intro | UI Design | Usability | User-centered
  45. 45. Requirements stage <ul><li>Talk to users </li></ul><ul><ul><li>Interview them in order to discover user’s culture, requirements, expectations, etc. </li></ul></ul><ul><li>Watch the users </li></ul><ul><ul><li>At work </li></ul></ul><ul><ul><li>See how they use their existing systems </li></ul></ul><ul><ul><li>See what they do not use </li></ul></ul>Intro | UI Design | Usability | User-centered
  46. 46. Identifying Personas <ul><li>Personas are hypothetical archetypes of actual users </li></ul><ul><li>By identifying a small set of personas, we can: </li></ul><ul><ul><li>make the users seem more real </li></ul></ul><ul><ul><li>Judge the importance of features </li></ul></ul><ul><ul><li>Look at the: </li></ul></ul><ul><ul><ul><li>Usage frequency </li></ul></ul></ul><ul><ul><ul><li>Competency </li></ul></ul></ul><ul><ul><ul><li>... </li></ul></ul></ul>Intro | UI Design | Usability | User-centered Taken from http :// www . w3 . org / WAI / redesign / personas
  47. 47. Evaluation at the requirements stage Intro | UI Design | Usability | User-centered Cognitive Walkthrough The user “imagines” the system, by going with the interviewer through its stages and actions Focus Group The ideas of the new system are presented to a group of potential users.
  48. 48. Prototyping <ul><li>Brainstorm </li></ul><ul><li>Rough interface design </li></ul><ul><li>Application walkthrough </li></ul>Specification Low fidelity paper prototypes Intro | UI Design | Usability | User-centered
  49. 49. Prototyping – Intermediate Stages <ul><li>Fine tune interface design </li></ul><ul><li>Screen design </li></ul><ul><li>Heuristic evaluation and redesign </li></ul>Design Medium fidelity prototypes Intro | UI Design | Usability | User-centered
  50. 50. Evaluation at the specification / design Intro | UI Design | Usability | User-centered Guided Walkthrough Guiding and questioning the users while they perform specific tasks. Usability Lab Testing the prototypes by actual users. Good for: finding unexpected problems and process refinement.
  51. 51. Evaluation with the actual system <ul><li>Log analysis may be used to: </li></ul><ul><ul><li>Identifying actual usage patterns </li></ul></ul><ul><ul><li>Effectiveness of processes, and components </li></ul></ul><ul><li>Benefits: </li></ul><ul><ul><li>Real statistical information </li></ul></ul><ul><ul><li>Real-time information </li></ul></ul>Intro | UI Design | Usability | User-centered Taken from http :// www . clickdensity . com
  52. 52. Summary <ul><li>Usability is important: </li></ul><ul><ul><li>Changing the registration interface at eBay had increased success rate from 16% to 68%. Sales went up in 84M$. </li></ul></ul><ul><li>User interface design </li></ul><ul><ul><li>Components, storyboard, maps </li></ul></ul><ul><li>Usability </li></ul><ul><ul><li>Familiar, rules, patterns </li></ul></ul><ul><li>User-centered design </li></ul><ul><ul><li>Involve the users </li></ul></ul><ul><ul><li>Evaluate early and often </li></ul></ul>
  53. 53. References <ul><li>Bad design: </li></ul><ul><ul><li>http :// homepage . mac . com / bradster / iarchitect / shame . htm </li></ul></ul><ul><li>Patterns: </li></ul><ul><ul><li>http://www.welie.com/patterns/index.php </li></ul></ul><ul><ul><li>COMMON GROUND: A Pattern Language for Human-Computer Interface Design, Jenifer Tidwell, http:// www.mit.edu/~jtidwell/common_ground_onefile.html </li></ul></ul><ul><li>Interaction Design: </li></ul><ul><ul><li>User Interface Design, Prototyping, and Evaluation ( UC Berkeley Extension Summer Engineering Institute ) http://guir.berkeley.edu/courses/SummerHCI02/ </li></ul></ul><ul><ul><li>http://www.interaction-design.org/ </li></ul></ul><ul><ul><li>http://www.useit.com/ </li></ul></ul>

×