[ux series] 3 - user behavior patterns and design principles

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?