10 astuces UX pour créer un menu de navigation optimal
Le menu de navigation est le guide de vos visiteurs une fois sur votre site. Et comme pour une carte, le contenu, le format et le design de ce menu doivent permettre à vos visiteurs de se repérer rapidement.
Quand on visite un lieu pour la première fois, il vaut mieux avoir une bonne carte pour se retrouver et se déplacer sans s’égarer. Cette carte doit être claire, précise et - si possible - être visuellement sympathique à parcourir (c’est mieux si l’on doit s’y référer plusieurs fois).
C'est pourquoi vous devez constamment améliorer l'UX (User eXperience) de votre site afin de proposer une ergonomie globale satisfaisante.
Il existe différents types de menu sur le web : horizontaux, verticaux, stickys, etc.
Sont-ils tous efficaces ? À quoi devrait ressembler le menu idéal ? A quoi devrait ressembler VOTRE menu pour améliorer le parcours de navigation de vos visiteurs ?
Dans cet article, je partage avec vous 10 astuces essentielles pour améliorer votre menu afin de faciliter la navigation de vos visiteurs.
1 Comment améliorer votre menu de navigation ?
Pour améliorer constamment votre menu en fonction des habitudes et intérêts des visiteurs de votre site, vous devez mettre en place un stratégie digitale globale.
L'A/B testing pour optimiser votre menu au global
Avec l'A/B testing, vous pouvez tester plusieurs versions de votre menu pour identifier celle qui plait le plus à vos visiteurs. C'est aussi une pratique incontournable pour tester vos personnalisations afin d'évaluer l'impact de celles-ci.
On peut tester absolument tous les éléments du menu (CTA, wording, disposition, design). Par exemple on pourrait tester plusieurs dispositions des catégories dans le menu et conserver celle qui génère le plus de conversion.
Il s'agit d'une pratique à utiliser en continu pour s'assurer que votre site répond à toutes les attentes des visiteurs et générer des conversions.
La personnalisation pour proposer un menu adapté à chaque segment de votre audience
Avec la personnalisation, vous pouvez adapter votre site à chaque segment qui compose votre audience.
Pour cela, il faut identifier les parcours clients récurrents sur le site, et mettre en place l'expérience qui convient le mieux pour chaque segment.
Par exemple, on peut imaginer réorganiser les catégories du menu en fonction du segment auquel appartient un visiteur. Par exemple, s'il s'agit d'une femme, on peut afficher les catégories femmes en priorité et inversement.
La personnalisation vous permet d'améliorer la navigation des visiteurs en adaptant votre site et donc d'augmenter la conversion. Toutefois, les comportements et les envies des visiteurs changent et pour s'adapter au mieux, l'idéal est d'avoir recours à la personnalisation prédictive.
La personnalisation IA pour adapter votre menu en temps réel aux envies de vos visiteurs
Avec la personnalisation IA , vous pouvez identifier l'appétence d'un visiteur pour un produit ou sa probabilité de conversion en temps réel.
Ainsi, si une femme se rend sur un site de mode pour acheter un vêtement à un ami homme , au lieu de voir le site personnalisé avec les catégories femmes, les algorithmes vont identifier son intention et lui afficher les catégories qui l'intéresse à l'instant t de sa visite.
Pour s'adapter vraiment aux envies des visiteurs et obtenir une augmentation considérable des conversions, la personnalisation IA est la méthode qu'il vous faut.
2 10 astuces UX pour créer le menu de navigation optimal
1. SE REPÉRER GRÂCE AU MENU
Votre menu doit être un plan interactif qui indique au visiteur où il se situe à tout moment. C’est d’autant plus important lorsqu’un visiteur fait ses premiers pas sur votre site. Ce type de rappel visuel dans le menu apporte beaucoup en terme de confort de navigation.
Pour s'en rendre compte, il suffit de comparer l'ancienne et la nouvelle version du menu LinkedIn :
Sur l'ancienne version, rien n'indique au visiteur où il se trouve.
Sur la nouvelle version, l'icône de la page où se trouve le visiteur est en blanc ce qui permet de se repérer immédiatement.
2. uN MENU SIMPLE D'utilisation
Le menu est la pièce centrale de la navigation sur votre site et les visiteurs doivent pouvoir trouver ce qu'ils recherchent facilement et rapidement.
Un visiteur ne devrait pas avoir à cliquer plus de 3 fois pour arriver sur une page précise quelque soit son point de départ sur votre site. D’où la nécessité de concevoir un menu clair et organisé.
Par exemple, le menu de Fnac.com est très précis et permet de trouver une catégorie d'article très facilement.
3. ÉviteR les menus déroulants trop longs
Un menu déroulant trop complexe risque de déstabiliser le visiteur. Devant une liste à rallonge, il risque de ne pas savoir où se diriger et donc de quitter votre site prématurément.
C’est une expérience que je vis régulièrement sur le site d’Amazon :
Notez que pour palier ce problème, Amazon a créé une page dédiée à son menu. S’il s’agit d’un bon sommaire, c’est aussi un cauchemar visuel !
4. Mettre le moteur de recherche en valeur
30 % des internautes utilisent la barre de recherche et convertissent 5 à 6 fois plus que les autres.
Il est donc essentiel de mettre en avant votre moteur de recherche sur votre site, notamment dans votre menu de navigation.
Sur le site de la Fnac, lorsque vous faites défiler une page, la barre de recherche est toujours accessible. Les visiteurs peuvent donc l'utiliser à tout moment sans que cela ne perturbe leur parcours.
5. Donner du contexte à votre menu
Si un visiteur ne clique pas sur la bonne catégorie ou le bon élément de votre menu, il n’ira pas là où il souhaite aller. En apportant un contexte visuel aux éléments de votre menu, vous guidez le visiteur dans son choix. Ainsi, il visualise mieux à quoi s’attendre avant de cliquer. Voici un exemple simple et efficace avec Apple :
Notez que ce menu de pictogrammes n’apparaît pas lorsqu’on survole les éléments du menu primaire. Le visiteur doit être sur la page de la catégorie pour voir ce menu détaillé.
6. Ajoutez un Footer
Le Footer est un menu de pied de page particulièrement fourni. Il a deux avantages :
- Il complète un menu complexe
- Il contribue à créer un solide maillage interne et améliore le référencement de votre site
Le footer est un complément d’informations sur votre activité, vos produits et/ou services. On peut y trouver : vos valeurs, un moteur de recherche, des informations sur les évènements, vos ressources (livres blancs, ebooks, etc.), un CTA de demande de démo, vos icônes réseaux sociaux, des témoignages clients, etc.
7. Tester la place des éléments dans votre menu
Votre menu est peut-être déjà très performant et ne requiert pas d’optimisation avancée ou de refonte. Dans certains cas, ce sont les tests les plus simples qui donnent les meilleurs résultats.
En réalisant un audit ergonomique avec une heatmap, IKKS (marque de prêt-à-porter haut-de-gamme) a constaté que l’onglet de sa collection « i-code » était moins cliqué que les autres. La marque a décidé de réaliser un test A/B pour déterminer la position de l’onglet qui génèrerait le plus de clics vers les pages de la collection.
La variante B a permis d’augmenter le taux de clic de 16,5% ! Téléchargez la success story d’IKKS pour plus de détails.
8. MiseR sur un menu dynamique
Un menu dynamique est un menu qui se met à jour en temps réel. Dans un contexte e-commerce, cela peut être un ajout / retrait de produit en temps réel dans le panier sans avoir besoin de recharger la page.
C’est en tout cas un point très intéressant que l’on retrouve par exemple sur le site de zavvi.com. L’ajout au panier n’y entraine pas un nouveau chargement de la page et le compteur d’articles du panier se met à jour en temps réel.
Le fait de rester sur la page entre deux ajouts au panier est très agréable. À l’inverse, un site comme CDiscount propose une expérience beaucoup plus lourde. Pour continuer mes achats après un ajout au panier, je passe automatiquement par deux pages (et je suis confronté à deux pop-ins.)
Moralité : misez sur une formule dynamique et plus simple !
9. un menu facile à comprendre
Le wording des éléments du menu est un élément très important et qui peut toujours être amélioré.
Les équipes de Schmidt ont décidé de mener un test A/B sur le wording de leur menu pour identifier quelle était la meilleure version pour les visiteurs.
Avec une augmentation de 130% des clics sur le CTA « Catalogue », de 40% sur le CTA « Magasins » et de 317% sur le CTA « Espace Projet », la variante 2 l'emporte largement sur les autres. Notez que les prises de rendez-vous ont également augmenté avec la variante 2.
On y revient toujours, visez la simplicité. Et si cela doit passer par une reformulation et/ou une clarification des éléments de votre menu, vous devriez lancer un test A/B.
Retrouvez la stratégie de Schmidt en détail pour ce test A/B.
10. Un menu mobile de qualité
Il est nécessaire d'investir dans le domaine du mobile puisqu’il est très désagréable de naviguer sur un site non responsive depuis un smartphone.
Voici un exemple : à gauche, la réservation de ticket pour la Cité de la Mer. À droite, celle proposée sur le site du Futuroscope.
Les équipes du Futuroscope ont souhaité construire une expérience de navigation optimisée pour le mobile : le site est entièrement responsive.
On retrouve le classique menu en “burger”, adopté depuis maintenant plusieurs années sur mobile, l'accès au compte se fait très facilement et toutes les catégories du menu sont visibles et facilement cliquable.
Il existe donc de nombreuses manières d'optimiser son menu pour augmenter les conversions sur votre site. Il faut simplement trouver le use case qui correspond à votre audience et vous permet de remplir vos objectifs.
Retrouvez tous nos conseils et use cases e-commerce dans notre ebook :
