Mega menu en Ecommerce – Analyse des tendances

Un site ecommerce doit permettre aux internautes d’accéder rapidement aux produits qu’ils recherchent. La qualité de la navigation (à l’intérieur du catalogue) est un facteur central dans la performance d’un site ecommerce. Mais comment proposer une navigation fluide, intuitive et simple lorsque l’on a des centaines voire des milliers de références produits ? Découvrez 9 exemples de bonnes pratiques pour vos pages produits 
Aujourd’hui, de plus en plus de sites ecommerce utilisent ce qu’on appelle les « mega menus ». Il s’agit de menus structurés, organisés en plusieurs sections, qui permettent de naviguer plus rapidement au sein d’un gros catalogue de produits, de manière claire, dynamique et progressive. Ces menus géants, que l’on trouve sur tous les gros sites ecommerce, permettent d’améliorer de manière substantielle l’expérience utilisateur des internautes…à condition d’être bien conçus.

Cet article a été rédigé pour vous aider à créer un mega menu efficace pour votre site ecommerce. Dans un premier temps, on vous propose une rapide analyse des megas menus des 10 plus gros sites ecommerce français. Dans un deuxième temps, on s’intéresse à l’évolution de plusieurs mega menus entre 2014 et 2016, afin de mieux comprendre les tendances actuelles et leur logique.

Analyse des menus des 10 plus gros sites ecommerce français

Dans cette partie, nous vous proposons une courte analyse des 10 plus gros sites ecommerce en France. Tous sont Made in France, à l’exception d’Amazon, le grand leader du marché, et d’eBay. Ce top 10 se base sur les statistiques de la FEVAD au troisième trimestre 2015.

1. Amazon

Amazon est de loin le plus gros site ecommerce en France, avec près de 16,4 millions de visiteurs uniques par mois. Le catalogue d’Amazon est tout à fait monstrueux, avec plus de 200 millions de produits référencés. Pour que les visiteurs s’y retrouvent, Amazon a mis en place un système de navigation basé sur deux dispositifs : un mega menu très complet et un moteur de recherche interne surpuissant.

Sur la page d’accueil, l’accès au mega menu s’effectue par un bouton discret situé à gauche de la page. En positionnant la souris sur « Parcourir les boutiques », un menu latéral s’ouvre et fait apparaître les principales catégories du site. Les titres en orange ressortent très bien et permettent de bien comprendre l’organisation du catalogue. Amazon place des offres commerciales illustrées dans chaque menu de catégorie, ce qui est à la fois très efficace d’un point de vue commercial et permet de donner à chaque menu une identité qui lui est propre.

Etant donnée la richesse du catalogue d’Amazon, seules les catégories très générales du type « Montres » apparaissent. Ce qui permet de rendre ce mega menu très léger et très lisible.

Vous utilisez un moteur de recherche interne sur votre site ? Découvrez comment améliorer les performances du moteur de recherche interne de votre site ecommerce.

2. Cdiscount

Cdiscount accueille un peu plus de 10 millions de visiteurs uniques tous les mois, avec une proposition de valeur très claire : proposer aux internautes des produits discounts et des promotions. Le mega menu de Cdiscount est beaucoup plus détaillé que celui d’Amazon. On accède aux différents menus thématiques depuis le menu horizontal situé sous le moteur de recherche interne.

Chaque thématique est identifiée par une couleur, afin de faciliter la lecture de ce mega menu assez dense au final. Selon nous, ce menu est un peu compliqué à comprendre. Il n’est pas assez simple. Il y a trop de catégories et la mise en page est assez peu lisible. On retiendra comme élément positif l’emploi des codes couleurs.

3. Fnac

Le site de la Fnac, qui représente 8 millions de visiteurs uniques par mois, a fait l’objet d’une refonte complète l’année dernière. Comme Amazon, le site de la Fnac a fait le choix d’un menu vertical situé à gauche de l’écran, avec un affichage du mega menu à droite. La mise en page du mega menu est beaucoup plus lisible que sur Cdiscount. On notera : l’utilisation des hashtags de produits en haut de chaque espace catégorie, le bon usage des différentes tailles de police et des lignes de séparation pour organiser et hiérarchiser les sous-catégories, ou encore le bandeau publicitaire contextualisé affiché sur la droite. Il est possible, comme sur le site d’Amazon, de choisir un « rayon » précis pour les recherches effectuées depuis le moteur de recherche.

4. eBay

eBay totalise plus de 7,5 millions de visiteurs uniques par mois. Le site a fait le choix d’un menu horizontal, tout comme Cdiscount. En revanche, le mega menu n’entre pas dans la profondeur de l’arborescence du catalogue de produits. Il n’affiche que très peu de sous-catégories. Sur ce point, le mega menu d’eBay se rapproche beaucoup de celui d’Amazon. Le visiteur est invité à cliquer sur « Tout afficher » pour accéder au détail des catégories et sous-catégories. Il s’agit au final d’un mega menu très épuré, simple à comprendre et très élégant (grâce à l’utilisation des illustrations dans la partie droite des sous-menus).

5. Voyage-sncf.com

Voyage SNCF, qui totalise 7 millions de visiteurs uniques par mois, a pris beaucoup d’ampleur depuis quelques années. Auparavant centré sur la consultation des horaires de trains et les réservations de trains, Voyage SNCF propose aujourd’hui une large palette de services. Il est possible de réserver des vols, des voitures, des bus, des hôtels ou même des croisières. Le mega menu met en évidence ces différents types de prestations. Affiché sous forme verticale à gauche de la page, il a la particularité d’utiliser des logos afin de mieux identifier les différentes catégories. Les caractères ont une couleur que l’on pourrait qualifier de blafarde ou tamisée – une sorte de gris très pâle. C’est un choix assez étonnant mais qui paradoxalement permet, couplé à l’utilisation des logos, d’attirer les regards.

L’idée d’utiliser des logos dans votre mega menu vous intéresse ? Découvrez combien coûte la création d’un logo et les 4 options possibles.

6. Carrefour

Le site de Carrefour accueille un peu plus de 6 millions de visiteurs uniques par mois. On remarque tout de suite de grandes similarités entre le mega menu de Carrefour et celui de la Fnac dont on vient juste de parler. Affichage du menu à gauche, à la verticale, utilisation de logos, absence totale de jeu sur les couleurs. Par contre, on remarquera la profusion des visuels dans les espaces thématiques, qui apparaissent à droite du menu. Un choix assez original, qui contribue surement à alourdir pas mal le site…

7. PriceMinister

PriceMinister accueille près de 6 millions de visiteurs uniques par mois. PriceMinister a fait le choix d’un arrière-plan blanc très épuré, ce qui contraste avec la plupart de ses concurrents. Le mega menu est étonnant de simplicité et d’efficacité mêlées. Le fait qu’il n’y ait aucunes couleurs, aucuns visuels, aucunes illustrations permet de bien faire ressortir le texte et la structure du menu. De fait, il s’agit de l’un des menus les plus simple à lire. L’arborescence est extrêmement facile à comprendre. Ce mega menu est simple dans tous les sens du terme et utilise une mise en page très claire. Au risque de donner un résultat peut-être un peu old-school visuellement. A chacun de se faire sa propre idée !

8. Leroy Merlin

Le site Leroy Merlin est le 8ème site ecommerce le plus visité en France, avec 5,3 millions de visiteurs uniques par mois. Son mega menu est une vraie réussite. D’abord au niveau de la mise en page et du choix des polices. C’est très agréable visuellement parlant. Les sous-menus ont la particularité de présenter dans la partie droite une partie « Nos conseils ». Il est également possible de télécharger des guides Leroy Merlin reliés à la thématique. Cela ajoute une vraie valeur ajoutée à ce mega menu et assoit la position d’expert du groupe français. On notera la mise en gras des sous-catégories dans la partie gauche, qui permet de les mettre en avant par rapport aux conseils.

9. La Redoute

Le site de La Redoute vient de dépasser les 5 millions de visiteurs uniques par mois. L’organisation du mega menu de La Redoute est assez originale, dans la mesure où elle contient trois niveaux. Un premier niveau qui correspond aux grandes catégories (Femme, Homme, Linge de maison), une deuxième niveau correspondant aux sous-catégories (pour la catégorie Homme : Nouveautés, vêtements, chaussures, accessoires), et un troisième niveau qui présente notamment les sous-sous-catégories et les marques liées à la sous-catégorie. Cette structuration du mega menu permet d’accéder facilement à des pages profondes, sans pour autant surcharger la mise ne page. C’est une idée très astucieuse que vous pouvez reprendre si vous avez un catalogue suffisamment volumineux. On remarquera pour finir le côté très aéré de la mise en page, grâce notamment à l’utilisation d’une petite police et aux espacements entre les différentes lignes de texte.

Le petit plus : vous souhaitez créer votre site ecommerce ou bien réaliser une vaste refonte de celui-ci en utilisant WordPress ? Découvrez notre sélection de 30 thèmes WordPress de qualité (gratuits et payants) pour créer un site ecommerce.

10. Vente-privée

Vente Privée, qui totalise 4,7 millions de visiteurs uniques par mois, est le seul site du top 10 à ne pas proposer de mega menu. Pour une raison simple qui tient essentiellement à la petite taille du catalogue. On remarque que coexistent deux menus :

• Un menu vertical à gauche qui se déploie en cliquant sur le bouton « Menu » en haut à gauche. Ce menu ne donne pas accès aux produits du catalogue mais aux différents services du site et à l’espace client.
• Un menu horizontal qui permet d’accéder aux différentes catégories de produits proposés à la vente.

L’exemple Vente privée est l’occasion de rappeler, pour terminer cette première partie, que les mega menus dans le ecommerce ne sont pertinents que pour les sites ayant au moins plusieurs centaines de références. L’objectif du mega menu est de faciliter la navigation à l’intérieur du site et d’acquérir en un coup d’oeil une vision globale de la structure d’ensemble du site. Pour être vraiment utile et utilisable par les visiteurs, le mega menu ne doit pas être trop surchargé. Il n’est donc jamais question d’afficher les sous-sous-sous catégories et autres sous-sous-sous-sous catégories. Cela n’aurait aucun intérêt.

Mega Menu Ecommerce – 2014 vs 2016

Pour cette deuxième partie, inspirée d’un article de econsultancy.com, nous allons analyser rapidement les évolutions des mega menus de 5 sites ecommerce entre 2014 et 2016. Ce sera l’occasion de dégager quelques tendances actuelles. Pour chaque cas, la première illustration (de petite taille) correspond à la version 2014, et la deuxième capture d’écran (de plus grande taille) à la version 2016.

Marks & Spencer

La version 2014 du mega menu de la célèbre marque londonienne Marks & Spencer est très proche de celui du site La Redoute, étudié plus haut. Avec notamment l’existence de trois niveaux, qui permet d’accéder à des pages plus profondes du catalogue. Dans la version 2016, M&S a abandonné cette structuration. Le menu secondaire (correspondant aux sous-catégories) a été supprimé, ce qui permet d’agrandir l’espace consacré au mega menu proprement dit et surtout d’avoir accès à une vue d’ensemble de chaque catégorie.

Monsoon

Le mega menu de Monsoon a beaucoup évolué entre 2014 et 2016. Il prend désormais toute la taille de l’écran, ce qui permet une meilleure visibilité et une meilleure structuration des sous-catégories. L’utilisation de plusieurs tailles de police et du gras ainsi que la structuration des liens rend le mega menu beaucoup plus lisible. Dernière remarque : le passage complet au noir et blanc, qui offre une plus grande clarté.

Vous êtes sur le point de créer votre site internet ?  Découvrez combien coûte la création d’un site ecommerce.

Wiggle

La version 2014 du mega menu de Wiggle faisait très datée, avec ses liens hypertextes en bleu, ses bullet points et plus généralement son design très début des années 2000. La version 2016 est beaucoup plus moderne. La mise en page est beaucoup plus claire et permet de bien comprendre la hiérarchisation des sous-catégories.

Lakeland

La mise en page un peu brouillonne et l’utilisation de thumbnails rendait le mega menu de Lakeland version 2014 très difficile à comprendre. Là encore, un vrai travail a été mené pour améliorer l’expérience utilisateur. Les icônes sont supprimées dans la version 2016. La structure est beaucoup plus lisible, notamment grâce au jeu des couleurs. Le paradoxe est que cette plus grande lisibilité s’accompagne d’une explosion du nombre de catégories. Dans la version 2014, toutes les catégories et sous-catégories étaient affichées. Il n’y avait pas de menus secondaires. Dans la version 2016, ne s’affichent que les sous-catégories reliées à la catégorie sélectionnée. Ce qui permet au passage une navigation beaucoup plus progressive dans le mega menu. A noter aussi la mise en évidence des offres à droite, par le moyen de couleurs flashy.

B&Q

La version 2014 du mega menu de B&Q affichait déjà une structuration en sous-menus mais péchait par son design assez bas de gamme. Le menu version 2016 est beaucoup plus design et surtout beaucoup plus facile à comprendre. Pourtant, là encore, le nombre de catégories a littéralement explosé. On remarquera aussi la suppression des couleurs et la mise en place de petites icônes très simples.

Dans toutes ces évolutions, on remarque des points communs qui dessinent des nouvelles tendances : une mise en page plus simple et plus épurée qui permet de mieux comprendre la structuration des catégories, la suppression des couleurs, l’abandon des miniatures, la création de menus secondaires qui permet une navigation plus progressive dans le mega menu, la modernisation du design, etc. Derrière toutes ces évolutions se manifeste le rôle central accordé à l’expérience utilisateur (UX).

La création d’un mega menu pertinent et bien structuré est un des éléments pouvant améliorer la conversion de votre site ecommerce. Mais c’est bien évidemment loin d’être le seul. Pour aller plus loin, découvrez les conseils de 8 experts sur l’optimisation de la conversion ecommerce.