User behavior patterns&
Design principles
Vu Phuong Hoang2015/08
1. User behavior patterns
Bad news: Everyone is unique!
1. User behavior patterns
Bad news: Everyone is unique!
Good news: Some user’s behaviors are predictable!
1. User behavior patterns
Bad news: Everyone is unique!
Good news: Some user’s behaviors are predictable!
Understanding user’s behavior patterns helps improving
UX efficiently.
1. User behavior patterns
1. Safe exploration
2. Instant gratification
3. Satisficing
4. Changes in midstream
5. Deferred choices
6. Incremental construction
7. Habituation
8. Spatial memory
9. Prospective memory
10. Streamlined repetition
11. Keyboard only
12. Other people’s advice
1.1. Safe exploration
User wants to know that it’s safe and free to try.
So encourage them to try, with a way back.
Applications:
Back buttons
Undo
Applying filters in photo processing apps
1.1. Safe exploration
Back button helps user to jump back. So he can explore
freely without getting lost.
Breadcrumbs helps user to jump back quickly.
1.1. Safe exploration
1.1. Safe exploration
1.1. Safe exploration
1.2. Instant gratification
If his first task can be done in a few seconds, he will be
confident to continue using your product.
So make first tasks stunningly easy.
Applications:
Prepare for empty state
Quick tutorial
1.2. Instant gratification
Auto-focus to text field
1.2. Instant gratification
Tell user what to do first
Blank page should be designed
well
User should feel it easy to do
1.2. Instant gratification
1.2. Instant gratification
1.2. Instant gratification
1.3. Satisficing
User doesn’t need the “best” option, he just needs the
“good enough” option.
Applications:
Simplify the design
Use short, meaningful titles
Show him the “best” options first
1.3. Satisficing
Search Engine CTR in 2006
1.3. Satisficing
Search Engine CTR in 2014
1.3. Satisficing
1.3. Satisficing
1.4. Changes in midstream
User usually changes his short term goal
Let user do multiple things at once
Applications:
Multiple instances
Save
Provide connections
1.4. Changes in midstream
1.4. Changes in midstream
1.5. Deferred choices
User wants simple decisions first
Leave advanced options later
Applications:
Reduce choices (hover controls, controls on
demands...)
Good default values
1.5. Deferred choices
1.5. Deferred choices
1.5. Deferred choices
1.6. Incremental construction
User wants to try different builds
Allow user to change & make it quick to preview
Applications:
Adjusting fonts
Auto calculate based on user’s choice
1.6. Incremental construction
1.6. Incremental construction
Auto update item quantity
Auto calculate gold cost
1.6. Incremental construction
1.7. Habitutation
“That gesture works everywhere else, why not here ?”
Keep the consistency
Applications:
Keep the buttons layout
Respect common consistency
1.7. Habitutation
Microsoft Office keeps the consistency between products
1.7. Habitutation
Keep primary action on the right side because:
It saves time for user
User can use it on mobile with right hand only
...
1.7. Habitutation
Keep primary action on the right side because:
It’s on the end of visual path
Right side indicates forward, left side indicates
backward
1.8. Spatial memory
“That button was here a minute ago, where is it now ?”
Maintain the order
Applications:
Put buttons in fixed order
Let user change the position to suit his needs
1.8. Spatial memory
Button orders are maintained
Color orders are maintained
1.8. Spatial memory
1.8. Spatial memory
1.9. Prospective memory
User can’t remember lot of things
Help user to remind himself
Applications:
Notification
Bookmark
Recent documents
1.9. Prospective memory
1.9. Prospective memory
1.9. Prospective memory
1.9. Prospective memory
1.10. Streamlined repetition
“How many times I need to do this again ?”
Help user to repeat action(s) quickly
Applications:
Macro
Copy
1.10. Streamlined repetition
1.10. Streamlined repetition
1.10. Streamlined repetition
1.10. Streamlined repetition
1.11. Keyboard only
“I don’t want to switch between keyboard and mouse”
Add keyboard support
Applications:
Keyboard shortcut
Tab key support
1.11. Keyboard only
1.11. Keyboard only
1.11. Keyboard only
1.11. Keyboard only
1.11. Keyboard only
1.11. Keyboard only
1.12. Other people’s advice
User wants to know feedback from other users
Applications:
Comments
Links from review articles
Help
1.12. Other people’s advice
1.12. Other people’s advice
1.12. Other people’s advice
1.12. Other people’s advice
BREAK
2. Design principles Psychologists and designers have observed users for
hundreds of years
2. Design principles Eye tracking is a part of their diffcult work
2. Design principles Their works took a lot of time and effort
Standing on shoulders of giants
But pick your giant carefully !!!
2. Design principles
1. Ockham’s razor
2. Hick’s law
3. Fitts’s law
4. Pareto principle
5. Rule of thirds
6. Mental model
7. Miller’s law
8. Feedback
9. Golden ratio
10. Gestalt principle
2.1. Ockham’s Razor
First said by William of Ockham in 1300s
“Simplicity is the ultimate sophistication”
(Leonardo da Vinci)
Application:
If user doesn’t know where to click, tell him
If the background is the distraction, tone it down
2.1. Ockham’s Razor
Sign up increased by 300%
2.1. Ockham’s Razor
2.1. Ockham’s Razor
2.2. Hick’s law
“The time it takes to make a decision
increases as the number of alternatives”
First said by William Edmund Hick in 1950s
Application:
Reduce choices
2.2. Hick’s law
2.2. Hick’s law
2.3. Fitts’s law
“Time user needs to move pointer to the target is
affected by the target size and the distance to the target”
First said by Paul Fitts in 1954
Application:
Enlarge the click area
Put the button at the end of visual path
2.3. Fitts’s law
2.3. Fitts’s law
• Big buttons are easy to click
• But not too big
2.3. Fitts’s law• Responsive design
2.3. Fitts’s law (Visual flow)
2.3. Fitts’s law
2.3. Fitts’s law
2.3. Fitts’s law
2.3. Fitts’s law
2.3. Fitts’s law
2.4. Pareto principle
First said by Vilfredo Pareto in 1896
Application:
Find them (20%), fix or utilize them
2.4. Pareto principle
2.4. Pareto principle
2.4. Pareto principle
Know where to put main content
“The page fold”
2.4. Pareto principle
Above the fold: 80.3%
Below the fold: 19.7%
Show “best” items first
Sofa checking:
Rows Fixations / item
1-2 5-10
3-4 2-4
5-8 1
9-13 <=1
2.4. Pareto principle
2.5. Rule of thirds
Put key elements at
intersection of lines dividing
screen into 3x3 matrix.
First said by John Thomas
Smith in 1797.
2.5. Rule of thirds
2.6. Mental model
It’s significant easier to understand and learn something
new if they can model it off of something they already
understand.
First said by Kenneth Craik in 1943.
Application:
Make them familiar
2.6. Mental model
2.6. Mental model
2.6. Mental model
2.7. Miller’s law
The number of objects an average person can hold in
short term memory is 7 ± 2.
First said by George A. Miller in 1956.
Application:
Menu should have <= 7 items
Make it easy to compare
2.7. Miller’s law
2.7. Miller’s law
2.7. Miller’s law
Reduce visible choices to 7 ± 2
Help them to remember
2.7. Miller’s law
2.8. Feedback
User should know about something happened, is
happening or will be able to happen.
Application:
Show interactions
2.8. Feedback
Help user to fill
forms
2.8. Feedback
2.8. Feedback
2.8. Feedback
2.9. Golden ratio
If height / width ≈ 1.618, then your UI is
visual pleasure.
Exists for at least 2400 years.
First calculated by Michael Maestlin in
1597.
It’s mostly artist’s work.
2.9. Golden ratio
2.9. Golden ratio
2.10. Gestalt principle
The whole is other than the sum of the
parts.
First said by Max Wertheimer in 1910.
It’s complicated! So leave it for next
session.
Any questions?