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.

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 ?

26. 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.

27. "nécessite de rester prêt à l'acte, sans passer
à l'acte, et sans s'en laisser détourner... "

28. Or les usagers sont très volatiles
encore plus en situation de mobilité,
et d'autant plus qu ils ont le choix

29. "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

30. que peut y faire le designer ?

31. temps d'attente
réel
temps d'attente
perçu

32. Conseils
pour réduire
le temps d'attente perçu

33. 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

34. re-bonjour
les splash screens !

38. Le temps d'attente perçu
augmente avec :
La criticité ou sensibilité de
l'information recherchée

39. RATP

40. RATP

41. SKYPE

42. SHAZAM

43. SHAZAM

44. SHAZAM

45. SHAZAM

46. Le temps d'attente perçu
augmente avec :
Un contexte d'utilisation stressant

47. GOOGLE MAPS

48. Le temps d'attente perçu
augmente avec :
La répétition de l'attente

49. METEO FRANCE

50. D'autant plus crucial que
l'expérience mobile est une
expérience de la rupture

51. METEO FRANCE

52. METEO FRANCE

53. NATIONAL GEOGRAPHIC

54. Simuler l'entrée dans le système
en affichant le maximum de choses

55. Utiliser les squelettes d'écran
pour donner l'impression d'avancer

56. SPOTIFY

57. SPOTIFY

58. INSTAGRAM

59. INSTAGRAM

60. INSTAGRAM

63. INSTAGRAM

64. GOOGLE MAPS

65. Un compromis entre image et
réduction du temps d'attente perçu

66. VOYAGES SNCF

67. Permettre d'utiliser des fonctions
avant le chargement du contenu

68. IA WRITER

69. IA WRITER

70. MOVES

71. Simuler l'immédiateté
…et parier que tout fonctionnera
comme convenu

72. INSTAGRAM

73. INSTAGRAM

74. principe de gestion de l'attente
Une attente occupée
paraît moins longue
qu'une attente inoccupée

75. que ça bouge !

76. MONOPRIX

77. Eviter que l'utilisateur
regarde l'horloge tourner

78. Détourner l'attention du loader

79. GOOGLE DRIVE

80. GOOGLE DRIVE

81. GOOGLE DRIVE

82. GOOGLE DRIVE

83. GOODREADS

84. donner de l'info précise

85. TRANSIT

86. PATH

87. MONOPRIX

88. MONOPRIX

89. IBOTTA

90. IBOTTA

91. principe de gestion de l'attente
Une attente en milieu confortable
semble moins longue
qu'une attente en milieu inconfortable

92. design émotionnel
de l'attente

93. que ça parle à l'usager

94. EASYJET

95. EASYJET

96. ETSY

97. ETSY

98. LETTERPRESS

99. NESS

100. NESS

101. NESS

102. NESS

103. AIRBNB

104. AIRBNB

105. AIRBNB

106. AIRBNB

107. AIRBNB

108. AIRBNB

109. AIRBNB

110. De la variété
dans les patienteurs

111. PINTEREST

112. PINTEREST

113. PINTEREST

114. POLAR

115. POLAR

116. POLAR

117. POLAR

118. POLAR

119. POLAR

120. POLAR

121. POLAR

122. Savoir aussi prendre le temps...
quand j'ai le temps

123. WWF

125. Savoir aussi prendre le temps...
quand c'est peu coûteux
et peu fréquent

126. YUMMLY

127. YUMMLY

128. YUMMLY

129. YUMMLY

130. Gérer l'attente...
ou l'éviter ?

131. II.
L'efficience comme dette

132. 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

133. CALENDRIER

134. CALENDRIER

135. Moins de clics...
Mais pas sur tout !

136. L'efficience à tout prix
a souvent un coût
en termes de charge écran

137. TRIPLOG

138. Nécessite de bien connaître la tâche
car demande de faire des choix

139. Quel est le coeur de fonction
de mon outil ?

140. Les options de navigation
doivent être choisies pour optimiser
l'efficience sur les fonctions clés, quitte à
la réduire sur les autres

141. Left panel ou menus
accessibles via une icône

142. COUPLE
Avantage :
Occupe
peu de place
à l'écran
Inconvénient :
Cache les
fonctions

143. COUPLE
À utiliser quand…
Le menu est long

144. COUPLE
À utiliser quand…
L'architecture est plate (pas ou peu de hiérarchie)

145. COUPLE
À utiliser pour…
Des services où l'usager fait défiler un flux d'actus

146. WUNDERLIST
À utiliser quand…
Un fort besoin de concentration sur le contenu consulté

147. WUNDERLIST
À utiliser quand…
Le contenu est roi

148. PICA PICA
À utiliser pour…
Des options de type "filtres"

149. COUPLE
À utiliser pour…
Des options auxquelles on s'attend

150. À utiliser pour…
Des fonctions secondaires
COUPLE

151. À utiliser pour…
Des fonctions secondaires
MAILBOX

152. Menu visible en permanence
(Tab bar, onglets, boutons)

153. DAILYMOTION
Avantage :
Toujours visible,
fort pouvoir
suggestif
Inconvénient :
Occupe
beaucoup de
place à l'écran

154. INSTAGRAM
À utiliser quand…
Un besoin d'efficience fort (accès immédiat)

155. FOODSPOTTING
À utiliser quand…
Un fort besoin de suggérer

156. SPOTIFY
À utiliser quand…
Peu d'items à proposer

157. POLAR
À utiliser quand…
Peu de problématiques de place à l'écran

158. EVERNOTE
À utiliser quand…
Des passages fréquents d'un item à un autre

159. PINTEREST
Un compromis
L'affichage du menu dépendant du moment d'interaction

160. TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction

161. TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction

162. TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction

163. TED BOOKS
Un compromis
L'affichage du menu dépendant du moment d'interaction

164. aller jusqu'au bout de ces choix

165. LA CHAINE METEO

166. III.
Des écrans réduits,
en mouvement

167. De petits écrans…
Où le moindre détail
prend plus d'importance

168. "Mobile is a magnifying lens for your
usability problems."

169. JOSH CLARK, TAPWORTHY

170. Loi du point focal
(Gestalt theory)

171. Vasily Kandinsky , Komposition 8 (Composition 8), July, 1923

172. devient point focal
ce qui se différencie du reste
à l écran

173. THE EATERY

174. APPEL

175. PINTEREST

176. Hiérarchisation
des call-to-action

177. VINE

178. TWITTER

179. faciliter le travail
d attention sélective
visant à inhiber les distracteurs

181. Ne pas reposer que sur
la lecture du libellé

182. Hiérarchisation
des contenus

183. TRANSIT

184. MOVES

185. amelie@ergolab.net
@amelieboucher