Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

[UX Series] 3 - User behavior patterns and design principles

1.189 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

[UX Series] 3 - User behavior patterns and design principles

  1. 1. User behavior patterns & Design principles Vu Phuong Hoang 2015/08
  2. 2. 1. User behavior patterns  Bad news: Everyone is unique!
  3. 3. 1. User behavior patterns  Bad news: Everyone is unique!  Good news: Some user’s behaviors are predictable!
  4. 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. 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. 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. 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. 8. 1.1. Safe exploration
  9. 9. 1.1. Safe exploration
  10. 10. 1.1. Safe exploration
  11. 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. 12. 1.2. Instant gratification Auto-focus to text field
  13. 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. 14. 1.2. Instant gratification
  15. 15. 1.2. Instant gratification
  16. 16. 1.2. Instant gratification
  17. 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. 18. 1.3. Satisficing Search Engine CTR in 2006
  19. 19. 1.3. Satisficing Search Engine CTR in 2014
  20. 20. 1.3. Satisficing
  21. 21. 1.3. Satisficing
  22. 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. 23. 1.4. Changes in midstream
  24. 24. 1.4. Changes in midstream
  25. 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. 26. 1.5. Deferred choices
  27. 27. 1.5. Deferred choices
  28. 28. 1.5. Deferred choices
  29. 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. 30. 1.6. Incremental construction
  31. 31. 1.6. Incremental construction  Auto update item quantity  Auto calculate gold cost
  32. 32. 1.6. Incremental construction
  33. 33. 1.7. Habitutation  “That gesture works everywhere else, why not here ?”  Keep the consistency  Applications:  Keep the buttons layout  Respect common consistency
  34. 34. 1.7. Habitutation  Microsoft Office keeps the consistency between products
  35. 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. 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. 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. 38. 1.8. Spatial memory  Button orders are maintained  Color orders are maintained
  39. 39. 1.8. Spatial memory
  40. 40. 1.8. Spatial memory
  41. 41. 1.9. Prospective memory  User can’t remember lot of things  Help user to remind himself  Applications:  Notification  Bookmark  Recent documents
  42. 42. 1.9. Prospective memory
  43. 43. 1.9. Prospective memory
  44. 44. 1.9. Prospective memory
  45. 45. 1.9. Prospective memory
  46. 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. 47. 1.10. Streamlined repetition
  48. 48. 1.10. Streamlined repetition
  49. 49. 1.10. Streamlined repetition
  50. 50. 1.10. Streamlined repetition
  51. 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. 52. 1.11. Keyboard only
  53. 53. 1.11. Keyboard only
  54. 54. 1.11. Keyboard only
  55. 55. 1.11. Keyboard only
  56. 56. 1.11. Keyboard only
  57. 57. 1.11. Keyboard only
  58. 58. 1.12. Other people’s advice  User wants to know feedback from other users  Applications:  Comments  Links from review articles  Help
  59. 59. 1.12. Other people’s advice
  60. 60. 1.12. Other people’s advice
  61. 61. 1.12. Other people’s advice
  62. 62. 1.12. Other people’s advice
  63. 63. BREAK
  64. 64. 2. Design principles  Psychologists and designers have observed users for hundreds of years
  65. 65. 2. Design principles  Eye tracking is a part of their diffcult work
  66. 66. 2. Design principles  Their works took a lot of time and effort
  67. 67. Standing on shoulders of giants
  68. 68. But pick your giant carefully !!!
  69. 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. 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. 71. 2.1. Ockham’s Razor Sign up increased by 300%
  72. 72. 2.1. Ockham’s Razor
  73. 73. 2.1. Ockham’s Razor
  74. 74. 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
  75. 75. 2.2. Hick’s law
  76. 76. 2.2. Hick’s law
  77. 77. 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
  78. 78. 2.3. Fitts’s law
  79. 79. 2.3. Fitts’s law • Big buttons are easy to click • But not too big
  80. 80. 2.3. Fitts’s law • Responsive design
  81. 81. 2.3. Fitts’s law (Visual flow)
  82. 82. 2.3. Fitts’s law
  83. 83. 2.3. Fitts’s law
  84. 84. 2.3. Fitts’s law
  85. 85. 2.3. Fitts’s law
  86. 86. 2.3. Fitts’s law
  87. 87. 2.4. Pareto principle  First said by Vilfredo Pareto in 1896  Application:  Find them (20%), fix or utilize them
  88. 88. 2.4. Pareto principle
  89. 89. 2.4. Pareto principle
  90. 90. 2.4. Pareto principle  Know where to put main content
  91. 91. “The page fold”
  92. 92. 2.4. Pareto principle  Above the fold: 80.3%  Below the fold: 19.7%
  93. 93.  Show “best” items first  Sofa checking: Rows Fixations / item 1-2 5-10 3-4 2-4 5-8 1 9-13 <=1
  94. 94. 2.4. Pareto principle
  95. 95. 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.
  96. 96. 2.5. Rule of thirds
  97. 97. 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
  98. 98. 2.6. Mental model
  99. 99. 2.6. Mental model
  100. 100. 2.6. Mental model
  101. 101. 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
  102. 102. 2.7. Miller’s law
  103. 103. 2.7. Miller’s law
  104. 104. 2.7. Miller’s law  Reduce visible choices to 7 ± 2  Help them to remember
  105. 105. 2.7. Miller’s law
  106. 106. 2.8. Feedback  User should know about something happened, is happening or will be able to happen.  Application:  Show interactions
  107. 107. 2.8. Feedback  Help user to fill forms
  108. 108. 2.8. Feedback
  109. 109. 2.8. Feedback
  110. 110. 2.8. Feedback
  111. 111. 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.
  112. 112. 2.9. Golden ratio
  113. 113. 2.9. Golden ratio
  114. 114. 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.
  115. 115. Any questions?

×