...

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

by amelieboucher

on

Report

Category:

Design

Download: 0

Comment: 0

8,355

views

Comments

Description

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.
Download Penser l'expérience utilisateur mobile (Paris Web 2013)

Transcript

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