En théorie, sur desktop (ordinateur), on devrait concevoir l’architecture de l’information de son site pour que tout rentre dans une barre de navigation horizontale. En pratique, ce n’est pas toujours aussi simple que ça.
La très grande majorité des sites affichés en version desktop disposent d’une barre de navigation horizontale positionnée à droite ou sous le logo.
Ce type de navigation est une très bonne pratique, car les utilisateurs y sont habitués depuis des années.
L’espace horizontal sur une page étant réduit, si ton site est très riche, tu rencontreras vite des difficultés et tu risques de faire de mauvais choix.
1. Réduction excessive de la taille de police
En appliquant une police trop petite pour que toutes tes rubriques rentrent, tu crées des frictions, car ton utilisateur éprouve des difficultés de lecture.
2. Regroupement de catégories sans logique apparente pour l’utilisateur
En regroupant trop d’éléments disparates dans une même catégorie par manque de place, ton utilisateur risque de ne pas comprendre ta logique de regroupement et sera peut-être découragé de naviguer sur ton site.
3. Réduction excessive des mots composant les libellés des rubriques
À trop vouloir réduire la longueur de tes rubriques, elles risquent de perdre tout leur sens. Ça ralentit la compréhension de ta navigation et l’accès à ton contenu, créant ainsi des frictions.
4. Utilisation de libellés trop génériques
Avec des libellés trop génériques, ton utilisateur n’a pas une idée précise du contenu disponible. Il doit alors faire plusieurs clics pour comprendre ce qui se cache derrière chaque libellé.
L’augmentation du coût d’interaction est aussi un facteur de friction.
Dans certains cas, au lieu d’afficher une barre de navigation horizontale sur la version desktop, une navigation verticale est préférable, car elle compte de nombreux avantages.
1. Hausse de la visibilité
Des études ont démontré que les utilisateurs regardent la moitié gauche d’un écran dans 80 % du temps (dans les pays qui lisent de gauche à droite).
En positionnant ta navigation dans cette zone, elle aura plus de chances d’être consultée.
2. Baisse du coût d’interaction
En ayant plus d’espace, tu pourras afficher plus de rubriques. Ton utilisateur pourra ainsi visualiser plus de libellés et fera moins de clics pour accéder à ton contenu.
3. Recherche dans les rubriques facilitée
Des recherches en psycholinguistique ont démontré que la recherche visuelle dans une liste est plus efficace si cette dernière est verticale.
Ton utilisateur trouvera plus facilement ce qu’il cherche.
4. Simplification de l’évolution du site
L’ajout d’une rubrique supplémentaire dans une barre de navigation horizontale peut vite devenir un casse-tête, voire se transformer en mission impossible.
Avec une navigation verticale, il devient beaucoup plus simple d’ajouter des rubriques et de faire évoluer ton site.
5. Simplification de conception technique
Une navigation verticale est facilement transposable dans un burger menu affiché sur les mobiles et les tablettes.
6. Mutualisation de la courbe d’apprentissage
En ayant une navigation similaire sur ordinateur, téléphone et tablette, le temps d’apprentissage est réduit et simplifié.
Peu importe le support, ton utilisateur retrouve rapidement ses repères de navigation.
7. Affichage connu sur les logiciels
Les logiciels (SaaS ou non) comptent beaucoup de rubriques et une navigation verticale est fréquemment proposée.
Sur ton logiciel, ce type de navigation risque de peu perturber tes utilisateurs.
Avec autant d’avantages, tu te demandes certainement pourquoi la majorité des sites privilégient une navigation horizontale en version desktop.
Eh bien principalement parce qu’une navigation verticale prend plus de place au niveau de la largeur de la page. Il reste donc moins d’espace disponible pour le contenu.
Pour cette même raison, sur les versions smartphone et tablette, c'est la navigation verticale qui est privilégiée.
Une navigation verticale sur un site Internet peut perturber, car les internautes sont peu habitués. Elle est plus facilement acceptée sur un intranet ou un logiciel.
Peu importe ce que tu créeras, si une navigation verticale est plus appropriée, je te préconise d’appliquer les bonnes pratiques ci-dessous.
1. Positionne la navigation verticale sur la gauche
Comme indiqué précédemment, des études ont démontré que c’est la partie gauche que l’utilisateur regarde le plus.
De plus, la colonne de droite est souvent associée à des contenus dédiés à la publicité. Tu as donc intérêt à respecter les standards en affichant ta navigation verticale à gauche.
2. Affiche la navigation verticale de manière permanente
Il pourrait être tentant d’afficher la navigation verticale masquée dans un burger menu pour gagner de la place. C’est une très mauvaise idée.
J’ai d’ailleurs rédigé un article sur les inconvénients du burger menu.
3. Délimite clairement la zone de navigation
Ne cherche pas à rendre ta navigation trop discrète. Au contraire. Elle doit ressortir pour ne pas passer inaperçue.
4. Optimise le contraste
Assure-toi que le contraste entre la couleur de tes rubriques cliquables et la couleur d’arrière-plan de ta zone de navigation est optimal.
5. Affiche une seule navigation
Les libellés de ta navigation verticale ne doivent pas être dupliqués dans une barre de navigation horizontale.
6. Affiche un libellé Accueil
Que tu choisisses une barre de navigation horizontale ou verticale, le premier libellé qu’elle doit afficher est Accueil.
Les raisons sont nombreuses et tu peux les découvrir dans un article dédié.
7. Distingue clairement la rubrique active des autres rubriques
Comme dans une barre de navigation horizontale, la rubrique active de ta navigation verticale doit visuellement se distinguer des autres rubriques cliquables pour permettre à ton utilisateur de comprendre rapidement où il est.
8. Utilise les pictos intelligemment
Pour gagner de la place, tu peux avoir envie d’afficher uniquement des pictos et d’afficher des libellés au roll over ou au clic.
Sur des logiciels utilisés plusieurs fois par jour, ça peut être envisagé. Mais sur un site Internet utilisé occasionnellement, c’est une fausse bonne idée pour plusieurs raisons :
ça augmente le coût d’interaction : ton utilisateur doit faire une action supplémentaire pour découvrir le libellé de ta rubrique ;
ça augmente la charge cognitive : ton utilisateur doit réfléchir à la signification de chaque picto ;
ça réduit la zone de cliquabilité : ton utilisateur doit faire preuve de plus de dextérité que s’il dispose d’un picto et d’un libellé cliquables ;
ça réduit la visibilité de la navigation : un menu composé uniquement de pictos est moins visible lorsqu’il n’inclut pas de libellés. Ton utilisateur risque donc de passer à côté.
9. Aligne les éléments à gauche
Si tu affiches uniquement des libellés, aligne-les à gauche pour faciliter le scan et la lecture de ton menu.
Si tu affiches des pictos et des libellés, affiche-les également à gauche et place toujours ton picto avant ton libellé.
10. Propose une option pour gagner de la place
Pour les logiciels utilisés quotidiennement, ton utilisateur peut avoir besoin de masquer la navigation pour gagner de la place et afficher plus de contenu.
Proposer une option pour masquer cette barre latérale peut s’avérer intéressant.
Sur desktop
La majorité des sites Internet affichent une barre de navigation horizontale. Je te préconise donc d’afficher ce type de navigation, car les utilisateurs sont habitués et n’aiment pas qu’on leur change leurs habitudes.
En revanche, si ton site ne s’y prête pas, tu peux remplacer la barre de navigation horizontale traditionnelle par une navigation verticale, en respectant les bonnes pratiques que je t’ai partagées.
Sur smartphone et tablette
L'espace en largeur étant réduit, une navigation verticale est l'option la plus appropriée.
Dans tous les cas, je te préconise de tester ta navigation avec de vrais utilisateurs pour valider tes hypothèses.
Cet article est issu de ressources publiées sur le site du Nielsen Norman Group, la référence mondiale en ergonomie digitale et en UX design.
Accès à l'article rédigé par Page Laubheimer sur le site du Nielsen Norman Group
Accès à l'étude qui a révélé que les utilisateurs regardent la moitié gauche d’un écran dans 80 % du temps sur le site du Nielsen Norman Group
Accès à la vidéo de Page Laubheimer sur le site du Nielsen Norman Group
C'est l'erreur la plus fréquente que je constate quand je réalise mes audits UX : l'absence du bouton Haut de page.
Lire l'article
Le burger, on l'aime dans l'assiette. Le burger menu, on l'aime sur smartphone, mais surtout pas sur desktop.
Lire l'article
Sur un site, avoir un sticky header est indispensable. Découvre les raisons pour lesquelles tu dois en avoir un.
Lire l'article