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 !