Successfully reported this slideshow.
Your SlideShare is downloading. ×

Fundamental principles of Usability and User Centred Design

More Related Content

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 process Intro | 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 definition Intro | UI Design | Usability | User-centered 3
  4. 4. Why is Usability Important? 1. The fate of 2. The Apple the world iPhone Intro | 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 results Intro | 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 iPhone Intro | UI Design | Usability | User-centered 7
  8. 8. Focus on Usability and Design Intro | UI Design | Usability | User-centered 8
  9. 9. The implications of usability Intro | 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 output Intro | UI Design | Usability | User-centered 13
  14. 14. Types of User Interfaces Graphical User Command Line Voice activated Interface (GUI) interfaces Intro | 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 List Intro | UI Design | Usability | User-centered 19
  20. 20. Actions Task Context Consequences Intro | 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 integrate Intro | UI Design | Usability | User-centered 21
  22. 22. The use case model Intro | UI Design | Usability | User-centered 22
  23. 23. User flow • Integrate use-case scenarios from the user perspective Intro | 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 Message Intro | UI Design | Usability | User-centered 24
  25. 25. Detailed View Intro | 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 Usable Intro | 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 user's choice. The "Home" button Clicking the Logo in and the “Back” Web sites Intro | 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 Project Intro | UI Design | Usability | User-centered 38
  39. 39. Component Level • Familiar to use • Gives feedback • Reduces errors • Satisfies a given task • Readable • Self explaining Intro | UI Design | Usability | User-centered 39
  40. 40. Application Level • Accessible • Gives sense of place • Easy to navigate in • Handles errors • Realistic Scenarios • Personalized Intro | UI Design | Usability | User-centered 40
  41. 41. Project Level • Answers real needs • Answers current needs • Generates value • Communicate with all organization's units Intro | 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 here Intro | 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 Analysis Intro | 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 use Intro | 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/personas Intro | 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 actions Intro | UI Design | Usability | User-centered 47
  48. 48. Prototyping • Brainstorm Specification • Rough interface design • Application walkthrough Low fidelity paper prototypes Intro | UI Design | Usability | User-centered 48
  49. 49. Prototyping – Intermediate Stages • Fine tune interface design • Screen design • Heuristic evaluation and redesign Design Medium fidelity prototypes Intro | 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.com Intro | 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

×