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

(travai...
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 ...
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 CO...
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 be...
ARTSY
Quand utiliser un menu caché ?
Lorsque le menu ne contient rien de stratégique
Lorsque votre écran par défaut couvre déjà ...
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 ...
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 co...
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...
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 (sursau...
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 fa...
En bref :
Respecter l’utilisateur et son besoin, limiter
les entraves aux usages principaux



Ne pas adopter de solution ...
Amélie Boucher, BlendWebMix 2015
merci !
Concevoir la navigation sur mobile
Concevoir la navigation sur mobile
Concevoir la navigation sur mobile
Concevoir la navigation sur mobile
Concevoir la navigation sur mobile
Prochain SlideShare
Chargement dans…5
×

Concevoir la navigation sur mobile

12 562 vues

Publié le

Pressés, interrompus, distraits… les utilisateurs mobiles ne peuvent certainement pas se payer le luxe d’écrans inutiles, de parcours trop longs, et encore moins de se perdre. Que pouvons-nous faire pour leur faciliter la vie ? Pour qu’ils accèdent aux contenus qu’ils souhaitent, le plus rapidement possible ?

Cette présentation liste quelles options peuvent être envisagées, mais surtout comment les choisir selon votre contexte : menu visible ou menu caché, hamburger, onglets, navigation par gestes... Nous abordons aussi comment optimiser la navigation peut passer par supprimer la nécessité de naviguer : travailler l’efficience au maximum, cela peut être salvateur !

Publié dans : Design

Concevoir la navigation sur mobile

  1. 1. Amélie Boucher, BlendWebMix 2015 Concevoir la navigation sur mobile
  2. 2. Design studio
  3. 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. 4. 1. Qu’est-ce que naviguer, quelles sont les spécificités du contexte mobile ?
  5. 5. Naviguer… un plaisir tout relatif
  6. 6. Le contexte mobile est hyper-sensible aux défauts d’architecture de l’information
  7. 7. … pour de nombreuses raisons liées aux équipements, aux services et aux usages
  8. 8. … parce que la vitesse de chargement n’est pas toujours au rendez-vous se tromper prend mille fois plus de temps
  9. 9. … parce que le contexte mobile est propice au papillonnage et aux ruptures
  10. 10. … parce que la durée des sessions d’usage peut être extrêmement limitée
  11. 11. … parce que le besoin est pressant
 (du fait de l’objectif et / ou du contexte de vie)
  12. 12. … parce que le contexte attentionnel est dégradé
  13. 13. … parce qu’on y observe souvent de grandes récurrences d’usage 
 sur-exposition 
 au défaut d’architecture
  14. 14. Bref ! L’utilisateur mobile a cruellement besoin d’aller vite et bien
  15. 15. 2. Quelques techniques pour une architecture de l’information efficace
  16. 16. architecture plate
  17. 17. architecture profonde + fréquente en mobile
  18. 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. 19. Favoriser les usages clés
  20. 20. nécessite de faire des choix, des compromis, de prioriser
  21. 21. … quitte à dévaloriser les usages accessoires
  22. 22. Un environnement contraint est toujours un environnement qui pousse à faire mieux
  23. 23. faciliter la navigation, ce peut aussi être éviter la navigation
  24. 24. LINXO
  25. 25. BNP
  26. 26. SHAZAM
  27. 27. UMBRELLA
  28. 28. UMBRELLA
  29. 29. travailler sur la réalité de l’architecture, et pas juste sur sa théorie
  30. 30. il faut particulièrement veiller aux étapes précédant le premier écran « utile » d’un service
  31. 31. comment gérer l’onboarding (un peu) intelligemment ?
  32. 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. 33. choisir quoi dire SOUNDCLOUD / ARTE / PINTEREST
  34. 34. éviter d’expliquer l’évidence MES COURSES
  35. 35. LE MONDE
  36. 36. LA MATINALE
  37. 37. en contexte
  38. 38. VIVINO / TWITTER / HANGOUTS
  39. 39. mais ce n’est pas le format qui fait la bonne pratique !
  40. 40. FOURSQUARE
  41. 41. une fois n’est pas coutume, tout est affaire de mesure.
  42. 42. attendre l’engagement dans l’action avant de sur-proposer
  43. 43. “ just in time education ”
  44. 44. DO NOTE / BETASERIES / INBOX
  45. 45. prévoir des possibilités de navigation transversale sauter d’un écran à un autre par un mécanisme de raccourci.
  46. 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. 47. LE MONDE
  48. 48. jouer sur la perception
  49. 49. COLETTE
  50. 50. URBAN OUTFITTERS
  51. 51. FILECHAT
  52. 52. adapter la surface active à la fréquence de l’action d’où l’importance des gestes pour optimiser l’efficience
  53. 53. CHRONODRIVE / E.LECLERC DRIVE
  54. 54. prévoir une navigation élastique, s’adaptant aux usages de chacun
  55. 55. personnalisation explicite versus personnalisation implicite
  56. 56. INBOX
  57. 57. 3. Menu visible ou menu caché ?
  58. 58. INBOX / OUTLOOK
  59. 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. 60. ARTSY
  61. 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. 62. INBOX / OUTLOOK
  63. 63. THE NY TIMES
  64. 64. THE GUARDIAN
  65. 65. LA FOURCHETTE / HOOK
  66. 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. 67. TRIPLAGENT Un menu caché peut permettre de hiérarchiser deux menus
  68. 68. DROPBOX meatballs
  69. 69. un menu caché fonctionne bien quand l’utilisateur cherche à faire quelque chose
  70. 70. un menu caché fonctionne moins bien quand on veut donner une idée à l’utilisateur
  71. 71. bref, le hamburger, c’est pas forcément mal.
  72. 72. un hamburger choisi et assumé est OK
  73. 73. … mais il n’a aucun pouvoir suggestif
  74. 74. “ in sight, in mind ” montrer, c’est suggérer
  75. 75. cut off design Couper un objet en n’en montrant qu’une partie, pour suggérer la suite de l’écran.
  76. 76. ANTHROPOLOGIE / PAPIER TIGRE
  77. 77. tips pour menu caché tip #1 : un picto conventionnel
  78. 78. tip #2 : un picto visible
  79. 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. 80. tip #3 : un picto descriptif du contenu s’il est homogène UBER
  81. 81. tip #4 : accompagner d’un libellé ou d’un système de notifications PETIT BATEAU / RATP / COUPLE
  82. 82. tip #5 : utiliser « là où je suis » pour indiquer la présence du menu PICTURELIFE
  83. 83. tip #6 : un flux d’interaction rendant visible le menu VSCO
  84. 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. 85. l’utilisateur mobile doit mobiliser ses capacités d’attention sélective
  86. 86. l’effet Cocktail party
  87. 87. aider l’utilisateur à inhiber les distracteurs
  88. 88. la notion de moment d’interaction
  89. 89. STELLER
  90. 90. LE MONDE
  91. 91. 4. La navigation par gestes
  92. 92. quand le brief commence par “ On veut une application où on swipe ” …
  93. 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. 94. Les gestes ne nécessitent pas de visée
  95. 95. Défaut principal des gestes : Leur caractère peu découvrable
  96. 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. 97. doubler le geste mode tap : visible mode geste : invisible DO NOTE
  98. 98. animer pour inciter au geste LA MATINALE
  99. 99. préférer la pédagogie implicite à la pédagogie explicite
  100. 100. TRANQUILIEN
  101. 101. ou choisissez vos chevaux de bataille
  102. 102. SKETCHES
  103. 103. Réserver les gestes aux actions les plus importantes Choisir des gestes faciles à réaliser Attention aux gestes pour se faire plaisir
  104. 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. 105. Amélie Boucher, BlendWebMix 2015 merci !

×