Menu de navigation web : 8 (très) bons exemples à suivre

Le Blog

La navigation d’un site web est un critère majeur de sa réussite

Une navigation web bien pensée permet en effet à vos visiteurs de naviguer de page en page, sans sentiment de frustration. Si vous avez réussi votre travail, ces visiteurs devraient même quitter votre site avec l’envie d’y revenir, voire de réaliser un achat ou de s’inscrire à votre newsletter.

Leur temps étant plus précieux que jamais, proposer une navigation web claire et fluide est donc absolument impératif. Et cela passe en priorité par votre menu de navigation.

Qu’il soit horizontal, vertical, sticky ou qu’il s’agisse dans une certaine mesure du footer, votre menu de navigation web est le premier garant d’un bon parcours client sur votre site web.

Au même titre que vos CTA ou que votre checkout, l’UX de votre top menu peut elle aussi être optimisée. Voyons tout de suite comment !

Cet adage n’a jamais autant de sens que lorsqu’il décrit un menu de navigation.

C’est ce qu’Adidas a parfaitement su traduire sur son site e-commerce.

Pourquoi on aime bien ?

Un menu composé de seulement cinq entrées : ce parti-pris permet de conserver l’attention de l’internaute qui n’a pas à faire d’arbitrage entre un trop grand nombre d’options,
Un wording clair et direct,
Un rendu contrasté.

Gardez en tête que réduire le nombre de possibilités liées à la navigation primaire (celle du top menu, avant tout déroulement) améliore l’efficacité de votre navigation onsite.

Ainsi, il est d’usage de ne pas proposer plus de sept choix à l’utilisateur via le menu.

Par ailleurs, on privilégiera une approche horizontale en évitant de multiplier les sous-menus et entrées.

Si vous devez malgré tout agréger un grand nombre d’items, favorisez plutôt la présentation de ces sous-rubriques dans un “megamenu” occupant toute la largeur de la page.

Fidèle à une certaine tradition du luxe, Burberry applique son positionnement jusque dans son menu de navigation.

Pourquoi c’est un chouette menu ?

Burberry recourt à une sémantique claire (femme, homme, enfant) permettant aux internautes de parcourir facilement et rapidement le site,
La marque n’oublie pas pour autant son identité en mettant en avant son célèbre trench-coat ainsi que son monogram.

“Services”, “Notre offre”, “Nous découvrir”… il n’est en effet pas rare de croiser ces intitulés sur certains menus.

Le problème ? Ceux-ci ne disent absolument rien de ce que propose réellement un site web.

Pourtant, recourir à des intitulés descriptifs possède deux avantages majeurs :

Ils permettent à l’internaute de savoir en un instant ce qu’il trouvera sur le site, lui confirmant ainsi qu’il est au bon endroit,
Ils transmettent des informations cruciales aux moteurs de recherche sur votre activité, contribuant à influer sur votre positionnement dans les résultats naturels.

Veillez cependant à rester raisonnable dans l’usage des mots-clés et à ne pas pratiquer le keyword stuffing. Les internautes détestent ça… tout autant que les moteurs. 😉

La Redoute met en application une recommandation basique mais fondamentale de tout menu de navigation qui se respecte.

Savez-vous laquelle ?

Pourquoi ce menu fait partie du best of (tralala pouet pouet) ?

L’overlay bien sûr ! Au survol du menu, le site a choisi d’appliquer un léger filtre gris sur la zone correspondant aux produits. Cela permet de maintenir l’attention sur les choix proposés dans le menu par un jeu de contraste.

Mais il existe d’autres astuces pour améliorer la visibilité et la lisibilité de votre menu.

Afin de bien indiquer aux visiteurs où ils se situent, on pourra par exemple :

Mettre en évidence graphiquement la catégorie qu’il consulte actuellement,
Utiliser un fil d’Ariane sur les pages intérieures du site (et à nouveau, c’est bon pour les internautes et pour les moteurs de recherche !).

Votre top menu est la base de la navigation de votre site web.

Dès lors, comment permettre aux internautes de se repérer si celui-ci est tout simplement… absent ?

Cuisine Plus a parfaitement saisi cet enjeu en mettant en application une idée toute simple.

Pourquoi ce menu a de grands jours devant lui ?

La fonction sticky peut aussi s’appliquer aux menus. Elle permet au visiteur de naviguer en toute fluidité et maximise les chances de rétention et donc de conversions.

Le sticky peut être mis en œuvre sur l’ensemble du site et est particulièrement efficace en cas de menu contextualisé (exemple : le menu d’un supermarché en ligne qui afficherait un top menu adapté au rayon Hygiène).

L'EXPÉRIENCE EN LIGNE EN 2020 S'adapter aux nouveaux comportements des utilisateurs

Télécharger

L’impact de la barre de recherche dans la navigation ainsi que les conversions est bien souvent très sous-estimée.

L’enseigne Brico Dépôt a choisi d’exploiter cette opportunité pour proposer à ses utilisateurs une barre de recherche bien spécifique.

Pourquoi ce menu peut rouler des mécaniques ? (ok je sors)

Le moteur de recherche interne est parfaitement mis en valeur et se situe là où les utilisateurs s’attendent à le trouver,
L’option de suggestion automatique est activée, permettant à l’internaute de gagner du temps sur desktop… et mobile !
Les suggestions sont organisées clairement en Catégories et Produits,
La barre de recherche est présente sur l’ensemble du site.

Nous ne nous étendrons pas plus sur la barre de recherche. Cet exemple rassemble la plupart des excellentes pratiques UX. Quelques clics valent mieux qu’un long discours.

Si ce concept ne vous rappelle rien, le hamburger menu est une icône composée de trois lignes horizontales suggérant un sandwich mais représentant en réalité un menu.

Vous le croisez lors de vos pérégrinations sur le web depuis quelques années déjà.

En effet, le hamburger menu est rapidement devenu un chouchou des UX Designers du monde entier.

Sa simplicité et son affordance n’y sont d’ailleurs pas étrangers.

Largement adopté comme une solution miracle aux menus complexes et aux enjeux du mobile, il est cependant fréquemment mal utilisé, voire décrié (ici, là mais aussi par ici).

Pourtant, une réflexion en amont et une analyse des habitudes de navigation sur le site permettent de déterminer si son implémentation a une réelle valeur ajoutée.

Le quotidien Ouest-France a ainsi adopté le hamburger menu sur sa version mobile mais également sur desktop.

Pourquoi le hamburger c’est la garantie d’un bon menu ?

Le burger remplace le menu en sticky et allège la homepage,
Il va à l’essentiel avec un classement des actualités par thématiques ou par lieu,
Il permet la mise en valeur visuelle de l’offre payante

A nouveau, il n’existe pas de vérités absolues concernant le hamburger menu. Faites le point sur les usages que font les internautes de votre site ainsi que sur le nombre d’entrées que vous souhaitez valoriser avant de vous lancer dans tout développement.

Nous ne reviendrons pas sur l’évolution du smartphone ces dernières années.

Sachez simplement qu’un menu adapté au mobile (voire conçu d’abord pour le mobile) n’est plus une option.

Vous vous demandez encore à quoi ressemble un menu pensé pour le mobile ? Petite démonstration chez Auchan Drive.

Pourquoi quand c’est mobile friendly nous disons oui ?

Le hamburger menu permet d’optimiser l’espace au-dessus de la ligne de flottaison,
Le moteur de recherche est affiché directement à sa droite,
Ces deux éléments sont affichés en sticky lors du défilement de la page par l’internaute,
Une fois déroulé, le menu s’affiche sur l’intégralité de l’écran de façon logique pour l’internaute,
Les intitulés des rayons sont visibles, clairs et facilement cliquables,
Parce qu’il n’est pas évident d’opter pour le fil d’Ariane sur mobile, le menu dispose d’une flèche retour.

Mais qu’est-ce que le footer peut bien avoir affaire dans cette histoire ?

Regardez plutôt chez Zappos :

Pourquoi Contentsquare approuve ce menu ?

Zappos utilise le footer afin d’afficher de façon exhaustive les liens commerciaux et légaux nécessaires à son activité.

Concrètement, le footer peut être une excellente opportunité d’alléger votre top menu si votre site propose une quantité importante de contenu.

Au-delà des traditionnels liens vers les Mentions Légales ou le plan du site, le footer peut aussi héberger :

Votre formulaire de newsletter,
Vos boutons sociaux,
Des liens vers des catégories d’importance secondaire.

Vous êtes à présent armé pour proposer une expérience de navigation cohérente et fluide à vos utilisateurs via votre menu.

Notez toutefois qu’il est très probable que les sites précédemment cités aient longuement étudié les habitudes de leurs visiteurs pour déterminer la structure de leur menu.

Contentsquare propose une analyse détaillée des comportements des internautes vous permettant d’opérer des optimisations UX sur votre site en pleine conscience.

Nous serons ravis de vous retrouver autour de quelques boissons chaudes pour étudier avec vous les forces mais aussi les points de friction de votre navigation. 🙂