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

  • View

  • Download

Embed Size (px)


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).

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

  • 2009CarnegieMellonUniversity:1 Introduction to User Experience and User Interface Design A One Hour Crash Course Jason Hong
  • 2014CarnegieMellonUniversity:2 What is User Experience (UX)? Understand Design Build Evaluate
  • 2014CarnegieMellonUniversity:3 Understanding People Lets say we want to design a new web- based system for _ 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?
  • 2014CarnegieMellonUniversity:4
  • 2014CarnegieMellonUniversity:5
  • 2014CarnegieMellonUniversity:6
  • 2014CarnegieMellonUniversity:7
  • 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 users shoes is a big step Asking people what they want only goes so far What people say vs what people do
  • 2014CarnegieMellonUniversity:9 What is User Experience (UX)? Understand Design Build Evaluate
  • 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
  • 2014CarnegieMellonUniversity:11 How Might You Fix This?
  • 2014CarnegieMellonUniversity:12 Preventing Errors Defensive Design
  • 2014CarnegieMellonUniversity:13 Whats Wrong Here?
  • 2014CarnegieMellonUniversity:14 Preventing Errors
  • 2014CarnegieMellonUniversity:15 How to Prevent This Problem?
  • 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?
  • 2014CarnegieMellonUniversity:17 Good Example of Fitts Law
  • 2014CarnegieMellonUniversity:18 Another Fitts Law Example
  • 2014CarnegieMellonUniversity:19 Example: Bad Use of Color What does this image show?
  • 2014CarnegieMellonUniversity:20 Example: Good Use of Color Why is the lefts color choice poor? What makes the right side better?
  • 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
  • 2014CarnegieMellonUniversity:22
  • 2014CarnegieMellonUniversity:23 Lighting Example at CMU
  • 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)
  • 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
  • 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?
  • 2014CarnegieMellonUniversity:27 Using Mental Models Predictability most immediate criteria
  • 2014CarnegieMellonUniversity:28 Using Mental Models Another unclear model. A lot of people probably hit the button under Yes. That clearly doesnt work, based on the drawn arrow.
  • 2014CarnegieMellonUniversity:29 Using Mental Models CMUs sign up page for emergency text alerts What do you think happens if you hit Enter?
  • 2014CarnegieMellonUniversity:30 Using Mental Models
  • 2014CarnegieMellonUniversity:31 Example: How to Login?
  • 2014CarnegieMellonUniversity:32 Example: How to Login?
  • 2014CarnegieMellonUniversity:33 Use Design Patterns Basic idea: lots of well-known, good solutions already exist Find that solution, dont re-invent wheel Examples for WAWF: High-Visibility Action Buttons Above the Fold
  • 2014CarnegieMellonUniversity:34
  • 2014CarnegieMellonUniversity:35
  • 2014CarnegieMellonUniversity:36
  • 2014CarnegieMellonUniversity:37 Navigation Bar Pattern
  • 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
  • 2014CarnegieMellonUniversity:39 Example: Whats Wrong Here?
  • 2014CarnegieMellonUniversity:40 Example: Whats Wrong Here?
  • 2014CarnegieMellonUniversity:41 Use a Grid to Align Things
  • 2014CarnegieMellonUniversity:42 Use a Grid to Align Things Example Grid Amazon (1/3)
  • 2014CarnegieMellonUniversity:43
  • 2014CarnegieMellonUniversity:44 Example Grid (for print)
  • 2014CarnegieMellonUniversity:45 Example Grid (for print)
  • 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, dont re-invent wheel Grid (moderate) Even basic grid can improve things
  • 2014CarnegieMellonUniversity:47 What is User Experience (UX)? Understand Design Build Evaluate
  • 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
  • 2014CarnegieMellonUniversity:49 Early Nintendo Wii Prototypes
  • 2014CarnegieMellonUniversity:50 Early Nintendo Wii Prototypes
  • 2014CarnegieMellonUniversity:51 Early Nintendo Wii Prototypes
  • 2014CarnegieMellonUniversity:52 Rough Storyboarding
  • 2014CarnegieMellonUniversity:53
  • 2014CarnegieMellonUniversity:54
  • 2014CarnegieMellonUniversity:55
  • 2014CarnegieMellonUniversity:56
  • 2014CarnegieMellonUniversity:57
  • 2014CarnegieMellonUniversity:58
  • 2014CarnegieMellonUniversity:59 We Can Apply