1. Amélie Boucher, BlendWebMix 2015
Concevoir la navigation
sur mobile

2. Design studio

4. 1 Naviguer sur mobile
2 Techniques pour une architecture de l’information
efficace
3 Menu visible ou menu caché ?
4 La navigation par gestes

5. 1.
Qu’est-ce que naviguer,
quelles sont les spécificités
du contexte mobile ?

6. Naviguer…
un plaisir tout relatif

9. Le contexte mobile
est hyper-sensible aux défauts
d’architecture de l’information

10. … pour de nombreuses raisons liées aux
équipements, aux services et aux usages

11. … parce que la vitesse de chargement n’est
pas toujours au rendez-vous
se tromper prend mille fois plus de temps

12. … parce que le contexte mobile
est propice au papillonnage et aux ruptures

13. … parce que la durée des sessions d’usage
peut être extrêmement limitée

14. … parce que le besoin est pressant
(du fait de l’objectif et / ou du contexte de vie)

15. … parce que le contexte attentionnel est dégradé

16. … parce qu’on y observe souvent
de grandes récurrences d’usage
sur-exposition
au défaut d’architecture

17. Bref !
L’utilisateur mobile a cruellement
besoin d’aller vite et bien

18. 2.
Quelques techniques pour
une architecture de l’information efficace

19. architecture plate

20. architecture profonde
+ fréquente en mobile

21. Missions :
Réduire la profondeur pour les usages clés
(travail sur le réel)
Atténuer la perception de profondeur
(travail sur le perçu)

22. Favoriser les usages clés

23. nécessite de faire
des choix, des compromis,
de prioriser

25. … quitte à dévaloriser les usages accessoires

26. Un environnement contraint
est toujours un environnement
qui pousse à faire mieux

27. faciliter la navigation, ce peut aussi être
éviter la navigation

28. LINXO

29. BNP

30. SHAZAM

32. UMBRELLA

33. UMBRELLA

34. travailler sur la réalité de l’architecture,
et pas juste sur sa théorie

35. il faut particulièrement veiller
aux étapes précédant
le premier écran « utile » d’un service

36. comment gérer l’onboarding
(un peu) intelligemment ?

37. À réserver aux éléments stratégiques ou
discriminants pour l’utilisateur
Attention au volume d’informations
En contexte plutôt que précédant l’usage
Avec une porte de sortie si besoin

38. choisir quoi dire
SOUNDCLOUD / ARTE / PINTEREST

39. éviter d’expliquer l’évidence
MES COURSES

40. LE MONDE

41. LA MATINALE

42. en contexte

43. VIVINO / TWITTER / HANGOUTS

44. mais ce n’est pas le format
qui fait la bonne pratique !

45. FOURSQUARE

46. une fois n’est pas coutume,
tout est affaire de mesure.

47. attendre l’engagement dans l’action
avant de sur-proposer

48. “ just in time education ”

49. DO NOTE / BETASERIES / INBOX

50. prévoir des possibilités de
navigation transversale
sauter d’un écran à un autre par un mécanisme de raccourci.

51. la navigation transversale peut être plus ou moins visible
selon son utilité et la récurrence d’usage du service
LE BON COIN

52. LE MONDE

53. jouer sur la perception

54. COLETTE

55. URBAN OUTFITTERS

56. FILECHAT

57. adapter la surface active à la
fréquence de l’action
d’où l’importance des gestes pour
optimiser l’efficience

58. CHRONODRIVE / E.LECLERC DRIVE

59. prévoir une navigation élastique,
s’adaptant aux usages de chacun

60. personnalisation explicite
versus personnalisation implicite

61. INBOX

62. 3.
Menu visible ou menu caché ?

63. INBOX / OUTLOOK

64. Quand utiliser un menu directement visible ?
Lorsque le menu doit avoir un pouvoir suggestif
Lorsque l’utilisateur a un besoin d’efficience fort
Lorsque le menu contient peu d’items
Lorsque vous avez peu de problématiques de place à l’écran
Lorsque l’utilisateur passe souvent d’une rubrique à une autre

65. ARTSY

66. Quand utiliser un menu caché ?
Lorsque le menu ne contient rien de stratégique
Lorsque votre écran par défaut couvre déjà la majorité des
usages
Lorsque l’utilisateur sait ou se doute que la fonctionnalité existe,
de manière générale ou spécifique au service
Lorsque les rubriques seront de toute façon rencontrées par
l’usager dans un flux d’interaction normal
Lorsque la liste des rubriques est longue.

67. INBOX / OUTLOOK

68. THE NY TIMES

69. THE GUARDIAN

70. LA FOURCHETTE / HOOK

71. Le hamburger n’empêche pas d’avoir un rappel des
entrées clés dans le cœur de page
APPLE / PALEOPLATE

72. TRIPLAGENT
Un menu caché peut permettre de hiérarchiser deux menus

73. DROPBOX
meatballs

74. un menu caché fonctionne bien
quand l’utilisateur cherche à
faire quelque chose

75. un menu caché fonctionne moins bien
quand on veut donner une
idée à l’utilisateur

76. bref, le hamburger,
c’est pas forcément mal.

77. un hamburger
choisi et assumé
est
OK

78. … mais il n’a aucun pouvoir suggestif

79. “ in sight, in mind ”
montrer, c’est suggérer

80. cut off design
Couper un objet en n’en montrant qu’une partie,
pour suggérer la suite de l’écran.

81. ANTHROPOLOGIE / PAPIER TIGRE

82. tips pour menu caché
tip #1 : un picto conventionnel

83. tip #2 : un picto visible

84. la visibilité importe plus que la localisation
9 utilisateurs sur 10
appuient sur le picto en
première intention
1 sur 10 en deuxième
stratégie
YAHOO NEWS DIGEST

85. tip #3 : un picto descriptif du contenu s’il est
homogène
UBER

86. tip #4 : accompagner d’un libellé ou d’un
système de notifications
PETIT BATEAU / RATP / COUPLE

87. tip #5 : utiliser « là où je suis » pour indiquer
la présence du menu
PICTURELIFE

88. tip #6 : un flux d’interaction rendant visible le
menu
VSCO

89. pourquoi c’est utile de cacher ?
il y a compétition entre la navigation
et l’espace nécessaire
à la libre expression du contenu.

90. l’utilisateur mobile doit mobiliser
ses capacités d’attention sélective

91. l’effet Cocktail party

92. aider l’utilisateur
à inhiber les distracteurs

93. la notion de
moment d’interaction

94. STELLER

95. LE MONDE

96. 4.
La navigation par gestes

97. quand le brief commence par
“ On veut une application où on swipe ”
…

98. Avantages des gestes :
Libèrent de la place à l’écran
Ne nécessitent pas de visée
Peuvent protéger contre l’erreur
Peuvent donner du sens

99. Les gestes ne nécessitent pas de visée

100. Défaut principal des gestes :
Leur caractère peu découvrable

101. Pour compenser le manque de découvrabilité :
Utiliser des gestes conventionnels
Doubler le geste
Le faire deviner (sursauts et animations, cut-off
design, affichages temporaires, installation de
l’interface via une animation)

102. doubler le geste
mode tap : visible mode geste : invisible
DO NOTE

103. animer pour inciter au geste
LA MATINALE

104. préférer la pédagogie implicite
à la pédagogie explicite

105. TRANQUILIEN

106. ou choisissez vos chevaux de bataille

107. SKETCHES

108. Réserver les gestes aux actions les plus
importantes
Choisir des gestes faciles à réaliser
Attention aux gestes pour se faire plaisir

109. En bref :
Respecter l’utilisateur et son besoin, limiter
les entraves aux usages principaux
Ne pas adopter de solution d’interface toute
faite, mais LA solution adaptée à votre
contexte
Utiliser les gestes en complément
Aller se frotter aux usages réels pour
redescendre sur terre

110. Amélie Boucher, BlendWebMix 2015
merci !