• 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
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    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