Tout savoir sur les menus de navigation verticaux !

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.

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

• 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 😉

• 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 ! 

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 😉

• 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é.

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