menu-navigation-site-web
Actualités|août 7, 2019

8 exemples de menu de navigation web avec de bonnes pratiques UX

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

Si vos utilisateurs ne sont pas à-même de trouver facilement vos pages produits ou vos formulaires, le contenu et le design de votre site (aussi aboutis soient-ils) deviennent parfaitement inutiles.

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’une bonne circulation sur votre site.

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.

homepage d’adidas france

 

Pourquoi on aime bien ?

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.

homepage de burberry france

 

Pourquoi c’est un chouette menu ?

“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 : 

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 ?

homepage de la redoute

 

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

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 : 

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.

homepage de cuisine plus

 

Pourquoi ce menu a de grands jours devant lui ?

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

homepage brico dépôt

 

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

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

homepage ouest france

 

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

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.

menu de navigation mobile auchan

 

Pourquoi quand c’est mobile friendly nous disons oui ?

Découvrez également notre étude sur l’optimisation mobile : 

mobile report banniere

 

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

Regardez plutôt chez Zappos

footer de zappos

 

Pourquoi Contentsquare approuve ce menu ?

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 :

 

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

 

Analysez le comportement de vos visiteurs !
Réservez votre démo personnalisée avec nos experts. Vous découvrirez comment notre plateforme d’UX Analytics peut augmenter votre conversion en facilitant les expériences digitales de vos utilisateurs.

Demandez une démo

 

Auteur
Pierre Sommer

Pierre vient de rejoindre l'équipe Marketing de Contentsquare. Il aime l'UX, les blogs, et les blogs sur l'UX.

data benchmark
Voyez votre classement