Blog

Retour aux articles

Tout savoir sur les menus de navigation verticaux !

Partager

Catégories

1422

Tout savoir sur les menus de navigation verticaux !

Pour introduire cet article, parlons un peu de hiérarchie et plus particulièrement de hiérarchie de l’information !

On a tous déjà rencontré sur certains sites, une navigation avec un nombre incalculable de catégories et de sous-catégories… Et pour faire tenir toutes ces catégories dans un espace horizontal limité qu’est le menu de navigation, les polices utilisées sont très petites, les éléments sont rapprochés les uns des autres, et les étiquettes créées sont raccourcies.

A l’inverse, lorsque nous limitons un vaste espace d’informations à un petit nombre de catégories, les utilisateurs se retrouvent face à des catégories d’articles trop génériques, ce qui les empêche de trouver ce dont ils ont besoin. 

Mais avez-vous pensez à la navigation verticale ? Eh oui, avec cette navigation à gauche, votre site peut accueillir autant de catégorie que possible !

Les avantages de la navigation verticale

De nombreux bénéfices de cette navigation proviennent de sa capacité à contenir beaucoup de catégories !

  • Des catégories spécifiques augmentent la trouvabilité et diminuent le coût d’interaction

L’usage de la navigation verticale supprime les contraintes du design visuel, qui limite le nombre de catégories. Cela permet à vos équipes d’élaborer une architecture de l’information qui comble naturellement l’espace, et qui présente des catégories spécifiques et fortes de sens pour les utilisateurs, afin que ceux-ci n’aient pas à rechercher ailleurs.

Le menu vertical de Brico Depôt propose des catégories et sous-catégories précises de manière à bien orienter l’utilisateur.
  • La navigation verticale offre de la place !

La navigation verticale est un excellent choix pour les sites dont la navigation est susceptible de s’étendre et se ramifier, et dont les offres ou le contenu évoluent continuellement. L’ajout de catégories à la navigation verticale ne requiert pas d’important processus de refonte de la navigation. La seule décision majeure concerne l’emplacement des nouvelles catégories dans la structure déjà existante.

Le menu vertical du site la Fnac permet de proposer un nombre important de catégorie aux utilisateurs.
  • La navigation verticale permet un balayage visuel plus optimal

Selon des études sur l’eye-tracking, nous savons que l’attention des utilisateurs se porte sur la gauche de l’écran : ils regardent la moitié gauche de l’écran dans 80% des cas. L’espace latéral gauche a de la valeur, et y placer votre navigation rendra très probable le fait que vos utilisateurs le remarquent et le balayent du regard !

De plus, des recherches en psycholinguistique ont démontré que la recherche visuelle dans une liste est plus efficace si la liste est verticale plutôt qu’horizontale. Les utilisateurs sont plus aptes à trouver un élément qui les intéresse seulement en quelques coups d’œil, simplement parce que davantage d’information peut être extraite en un seul coup d’œil. Il faut garder à l’esprit que l’œil est capable de percevoir une information qui se situe non seulement au centre du champ visuel, mais aussi celle qui se trouve autour. Par conséquent, même quand on lit de façon attentive chaque mot d’une phrase, nous n’avons besoin de n’en fixer que quelques-uns.  L’oeil humain est bien fait n’est-ce pas !

Ah oui ! Gardez aussi en tête cette idée fausse très répandue qui veut que les conceptions de navigation horizontale prennent en charge le fameux modèle de lecture du F-pattern ! Ce modèle fonctionne uniquement pour les textes non structurés. Il ne s’applique donc pas à la navigation qui, elle, est structurée ! 

  • Les utilisateurs connaissent bien la navigation verticale

Si la navigation verticale est moins courante, elle est cependant rencontrée sur de nombreuses applications de bureau. Alors, s’il s’agit de la navigation la moins utilisée, les utilisateurs en sont tout de même familiers dans la mesure où certains l’utilisateurs au quotidien, comme notamment avec les applications d’e-mail ou de discussion telles que Gmail, Hotmail ou encore Slack, Teams 😉

Visuel issu du BDM.
  • La navigation verticale s’adapte naturellement au mobile

Adapter une barre de menu horizontale en version mobile nécessite quelques ajustements, comme la transformation en une navigation verticale, souvent représentée par un menu hamburger. En revanche, l’utilisation d’une navigation verticale à la fois pour le bureau et le mobile permet à vos équipes d’appliquer les mêmes choix  de conception visuelle avec une adaptation relativement minime. Les bordures, les caractères, les espacements, l’ordre des catégories, peuvent être partagés entre les différents appareils ! 

Sur le site Exaprint, réalisé par Wexperience, les choix de conception visuelle sont les mêmes sur desktop que sur mobile. On retrouve dans le menu les mêmes catégories.

Ceci étant dit, il ne faut pas cacher votre navigation de bureau sous un menu vertical (menu hamburger) pour autant ! Priorité à la navigation visible 😉 Si certains sites web mobile sont contraints de cacher la plupart ou la totalité de la navigation sous un menu hamburger en raison d’un espace limité, l’utilisation d’une navigation visible présente un avantage incontournable : celui de la découverte ! Lorsque la navigation est cachée, les utilisateurs oublient tout simplement de la vérifier.

La navigation verticale et les espaces

Le principal inconvénient de la navigation verticale est qu’elle prend plus de place que la navigation horizontale et, par conséquent, il y a moins d’espace disponible sur la page pour le contenu. La navigation verticale donne généralement lieu à des pages présentant un rapport contenu/ éléments de design (en anglais content-to-chrome ratio) inférieur à celui de la navigation horizontale. 

Pour les fenêtres de petite taille (comme les tablettes), ce compromis peut être difficile à mettre en place. Si vous travaillez avec un design réactif, vous devrez décider quelle est la meilleure interface de navigation et à quelle taille d’affichage une navigation verticale vous permettra d’obtenir un bon rapport contenu/ éléments de design.

Un menu vertical très long peut comporter certains éléments en dessous de la ligne de flottaison. Nous savons, grâce à de nombreuses recherches, que les utilisateurs accordent plus d’attention aux informations situées au-dessus de cette ligne de flottaison qu’à celles situées en-dessous. Ils peuvent même ne pas faire défiler la page si ce qu’ils voient au-dessus de cette ligne suffit pour répondre à leur objectif. 

Nos conseils pour la navigation verticale

  • Placez la navigation verticale à gauche et utilisez un design perceptible

Comme indiqué précédemment, l’attention visuelle se porte sur le côté gauche de l’écran. Eh oui, le côté droit de l’écran n’est pas trop apprécié. Les utilisateurs évitent de regarder la colonne droite de la page parce que bien souvent cette dernière contient de la publicité ! La navigation sur le côté droit a donc moins de chances d’être remarquée. En fait, c’est simple, il faut veiller à ce que la navigation soit visuellement marquante ! Des couleurs de texte ou d’arrière-plan, ou encore des bordures différentes peuvent la faire ressortir du reste de la page 😉

Le site du restaurant Big Mamma utilise des couleurs qui contrastent avec le fond “grisé” du site de manière à avoir un menu de navigation bien visible.
  • Ne dupliquez pas la navigation à l’horizontal

Une tendance récente et étrange consiste à utiliser deux interfaces utilisateur redondantes pour la navigation globale : une barre de menu horizontale et un menu hamburger,  avec exactement les mêmes catégories ! Et qu’on se le dise, cette duplication est inutile, et peut prêter à confusion !

  • Ne cachez pas la navigation derrière des icônes

Puisque la navigation verticale occupe plus d’espace que la navigation horizontale, les concepteurs tentent souvent de minimiser la surface correspondante. Cet objectif est compréhensible, mais certains moyens pour y parvenir apportent plus de confusion qu’autre chose. Une tendance émergente consiste à utiliser des icônes au lieu de libellés pour les catégories. Et si les étiquettes textuelles sont disponibles pour chaque élément de navigation, l’utilisateur ne peut les voir qu’en cliquant ou survolant l’icône. Pas malin cette technique ! 

Depuis bien longtemps, nous recommandons d’ajouter des étiquettes aux icônes. Pourquoi ? Tout simplement parce que le texte enlève toute ambiguïté ! Et pourtant nous voyons encore des sites qui supposent que leurs utilisateurs vont comprendre instantanément leurs icônes associées aux différentes catégories de navigation. Si l’on cache les étiquettes de navigation, les utilisateurs seront plus susceptibles d’ignorer tout simplement la navigation (comme c’est souvent le cas avec un menu hamburger). Et ce type d’affichage demande un effort supplémentaire à l’utilisateur : celui de décoder la signification de l’icône mais aussi celle de cliquer et/ou de survoler l’icône pour accéder au libellé.

Le site d’échec Chess propose à ses utilisateurs un menu vertical avec des icônes, mais il est possible d’y ajouter via une option les libellés, ce qui est une excellente chose pour les joueurs débutants qui ne connaissent pas encore l’interface.
Icônes et libellés du menu.

La stratégie consistant à réduire la navigation à une série d’icône peut être une bonne chose pour les applications utilisées quotidiennement, car l’utilisateur par habitude n’aura pas de mal à reconnaître la signification des icônes. Toutefois, sur un site web qui n’est utilisé qu’occasionnellement par un utilisateur, abandonnez cette stratégie !

  • Pour les longs menus, placez les éléments les moins importants en bas

En raison des problèmes d’utilisabilité causés par la ligne de flottaison, un menu vertical très long risque d’avoir des éléments non visibles à l’écran si l’utilisateur ne fait pas défiler la page. Malheureusement, comme les utilisateurs ont des écrans de tailles différentes, vous ne pouvez pas savoir où la ligne de flottaison atterrit touche votre menu de navigation. L’idée est donc de hiérarchiser les éléments de manière à ce que les éléments les moins importants figurent en dessous de la ligne de flottaison.

Pour que la navigation verticale reste utile, ne la cachez pas sous un menu hamburger, utilisez des libellés alignés à gauche, et évaluez si ses avantages justifient l’espace pris sur la zone de contenu 😉

Via : Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan

WEBINAR | Expériences Digitales #20

Rejoignez-nous en compagnie de Wex IT le 15 juin à 11H et découvrez comment comment la performance booste votre SEO !

⟶ EN SAVOIR PLUS



Cet article vous a plu ? Abonnez-vous à notre newsletter et recevez notre actualité et plus de contenus sur l’expérience utilisateur.  😉


Auteur
Capitaine Commerce
Capitaine Commerce

Capitaine Commerce est un super héros du Web ! Après quelques années de vadrouille dans la galaxie du Web, il dépose ses collants verts sur la planète Wexperience ! Sa nouvelle mission : vous tenir informé des dernières actualités, des évènements et des articles de blog de votre agence UX préférée !