12 user behavior patterns from famous book "Design Interface", and 10 design principles which designer must know. These principles are based on user behavior patterns, so you can use them to design UX efficiently.

1. User behavior patterns
&
Design principles
Vu Phuong Hoang
2015/08

2. 1. User behavior patterns
 Bad news: Everyone is unique!

3. 1. User behavior patterns
 Bad news: Everyone is unique!
 Good news: Some user’s behaviors are predictable!

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

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

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

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

8. 1.1. Safe exploration

9. 1.1. Safe exploration

10. 1.1. Safe exploration

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

12. 1.2. Instant gratification
Auto-focus to text field

13. 1.2. Instant gratification
 Tell user what to do first
 Blank page should be designed
well
 User should feel it easy to do

14. 1.2. Instant gratification

15. 1.2. Instant gratification

16. 1.2. Instant gratification

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

18. 1.3. Satisficing
Search Engine CTR in 2006

19. 1.3. Satisficing
Search Engine CTR in 2014

20. 1.3. Satisficing

21. 1.3. Satisficing

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

23. 1.4. Changes in midstream

24. 1.4. Changes in midstream

25. 1.5. Deferred choices
 User wants simple decisions first
 Leave advanced options later
 Applications:
 Reduce choices (hover controls, controls on
demands...)
 Good default values

26. 1.5. Deferred choices

27. 1.5. Deferred choices

28. 1.5. Deferred choices

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

30. 1.6. Incremental construction

31. 1.6. Incremental construction
 Auto update item quantity
 Auto calculate gold cost

32. 1.6. Incremental construction

33. 1.7. Habitutation
 “That gesture works everywhere else, why not here ?”
 Keep the consistency
 Applications:
 Keep the buttons layout
 Respect common consistency

34. 1.7. Habitutation
 Microsoft Office keeps the consistency between products

35. 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
 ...

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

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

38. 1.8. Spatial memory
 Button orders are maintained
 Color orders are maintained

39. 1.8. Spatial memory

40. 1.8. Spatial memory

41. 1.9. Prospective memory
 User can’t remember lot of things
 Help user to remind himself
 Applications:
 Notification
 Bookmark
 Recent documents

42. 1.9. Prospective memory

43. 1.9. Prospective memory

44. 1.9. Prospective memory

45. 1.9. Prospective memory

46. 1.10. Streamlined repetition
 “How many times I need to do this again ?”
 Help user to repeat action(s) quickly
 Applications:
 Macro
 Copy

47. 1.10. Streamlined repetition

48. 1.10. Streamlined repetition

49. 1.10. Streamlined repetition

50. 1.10. Streamlined repetition

51. 1.11. Keyboard only
 “I don’t want to switch between keyboard and mouse”
 Add keyboard support
 Applications:
 Keyboard shortcut
 Tab key support

52. 1.11. Keyboard only

53. 1.11. Keyboard only

54. 1.11. Keyboard only

55. 1.11. Keyboard only

56. 1.11. Keyboard only

57. 1.11. Keyboard only

58. 1.12. Other people’s advice
 User wants to know feedback from other users
 Applications:
 Comments
 Links from review articles
 Help

59. 1.12. Other people’s advice

60. 1.12. Other people’s advice

61. 1.12. Other people’s advice

62. 1.12. Other people’s advice

63. BREAK

64. 2. Design principles
 Psychologists and designers have observed users for
hundreds of years

65. 2. Design principles
 Eye tracking is a part of their diffcult work

66. 2. Design principles
 Their works took a lot of time and effort

67. Standing on shoulders of giants

68. But pick your giant carefully !!!

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

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

71. 2.1. Ockham’s Razor
Sign up increased by
300%

72. 2.1. Ockham’s Razor

73. 2.1. Ockham’s Razor

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

76. 2.2. Hick’s law

77. 2.2. Hick’s law

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

79. 2.3. Fitts’s law

80. 2.3. Fitts’s law
• Big buttons are easy to click
• But not too big

81. 2.3. Fitts’s law
• Responsive design

83. 2.3. Fitts’s law (Visual flow)

84. 2.3. Fitts’s law

85. 2.3. Fitts’s law

86. 2.3. Fitts’s law

87. 2.3. Fitts’s law

88. 2.3. Fitts’s law

89. 2.4. Pareto principle
 First said by Vilfredo Pareto in 1896
 Application:
 Find them (20%), fix or utilize them

90. 2.4. Pareto principle

91. 2.4. Pareto principle

92. 2.4. Pareto principle
 Know where to put main content

93. “The page fold”

94. 2.4. Pareto principle
 Above the fold: 80.3%
 Below the fold: 19.7%

95.  Show “best” items first
 Sofa checking:
Rows Fixations / item
1-2
5-10
3-4 2-4
5-8 1
9-13 <=1

96. 2.4. Pareto principle

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

98. 2.5. Rule of thirds

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

104. 2.6. Mental model

105. 2.6. Mental model

106. 2.6. Mental model

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

108. 2.7. Miller’s law

109. 2.7. Miller’s law

110. 2.7. Miller’s law
 Reduce visible choices to 7 ± 2
 Help them to remember

111. 2.7. Miller’s law

112. 2.8. Feedback
 User should know about something happened, is
happening or will be able to happen.
 Application:
 Show interactions

113. 2.8. Feedback
 Help user to fill
forms

114. 2.8. Feedback

115. 2.8. Feedback

116. 2.8. Feedback

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

118. 2.9. Golden ratio

119. 2.9. Golden ratio

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

122. Any questions?