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

2.
Design studio

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

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

5.
Naviguer…
un plaisir tout relatif

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

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

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

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

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

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

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

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

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

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

16.
architecture plate

17.
architecture profonde
+ fréquente en mobile

18.
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)

19.
Favoriser les usages clés

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

21.
… quitte à dévaloriser les usages accessoires

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

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

24.
LINXO

25.
BNP

26.
SHAZAM

27.
UMBRELLA

28.
UMBRELLA

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

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

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

32.
À 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

33.
choisir quoi dire
SOUNDCLOUD / ARTE / PINTEREST

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

35.
LE MONDE

36.
LA MATINALE

37.
en contexte

38.
VIVINO / TWITTER / HANGOUTS

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

40.
FOURSQUARE

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

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

43.
“ just in time education ”

44.
DO NOTE / BETASERIES / INBOX

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

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

47.
LE MONDE

48.
jouer sur la perception

49.
COLETTE

50.
URBAN OUTFITTERS

51.
FILECHAT

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

53.
CHRONODRIVE / E.LECLERC DRIVE

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

55.
personnalisation explicite
versus personnalisation implicite

56.
INBOX

57.
3.
Menu visible ou menu caché ?

58.
INBOX / OUTLOOK

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

60.
ARTSY

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

62.
INBOX / OUTLOOK

63.
THE NY TIMES

64.
THE GUARDIAN

65.
LA FOURCHETTE / HOOK

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

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

68.
DROPBOX
meatballs

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

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

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

72.
un hamburger
choisi et assumé
est
OK

73.
… mais il n’a aucun pouvoir suggestif

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

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

76.
ANTHROPOLOGIE / PAPIER TIGRE

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

78.
tip #2 : un picto visible

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

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

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

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

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

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

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

86.
l’effet Cocktail party

87.
aider l’utilisateur
à inhiber les distracteurs

88.
la notion de
moment d’interaction

89.
STELLER

90.
LE MONDE

91.
4.
La navigation par gestes

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

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

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

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

96.
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)

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

98.
animer pour inciter au geste
LA MATINALE

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

100.
TRANQUILIEN

101.
ou choisissez vos chevaux de bataille

102.
SKETCHES

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

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

105.
Amélie Boucher, BlendWebMix 2015
merci !