©20
09 C
arne
gie
Mel
lon
Univ
ersit
y :
1
Introduction to User Experience andUser Interface DesignA One Hour Crash Course
Jason Hong
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
2
What is User Experience (UX)?
Understand
Design
Build
Evaluate
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
4
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
5
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
6
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
7
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
8Applying 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
9
What is User Experience (UX)?
Understand
Design
Build
Evaluate
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
11
How Might You Fix This?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
12
Preventing Errors
• Defensive Design
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
13
What’s Wrong Here?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
14Preventing Errors
http://www.youtube.com/watch?v=pPKymEC_Hss
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
15How to Prevent This Problem?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
16Fitts’ 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?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
17Good Example of Fitts’ Law
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
18Another Fitts’ Law Example
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
19Example: Bad Use of Color
• What does this image show?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
20Example: Good Use of Color
• Why is the left’s color choice poor?What makes the right side better?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
21How Do People Believe How
Things Work?• Mental models describe
how a person thinkssomething works
• Incorrect mental models can make things very hard to understand and use
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
22
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
23
Lighting Example at CMU
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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 InteractionsSystem feedback
Design Model(How you intend the
system to work)
User Model(How users think the
system works)
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
25Mental Models
• People inevitably build models of how things work– Ex. me and my car– Ex. children & computers– Ex. maps of New York
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
26Mental 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?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
27Using Mental Models
• Predictability most immediate criteria
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
28Using 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.
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
29Using Mental Models
• CMU’s sign up page for emergency text alerts
• What do you think happens if you hit “Enter”?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
30Using Mental Models
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
31
Example: How to Login?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
32
Example: How to Login?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
34
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
35
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
36
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
37Navigation Bar Pattern
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
39
Example: What’s Wrong Here?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
40
Example: What’s Wrong Here?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
41
Use a Grid to Align Things
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
42
Use a Grid to Align ThingsExample Grid – Amazon (1/3)
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
43
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
44Example Grid (for print)
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
45Example Grid (for print)
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
46Applying 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
47
What is User Experience (UX)?
Understand
Design
Build
Evaluate
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
49Early Nintendo Wii Prototypes
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
50Early Nintendo Wii Prototypes
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
51Early Nintendo Wii Prototypes
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
52Rough Storyboarding
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
53
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
54
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
55
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
56
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
57
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
58
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
59We Can Apply These Same
Ideas for Interfaces
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
60
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
61Avoid 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
62The 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
63
from “Prototyping for Tiny Fingers” by Rettig
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
64
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
65
ESP
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
66
Good Tool: Balsamiq
• Create and test UI wireframes quickly
• Can’t focus on fonts, alignment, colors
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
67
Good Tool: Balsamiq
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
68Applying 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
69
What is User Experience (UX)?
Understand
Design
Build
Evaluate
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
71Case Study:
Game Testing for Fun in Halo 3• http://www.wired.com/gaming/virtualworlds/magazi
ne/15-09/ff_halo
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
72Case Study:
Game Testing for Fun in Halo 3After 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.
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
73Case Study:
Game Testing for Fun in Halo 3He 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
74Case 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.
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
75Where People get Lost in Halo
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
76Heuristic 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
77Heuristics
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
78Heuristics
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
79Heuristics
H2-2: Match Bet. System & Real World
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
80Heuristics
H2-2: Match Bet. System & Real World
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
81Heuristics
H2-2: Match Bet. System & Real World
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
82Heuristics
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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
83Heuristics
H2-4: Consistency and Standards
• Consistent with self?• Consistent with platform standards?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
84Heuristics
H2-5 Error PreventionH2-6 Recognition over Recall
• Recall– Info from
memory• Recognition
– Ex. menu items– Ex. icons– Ex. labels– Ex. examples
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
85Heuristics
H2-5 Error PreventionH2-6 Recognition over Recall
Make objects, actions, options, and directions visible or easily retrievable
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
86Heuristics
H2-7: Flexibility and efficiency of use
• Accelerators for experts – Ex. gestures, keyboard shortcuts
• Allow users to tailor frequent actions– Ex. macros
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
87Heuristics
H2-8: Aesthetic and Minimalist Design
• Elements should be aligned and grouped• No irrelevant information• (Use a grid)
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
88Heuristics
H2-9: Help users recognize, diagnose, and recover from errors
• Error messages in plain language• Precisely indicate the problem• Constructively suggest a solution
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
89Heuristics
H2-9: Help users recognize, diagnose, and recover from errors
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
90Heuristics
H2-9: Help users recognize, diagnose, and recover from errors
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
91Heuristics
H2-10: Help and documentation
• Easy to search• Focused on the user’s task• List concrete steps to carry out• Not too long
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
92
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
93Recap 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
94Most 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
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
95Other Resources
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
96Other Resources
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
97
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
98
Why is Good Design Important?
©20
14 C
arne
gie
Mel
lon
Univ
ersit
y :
99Good Example of Fitts’ Law