Concevoir la navigation sur mobile

9 554 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
1 commentaire
33 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
9 554
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 704
Actions
Partages
0
Téléchargements
71
Commentaires
1
J’aime
33
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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 !

×