Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to User Experience and User Interface Design: A One-Hour Crash Course

41,372 views

Published on

A one-hour crash course on UX design and User Interface Design. I talk about methods for understanding users (contextual inquiry, diary studies, bodystorming), basic design principles (layout, color, mental models, grid), rapid prototyping (building user interfaces quickly, paper prototypes), and evaluation (heuristic evaluation).

Published in: Design
  • Page not found for the link on slide 77
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Introduction to User Experience and User Interface Design: A One-Hour Crash Course

  1. 1. ©2009CarnegieMellonUniversity:1 Introduction to User Experience and User Interface Design A One Hour Crash Course Jason Hong
  2. 2. ©2014CarnegieMellonUniversity:2 What is User Experience (UX)? Understand Design Build Evaluate
  3. 3. ©2014CarnegieMellonUniversity:3 Understanding People • Let’s say we want to design a new web- based system for <insert here>_ • How can we understand what people do? • How can we understand what people want? • How can we understand what people know? • Rather than assuming we know the above, what can we do to quickly understand?
  4. 4. ©2014CarnegieMellonUniversity:4
  5. 5. ©2014CarnegieMellonUniversity:5
  6. 6. ©2014CarnegieMellonUniversity:6
  7. 7. ©2014CarnegieMellonUniversity:7
  8. 8. ©2014CarnegieMellonUniversity:8 Applying These Ideas • Most important takeaway here is to understand “you are not the user” – Being able to take a step back and try to put self in user’s shoes is a big step • Asking people what they want only goes so far – What people say vs what people do
  9. 9. ©2014CarnegieMellonUniversity:9 What is User Experience (UX)? Understand Design Build Evaluate
  10. 10. ©2014CarnegieMellonUniversity:10 Design • What are effective screen layouts? • What are good use of colors? • How can we leverage design patterns? • How to design to prevent errors? • How to match the way people think? • … much, much more
  11. 11. ©2014CarnegieMellonUniversity:11 How Might You Fix This?
  12. 12. ©2014CarnegieMellonUniversity:12 Preventing Errors • Defensive Design
  13. 13. ©2014CarnegieMellonUniversity:13 What’s Wrong Here?
  14. 14. ©2014CarnegieMellonUniversity:14 Preventing Errors http://www.youtube.com/watch?v=pPKymEC_Hss
  15. 15. ©2014CarnegieMellonUniversity:15 How to Prevent This Problem?
  16. 16. ©2014CarnegieMellonUniversity:16 Fitts’ Law • Things that are closer and bigger are faster and easier to hit (and vice versa) • Ex. Windows menus vs. Mac menus – Note different placing, what effect is there?
  17. 17. ©2014CarnegieMellonUniversity:17 Good Example of Fitts’ Law
  18. 18. ©2014CarnegieMellonUniversity:18 Another Fitts’ Law Example
  19. 19. ©2014CarnegieMellonUniversity:19 Example: Bad Use of Color • What does this image show?
  20. 20. ©2014CarnegieMellonUniversity:20 Example: Good Use of Color • Why is the left’s color choice poor? What makes the right side better?
  21. 21. ©2014CarnegieMellonUniversity:21 How Do People Believe How Things Work? • Mental models describe how a person thinks something works • Incorrect mental models can make things very hard to understand and use
  22. 22. ©2014CarnegieMellonUniversity:22
  23. 23. ©2014CarnegieMellonUniversity:23 Lighting Example at CMU
  24. 24. ©2014CarnegieMellonUniversity:24 • Users create a model from what they hear from others, past experiences, and usage – interactions with system image Every System has Three Different Mental Models System Image (Your implementation) User Interactions System feedback Design Model (How you intend the system to work) User Model (How users think the system works)
  25. 25. ©2014CarnegieMellonUniversity:25 Mental Models • People inevitably build models of how things work – Ex. me and my car – Ex. children & computers – Ex. maps of New York
  26. 26. ©2014CarnegieMellonUniversity:26 Mental Models Impact Security • Ex. visibility in Facebook – Suppose you have a private Facebook album, but tag someone. Can that person see it or not? • Ex. app stores – All apps are vetted by Google, so they are all safe to download. Correct?
  27. 27. ©2014CarnegieMellonUniversity:27 Using Mental Models • Predictability most immediate criteria
  28. 28. ©2014CarnegieMellonUniversity:28 Using Mental Models • Another unclear model. A lot of people probably hit the button under “Yes”. • That clearly doesn’t work, based on the drawn arrow.
  29. 29. ©2014CarnegieMellonUniversity:29 Using Mental Models • CMU’s sign up page for emergency text alerts • What do you think happens if you hit “Enter”?
  30. 30. ©2014CarnegieMellonUniversity:30 Using Mental Models
  31. 31. ©2014CarnegieMellonUniversity:31 Example: How to Login?
  32. 32. ©2014CarnegieMellonUniversity:32 Example: How to Login?
  33. 33. ©2014CarnegieMellonUniversity:33 Use Design Patterns • Basic idea: lots of well-known, good solutions already exist • Find that solution, don’t re-invent wheel • Examples for WAWF: – High-Visibility Action Buttons – Above the Fold
  34. 34. ©2014CarnegieMellonUniversity:34
  35. 35. ©2014CarnegieMellonUniversity:35
  36. 36. ©2014CarnegieMellonUniversity:36
  37. 37. ©2014CarnegieMellonUniversity:37 Navigation Bar Pattern
  38. 38. ©2014CarnegieMellonUniversity:38 Advanced ecommerce Completing tasks Page layouts Search Page-level navigation Speed The mobile web Our patterns organized by group Site genres Navigational framework Home page Content management Trust and credibility Basic ecommerce Pattern Groups
  39. 39. ©2014CarnegieMellonUniversity:39 Example: What’s Wrong Here?
  40. 40. ©2014CarnegieMellonUniversity:40 Example: What’s Wrong Here?
  41. 41. ©2014CarnegieMellonUniversity:41 Use a Grid to Align Things
  42. 42. ©2014CarnegieMellonUniversity:42 Use a Grid to Align Things Example Grid – Amazon (1/3)
  43. 43. ©2014CarnegieMellonUniversity:43
  44. 44. ©2014CarnegieMellonUniversity:44 Example Grid (for print)
  45. 45. ©2014CarnegieMellonUniversity:45 Example Grid (for print)
  46. 46. ©2014CarnegieMellonUniversity:46 Applying These Ideas • Preventing errors (easy) – Defensive design, Fitts’ Law • Good use of colors (moderate) – Best tip: find existing color palettes • Mental models (moderate) • Design patterns (moderate) – Definitely do this, don’t re-invent wheel • Grid (moderate) – Even basic grid can improve things
  47. 47. ©2014CarnegieMellonUniversity:47 What is User Experience (UX)? Understand Design Build Evaluate
  48. 48. ©2014CarnegieMellonUniversity:48 Build • How can we build and test things faster? • Core idea: – Build and test cheap prototypes first – Find and fix bugs earlier in cycle – Fail fast • Almost every creative field does this
  49. 49. ©2014CarnegieMellonUniversity:49 Early Nintendo Wii Prototypes
  50. 50. ©2014CarnegieMellonUniversity:50 Early Nintendo Wii Prototypes
  51. 51. ©2014CarnegieMellonUniversity:51 Early Nintendo Wii Prototypes
  52. 52. ©2014CarnegieMellonUniversity:52 Rough Storyboarding
  53. 53. ©2014CarnegieMellonUniversity:53
  54. 54. ©2014CarnegieMellonUniversity:54
  55. 55. ©2014CarnegieMellonUniversity:55
  56. 56. ©2014CarnegieMellonUniversity:56
  57. 57. ©2014CarnegieMellonUniversity:57
  58. 58. ©2014CarnegieMellonUniversity:58
  59. 59. ©2014CarnegieMellonUniversity:59 We Can Apply These Same Ideas for Interfaces
  60. 60. ©2014CarnegieMellonUniversity:60
  61. 61. ©2014CarnegieMellonUniversity:61 Avoid Pixel Perfect High- Fidelity Prototypes Early On • High-fidelity prototypes – tend to waste time on small details that aren’t important in early stages of design – people tend to focus narrowly on one design with high-fidelity tools – tend to get low-level feedback, again not useful in early stages of design
  62. 62. ©2014CarnegieMellonUniversity:62 The Basic Materials for Low-Fi • Large, heavy, white paper (11 x 17) • 5x8 in. index cards • Post-its • Tape, stick glue, correction tape • Pens & markers (many colors & sizes) • Overhead transparencies • Scissors, X-acto knives
  63. 63. ©2014CarnegieMellonUniversity:63 from “Prototyping for Tiny Fingers” by Rettig
  64. 64. ©2014CarnegieMellonUniversity:64
  65. 65. ©2014CarnegieMellonUniversity:65 ESP
  66. 66. ©2014CarnegieMellonUniversity:66 Good Tool: Balsamiq • Create and test UI wireframes quickly • Can’t focus on fonts, alignment, colors
  67. 67. ©2014CarnegieMellonUniversity:67 Good Tool: Balsamiq
  68. 68. ©2014CarnegieMellonUniversity:68 Applying These Ideas • Don’t start with code • Don’t start with photoshop – Takes too long to build, hard to make changes • Goal: Build and test interfaces cheaply, quickly, and effectively – Fail fast – Rapid iteration
  69. 69. ©2014CarnegieMellonUniversity:69 What is User Experience (UX)? Understand Design Build Evaluate
  70. 70. ©2014CarnegieMellonUniversity:70 Evaluate • How can we tell if our designs are working? • Before deploying – User tests – Heuristic evaluation – Cognitive walkthrough – Sensors – more • After deploying – QA feedback – Log analysis – A/B testing – more
  71. 71. ©2014CarnegieMellonUniversity:71 Case Study: Game Testing for Fun in Halo 3 • http://www.wired.com/gaming/virtualworlds/maga zine/15-09/ff_halo
  72. 72. ©2014CarnegieMellonUniversity:72 Case Study: Game Testing for Fun in Halo 3 After each session Pagulayan analyzes the data for patterns... For example, he produces snapshots of where players are located in the game at various points in time — five minutes in, one hour in, eight hours in — to show how they are advancing. If they're going too fast, the game might be too easy; too slow, and it might be too hard.
  73. 73. ©2014CarnegieMellonUniversity:73 Case Study: Game Testing for Fun in Halo 3 He can also generate a map showing where people are dying, to identify any topographical features that might be making a battle onerous. And he can produce charts that detail how players died
  74. 74. ©2014CarnegieMellonUniversity:74 Case Study: Game Testing for Fun in Halo 3 • At first the designers couldn't figure out how to fix this problem. But then Griesemer stumbled on an elegant hack: He made the targeting reticule turn red when enemies were in range, subtly communicating to players when their shots were likely to hit home. It worked. • Last week 52 percent of players gave the Jungle level a 5 out of 5 rating for "fun," and another 40 percent rated it a 4.
  75. 75. ©2014CarnegieMellonUniversity:75 Where People get Lost in Halo
  76. 76. ©2014CarnegieMellonUniversity:76 Heuristic Evaluation • Cheap, fast, effective in practice – My personal favorite • Basic idea: review a user interfaces, look at list of heuristics, and see where interface does (or not) comply – Which heuristic it violates less important than finding a (potential) usability problem
  77. 77. ©2014CarnegieMellonUniversity:77 Heuristics H2-1: Visibility of System Status searching database for matches • Keep users informed what is going on • Example: response time – 0.1 sec: no special indicators needed, why? – 1.0 sec: user tends to lose track of data – 10 sec: max. duration if user to stay focused on action – for longer delays, use progress bars
  78. 78. ©2014CarnegieMellonUniversity:78 Heuristics H2-2: Match Bet. System & Real World • Speak the users’ language • Follow conventions • Old example: Mac desktop – Dragging disk to trash • Deletes it or ejects it? • Fixed in Mac OS X
  79. 79. ©2014CarnegieMellonUniversity:79 Heuristics H2-2: Match Bet. System & Real World
  80. 80. ©2014CarnegieMellonUniversity:80 Heuristics H2-2: Match Bet. System & Real World
  81. 81. ©2014CarnegieMellonUniversity:81 Heuristics H2-2: Match Bet. System & Real World
  82. 82. ©2014CarnegieMellonUniversity:82 Heuristics H2-3: User Control and Freedom • Make it easy to fix mistakes – Exits for mistakes, undo, redo • Example: Wizards – must respond to question before next step – good for infrequent task (ex. network config) – not for common tasks
  83. 83. ©2014CarnegieMellonUniversity:83 Heuristics H2-4: Consistency and Standards • Consistent with self? • Consistent with platform standards?
  84. 84. ©2014CarnegieMellonUniversity:84 Heuristics H2-5 Error Prevention H2-6 Recognition over Recall • Recall – Info from memory • Recognition – Ex. menu items – Ex. icons – Ex. labels – Ex. examples
  85. 85. ©2014CarnegieMellonUniversity:85 Heuristics H2-5 Error Prevention H2-6 Recognition over Recall Make objects, actions, options, and directions visible or easily retrievable
  86. 86. ©2014CarnegieMellonUniversity:86 Heuristics H2-7: Flexibility and efficiency of use • Accelerators for experts – Ex. gestures, keyboard shortcuts • Allow users to tailor frequent actions – Ex. macros
  87. 87. ©2014CarnegieMellonUniversity:87 Heuristics H2-8: Aesthetic and Minimalist Design • Elements should be aligned and grouped • No irrelevant information • (Use a grid)
  88. 88. ©2014CarnegieMellonUniversity:88 Heuristics H2-9: Help users recognize, diagnose, and recover from errors • Error messages in plain language • Precisely indicate the problem • Constructively suggest a solution
  89. 89. ©2014CarnegieMellonUniversity:89 Heuristics H2-9: Help users recognize, diagnose, and recover from errors
  90. 90. ©2014CarnegieMellonUniversity:90 Heuristics H2-9: Help users recognize, diagnose, and recover from errors
  91. 91. ©2014CarnegieMellonUniversity:91 Heuristics H2-10: Help and documentation • Easy to search • Focused on the user’s task • List concrete steps to carry out • Not too long
  92. 92. ©2014CarnegieMellonUniversity:92
  93. 93. ©2014CarnegieMellonUniversity:93 Recap of Heuristics • H2-1: Visibility of system status • H2-2: Match between system & real world • H2-3: User control & freedom • H2-4: Consistency & standards • H2-5: Error prevention • H2-6: Recognition rather than recall • H2-7: Flexibility and efficiency of use • H2-8: Aesthetic and minimalist design • H2-9: Help users recognize, diagnose, and recover from errors • H2-10: Help and documentation
  94. 94. ©2014CarnegieMellonUniversity:94 Most Important Ideas • Understand – You are not the user • Design – Mental models – Use design patterns, don’t re-invent • Build – Build and test cheap prototypes • Evaluation – Heuristic Evaluation
  95. 95. ©2014CarnegieMellonUniversity:95 Other Resources
  96. 96. ©2014CarnegieMellonUniversity:96 Other Resources
  97. 97. ©2014CarnegieMellonUniversity:97
  98. 98. ©2014CarnegieMellonUniversity:98 Why is Good Design Important?
  99. 99. ©2014CarnegieMellonUniversity:99 Good Example of Fitts’ Law

×