Conceptualisation du menu de navigation principale

Le menu de navigation principale est un élément essentiel pour une navigation fluide et intuitive sur un site Web ou une application.

Le menu de navigation principale peut être composé de plusieurs éléments :

Dans cette section, deux aspects fondamentaux de la navigation sur un site Web sont abordés : comment structurer efficacement l'architecture de l'information et pourquoi il est crucial de implémenter judicieusement le design de votre menu.

Travailler son architecture d’information

L’architecture de l’information est cruciale pour la conception de la navigation d’un site ou d’application Web. La conception de l’architecture d’information est un processus itératif, nécessitant des ajustements en fonction des retours des utilisateurs et des modifications du contexte ou du contenu.

Voici les étapes simplifiées :

• Comprendre le contexte : évaluer la mission, les objectifs, la stratégie et la culture de l’entreprise qui conçoit la plateforme Web. Ces éléments influencent l’architecture d’information​​.
• Analyser le contenu : étudier les informations qui sont à présenter. Le contenu détermine l’organisation du site ou de l’application​.
• Connaître les utilisateurs : comprendre les préoccupations, besoins et préférences des utilisateurs visés. Sans une compréhension profonde du public cible, l’architecture d’information ne sera pas aussi efficace​​.
• Établir une structure : organiser et étiqueter les informations pour qu’elles soient facilement accessibles et compréhensibles pour les utilisateurs​​.
• Appliquer les principes de design et d’architecture : façonner les produits et les expériences d’information pour soutenir l’utilisabilité, la recherche et la compréhension​​.

Ne pas utiliser les « menus hamburger »

Les « menus hamburger », ces icônes avec trois lignes horizontales empilées, sont couramment utilisés pour les menus de navigation, en particulier sur les sites Web mobiles. Cependant, ils ont fait l’objet de critiques pour plusieurs raisons :

• Visibilité réduite : Le « menu hamburger » cache les options de navigation, ce qui peut rendre difficile pour les utilisateurs de trouver ce qu’ils cherchent. Cela peut entraîner une exploration réduite du site.
• Reconnaissance vs rappel (recognition over recall) : Les utilisateurs ont généralement une meilleure expérience lorsqu’ils sont en mesure de reconnaître les options plutôt que de devoir se rappeler où se trouvent les choses. Un « menu hamburger » force les utilisateurs à se souvenir de ce qui se trouve dans le menu.
• Moins intuitif pour certains utilisateurs : Bien que le « menu hamburger » soit devenu plus courant, tous les utilisateurs ne le reconnaissent pas ou ne comprennent pas ce qu’il représente, en particulier les utilisateurs moins technophiles.
• Accès en plus d’une étape : Avec un « menu hamburger », les utilisateurs doivent d’abord cliquer sur l’icône avant de pouvoir voir et accéder aux options de navigation. Cela crée une étape supplémentaire par rapport à une navigation visible.
• Moins efficace sur les grands écrans : Sur les grands écrans, comme les écrans d’ordinateur, il y a généralement suffisamment d’espace pour afficher un menu de navigation complet. L’utilisation d’un « menu hamburger » dans ce contexte peut donc être vue comme une utilisation inefficace de l’espace.
• Optimisation pour les moteurs de recherche (SEO) : Les « menus hamburger » peuvent parfois poser des problèmes pour le référencement. Les moteurs de recherche préfèrent que le contenu soit visible et facilement accessible. Par conséquent, une navigation avec des libellés textuels visibles est plus favorable pour le référencement.

La navigation complètement ou partiellement visible que nous présentons ici, qui adopte le principe de « Priorité Plus », doit être utilisée. Ce modèle de navigation met en avant les éléments les plus importants tout en gardant les options supplémentaires facilement accessibles, optimisant ainsi l'expérience utilisateur.

Principe de « Priorité Plus »

Le « Priorité Plus » est un concept de design d'interface utilisateur qui optimise l'utilisation de l'espace, particulièrement sur les écrans de petite taille ou variables. 

Le principe est de montrer autant d'éléments de navigation que l'espace le permet, en donnant la priorité aux éléments les plus importants. Les éléments qui ne peuvent pas être affichés en raison de contraintes d'espace sont regroupés sous un élément « Plus », permettant d’ouvrir un sous-menu.

Une navigation adoptant ce principe est l’alternative au « menu hamburger », qui cache toutes les options de navigation en format mobile.

Positionnement et comportement

Le menu est placé immédiatement sous le bandeau d'en-tête du PIV.

Au défilement vers le bas de la page, le menu de navigation disparaît. 

Il peut toutefois être pertinent de faciliter l’accès aux éléments du menu sans avoir à remonter la page entière. Au défilement vers le haut, le menu réapparaît et demeure fixe.

Il n’est pas recommandé de fixer le menu en format mobile puisque celui-ci réduit l’espace des contenus et nuit à l’expérience de l’utilisateur.

Dimensions

Le menu occupe toute la largeur de l’écran.

En format bureau, la hauteur est 72 px.

En format mobile, la hauteur est de 40 px, s’il y a une seule rangée. Si, on a besoin de disposer les libellés de menus en plus des icônes utilitaires et/ou du bouton de session, il faudra deux rangées superposées. Le menu aura ainsi une hauteur de 80 px.

Espacements

Dans le menu, les éléments se positionnent conformément aux marges du contenu. Pour assurer une lisibilité optimale, il est indispensable de maintenir une marge minimale de 16 px à la fois à gauche et à droite. En format mobile, la marge peut être de 8 px pour maximiser l’espace en largeur. Cela évite que le texte ne soit trop près du bord de la fenêtre.