Menu de navigation : 5 bonnes pratiques pour une meilleure expérience utilisateur

Le menu de navigation c’est le guide de vos visiteurs sur votre site. Les utilisateurs ont besoin de ces guides pour trouver facilement les informations dont ils ont besoin. Il est indispensable de soigner votre menu pour améliorer l’expérience de vos utilisateurs sur votre site. Ils ne doivent pas rencontrer de difficultés pour naviguer. Un site doit être conçu pour qu’on puisse l’explorer de manière fluide, simple et rapide.

C’est pourquoi nous allons voir ensemble 5 bonnes pratiques pour une meilleure expérience sur vos menus de navigation.

Soignez vos boutons de menu

Ça paraît assez évident et simple de concevoir un menu, mais pas tant que ça. Je pourrais détailler tout un article dédié à vos boutons de menu. La première chose à faire, c’est de mettre en évidence le bouton sélectionné. Un utilisateur a besoin de savoir où il se trouve.

Pensez en permanence à un touriste sans carte, perdu dans une ville qui ne connaît pas. Comment peut-il savoir où aller s’il ne sait même pas où il se trouve ?

Sur le web, c’est pareil. Les utilisateurs ont besoin d’un retour visuel sur ce qu’ils ont sélectionné. Pour mettre cet élément en évidence, vous pouvez le faire de différentes manières :

• Une police plus grasse
• Une couleur différente (attention aux contrastes, sur les boutons actifs ou inactifs)
• Un bouton souligné

Autres point à prendre en compte pour soigner vos boutons : la zone cliquable et le survol.
Il faut que la zone autour de votre bouton soit cliquable et pas uniquement le mot. Les utilisateurs ne sont pas toujours précis quand ils cliquent sur un élément, que ça soit sur mobile ou sur le web. Pensez bien à cela, car, une zone trop petite, peut vite être désagréable et faire fuir vos visiteurs.
Concernant le survol, c’est aussi un bon élément visuel pour indiquer à l’utilisateur la zone et le bouton sur lequel il va cliquer. Ça fait partie des micro-interactions qui sont très en vogue en web design.

Structurez vos « mégas menus » (e-commerce)

Cette bonne pratique est fortement recommandée pour les sites e-commerces ou les sites qui ont beaucoup de rubriques et une arborescence très riche.

Lorsqu’on présente un méga menu à un utilisateur, il faut s’imaginer qu’une flopée de liens vient inonder son écran. C’est généralement assez désorientant et aussi frustrant à utiliser. Votre visiteur doit faire un travail de concentration pour trouver l’information qu’il cherche, il doit identifier tous ces liens et les trier en quelques secondes.

Dans ce type de menu, on présente généralement les catégories parents puis tout un tas de catégories enfants, sans entre-deux, sans classification. Le meilleur moyen de supprimer ces distractions visuelles, c’est de proposer un menu avec des catégories « bi-parents ». Pour faire plus simple, vous proposez une catégorie « Parent primaire » et une catégorie « Parent secondaire », et enfin les catégories enfants.
Le but de cette cette catégorie « Parent secondaire » est de masquer les enfants non pertinents et permettre à l’utilisateur d’identifier plus vite les éléments. On parle de divulgation progressive.

Si vous pouvez, évitez le menu burger (surtout sur le web)

Le menu burger ou « hamburger » qui porte son nom de par sa forme, n’est pas forcément une pratique très appréciée dans le monde du design ou de l’UX. Il est de plus en plus critiqué, mais les utilisateurs y sont globalement habitués et dans le cas du format mobile, c’est compliqué de trouver une meilleure alternative.

Toutefois, si le menu burger est accepté et parfois plébiscité sur les sites mobile ou même les applications, il n’est cependant pas du tout recommandé sur un site web, au format desktop.
J’ai toujours un peu de mal à comprendre l’intérêt de mettre ce type de menu sur un site web, quand on a la place de le faire. Je suis même totalement contre.

Vos utilisateurs ont besoin de savoir où ils se trouvent, qu’est-ce qu’ils peuvent chercher et trouver sur votre site. Si vous masquez cet élément, vous risquez de les perdre. Sur mobile c’est différent car on a la contrainte de l’espace et nous n’avons pas les mêmes usages. Si vous pouvez vous en passer, faites-le. Mais sur le web, vous devez afficher votre barre de navigation quoiqu’il arrive. Vous avez la place, alors ne vous en privez pas.

Proposez un menu de navigation « sticky »

C’est un élément auquel il faut également penser. Vous avez un menu de navigation, vous avez fait attention à ne pas utiliser de menu burger, alors ne négligez pas ce dernier point. Proposez une barre de navigation « sticky » (qui reste fixe au scroll).

Souvent, lorsque je me balade sur des sites, je constate ce problème. Je scroll sur une page, et j’ai besoin d’une information que je ne pourrais trouver, à priori, qu’en passant par le menu. Et là, je suis obligée de remonter toute la page pour accéder au menu. C’est une expérience désagréable.

Ça ne coûte rien à mettre en place, et ça ne nuit pas à votre UI donc faites-le. Gardez votre menu de navigation fixe. Vos utilisateurs ont besoin de savoir où ils sont et de pouvoir continuer de naviguer facilement et rapidement.

Sur application mobile, n’oubliez pas les libellés !

Pour ce dernier point, on se concentre sur les applications mobile. Oui, on a aussi des menus de navigation sur les applications et c’est très important de les soigner.

Chose que je vois souvent sur des applications en production mais aussi sur beaucoup de concept, ce sont des menus avec des icônes seules, sans libellés. Or, c’est une erreur. Vos utilisateurs ne doivent pas jouer au Pictionnary avec vos icônes et deviner vers quoi elles mènent.

Même si dans certains cas, les utilisateurs peuvent être habitués à certaines icônes, comme la maison pour l’accueil, les trois traits horizontaux pour le burger, etc. Il faut quand même préciser vers quoi redirigent votre barre de navigation. Tous vos utilisateurs n’auront pas le même niveau d’aisance sur une application ou même sur le web, ni la même interprétation d’une icône.

Alors, même si je constate cette erreur la plupart du temps sur des concepts, il ne faut pas que ces erreurs deviennent des références. Les designers aguerris ne se tromperont pas, mais ça n’est pas le cas de tout le monde. Cette pratique ne doit pas devenir la norme, car vous pouvez avoir des utilisateurs très jeunes, très âgés ou simplement des utilisateurs qui interprètent vos choix d’icônes d’une manière différente. Donc ne laissez aucun doute, ajoutez des libellés dans votre menu !

Menu de navigation : ce qu’il faut retenir

Négliger votre menu de navigation peut affecter l’engagement de vos utilisateurs. Ce qu’il faut retenir, c’est que vos utilisateurs doivent toujours savoir où ils se trouvent sur votre site. Ils doivent pouvoir chercher facilement l’information dont ils ont besoin, et naviguer jusqu’à elle de manière fluide.

Vous avez désormais toutes les clés pour proposer une expérience utilisateur de qualité à vos utilisateurs, à travers votre menu.