Download - Concevoir la navigation Mobile, AppDays2016
![Page 1: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/1.jpg)
#appdays
Concevoir la navigation mobile
App Days 2016 Amélie Boucher @amelieboucher
![Page 2: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/2.jpg)
#appdays
présentation
![Page 3: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/3.jpg)
#appdays
1 Naviguer sur mobile
2 Une architecture de l’information orientée usages clés
3 Eduquer sans gêner la navigation utile
4 Menu visible ou menu caché ?
![Page 4: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/4.jpg)
#appdays
1.
Naviguer sur mobile
![Page 5: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/5.jpg)
#appdays
Naviguer… un plaisir tout relatif
![Page 6: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/6.jpg)
#appdays
![Page 7: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/7.jpg)
#appdays
![Page 8: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/8.jpg)
#appdays
Le contexte mobile est hyper-sensible aux défauts d’architecture de l’information
![Page 9: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/9.jpg)
#appdays
Lenteurs Ruptures
Durée des sessions d’usage parfois ultra-limitée
Contexte attentionnel dégradé
Souvent de grandes récurrences d’usage (sur-exposition)
Besoins pressants (du fait de l’objectif et / ou du contexte)
![Page 10: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/10.jpg)
#appdays
L’utilisateur mobile a cruellement besoin d’aller vite et bien
![Page 11: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/11.jpg)
#appdays
2.
Une architecture de l’information
orientée usages clés
![Page 12: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/12.jpg)
#appdays
Réduire la profondeur pour les usages clés
![Page 13: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/13.jpg)
#appdays
nécessite de faire des choix, des compromis, de prioriser
… quitte à dévaloriser les usages accessoires
![Page 14: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/14.jpg)
#appdays
Surveiller chaque tap
![Page 15: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/15.jpg)
#appdays LINXO
![Page 16: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/16.jpg)
#appdays LINXO
![Page 17: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/17.jpg)
#appdays
Faciliter la navigation, ce peut aussi être éviter la navigation
![Page 18: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/18.jpg)
#appdays BNP
![Page 19: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/19.jpg)
#appdays SHAZAM
![Page 20: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/20.jpg)
#appdays
![Page 21: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/21.jpg)
#appdays PARAPLUIE
![Page 22: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/22.jpg)
#appdays
3.
Eduquer sans gêner la navigation utile
![Page 23: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/23.jpg)
#appdays
Choisir quoi dire
SKYPE / ARTE / MES COURSES
![Page 24: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/24.jpg)
#appdays LA MATINALE
![Page 25: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/25.jpg)
#appdays
En contexte
![Page 26: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/26.jpg)
#appdays VIVINO / TWITTER / HANGOUTS
![Page 27: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/27.jpg)
#appdays
“ Just in time education ”
![Page 28: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/28.jpg)
#appdays DO NOTE / BETASERIES / INBOX
![Page 29: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/29.jpg)
#appdays
4.
Menu visible ou menu caché ?
![Page 30: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/30.jpg)
#appdays
la mode du no-hamburger est aussi gênante
que celle du tout-hamburger
![Page 31: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/31.jpg)
#appdays
mais si je montre je dérange
si je montre j’augmente l’usage
« out of sight, out of mind »
![Page 32: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/32.jpg)
#appdays
Les usages mobiles demandent de grandes ressources d’attention sélective
![Page 33: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/33.jpg)
#appdays
L’effet Cocktail party
![Page 34: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/34.jpg)
#appdays
Ne pas surcharger l’écran, c’est aider l’utilisateur à inhiber les distracteurs
![Page 35: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/35.jpg)
#appdays
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
![Page 36: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/36.jpg)
#appdays
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
VIVINO
![Page 37: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/37.jpg)
#appdays
Quand utiliser un menu caché ?
• Lorsque le menu ne contient rien de stratégique
• Lorsque la fonctionnalité n’est utilisée que rarement et que l’écran par défaut couvre déjà la majorité des usages
• Lorsque l’utilisateur sait ou se doute que la fonctionnalité existe
• Lorsque les rubriques seront de toute façon rencontrées par l’usager
• Lorsque la liste des rubriques est longue (et difficile à hiérarchiser)
UBER
![Page 38: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/38.jpg)
#appdays
Quand utiliser un menu caché ?
• Lorsque le menu ne contient rien de stratégique
• Lorsque la fonctionnalité n’est utilisée que rarement et que l’écran par défaut couvre déjà la majorité des usages
• Lorsque l’utilisateur sait ou se doute que la fonctionnalité existe
• Lorsque les rubriques seront de toute façon rencontrées par l’usager
• Lorsque la liste des rubriques est longue (et difficile à hiérarchiser)
COUPLE
![Page 39: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/39.jpg)
#appdays
Quand utiliser un menu caché ?
• Lorsque le menu ne contient rien de stratégique
• Lorsque la fonctionnalité n’est utilisée que rarement et que l’écran par défaut couvre déjà la majorité des usages
• Lorsque l’utilisateur sait ou se doute que la fonctionnalité existe
• Lorsque les rubriques seront de toute façon rencontrées par l’usager
• Lorsque la liste des rubriques est longue (et difficile à hiérarchiser)
DUOLINGO
![Page 40: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/40.jpg)
#appdays
La notion de moment d’interaction
![Page 41: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/41.jpg)
#appdays STELLER
![Page 42: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/42.jpg)
#appdays
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 observer les usages réels pour redescendre sur terre
![Page 43: Concevoir la navigation Mobile, AppDays2016](https://reader033.vdocuments.pub/reader033/viewer/2022051521/586fc65f1a28aba24c8b5cd3/html5/thumbnails/43.jpg)
#appdays
Merci pour votre attention
App Days 2016 Amélie Boucher @amelieboucher