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.

Penser l'expérience utilisateur mobile (Paris Web 2013)

13,360 views

Published on

Comment penser une interaction homme-machine par essence dégradée? Qui n’existe que dans le mouvement, la rupture, l’attente?

Les écrans et leurs contextes d’utilisation nous forcent à modifier nos réflexes de conception pour être au plus proche des besoins et usages réels. Pour y parvenir, et en décortiquant les contraintes inhérentes à la mobilité et à ses supports, cette conférence aborde les concepts à avoir en tête lorsque l’on conçoit une expérience utilisateur mobile.

Published in: Design
  • Excellente présentation. Bravo.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • .
    Bonjour. Vraiment pertinent ton récapitulatif là. Merci.
    ... Et ceci n'est pas du Spam,... tu peux jeter un œil à une App qui s'appelle SimpleDifferent ( c'est un website builder ) ... et tu y trouveras beaucoup d'illustration de ce que tu décris là, mais aussi sans doute des problèmes inédits aux solutions perfectibles ... tupeux aussi comparer la même chose sur iPhone et sur iPad ... Size matters ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Penser l'expérience utilisateur mobile (Paris Web 2013)

  1. 1. Penser l'expérience utilisateur mobile Amélie Boucher, Paris Web 2013
  2. 2. @amelieboucher
  3. 3. que dit l UX du mobile ?
  4. 4. l usager pour la promesse de la mobilité et de l intimité avec ses écrans fait des concessions énormes
  5. 5. Notre job n est pas (seulement) de fournir une belle expérience utilisateur
  6. 6. C'est (aussi) travailler sur les moments dégradés de l expérience
  7. 7. I • Une expérience de l'attente et de la rupture II • Une expérience avec l'efficience comme dette III • S'exerçant sur un écran réduit, mouvant
  8. 8. I. Une expérience de l'attente et de la rupture
  9. 9. le paradoxe de la mobilité bienvenue en l'an 2000
  10. 10. Qu'est-ce que l'attente ?
  11. 11. ce que Fraisse & Orsini nomment la conduite temporelle : " l'activité n'est plus dirigée vers l'acte à accomplir mais vers l'adaptation au délai. " Etude des conduites temporelles. I. L'attenteIn: L'année psychologique. 1955 vol. 55, n°1. pp. 27-39.
  12. 12. "nécessite de rester prêt à l'acte, sans passer à l'acte, et sans s'en laisser détourner... "
  13. 13. Or les usagers sont très volatiles encore plus en situation de mobilité, et d'autant plus qu ils ont le choix
  14. 14. "More than one-quarter say they will visit a competitor site (28%) or not trust the website (27%) if the site takes too long to load." SOASTA 2013 Website and Mobile App Report
  15. 15. que peut y faire le designer ?
  16. 16. temps d'attente réel temps d'attente perçu
  17. 17. Conseils pour réduire le temps d'attente perçu
  18. 18. principe de gestion de l'attente Attendre avant d'entrer dans le système semble plus long qu'attendre une fois entré dans le système
  19. 19. re-bonjour les splash screens !
  20. 20. Le temps d'attente perçu augmente avec : La criticité ou sensibilité de l'information recherchée
  21. 21. RATP
  22. 22. RATP
  23. 23. SKYPE
  24. 24. SHAZAM
  25. 25. SHAZAM
  26. 26. SHAZAM
  27. 27. SHAZAM
  28. 28. Le temps d'attente perçu augmente avec : Un contexte d'utilisation stressant
  29. 29. GOOGLE MAPS
  30. 30. Le temps d'attente perçu augmente avec : La répétition de l'attente
  31. 31. METEO FRANCE
  32. 32. D'autant plus crucial que l'expérience mobile est une expérience de la rupture
  33. 33. METEO FRANCE
  34. 34. METEO FRANCE
  35. 35. NATIONAL GEOGRAPHIC
  36. 36. Simuler l'entrée dans le système en affichant le maximum de choses
  37. 37. Utiliser les squelettes d'écran pour donner l'impression d'avancer
  38. 38. SPOTIFY
  39. 39. SPOTIFY
  40. 40. INSTAGRAM
  41. 41. INSTAGRAM
  42. 42. INSTAGRAM
  43. 43. INSTAGRAM
  44. 44. GOOGLE MAPS
  45. 45. Un compromis entre image et réduction du temps d'attente perçu
  46. 46. VOYAGES SNCF
  47. 47. Permettre d'utiliser des fonctions avant le chargement du contenu
  48. 48. IA WRITER
  49. 49. IA WRITER
  50. 50. MOVES
  51. 51. Simuler l'immédiateté …et parier que tout fonctionnera comme convenu
  52. 52. INSTAGRAM
  53. 53. INSTAGRAM
  54. 54. principe de gestion de l'attente Une attente occupée paraît moins longue qu'une attente inoccupée
  55. 55. que ça bouge !
  56. 56. MONOPRIX
  57. 57. Eviter que l'utilisateur regarde l'horloge tourner
  58. 58. Détourner l'attention du loader
  59. 59. GOOGLE DRIVE
  60. 60. GOOGLE DRIVE
  61. 61. GOOGLE DRIVE
  62. 62. GOOGLE DRIVE
  63. 63. GOODREADS
  64. 64. donner de l'info précise
  65. 65. TRANSIT
  66. 66. PATH
  67. 67. MONOPRIX
  68. 68. MONOPRIX
  69. 69. IBOTTA
  70. 70. IBOTTA
  71. 71. principe de gestion de l'attente Une attente en milieu confortable semble moins longue qu'une attente en milieu inconfortable
  72. 72. design émotionnel de l'attente
  73. 73. que ça parle à l'usager
  74. 74. EASYJET
  75. 75. EASYJET
  76. 76. ETSY
  77. 77. ETSY
  78. 78. LETTERPRESS
  79. 79. NESS
  80. 80. NESS
  81. 81. NESS
  82. 82. NESS
  83. 83. AIRBNB
  84. 84. AIRBNB
  85. 85. AIRBNB
  86. 86. AIRBNB
  87. 87. AIRBNB
  88. 88. AIRBNB
  89. 89. AIRBNB
  90. 90. De la variété dans les patienteurs
  91. 91. PINTEREST
  92. 92. PINTEREST
  93. 93. PINTEREST
  94. 94. POLAR
  95. 95. POLAR
  96. 96. POLAR
  97. 97. POLAR
  98. 98. POLAR
  99. 99. POLAR
  100. 100. POLAR
  101. 101. POLAR
  102. 102. Savoir aussi prendre le temps... quand j'ai le temps
  103. 103. WWF
  104. 104. Savoir aussi prendre le temps... quand c'est peu coûteux et peu fréquent
  105. 105. YUMMLY
  106. 106. YUMMLY
  107. 107. YUMMLY
  108. 108. YUMMLY
  109. 109. Gérer l'attente... ou l'éviter ?
  110. 110. II. L'efficience comme dette
  111. 111. J'ai besoin d'aller vite du fait du contexte, du fait de la tâche... et d'autant plus que l'expérience se répète
  112. 112. CALENDRIER
  113. 113. CALENDRIER
  114. 114. Moins de clics... Mais pas sur tout !
  115. 115. L'efficience à tout prix a souvent un coût en termes de charge écran
  116. 116. TRIPLOG
  117. 117. Nécessite de bien connaître la tâche car demande de faire des choix
  118. 118. Quel est le coeur de fonction de mon outil ?
  119. 119. Les options de navigation doivent être choisies pour optimiser l'efficience sur les fonctions clés, quitte à la réduire sur les autres
  120. 120. Left panel ou menus accessibles via une icône
  121. 121. COUPLE Avantage : Occupe peu de place à l'écran Inconvénient : Cache les fonctions
  122. 122. COUPLE À utiliser quand… Le menu est long
  123. 123. COUPLE À utiliser quand… L'architecture est plate (pas ou peu de hiérarchie)
  124. 124. COUPLE À utiliser pour… Des services où l'usager fait défiler un flux d'actus
  125. 125. WUNDERLIST À utiliser quand… Un fort besoin de concentration sur le contenu consulté
  126. 126. WUNDERLIST À utiliser quand… Le contenu est roi
  127. 127. PICA PICA À utiliser pour… Des options de type "filtres"
  128. 128. COUPLE À utiliser pour… Des options auxquelles on s'attend
  129. 129. À utiliser pour… Des fonctions secondaires COUPLE
  130. 130. À utiliser pour… Des fonctions secondaires MAILBOX
  131. 131. Menu visible en permanence (Tab bar, onglets, boutons)
  132. 132. DAILYMOTION Avantage : Toujours visible, fort pouvoir suggestif Inconvénient : Occupe beaucoup de place à l'écran
  133. 133. INSTAGRAM À utiliser quand… Un besoin d'efficience fort (accès immédiat)
  134. 134. FOODSPOTTING À utiliser quand… Un fort besoin de suggérer
  135. 135. SPOTIFY À utiliser quand… Peu d'items à proposer
  136. 136. POLAR À utiliser quand… Peu de problématiques de place à l'écran
  137. 137. EVERNOTE À utiliser quand… Des passages fréquents d'un item à un autre
  138. 138. PINTEREST Un compromis L'affichage du menu dépendant du moment d'interaction
  139. 139. TED BOOKS Un compromis L'affichage du menu dépendant du moment d'interaction
  140. 140. TED BOOKS Un compromis L'affichage du menu dépendant du moment d'interaction
  141. 141. TED BOOKS Un compromis L'affichage du menu dépendant du moment d'interaction
  142. 142. TED BOOKS Un compromis L'affichage du menu dépendant du moment d'interaction
  143. 143. aller jusqu'au bout de ces choix
  144. 144. LA CHAINE METEO
  145. 145. III. Des écrans réduits, en mouvement
  146. 146. De petits écrans… Où le moindre détail prend plus d'importance
  147. 147. "Mobile is a magnifying lens for your usability problems."
  148. 148. JOSH CLARK, TAPWORTHY
  149. 149. Loi du point focal (Gestalt theory)
  150. 150. Vasily Kandinsky , Komposition 8 (Composition 8), July, 1923
  151. 151. devient point focal ce qui se différencie du reste à l écran
  152. 152. THE EATERY
  153. 153. APPEL
  154. 154. PINTEREST
  155. 155. Hiérarchisation des call-to-action
  156. 156. VINE
  157. 157. TWITTER
  158. 158. faciliter le travail d attention sélective visant à inhiber les distracteurs
  159. 159. Ne pas reposer que sur la lecture du libellé
  160. 160. Hiérarchisation des contenus
  161. 161. TRANSIT
  162. 162. MOVES
  163. 163. amelie@ergolab.net @amelieboucher

×