Fundamental principles of Usability and User Centred Design

8,854 views

Published on

Key principles of Usability and UCD.

Fundamental principles of Usability and User Centred Design

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

×