Concevoir la navigation sur mobile

Amelie Boucher
Amelie BoucherUser Experience Expert à Amélie Boucher
Amélie Boucher, BlendWebMix 2015
Concevoir la navigation
sur mobile
Design studio
Concevoir la navigation sur mobile
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
Concevoir la navigation sur mobile
Concevoir la navigation sur mobile
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
Concevoir la navigation sur mobile
… 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
Concevoir la navigation sur mobile
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 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
Amélie Boucher, BlendWebMix 2015
merci !
1 sur 110

Recommandé

Penser l'expérience utilisateur mobile (Paris Web 2013) par
Penser l'expérience utilisateur mobile (Paris Web 2013)Penser l'expérience utilisateur mobile (Paris Web 2013)
Penser l'expérience utilisateur mobile (Paris Web 2013)Amelie Boucher
14.9K vues185 diapositives
Concevoir la navigation Mobile, AppDays2016 par
Concevoir la navigation Mobile, AppDays2016Concevoir la navigation Mobile, AppDays2016
Concevoir la navigation Mobile, AppDays2016Amelie Boucher
930 vues43 diapositives
UXD #10 - Comment concevoir une interface sur une smartwatch par
UXD #10 -  Comment concevoir une interface sur une smartwatchUXD #10 -  Comment concevoir une interface sur une smartwatch
UXD #10 - Comment concevoir une interface sur une smartwatchUXD Meetup
1.9K vues38 diapositives
Db talks - design charette par
Db talks  - design charetteDb talks  - design charette
Db talks - design charetteAkiani
1.2K vues24 diapositives
MobiliteaTime #4 : Guide Pratique Apple TV par
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVUSERADGENTS
2.4K vues53 diapositives
Comment concevoir une experience utilisateur cross canal par
Comment concevoir une experience utilisateur cross canalComment concevoir une experience utilisateur cross canal
Comment concevoir une experience utilisateur cross canalAkiani
1.1K vues47 diapositives

Contenu connexe

Tendances

Réussir le virage du digital : l'intégration des usages par
Réussir le virage du digital : l'intégration des usagesRéussir le virage du digital : l'intégration des usages
Réussir le virage du digital : l'intégration des usagesAkiani
704 vues37 diapositives
L'Apple Watch crée l'événement et bouscule le marché des smartwatches par
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches Idean France
4.2K vues16 diapositives
ESG - Lesson 5 par
ESG - Lesson 5ESG - Lesson 5
ESG - Lesson 5Alban Oujagir
1.2K vues29 diapositives
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be par
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.beAlexandre Jubien
2.6K vues122 diapositives
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch par
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple WatchMobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple WatchUSERADGENTS
3.3K vues34 diapositives
MobiliTeaTime #14 : L'Atomic Design par
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
4.2K vues42 diapositives

Tendances(16)

Réussir le virage du digital : l'intégration des usages par Akiani
Réussir le virage du digital : l'intégration des usagesRéussir le virage du digital : l'intégration des usages
Réussir le virage du digital : l'intégration des usages
Akiani704 vues
L'Apple Watch crée l'événement et bouscule le marché des smartwatches par Idean France
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches
Idean France4.2K vues
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be par Alexandre Jubien
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be
#MobileRevolution (FR) - Keynote MForum - DigitalWallonia.be
Alexandre Jubien2.6K vues
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch par USERADGENTS
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple WatchMobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch
Mobiliteatime #2 - WatchKit, le framework de développement pour l’Apple Watch
USERADGENTS3.3K vues
MobiliTeaTime #14 : L'Atomic Design par USERADGENTS
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
USERADGENTS4.2K vues
Ibm technology day 2013 mobile first salle jp gremaud lake placid.pdf par IBM Switzerland
Ibm technology day 2013 mobile first salle jp gremaud lake placid.pdfIbm technology day 2013 mobile first salle jp gremaud lake placid.pdf
Ibm technology day 2013 mobile first salle jp gremaud lake placid.pdf
IBM Switzerland2.4K vues
"Comment designer sur l'Apple Watch" par Sylvain Rousseau par TheFamily
"Comment designer sur l'Apple Watch" par Sylvain Rousseau"Comment designer sur l'Apple Watch" par Sylvain Rousseau
"Comment designer sur l'Apple Watch" par Sylvain Rousseau
TheFamily1.6K vues
Responsive Web Design - Enjeux, Solutions, Méthodologie par ekino
Responsive Web Design - Enjeux, Solutions, MéthodologieResponsive Web Design - Enjeux, Solutions, Méthodologie
Responsive Web Design - Enjeux, Solutions, Méthodologie
ekino12.5K vues
Fondamentaux design d'applications mobiles par BeMyApp
Fondamentaux design d'applications mobilesFondamentaux design d'applications mobiles
Fondamentaux design d'applications mobiles
BeMyApp4.2K vues
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16 par Alexandre Jubien
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
#MobileStrategy #MobileTransfo - Sommets du Digital #SOMDIG16
Alexandre Jubien4.3K vues
Chp2 - Conception UX-UI des Applications Mobiles par Lilia Sfaxi
Chp2 - Conception UX-UI des Applications MobilesChp2 - Conception UX-UI des Applications Mobiles
Chp2 - Conception UX-UI des Applications Mobiles
Lilia Sfaxi5.7K vues
Introduction au Responsive web design par Dagobert
Introduction au Responsive web designIntroduction au Responsive web design
Introduction au Responsive web design
Dagobert19.6K vues
L'UX au coeur de l'entreprise par UX REPUBLIC
L'UX au coeur de l'entrepriseL'UX au coeur de l'entreprise
L'UX au coeur de l'entreprise
UX REPUBLIC2.1K vues

En vedette

SQLI - Club des DSI - Mobilité par
SQLI - Club des DSI - MobilitéSQLI - Club des DSI - Mobilité
SQLI - Club des DSI - MobilitéSQLI DIGITAL EXPERIENCE
17.3K vues70 diapositives
Conseils pour être featuré sur les appstores par
Conseils pour être featuré sur les appstoresConseils pour être featuré sur les appstores
Conseils pour être featuré sur les appstoresAlexandra Combeau
15.6K vues16 diapositives
10 conseils pour réussir le lancement de votre application par
10 conseils pour réussir le lancement de votre application10 conseils pour réussir le lancement de votre application
10 conseils pour réussir le lancement de votre applicationBeApp
12.2K vues24 diapositives
Tink - Mobilité et gamification comme pouvoir d'attraction par
Tink - Mobilité et gamification comme pouvoir d'attraction Tink - Mobilité et gamification comme pouvoir d'attraction
Tink - Mobilité et gamification comme pouvoir d'attraction Tink
16.5K vues114 diapositives
Marketing Mobile par
Marketing MobileMarketing Mobile
Marketing MobileVeronique Colbert
15.8K vues42 diapositives
Comment faire un serious game avec un stagiaire par
Comment faire un serious game avec un stagiaireComment faire un serious game avec un stagiaire
Comment faire un serious game avec un stagiaireLaurent Auneau
17.3K vues13 diapositives

En vedette(20)

Conseils pour être featuré sur les appstores par Alexandra Combeau
Conseils pour être featuré sur les appstoresConseils pour être featuré sur les appstores
Conseils pour être featuré sur les appstores
Alexandra Combeau15.6K vues
10 conseils pour réussir le lancement de votre application par BeApp
10 conseils pour réussir le lancement de votre application10 conseils pour réussir le lancement de votre application
10 conseils pour réussir le lancement de votre application
BeApp12.2K vues
Tink - Mobilité et gamification comme pouvoir d'attraction par Tink
Tink - Mobilité et gamification comme pouvoir d'attraction Tink - Mobilité et gamification comme pouvoir d'attraction
Tink - Mobilité et gamification comme pouvoir d'attraction
Tink16.5K vues
Comment faire un serious game avec un stagiaire par Laurent Auneau
Comment faire un serious game avec un stagiaireComment faire un serious game avec un stagiaire
Comment faire un serious game avec un stagiaire
Laurent Auneau17.3K vues
ADW - approche mobile first par Atlantic 2.0
ADW - approche mobile firstADW - approche mobile first
ADW - approche mobile first
Atlantic 2.017.5K vues
Mobile Is Eating the World (2016) par a16z
Mobile Is Eating the World (2016)Mobile Is Eating the World (2016)
Mobile Is Eating the World (2016)
a16z1.7M vues
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ... par Microsoft
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Microsoft1.1K vues
Ergonomie, Design et Développement d'applications mobiles par Ludovic Tant
Ergonomie, Design et Développement d'applications mobilesErgonomie, Design et Développement d'applications mobiles
Ergonomie, Design et Développement d'applications mobiles
Ludovic Tant4.2K vues
Hamburgerless. On creative mobile navigation – Product Camp 2015 par Łukasz Przywarty
Hamburgerless. On creative mobile navigation – Product Camp 2015Hamburgerless. On creative mobile navigation – Product Camp 2015
Hamburgerless. On creative mobile navigation – Product Camp 2015
Łukasz Przywarty8.7K vues
Optimiser son site web par NETPRESTA
Optimiser son site webOptimiser son site web
Optimiser son site web
NETPRESTA191 vues
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir par Atlantic 2.0
ADW #8 : Performance web, mesurer et optimiser pour mieux convertirADW #8 : Performance web, mesurer et optimiser pour mieux convertir
ADW #8 : Performance web, mesurer et optimiser pour mieux convertir
Atlantic 2.0969 vues
ADW #7 : La voix du client au service de la performance par Atlantic 2.0
ADW #7 : La voix du client au service de la performanceADW #7 : La voix du client au service de la performance
ADW #7 : La voix du client au service de la performance
Atlantic 2.0864 vues
Evolution du logo d'Air France par rjeanmenne
Evolution du logo d'Air FranceEvolution du logo d'Air France
Evolution du logo d'Air France
rjeanmenne5.1K vues
5 conseils pour promouvoir efficacement l'application mobile de votre évènement par EVENIUM
5 conseils pour promouvoir efficacement l'application mobile de votre évènement5 conseils pour promouvoir efficacement l'application mobile de votre évènement
5 conseils pour promouvoir efficacement l'application mobile de votre évènement
EVENIUM505 vues

Similaire à Concevoir la navigation sur mobile

Retour d'expérience sur la conception et la construction d'une application ME... par
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...Microsoft Technet France
376 vues54 diapositives
La conception d'interfaces narratives par
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narrativesBenjamin Hoguet
1.1K vues81 diapositives
UX guidelines par
UX guidelinesUX guidelines
UX guidelinesODC Orange Developer Center
837 vues35 diapositives
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 par
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 Flupa
716 vues31 diapositives
Touristic présentation Kaysersberg - Internet de séjour par
Touristic présentation Kaysersberg - Internet de séjourTouristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjourJohanna Wiss
817 vues72 diapositives
Support média par
Support médiaSupport média
Support médiaKeepCore
496 vues17 diapositives

Similaire à Concevoir la navigation sur mobile(20)

Retour d'expérience sur la conception et la construction d'une application ME... par Microsoft Technet France
Retour d'expérience sur la conception et la construction d'une application ME...Retour d'expérience sur la conception et la construction d'une application ME...
Retour d'expérience sur la conception et la construction d'une application ME...
La conception d'interfaces narratives par Benjamin Hoguet
La conception d'interfaces narrativesLa conception d'interfaces narratives
La conception d'interfaces narratives
Benjamin Hoguet1.1K vues
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 par Flupa
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017 Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Accessibilité, retour d’expérience sur Service-Public.fr _WUD Paris 2017
Flupa716 vues
Touristic présentation Kaysersberg - Internet de séjour par Johanna Wiss
Touristic présentation Kaysersberg - Internet de séjourTouristic présentation Kaysersberg - Internet de séjour
Touristic présentation Kaysersberg - Internet de séjour
Johanna Wiss817 vues
Support média par KeepCore
Support médiaSupport média
Support média
KeepCore496 vues
Mtl apptalks ux mobile et ucd - janvier 2014 par Loic Nunez
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
Loic Nunez1.9K vues
Agora CMS - 25 avril 2014 - UX : Mythe et réalité par Guillaume Abel
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Guillaume Abel3.8K vues
telmedia* : tendances webdesign 2015, l'année de l'UX par telmedia
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia2.3K vues
ESG - Application Mobile - Cours 1 par Alban Oujagir
ESG - Application Mobile - Cours 1 ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
Alban Oujagir1.9K vues
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD... par Flupa
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD...Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD...
Le Web & les troubles cognitifs : immersion dans des handicaps invisibles_WUD...
Flupa1.4K vues
Smartphone : et l'informatique devint mobile... par CARA_Lyon
Smartphone : et l'informatique devint mobile...Smartphone : et l'informatique devint mobile...
Smartphone : et l'informatique devint mobile...
CARA_Lyon1.2K vues
Comment mesurer l'attention des utilisateurs par Sylvain Senecal
Comment mesurer l'attention des utilisateursComment mesurer l'attention des utilisateurs
Comment mesurer l'attention des utilisateurs
Sylvain Senecal592 vues
Tactile : Nouveaux usages, nouveaux publics par Crossmedias
Tactile : Nouveaux usages, nouveaux publicsTactile : Nouveaux usages, nouveaux publics
Tactile : Nouveaux usages, nouveaux publics
Crossmedias1K vues

Concevoir la navigation sur mobile