Aller au contenu principal
astuces-ux-menu
16 mai 2017

10 astuces UX pour créer un menu de navigation optimal

Temps de lecture
8 min
Author
Lauréline
Lauréline Saux
Partager

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 pou améliorer votre menu afin de faciliter la navigation de vos visiteurs. 

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. 

linkedin2_ux_menu

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. 

linkedin_ux_menu

2. uN MENU SIMPLE D'utilisaition 

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. 

 

menu_fnac_ux_menu

 

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 :

 

amazon_ux_menu

 

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 !

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.
Soumaya Ouanes Kameleoon
Soumaya Ouanes
CSM Team Leader, Kameleoon

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. 

 

sticky_search_ux_menu

 

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 :

 

apple_ux_menu

 

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.

 

hubspot_ux_menu

 

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.

 

 

ikks_ux_menu

 

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.

 

zavvi_ux_menu

 

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

 

cdiscount_ux_menu

 

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. 

 

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

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.

 

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.

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. 

3 L'A/B testing pour valider votre menu 

L'A/B testing vous permet d'évaluer l'efficacité de votre menu en confrontant deux versions différentes. 

Comme nous l'avons vu dans cet article, la pratique permet aux marques d'identifier les points de frictions que rencontrent les visiteurs et d'y remédier en modifiant certains éléments. 

Retrouvez toutes les expériences d'A/B testing de nos clients. 

La personnalisation des parcours visiteurs est aujourd'hui une pratique incontournable pour proposer des expériences de qualité et augmenter les conversions d'un site web. 

Personnaliser le menu de navigation est LA méthode qui vous permet de proposer un menu qui convient à chaque visiteur et qui évolue en fonction de ses besoins. 

C'est que 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.

La variante B, où les catégories du menu sont réorganisées en fonction des appétences des visiteurs, a vu augmenter les transactions de 8,5 % sur mobile.

fnac_mobile_ux_menu

 

 

Ebook ecommerce - 10 témoignages experts

Lauréline
Lauréline Saux
Content Marketer chez Kameleoon, Lauréline analyse tous les retours de nos clients et consultants et partage les meilleures pratiques d'optimisation de la conversion.