Download - Concevoir la navigation sur mobile
Amélie Boucher, BlendWebMix 2015
Concevoir la navigation sur mobile
Design studio
1 Naviguer sur mobile 2 Techniques pour une architecture de l’information efficace 3 Menu visible ou menu caché ?
4 La navigation par gestes
1.
Qu’est-ce que naviguer, quelles sont les spécificités
du contexte mobile ?
Naviguer… un plaisir tout relatif
Le contexte mobile est hyper-sensible aux défauts d’architecture de l’information
… pour de nombreuses raisons liées aux équipements, aux services et aux usages
… parce que la vitesse de chargement n’est pas toujours au rendez-vous
se tromper prend mille fois plus de temps
… parce que le contexte mobile est propice au papillonnage et aux ruptures
… parce que la durée des sessions d’usage peut être extrêmement limitée
… parce que le besoin est pressant(du fait de l’objectif et / ou du contexte de vie)
… parce que le contexte attentionnel est dégradé
… parce qu’on y observe souvent de grandes récurrences d’usage
sur-exposition au défaut d’architecture
Bref ! L’utilisateur mobile a cruellement
besoin d’aller vite et bien
2.
Quelques techniques pour une architecture de l’information efficace
architecture plate
architecture profonde
+ fréquente en mobile
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)
Favoriser les usages clés
nécessite de faire des choix, des compromis,
de prioriser
… quitte à dévaloriser les usages accessoires
Un environnement contraint est toujours un environnement
qui pousse à faire mieux
faciliter la navigation, ce peut aussi être éviter la navigation
LINXO
BNP
SHAZAM
UMBRELLA
UMBRELLA
travailler sur la réalité de l’architecture, et pas juste sur sa théorie
il faut particulièrement veiller aux étapes précédant
le premier écran « utile » d’un service
comment gérer l’onboarding (un peu) intelligemment ?
À 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
choisir quoi dire
SOUNDCLOUD / ARTE / PINTEREST
éviter d’expliquer l’évidence
MES COURSES
LE MONDE
LA MATINALE
en contexte
VIVINO / TWITTER / HANGOUTS
mais ce n’est pas le format qui fait la bonne pratique !
FOURSQUARE
une fois n’est pas coutume, tout est affaire de mesure.
attendre l’engagement dans l’action avant de sur-proposer
“ just in time education ”
DO NOTE / BETASERIES / INBOX
prévoir des possibilités de navigation transversale
sauter d’un écran à un autre par un mécanisme de raccourci.
la navigation transversale peut être plus ou moins visible selon son utilité et la récurrence d’usage du service
LE BON COIN
LE MONDE
jouer sur la perception
COLETTE
URBAN OUTFITTERS
FILECHAT
adapter la surface active à la fréquence de l’action
d’où l’importance des gestes pour optimiser l’efficience
CHRONODRIVE / E.LECLERC DRIVE
prévoir une navigation élastique, s’adaptant aux usages de chacun
personnalisation explicite versus personnalisation implicite
INBOX
3.
Menu visible ou menu caché ?
INBOX / OUTLOOK
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
ARTSY
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.
INBOX / OUTLOOK
THE NY TIMES
THE GUARDIAN
LA FOURCHETTE / HOOK
Le hamburger n’empêche pas d’avoir un rappel des entrées clés dans le cœur de page
APPLE / PALEOPLATE
TRIPLAGENT
Un menu caché peut permettre de hiérarchiser deux menus
DROPBOX
meatballs
un menu caché fonctionne bien
quand l’utilisateur cherche à faire quelque chose
un menu caché fonctionne moins bien
quand on veut donner une idée à l’utilisateur
bref, le hamburger, c’est pas forcément mal.
un hamburger choisi et assumé
est
OK
… mais il n’a aucun pouvoir suggestif
“ in sight, in mind ”
montrer, c’est suggérer
cut off design
Couper un objet en n’en montrant qu’une partie,
pour suggérer la suite de l’écran.
ANTHROPOLOGIE / PAPIER TIGRE
tips pour menu caché
tip #1 : un picto conventionnel
tip #2 : un picto visible
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
tip #3 : un picto descriptif du contenu s’il est homogène
UBER
tip #4 : accompagner d’un libellé ou d’un système de notifications
PETIT BATEAU / RATP / COUPLE
tip #5 : utiliser « là où je suis » pour indiquer la présence du menu
PICTURELIFE
tip #6 : un flux d’interaction rendant visible le menu
VSCO
pourquoi c’est utile de cacher ?
il y a compétition entre la navigation et l’espace nécessaire
à la libre expression du contenu.
l’utilisateur mobile doit mobiliser ses capacités d’attention sélective
l’effet Cocktail party
aider l’utilisateur à inhiber les distracteurs
la notion de moment d’interaction
STELLER
LE MONDE
4.
La navigation par gestes
quand le brief commence par
“ On veut une application où on swipe ” …
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
Les gestes ne nécessitent pas de visée
Défaut principal des gestes : Leur caractère peu découvrable
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)
doubler le geste
mode tap : visible mode geste : invisible
DO NOTE
animer pour inciter au geste
LA MATINALE
préférer la pédagogie implicite à la pédagogie explicite
TRANQUILIEN
ou choisissez vos chevaux de bataille
SKETCHES
Réserver les gestes aux actions les plus importantes Choisir des gestes faciles à réaliser Attention aux gestes pour se faire plaisir
En bref :
Respecter l’utilisateur et son besoin, limiter les entraves aux usages principauxNe 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
Amélie Boucher, BlendWebMix 2015
merci !