Introduction to User Experience and User Interface Design: A One-Hour Crash Course
•Download as PPTX, PDF•
21 likes•65,232 views
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).
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to User Experience and User Interface Design: A One-Hour Crash Course
Similar to Introduction to User Experience and User Interface Design: A One-Hour Crash Course (20)
Recently uploaded
Recently uploaded (20)
Introduction to User Experience and User Interface Design: A One-Hour Crash Course
- 1. ©2009CarnegieMellonUniversity:1 Introduction to User Experience and User Interface Design A One Hour Crash Course Jason Hong
- 2. ©2014CarnegieMellonUniversity:2 What is User Experience (UX)? Understand Design Build Evaluate
- 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?
- 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. ©2014CarnegieMellonUniversity:9 What is User Experience (UX)? Understand Design Build Evaluate
- 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. ©2014CarnegieMellonUniversity:11 How Might You Fix This?
- 15. ©2014CarnegieMellonUniversity:15 How to Prevent This Problem?
- 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. ©2014CarnegieMellonUniversity:17 Good Example of Fitts’ Law
- 19. ©2014CarnegieMellonUniversity:19 Example: Bad Use of Color • What does this image show?
- 20. ©2014CarnegieMellonUniversity:20 Example: Good Use of Color • Why is the left’s color choice poor? What makes the right side better?
- 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
- 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. ©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. ©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. ©2014CarnegieMellonUniversity:27 Using Mental Models • Predictability most immediate criteria
- 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. ©2014CarnegieMellonUniversity:29 Using Mental Models • CMU’s sign up page for emergency text alerts • What do you think happens if you hit “Enter”?
- 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
- 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
- 41. ©2014CarnegieMellonUniversity:41 Use a Grid to Align Things
- 42. ©2014CarnegieMellonUniversity:42 Use a Grid to Align Things Example Grid – Amazon (1/3)
- 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. ©2014CarnegieMellonUniversity:47 What is User Experience (UX)? Understand Design Build Evaluate
- 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. ©2014CarnegieMellonUniversity:49 Early Nintendo Wii Prototypes
- 50. ©2014CarnegieMellonUniversity:50 Early Nintendo Wii Prototypes
- 51. ©2014CarnegieMellonUniversity:51 Early Nintendo Wii Prototypes
- 59. ©2014CarnegieMellonUniversity:59 We Can Apply These Same Ideas for Interfaces
- 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. ©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. ©2014CarnegieMellonUniversity:63 from “Prototyping for Tiny Fingers” by Rettig
- 66. ©2014CarnegieMellonUniversity:66 Good Tool: Balsamiq • Create and test UI wireframes quickly • Can’t focus on fonts, alignment, colors
- 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. ©2014CarnegieMellonUniversity:69 What is User Experience (UX)? Understand Design Build Evaluate
- 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. ©2014CarnegieMellonUniversity:71 Case Study: Game Testing for Fun in Halo 3 • http://www.wired.com/gaming/virtualworlds/maga zine/15-09/ff_halo
- 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. ©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. ©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. ©2014CarnegieMellonUniversity:75 Where People get Lost in Halo
- 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. ©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. ©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. ©2014CarnegieMellonUniversity:79 Heuristics H2-2: Match Bet. System & Real World
- 80. ©2014CarnegieMellonUniversity:80 Heuristics H2-2: Match Bet. System & Real World
- 81. ©2014CarnegieMellonUniversity:81 Heuristics H2-2: Match Bet. System & Real World
- 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. ©2014CarnegieMellonUniversity:83 Heuristics H2-4: Consistency and Standards • Consistent with self? • Consistent with platform standards?
- 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. ©2014CarnegieMellonUniversity:85 Heuristics H2-5 Error Prevention H2-6 Recognition over Recall Make objects, actions, options, and directions visible or easily retrievable
- 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. ©2014CarnegieMellonUniversity:87 Heuristics H2-8: Aesthetic and Minimalist Design • Elements should be aligned and grouped • No irrelevant information • (Use a grid)
- 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. ©2014CarnegieMellonUniversity:89 Heuristics H2-9: Help users recognize, diagnose, and recover from errors
- 90. ©2014CarnegieMellonUniversity:90 Heuristics H2-9: Help users recognize, diagnose, and recover from errors
- 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
- 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. ©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
- 98. ©2014CarnegieMellonUniversity:98 Why is Good Design Important?
- 99. ©2014CarnegieMellonUniversity:99 Good Example of Fitts’ Law
Editor's Notes
- I’m Jason Hong, I’m an associate professor in the Human Computer Interaction Institute, part of the School of Computer Science at Carnegie Mellon University. This is a 1-hour crash course in user experience design and user interface design. UX design is a very broad area, so I’m just going to talk about some of the highlights, along with a focus on pragmatics of how you can quickly apply these ideas right now.Contact me at jasonh at cscmuedu
- The current gold standard for understanding people is going out on site and seeing what people are doing, becoming sort of an “apprentice” and getting a deep understanding of their work practices, processes, terminology, and values. This is called a contextual inquiry. This kind of work was inspired by anthropology, where researchers would spend months to understand a group of people, their values, rituals, and ways of thinking.Contextual inquiries are especially important when you (the designer or software engineer) have little experience with the domain at hand. Just interviewing and asking people is still a good first step, but still misses a lot of the underlying context of what really happens and why.This picture shows the Boeing factory floor. We have had some teams from our master’s of HCI program (MHCI) at Carnegie Mellon go visit this factory floor, and shadow workers as they go about doing their work, to get a much deeper first-hand sense of what the workers are doing, how they do it, who talks to whom, what kinds of breakdowns there are, and what kinds of pain points people have.Example Boeing floor, MHCI project 2013 and 2014. See http://www.hcii.cmu.edu/mhci-capstone-project for more examples of our capstone projects.
- Pragmatically, I would say there are two important takeaways here. First, you are not the user. As designers or system developers, we know way too much about how computers work, and how our systems work. It takes a great deal of empathy to be able to take a step back and try to see things from your users’ eyes.Second, we can’t just ask people what they want. People often don’t know, and what people say doesn’t always reflect their behaviors. If you asked people, before remote controls were invented, if they would want one for their TVs, most people would probably say “I’m not that lazy.”
- Here is another (silly) example of preventing errors. This will likely be the stupidest video you see this week, but it’s also a great example of bad design. How might we prevent this?
- Basically, make it harder to hit “Doomsday” button (or far easier to hit Coffee)Examples: add safety locks, increase distance (ie don’t have coffee next to Doomsday button), make coffee button bigger, etc.
- These two examples are examples of Fitts’ Law. The basic idea is that, for any pointing device (mouse, finger, stylus, etc), things that are close and/or big are faster and easier to hit than things that are far and/or small. Simple idea, but lots of surprising examples of this principle in user interfaces.For example, windows menus vs mac menus. How might Fitts’ law play out here?Note that Mac menus are at the edge, and the edge is essentially infinite size. That is, there’s a barrier, and you can’t overshoot it. In contrast, if you watch windows menus, people tend to overshoot it to get there, slow down, overshoot again, and then hit the target (this happens pretty quickly though). So in practice, Mac menus should be faster.
- Another good example of Fitts’ Law. Note that if you mouse over anywhere in the box of “Watch the iCloud video” the entire thing highlights. Much bigger target. Much bigger. Much wow.
- Ok next topic: color.Example from http://www.research.ibm.com/people/l/lloydt/color/color.HTM
- So why is the color choice poor? No mapping of color (note on right how blues are used for water, and greens for land)Color is better if you adjust by saturation (purity) or value (brightness) rather than hue (rough color, ie red, green, blue, orange) for mapping. People can more easily see and compare differences in saturation and value over hue. Also, changes in hue don’t naturally map to a scale, whereas saturation and value do.There is tons more to know about good use of color. For not, the simplest thing to do is to look for existing color palettes, and just those. That should account for the vast majority of your needs for colors. There is also red-green color blindness too. Simplest thing to do is to turn your screens into greyscale, and see if you can see differences.
- Ok next topic: mental models.
- Not only can they see it, apparently that person’s friends can see the tagged image toohttp://rickwash.com/papers/nspw06r-wash.pdf
- It can sometimes be hard to make use of mental models directly. The most immediate thing you can do with mental models is to consider predictability.For example, here is a screenshot from WebEx. We’ve selected “Do not record a teleconference”, but to continue, we have to hit the “Start Recording” button. So we have a conflict in the mental model here.
- Note how broken this interface is, someone actually drew an arrow on it.
- So I signed up for CMU’s text alert system one time. Or rather, I thought I did. It turns out that when you hit “Enter” on the left, it just checks your phone number. I thought I had signed up, but apparently hadn’t.
- Here’s a blurred image of Gmail. I blurred it partly for privacy reasons, but it also demonstrates how strong the visual design is as well. Note how prominent the “Compose” button in the top-left still is, even after blurring. It draws the eye immediately, in large part b/c it’s the most important button and they want you to hit it. Great example of a high-visibility action button. Same with the search button with the magnifying glass at the top.Note that the prominence of these buttons is a relative thing. If there were more red and blues on this screen, it would take away from their visual salience.
- Another high visibility action button. Note how prominent it is, not just by layout, but by color (relative to the rest of the page), as well as the arrow icon inside of the button.
- Look at top of page of Amazon, and bottom of page… same button is shown twice, both above the fold and below the fold. It’s important enough that you want to make sure that people don’t get lost and really click it.
- Another very common design pattern. So familiar to everyone now, you might as well do the same for your web site.
- So one of the most straightforward ways of fixing this problem is by using a grid.
- A consistent grid can make it easier to understand a screen, by making things uniform and clean. By being consistent across screens, it can also make it easier to find things.
- Note how the use of a grid for the New York Times helps improve the readability, makes it easier to find info, etc.Pics from Ed Bott’s web site (though he’s talking about Office ribbon vs layout)http://www.edbott.com/weblog/2011/08/pull-down-menus-versus-the-ribbon/
- Note that it goes from cheap (sketches) to more expensive (physical mockups, foamcore) to more expensive (working prototypes)
- More wii prototypes. I sort of like the big one in the center, I wonder what the big star button would have done.
- Same here for Monsters University. Again, note how it gets progressively more expensive to make changes the further downstream you are.
- Here is a relatively simple mockup of an interface done via sketching. This one shows Ink Chat, doing instant messaging that people could scribble.
- Mockups of iPhones. See how they are just putting mockups on top of a real device.Quick, easy, fast to do, everyone can do it (sales people, designers, software developers, CEOs)
- So this is a relatively simple way of evaluating things: just ask users to rate on a 5-point scale. For Halo 3, they just asked people every so often how much fun they were having.
- Where’s the elevator button? It’s actually in the center island, on the circle, rather than on the wall, like every other elevator in the world
- How to see more Top 10? Not obvious, turns out you mouse over to the right or left side. Doesn’t match any other conventions of web design. Netflix fixed this eventually by showing buttons (see next slide).
- When you mouse over an area, they now show arrows to go left and right
- Yeah, I have to use this system. Note that it prominently says “The interface is not always self-explanatory”, not a good sign.
- Don’t Make Me Thinkhttp://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/ref=sr_1_1The Design of Siteshttp://www.amazon.com/The-Design-Sites-Patterns-Creating/dp/0131345559/ref=sr_1_1
- Universal Methods of Designhttp://www.amazon.com/Universal-Methods-Design-Innovative-Effective/dp/1592537561/ref=sr_1_1Design of Everyday Thingshttp://www.amazon.com/The-Design-Everyday-Things-Expanded/dp/0465050654/
- This example from Alan Cooper, same basic principle