Penser
l'expérience utilisateur mobile
Amélie Boucher, Paris Web 2013
@amelieboucher
que dit l UX du mobile ?
l usager
pour la promesse de la mobilité et de l intimité avec ses écrans
fait des concessions énormes
Notre job
n est pas (seulement) de fournir
une belle expérience utilisateur
C'est (aussi) travailler
sur les moments dégradés
de l expérience
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...
I.
Une expérience
de l'attente et de la rupture
le paradoxe de la mobilité
bienvenue en l'an 2000
Qu'est-ce que l'attente ?
ce que Fraisse & Orsini nomment
la conduite temporelle :
" l'activité n'est plus dirigée vers l'acte à accomplir
mais vers...
"nécessite de rester prêt à l'acte, sans passer
à l'acte, et sans s'en laisser détourner... "
Or les usagers sont très volatiles
encore plus en situation de mobilité,
et d'autant plus qu ils ont le choix
"More than one-quarter say they will visit a competitor
site (28%) or not trust the website (27%) if the site
takes too lo...
que peut y faire le designer ?
temps d'attente
réel
temps d'attente
perçu
Conseils
pour réduire
le temps d'attente perçu
principe de gestion de l'attente
Attendre avant d'entrer dans le système
semble plus long
qu'attendre une fois entré dans ...
re-bonjour
les splash screens !
Le temps d'attente perçu
augmente avec :
La criticité ou sensibilité de
l'information recherchée
RATP
RATP
SKYPE
SHAZAM
SHAZAM
SHAZAM
SHAZAM
Le temps d'attente perçu
augmente avec :
Un contexte d'utilisation stressant
GOOGLE MAPS
Le temps d'attente perçu
augmente avec :
La répétition de l'attente
METEO FRANCE
D'autant plus crucial que
l'expérience mobile est une
expérience de la rupture
METEO FRANCE
METEO FRANCE
NATIONAL GEOGRAPHIC
Simuler l'entrée dans le système
en affichant le maximum de choses
Utiliser les squelettes d'écran
pour donner l'impression d'avancer
SPOTIFY
SPOTIFY
INSTAGRAM
INSTAGRAM
INSTAGRAM
INSTAGRAM
GOOGLE MAPS
Un compromis entre image et
réduction du temps d'attente perçu
VOYAGES SNCF
Permettre d'utiliser des fonctions
avant le chargement du contenu
IA WRITER
IA WRITER
MOVES
Simuler l'immédiateté
…et parier que tout fonctionnera
comme convenu
INSTAGRAM
INSTAGRAM
principe de gestion de l'attente
Une attente occupée
paraît moins longue
qu'une attente inoccupée
que ça bouge !
MONOPRIX
Eviter que l'utilisateur
regarde l'horloge tourner
Détourner l'attention du loader
GOOGLE DRIVE
GOOGLE DRIVE
GOOGLE DRIVE
GOOGLE DRIVE
GOODREADS
donner de l'info précise
TRANSIT
PATH
MONOPRIX
MONOPRIX
IBOTTA
IBOTTA
principe de gestion de l'attente
Une attente en milieu confortable
semble moins longue
qu'une attente en milieu inconforta...
design émotionnel
de l'attente
que ça parle à l'usager
EASYJET
EASYJET
ETSY
ETSY
LETTERPRESS
NESS
NESS
NESS
NESS
AIRBNB
AIRBNB
AIRBNB
AIRBNB
AIRBNB
AIRBNB
AIRBNB
De la variété
dans les patienteurs
PINTEREST
PINTEREST
PINTEREST
POLAR
POLAR
POLAR
POLAR
POLAR
POLAR
POLAR
POLAR
Savoir aussi prendre le temps...
quand j'ai le temps
WWF
Savoir aussi prendre le temps...
quand c'est peu coûteux
et peu fréquent
YUMMLY
YUMMLY
YUMMLY
YUMMLY
Gérer l'attente...
ou l'éviter ?
II.
L'efficience comme dette
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
CALENDRIER
CALENDRIER
Moins de clics...
Mais pas sur tout !
L'efficience à tout prix
a souvent un coût
en termes de charge écran
TRIPLOG
Nécessite de bien connaître la tâche
car demande de faire des choix
Quel est le coeur de fonction
de mon outil ?
Les options de navigation
doivent être choisies pour optimiser
l'efficience sur les fonctions clés, quitte à
la réduire su...
Left panel ou menus
accessibles via une icône
COUPLE
Avantage :
Occupe
peu de place
à l'écran
Inconvénient :
Cache les
fonctions
COUPLE
À utiliser quand…
Le menu est long
COUPLE
À utiliser quand…
L'architecture est plate (pas ou peu de hiérarchie)
COUPLE
À utiliser pour…
Des services où l'usager fait défiler un flux d'actus
WUNDERLIST
À utiliser quand…
Un fort besoin de concentration sur le contenu consulté
WUNDERLIST
À utiliser quand…
Le contenu est roi
PICA PICA
À utiliser pour…
Des options de type "filtres"
COUPLE
À utiliser pour…
Des options auxquelles on s'attend
À utiliser pour…
Des fonctions secondaires
COUPLE
À utiliser pour…
Des fonctions secondaires
MAILBOX
Menu visible en permanence
(Tab bar, onglets, boutons)
DAILYMOTION
Avantage :
Toujours visible,
fort pouvoir
suggestif
Inconvénient :
Occupe
beaucoup de
place à l'écran
INSTAGRAM
À utiliser quand…
Un besoin d'efficience fort (accès immédiat)
FOODSPOTTING
À utiliser quand…
Un fort besoin de suggérer
SPOTIFY
À utiliser quand…
Peu d'items à proposer
POLAR
À utiliser quand…
Peu de problématiques de place à l'écran
EVERNOTE
À utiliser quand…
Des passages fréquents d'un item à un autre
PINTEREST
Un compromis
L'affichage du menu dépendant du moment d'interaction
TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction
TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction
TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction
TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction
aller jusqu'au bout de ces choix
LA CHAINE METEO
III.
Des écrans réduits,
en mouvement
De petits écrans…
Où le moindre détail
prend plus d'importance
"Mobile is a magnifying lens for your
usability problems."
JOSH CLARK, TAPWORTHY
Loi du point focal
(Gestalt theory)
Vasily Kandinsky , Komposition 8 (Composition 8), July, 1923
devient point focal
ce qui se différencie du reste
à l écran
THE EATERY
APPEL
PINTEREST
Hiérarchisation
des call-to-action
VINE
TWITTER
faciliter le travail
d attention sélective
visant à inhiber les distracteurs
Ne pas reposer que sur
la lecture du libellé
Hiérarchisation
des contenus
TRANSIT
MOVES
amelie@ergolab.net
@amelieboucher
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)
Prochain SlideShare
Chargement dans…5
×

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

12 224 vues

Publié le

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.

Publié dans : Design
2 commentaires
33 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
12 224
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 104
Actions
Partages
0
Téléchargements
153
Commentaires
2
J’aime
33
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×