Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Designing the Mobile User Experience

1,617 views

Published on

Mobile UX design

Published in: Internet
  • Be the first to comment

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

×