Successfully reported this slideshow.
Your SlideShare is downloading. ×

Designing the Mobile User Experience

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 181 Ad
Advertisement

More Related Content

Advertisement

Designing the Mobile User Experience

  1. 1. Designing the Mobile User Experience Nick Babich, UX Yerevan 2018
  2. 2. 2 @101babich UX Yerevan 2018 DesignbyAramaztKalayjian
  3. 3. Here is what we will cover Why mobile is important Key design considerations The danger of feature creep Mobile trends @101babich UX Yerevan 2018 3
  4. 4. Why mobile? @101babich UX Yerevan 2018 4
  5. 5. UX Yerevan 2018@101babich 5
  6. 6. @101babich UX Yerevan 2018 6
  7. 7. UX Yerevan 2018@101babich 7
  8. 8. @101babich UX Yerevan 2018 8
  9. 9. June 29, 2007 @101babich UX Yerevan 2018 9
  10. 10. What happened? @101babich UX Yerevan 2018 10
  11. 11. UX Yerevan 2018@101babich 11
  12. 12. UX Yerevan 2018@101babich 12
  13. 13. @101babich UX Yerevan 2018 13
  14. 14. Three Key Changes UX Yerevan 2018@101babich 14
  15. 15. #1 UX Yerevan 2018@101babich 15
  16. 16. UX Yerevan 2018@101babich 16
  17. 17. Smartphones @101babich UX Yerevan 2018 17
  18. 18. Smartphones @101babich UX Yerevan 2018 18
  19. 19. Mobile phones @101babich UX Yerevan 2018 19
  20. 20. #2 UX Yerevan 2018@101babich 20
  21. 21. Lets play a game UX Yerevan 2018@101babich 21
  22. 22. 5.1 billion @101babich UX Yerevan 2018 22
  23. 23. 5.1 billion mobile phone users worldwide @101babich UX Yerevan 2018 23
  24. 24. By 2020 we will have 6B adults and 92% will cary smartphones @101babich UX Yerevan 2018 24
  25. 25. 68% @101babich UX Yerevan 2018 25
  26. 26. 68% of time is spent on mobile @101babich UX Yerevan 2018 26
  27. 27. 2 hours, 51 minutes @101babich UX Yerevan 2018 27
  28. 28. 86 hours in month @101babich UX Yerevan 2018 28
  29. 29. @101babich UX Yerevan 2018 29
  30. 30. Universal tool UX Yerevan 2018@101babich 30
  31. 31. Mobile is go-to for problem solving tasks @101babich UX Yerevan 2018 31
  32. 32. People go to mobile first when they need to solve a problem @101babich UX Yerevan 2018 32
  33. 33. #3 UX Yerevan 2018@101babich 33
  34. 34. The concept of mobile app was born UX Yerevan 2018@101babich 34
  35. 35. Mobile apps are modern products @101babich UX Yerevan 2018 35
  36. 36. @101babich UX Yerevan 2018 36
  37. 37. 2.8M 2.2M UX Yerevan 2018@101babich 37
  38. 38. Key Mobile Considerations UX Yerevan 2018@101babich 38
  39. 39. Problem #1 High cognitive load UX Yerevan 2018@101babich 39
  40. 40. Cognitive load, or amount of mental processing power needed to use your app. It affects how easily users find content and complete tasks. @101babich UX Yerevan 2018 40
  41. 41. #1. Visual clutter in UI @101babich UX Yerevan 2018 41
  42. 42. Too many objects competing for user attention @101babich UX Yerevan 2018 42
  43. 43. Solution: Cut out the clutter @101babich UX Yerevan 2018 43
  44. 44. Users have a clear path @101babich UX Yerevan 2018 44
  45. 45. ! Keep content to a minimum (present the user with only what they need to know). ! Keep interface elements to a minimum. A simple design will keep the user at ease with the product. @101babich UX Yerevan 2018 45
  46. 46. Techniques ●Complexity reduction (include only top- priority features) ●Chunking (break tasks into bite-sized chunks) ●Progressive disclosure @101babich UX Yerevan 2018 46
  47. 47. Design by Marvel Chunking (bite-sized chunks) @101babich UX Yerevan 2018 47
  48. 48. Design by Ramotion Progressive disclosure @101babich UX Yerevan 2018 48
  49. 49. #2. Lack of strong visual signifiers @101babich UX Yerevan 2018 49
  50. 50. Visual signifiers indicate the possibility of action or importance of certain UI object @101babich UX Yerevan 2018 50
  51. 51. •Use visual weight to convey importance •Provide feedback on interaction @101babich UX Yerevan 2018 51
  52. 52. Airbnb uses visual weight to convey importance @101babich UX Yerevan 2018 52
  53. 53. Buttons respond on user interaction with appropriate visual feedback @101babich UX Yerevan 2018 53 Image by Vadim Gromov
  54. 54. #3. Using unconventional patterns @101babich UX Yerevan 2018 54
  55. 55. DO NOT reinvent the wheel! @101babich UX Yerevan 2018 55
  56. 56. Solution: Create familiar experience @101babich UX Yerevan 2018 56
  57. 57. Design by Ramotion @101babich UX Yerevan 2018 57 Use familiar navigation components
  58. 58. #3. Lack of help & support @101babich UX Yerevan 2018 58
  59. 59. Can you tell what to do to fix this problem? @101babich UX Yerevan 2018 59
  60. 60. Solution: Design for failure @101babich UX Yerevan 2018 60
  61. 61. Any time you anticipate individual needs, the interaction will be valuable to both company and consumer @101babich UX Yerevan 2018 61
  62. 62. @101babich UX Yerevan 2018 62
  63. 63. #4. Using jargon and technical terms in UI @101babich UX Yerevan 2018 63
  64. 64. Jargon in ‘Home Search’ category @101babich UX Yerevan 2018 64
  65. 65. Commonly used labels in ‘Home Search’ category @101babich UX Yerevan 2018 65
  66. 66. @101babich UX Yerevan 2018 66
  67. 67. #5. Introducing inconsistency in UI design @101babich UX Yerevan 2018 67
  68. 68. ●Visual consistency ●Functional consistency ●External consistency (app is consistent with other products) Three types of consistency @101babich UX Yerevan 2018 68
  69. 69. What to do to make the app consistent ● Respect platform guidelines ● Do not mimic UI elements from other platforms ● Keep the mobile app consistent with the website @101babich UX Yerevan 2018 69
  70. 70. #6. High learning curve during first-time experience @101babich UX Yerevan 2018 70
  71. 71. The average app loses 77% of its daily active users within the first 3 days post-install Research by Andrew Chen @101babich UX Yerevan 2018 71
  72. 72. Solution: Great first impression @101babich UX Yerevan 2018 72
  73. 73. Image by Joshua Porter @101babich UX Yerevan 2018 73
  74. 74. Techniques ● Contextual onboarding ● Progressive disclosure @101babich UX Yerevan 2018 74
  75. 75. @101babich Contextual onboarding in Duolingo app UX Yerevan 2018 75
  76. 76. #7. Bombarding users with permission requests @101babich UX Yerevan 2018 76
  77. 77. @101babich UX Yerevan 2018 77
  78. 78. Solution: Ask for permission in the context of action @101babich UX Yerevan 2018 78
  79. 79. How to ask for permissions Image by Google @101babich UX Yerevan 2018 79
  80. 80. Cluster create context before asking for permissions @101babich UX Yerevan 2018 80
  81. 81. Problem #2 The need of typing UX Yerevan 2018@101babich 81
  82. 82. Typing on a small mobile screen isn’t the most comfortable experience. In fact, it’s often error-prone. @101babich UX Yerevan 2018 82
  83. 83. Solution: Minimize need of typing @101babich UX Yerevan 2018 83
  84. 84. Techniques ●Minimize total number of fields ●Use input masks ●Matching keyboard to the field ●Auto-complete fields ●Inline validation @101babich UX Yerevan 2018 84
  85. 85. Minimize number of fields Image by Luke W @101babich UX Yerevan 2018 85
  86. 86. Provide input masks @101babich UX Yerevan 2018 86
  87. 87. Match the keyboard to the required text input @101babich UX Yerevan 2018 87
  88. 88. Use auto- complete @101babich UX Yerevan 2018 88
  89. 89. Auto- complete paired with AI @101babich UX Yerevan 2018 89
  90. 90. Use inline validation @101babich UX Yerevan 2018 90
  91. 91. Problem #3 Uncomfortable interactions UX Yerevan 2018@101babich 91
  92. 92. #1. Small touch targets @101babich UX Yerevan 2018 92
  93. 93. Design for fingers, not cursors @101babich UX Yerevan 2018 93
  94. 94. 10 x 10 mm is good touch target @101babich UX Yerevan 2018 94
  95. 95. Spacing between elements @101babich UX Yerevan 2018 95
  96. 96. #2. Not considering thumb zone @101babich UX Yerevan 2018 96
  97. 97. @101babich UX Yerevan 2018 97
  98. 98. 49% of people hold their smartphones with one hand @101babich UX Yerevan 2018 98
  99. 99. Consider thumb zone @101babich UX Yerevan 2018 99
  100. 100. #3. Accessibility issues @101babich UX Yerevan 2018 100
  101. 101. 4.5% of the global population experience color-blindness (that is 1 in 12 men and 1 in 200 women) @101babich UX Yerevan 2018 101
  102. 102. @101babich UX Yerevan 2018 102
  103. 103. @101babich UX Yerevan 2018 103
  104. 104. Small typeface @101babich UX Yerevan 2018 104
  105. 105. UX Yerevan 2018@101babich 105
  106. 106. 106
  107. 107. Text should not be smaller than 11 points, even when the user chooses the extra-small text size. @101babich UX Yerevan 2018 107
  108. 108. Be very careful with animations and motion. Try to make animations optional. @101babich UX Yerevan 2018 108
  109. 109. Problem #4 User Journey Blockers UX Yerevan 2018@101babich 109
  110. 110. #1. Too many steps required to achieve a goal @101babich UX Yerevan 2018 110
  111. 111. Solution: Minimize the number of taps @101babich UX Yerevan 2018 111
  112. 112. Biometric authentication Image by Chase Bank @101babich UX Yerevan 2018 112
  113. 113. #2. Blocking user flow @101babich UX Yerevan 2018 113
  114. 114. Design by Vitaly Dulenko Too many interruptions happen along the way @101babich UX Yerevan 2018 114
  115. 115. People use mobile apps to get something done, quickly. They don’t want to be interrupted. @101babich UX Yerevan 2018 115
  116. 116. #3. Unpredictable ‘Back’ button @101babich UX Yerevan 2018 116
  117. 117. Back button should one- step back button @101babich UX Yerevan 2018 117
  118. 118. #4. App does not keep user progress @101babich UX Yerevan 2018 118
  119. 119. Mobile experience is interruptive @101babich UX Yerevan 2018 119
  120. 120. UX Yerevan 2018@101babich 120
  121. 121. #5. Unable to switch device to continue journey @101babich UX Yerevan 2018 121
  122. 122. 37% of users do research on mobile but switch to desktop to complete a purchase @101babich UX Yerevan 2018 122
  123. 123. Solution: Make it possible to save state and continue a journey on other device @101babich UX Yerevan 2018 123
  124. 124. Techniques ●Save for later ●Share the item (email) @101babich UX Yerevan 2018 124
  125. 125. #6. No offline experience @101babich UX Yerevan 2018 125
  126. 126. Pinterest does not cache my existing boards. @101babich UX Yerevan 2018 126
  127. 127. ●Make sure your product works when it isn’t connected to the Internet at all ●Caching data @101babich UX Yerevan 2018 127
  128. 128. Feature Creep UX Yerevan 2018@101babich 128
  129. 129. 129 @101babich UX Yerevan 2018
  130. 130. Hippo Effect @101babich UX Yerevan 2018 130
  131. 131. @101babich UX Yerevan 2018 131
  132. 132. @101babich UX Yerevan 2018 132
  133. 133. More features ≠ More value @101babich UX Yerevan 2018 133
  134. 134. #1 @101babich UX Yerevan 2018 134
  135. 135. KISS @101babich UX Yerevan 2018 135
  136. 136. @101babich UX Yerevan 2018 136
  137. 137. UX Yerevan 2018@101babich 137
  138. 138. Illustration by Anton Nikolov @101babich UX Yerevan 2018 138
  139. 139. #2 @101babich UX Yerevan 2018 139
  140. 140. RPT Model @101babich UX Yerevan 2018 140
  141. 141. R Research P Prototype T Test @101babich UX Yerevan 2018 141
  142. 142. Prototype and validate your design decisions @101babich UX Yerevan 2018 142
  143. 143. @101babich UX Yerevan 2018 143
  144. 144. #3 UX Yerevan 2018@101babich 144
  145. 145. Set a feature list and stuck to it. Don't fall victim to feature creep @101babich UX Yerevan 2018 145
  146. 146. Illustration by Intercom UX Yerevan 2018@101babich 146
  147. 147. Storyboarding can help during feature debates @101babich UX Yerevan 2018 147
  148. 148. @101babich UX Yerevan 2018 Illustration by Chelsea Hostetter 148
  149. 149. Mobile Trends UX Yerevan 2018@101babich 149
  150. 150. @101babich #1 UX Yerevan 2018 150
  151. 151. Augmented Reality (AR) UX Yerevan 2018 151 @101babich UX Yerevan 2018
  152. 152. @101babich Why AR and not VR? UX Yerevan 2018 152
  153. 153. 153UX Yerevan 2018@101babich Using AR Lenses in Snapchat
  154. 154. @101babich UX Yerevan 2018 154
  155. 155. Google Lens feature called style match @101babich UX Yerevan 2018 155
  156. 156. @101babich UX Yerevan 2018 156
  157. 157. @101babich #2 UX Yerevan 2018 157
  158. 158. Artificial Intelligence (AI) 158 @101babich UX Yerevan 2018
  159. 159. @101babich Smarter personalization UX Yerevan 2018 159
  160. 160. @101babich UX Yerevan 2018 160 Google News: keep up with news you care about
  161. 161. @101babich Emotional experience UX Yerevan 2018 161
  162. 162. @101babich UX Yerevan 2018 162 Face tracking and expression analysis in mobile apps Image by FacioMetrics (Facebook)
  163. 163. @101babich UX Yerevan 2018 163 Pplkpr provides recommendations based on our emotions.
  164. 164. 164
  165. 165. @101babich UX Yerevan 2018 165 Image labeling Barcode scanning Text recognition (OCR) Landmark detection Face detection
  166. 166. @101babich #3 UX Yerevan 2018 166
  167. 167. Gestures UX Yerevan 2018 167 @101babich UX Yerevan 2018
  168. 168. 168 @101babich UX Yerevan 2018 Even the most basic interactions with a device are gesture-based now
  169. 169. @101babich UX Yerevan 2018@101babich UX Yerevan 2018 169
  170. 170. @101babich #4 UX Yerevan 2018 170
  171. 171. Rounded corners UX Yerevan 2018 171 @101babich UX Yerevan 2018
  172. 172. @101babich UX Yerevan 2018 172
  173. 173. @101babich #5 UX Yerevan 2018 173
  174. 174. JOMO 174 @101babich UX Yerevan 2018
  175. 175. @101babich UX Yerevan 2018 175
  176. 176. @101babich The Joy of Missing Out UX Yerevan 2018 176
  177. 177. @101babich UX Yerevan 2018 177
  178. 178. 178
  179. 179. UX Yerevan 2018@101babich 179
  180. 180. “Good design is innovative. Good design must be useful. Good design is aesthetic design. Good design makes a product understandable. Good design is honest. Good design is unobtrusive. Good design is long-lasting. Good design is consistent in every detail. Good design is environmentally friendly. And last but not least, good design is as little design as possible.” ― Dieter Rams @101babich UX Yerevan 2018 180
  181. 181. 181 Thank you! @101babich UX Yerevan 2018

×