11 astuces UX pour créer le menu de navigation optimal

11 astuces UX pour créer le menu de navigation optimal

Bien que nos innovations fassent couler beaucoup d’encre dans le petit milieu de l’expérience utilisateur, nous gardons les pieds sur terre et n’oublions pas notre mission première : augmenter vos conversions. Et l’un des moyens les plus efficaces pour y parvenir est d’optimiser votre menu de navigation.

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

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.

australie_ux_menu

Des menus de toutes les formes : existe-il une formule magique ?

Des horizontaux, des verticaux, des stickys, etc. On trouve tout type de menus sur le web, tous aussi intéressants et créatifs les uns que les autres.

Sont-ils pour autant tous efficaces ? À quoi devrait ressembler un menu ? Et surtout (question que vous devriez vous posez), à quoi pourrait/devrait ressembler VOTRE menu pour améliorer le parcours de navigation de vos visiteurs ?

Si vous cherchez de l’inspiration pour construire un menu de navigation de qualité, look no more!

Dans cet article, je partage avec vous 11 astuces essentielles pour rendre votre menu plus “user friendly”, satisfaire vos visiteurs et augmenter vos conversions.

Temps de lecture : 9 minutes

11 astuces UX pour créer le menu de navigation optimal

1. Indiquez au visiteur où il se situe

Votre menu doit être un plan interactif qui indique au visiteur où il se site à 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 peut apporter beaucoup en terme de confort de navigation.

À titre d’exemple, voici le (nouveau) menu de Linkedin :

linkedin_ux_menu

Qu’on aime ou pas, il faut bien avouer que le nouveau design du réseau social professionnel est le bienvenu tant il simplifie et fluidifie l’expérience de navigation.

Et contrairement à ce que proposait l’ancienne version du site, l’utilisateur peut savoir en un clin d’œil sur quelle catégorie du site il se trouve.

Souvenez-vous, ce n’était pas le cas avec le design précédent :

linkedin2_ux_menu

2. Rendez votre menu plus visible

Comme mentionné plus haut, le menu est la pièce centrale de la navigation sur votre site. Il doit être clair et bien visible pour que le visiteur s’appuie instinctivement dessus pour aller d’un point A à un point B.

Par ailleurs, un visiteur ne devrait pas avoir à cliquer plus de 3 fois pour arriver sur une page précise (d’une fiche produit à une autre par exemple), quelque soit son point de départ sur votre site.

D’où la nécessité de concevoir un menu clair et organisé. Voici l’exemple du menu d’un site particulièrement clair et dynamique : celui de Fnac.com :

menu_fnac_ux_menu

3. Évitez les menus déroulants trop lourds

Un menu déroulant trop complexe risque de déstabiliser le visiteur. Devant une liste à rallonge, il risque de ne pas savoir où donner de la tête. En effet, si l’effort demandé au visiteur pour se repérer dans le menu est trop important, vous risquez de le froisser.

C’est une expérience que je vis régulièrement sur le site d’Amazon :

amazon_ux_menu

Fort heureusement, la qualité du service permet de surmonter ce choix discutable.

Notez que pour palier ce problème, Amazon a créé une page dédiée à son menu. Bon, là encore, difficile d’imaginer un site comme Fnac.com ou Darty.com proposer une page si agressive visuellement. S’il s’agit d’un bon sommaire, c’est aussi un cauchemar visuel !

Le conseil en plus :

Pauline Rommelaere - Optimisation Expérience Utilisateur« Assurez-vous que chaque catégorie de votre menu soit cliquable. Le contraire est une source potentielle d’irritation. Lorsqu’un visiteur est intéressé par une catégorie de produit sans avoir une idée précise de ce qu’il recherche, lui donner les moyens de se renseigner sur l’ensemble des produits de la catégorie est aussi une chance pour vous de le convaincre avec des produits susceptibles de lui plaire. »

-Pauline Rommelaere, consultante ergonome, Kameleoon.

4. Mettez votre moteur de recherche en valeur

Et parce qu’un bon élève mérite qu’on lui prête beaucoup d’attention, je vous propose à nouveau de jeter un œil à ce que proposent les équipes web de fnac.com.

Lorsque vous faites défiler une page sur le site de l’enseigne, la barre de recherche est toujours accessible. Ce n’est pas le cas de beaucoup de sites concurrents (Amazon, EBay, Cultura, etc.).

sticky_search_ux_menu

Or, on sait que 30% des internautes utilisent la barre de recherche et qu’ils convertissent 5 à 6 fois plus que les autres.

Routard diminue son taux de rebond de 14% grâce à son moteur de recherche.

Ce n’est pas un exemple particulièrement spécifique au menu – bien que le moteur de recherche apparaisse également dans le menu du site -, mais il démontre bien le poids que peut avoir un moteur de recherche sur les performances de votre site.

routard_ux_menu

En A/B testant la refonte de la home page de leur site, les équipes de Routard.com se sont rendu compte que les visiteurs aiment utiliser les moteurs de recherche. Ce qui a réduit le taux de rebond de 14% et le taux de sortie de 17% !

5. Donnez 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… Ce peut être très frustrant et guider le visiteur vers la sortie.

C’est le clic de trop que vous devez absolument éviter. 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 :

apple_ux_menu

Un menu de pictogrammes apparaît lorsque le visiteur clique sur une catégorie de produits.

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

geraud_site_faible_traficSi ce n’est pas déjà fait, vous pourriez lancer un test A/B pour opposer un menu statique à un menu dynamique qui se déclenche au survol de la souris. 

-Géraud Bornet, consultant ergonome, Kameleoon

6. Personnalisez votre menu pour chaque segment visiteurs

La personnalisation est au cœur des problématiques des marketeurs. Et pour cause, les visiteurs demandent un service graduellement plus qualitatif au fil des années. Il suffit de jeter un œil à un site comme Google il y a 20 ans pour comprendre que nos besoins et exigences en tant que consommateur du web ont beaucoup changés ! Et la tendance du moment est à la personnalisation : vous devriez être en mesure d’adapter les contenus de votre site à vos visiteurs.

Un exemple que l’on retrouve… sur le site mobile de la Fnac. Les équipes en charge de l’optimisation ont décidé de lancer un test A/B pour comprendre l’effet d’un menu personnalisé selon les goûts des visiteurs.

fnac_mobile_ux_menu

La variante B a vu augmenter les transactions de 8,5% sur mobile.

Sans dénaturer votre menu, il pourrait être intéressant de détailler la catégorie de produits préférée de vos visiteurs dès lors qu’ils arrivent sur votre site.

Prenons un exemple : Un client Darty qui se rend régulièrement sur le site est reconnu comme très friand des objets connectés. L’enseigne pourrait personnaliser la section “bons plans” présente dans le menu, pour mettre en avant la catégorie préférée de ce visiteur.

darty_ux_menu

Il ne s’agit pas d’une personnalisation en cours sur le site de Darty.

7. Ajoutez un “Fat Footer”

Un Fat Footer est un menu de pied de page particulièrement fourni. Il remplace quelque peu le “Et avec ceci ?” que vous adresse votre boulangère le samedi matin.

Il a deux autres avantages :

  1. Il complète un menu complexe
  2. Il contribue à créer un solide maillage interne et améliore le référencement de votre site.

Que trouve-t-on dans un fat footer ?

hubspot_ux_menu

Le « Fat Footer » d’Hubspot.

À la différence d’un footer plutôt classique où l’on trouve les CGU, CGV, etc (à l’image de Google ou d’Apple par exemple), un fat 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 des évènements,
  • vos ressources (livres blancs, ebooks, etc.),
  • une demande de démo,
  • vos icônes réseaux sociaux,
  • un condensé des meilleurs articles de votre blog,
  • les derniers produits mis en ligne,
  • vos meilleures ventes,
  • des témoignages clients,
  • etc.

Vous avez compris le principe. Un “Fat Footer” est un bon pied de page bien rempli.

8. Repositionnez les éléments de votre menu

Votre menu est peut-être déjà très performant et ne requiert pas d’optimisation avancée ou de refonte. Or, dans certains cas, ce sont les tests les plus simples qui donnent les meilleurs résultats.

IKKS, un test simple et fructueux

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.

Les équipes d’IKKS ont créé deux variantes :

ikks_ux_menu

Une de ces variantes a permis d’augmenter le taux de clic de 16,5% ! Découvrez laquelle et les coulisses de ce test en téléchargeant la success story d’IKKS.

9. Misez sur un menu dynamique

Par dynamique, j’entends 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.

zavvi_ux_menu

Et le fait que l’on reste 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.)

cdiscount_ux_menu

Moralité : misez sur une formule dynamique et plus simple !

10. Reformulez et clarifiez les éléments de votre menu

K.I.S.S. Keep It Short and Sweet !

Au delà des éléments graphiques à implémenter ou à optimiser, vous devriez aussi soumettre le wording des éléments de votre menu à un ou plusieurs tests A/B.

Le fait est que vous perdez peut-être des centaines de clients chaque jour sans le savoir simplement parce qu’ils sont confus par l’organisation de votre menu. C’est en tout cas une expérience que les équipes de Schmidt ont décidé de mener.

Elles ont opposé leur menu de référence à deux variantes lors d’un test A/B :

schmidt_ux_menu

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

11. Passez du temps (et investissez) sur votre menu mobile

Cela fait quelques mois que je vous parle de la nécessité d’investir sur votre site mobile. C’est nécessaire d’une part parce qu’il est absolument abominable de naviguer sur un site non responsive depuis un smartphone (essayez de commander des billets depuis votre smartphone pour la Cité de la Mer, c’est un ré-gal…).

Rien ne vaut un bel exemple imagé.

À gauche, la réservation de ticket pour la Cité de la Mer.

À droite, celle proposée sur le site du Futuroscope.

cite_mer_futuroscope

Les équipes du Futuroscope ont souhaité construire une expérience de navigation optimisée pour le mobile : le site est entièrement responsive. Et si l’on se concentre sur le menu, on retrouve le classique menu en “burger”, adopté depuis maintenant plusieurs années sur mobile.

Je vous invite à parcourir cet article de Sitesforprofit.com où vous trouverez 22 idées et conseils pour construire un menu de qualité sur mobile. Il n’y a pas de formule magique, mais il faut suivre un certain nombre de codes.

La seule façon de savoir si ça fonctionne c’est de le tester

chartier_ux_menu“L’idée de l’expérience ne remplace nullement l’expérience.”

 

Émile Chartier, Philosophe

 

Sans expérimenter, vous ne saurez jamais si vous pourriez optimiser les performances des éléments de votre site. C’est là tout l’intérêt de se lancer dans l’A/B testing, afin de réaliser des compromis ergonomiques qui plaisent à la plus grande majorité de vos visiteurs.

En bref, qu’il s’agisse de votre menu desktop ou mobile, vous ne pouvez pas vous permettre d’ignorer certains codes de bon sens (y faire apparaître vos pages clés, votre logo – cliquable -, miser sur la simplicité, etc.).

Si le vaste sujet de l’optimisation de l’expérience utilisateur vous intéresse, vous pouvez télécharger notre dernier ebook dans lequel 10 experts de la conversion témoignent et partagent des astuces.

Ebook ecommerce - 10 témoignages experts

Content marketer chez Kameleoon, Clément analyse tous les retours d'expérience de nos clients et consultants et partage les meilleures pratiques en A/B testing et personnalisation.

Des articles qui pourraient vous intéresser