Chaque type de menu a été créé pour résoudre un problème différent. Choisir le mauvais ne casse pas votre boutique du jour au lendemain, mais il oblige les clients à réfléchir plus que nécessaire — et chaque fois qu’un client doit réfléchir, c’est un moment où il risque de partir. Cet article passe en revue les types de menu Shopify les plus courants et, pour chacun : de quoi il s’agit, quand il convient, quand il ne convient pas, et les erreurs que les marchands ont tendance à commettre.
Un chiffre mérite d’être gardé en tête avant d’entrer dans le détail. Selon le Baymard Institute, le taux moyen d’abandon de panier dans l’e-commerce avoisine les 70 %. Toutes les pertes ne sont pas liées à la navigation, mais une navigation brouillonne contribue à faire fuir les clients avant même qu’ils n’atteignent le panier.
Les quatre types ci-dessous ne s’excluent pas mutuellement. Une boutique en utilise souvent plusieurs à la fois — par exemple un mega menu sur desktop et une tab bar sur mobile. L’essentiel est d’utiliser le bon type dans le bon contexte.
Mega menu : idéal pour de nombreuses catégories et des clients qui naviguent sur desktop
Un mega menu est un grand panneau déroulant. Quand on survole ou qu’on touche un élément du haut, un large panneau s’ouvre et affiche d’un coup de nombreuses sous-catégories, souvent avec des images ou un produit mis en avant. Les clients saisissent toute l’organisation de la boutique d’un seul coup d’œil.
Il fonctionne bien lorsqu’une boutique compte beaucoup de catégories — disons une dizaine de groupes ou plus, comme seuil approximatif — et que la plupart des clients arrivent depuis un ordinateur. Les secteurs où les acheteurs aiment explorer avant de décider, comme la mode, les cosmétiques, la maison et le mobilier, se prêtent bien à ce style. Les clients ne savent pas encore exactement ce qu’ils veulent, alors déployer de nombreux chemins devant eux les aide.
Un mega menu ne convient pas quand une boutique a peu de produits ou que la plupart des clients sont sur mobile. Une boutique qui vend dix modèles de chemise et qui ouvre un panneau gigantesque en fait trop — il paraît vide. Et comme 79 % du trafic Shopify provient du mobile (selon Shopify), un design qui ne rend bien que sur grand écran délaisse la majorité des clients.
L’erreur la plus courante est de vouloir tout y caser. Les marchands veulent tout mettre en valeur, alors ils entassent chaque catégorie et chaque bannière dans un seul panneau. Résultat : les clients se sentent submergés et ne cliquent sur rien. Trop de choix équivaut à pas de choix du tout. Regroupez les éléments de façon serrée, laissez de l’espace blanc et ne mettez en avant que les quelques produits que vous voulez vraiment vendre.
Slide menu : idéal pour des catégories à plusieurs niveaux et des clients qui savent ce qu’ils veulent
Un slide menu (aussi appelé menu hamburger, ouvert depuis l’icône à trois lignes) glisse depuis le bord de l’écran. Il affiche les catégories sous forme d’arborescence — on touche un groupe et ses sous-groupes se déploient, sur plusieurs niveaux de profondeur. C’est une manière soignée de faire tenir une structure complexe dans un espace étroit.
Un slide menu convient quand une boutique a de nombreux niveaux de catégories et que vous avez besoin d’une hiérarchie claire, surtout dans une logique mobile-first. Prenez une boutique de pièces auto : Marque › Modèle › Type de pièce. Le slide menu permet aux clients de descendre dans la bonne branche sans charger une nouvelle page à chaque étape.
Il ne convient pas quand une boutique est simple. Si vous n’avez que quelques catégories, les cacher derrière une icône ne fait que compliquer la vie des clients. Le Nielsen Norman Group a montré qu’une navigation masquée réduit les chances que les clients trouvent l’article qu’il leur faut et les ralentit par rapport à un menu visible.
Il est utile d’en comprendre la nature : un slide menu cache l’information. Cela le rend bien adapté aux personnes qui savent déjà ce qu’elles veulent — elles l’ouvrent activement et filent droit vers une branche familière. Il est plus faible pour la découverte, car les clients ne voient rien tant qu’ils n’ont pas touché l’icône. Si votre objectif est que les clients tombent par hasard sur des produits, un slide menu seul ne suffit pas.
Tab bar : idéale quand la plupart des clients sont sur mobile
Une tab bar est une barre de navigation fixe ancrée en bas de l’écran du téléphone, qui regroupe en général les 4 à 5 éléments les plus importants, comme Accueil, Catégories, Recherche, Panier et Compte. Elle est toujours visible — peu importe jusqu’où le client fait défiler, elle reste là.
La force de la tab bar, c’est sa position. Les recherches de Steven Hoober sur la façon dont les gens tiennent leur téléphone (plus de 1 300 observations sur le terrain) ont révélé que la plupart des actions mobiles se font avec un seul pouce, et que le bas-centre de l’écran est l’endroit que le pouce atteint le plus facilement — souvent appelé la zone du pouce. Placer les actions principales en bas, c’est les mettre exactement là où la main du client repose déjà.
Une tab bar convient quand l’essentiel du trafic vient des téléphones, ce qui est le cas pour la majorité des boutiques Shopify aujourd’hui. Elle garde aussi les choses importantes — surtout le panier — toujours à un seul toucher, au lieu de forcer les clients à remonter en haut de la page.
À noter qu’une tab bar n’a de la place que pour très peu d’éléments. N’essayez pas d’y entasser sept ou huit icônes ; choisissez les 4 à 5 plus importantes et laissez le reste au slide menu ou aux pages de catégories. Voyez la tab bar comme un raccourci, pas comme votre navigation entière.
FAB : un bouton flottant pour une seule action
Un FAB (floating action button, bouton d’action flottant) est un bouton rond qui flotte au-dessus du contenu, pensé pour une seule action importante — discuter avec la boutique, voir le panier ou revenir en haut de la page. Il est toujours là mais discret, sans occuper de réelle place.
Un FAB convient quand il y a exactement une chose que vous voulez permettre aux clients de faire depuis n’importe où. Un exemple courant au Vietnam est le bouton de chat Messenger ou Zalo qui flotte dans le coin inférieur droit — un client qui regarde un produit et qui a une question peut toucher et demander tout de suite, sans rien chercher.
Ce qu’il faut retenir : un FAB ne remplace pas un menu. C’est un raccourci pour une action, pas l’écrin de tout votre système de navigation. L’erreur courante est de le surcharger — un bouton qui se déploie en cinq ou six options, ou trois ou quatre boutons flottants à la fois qui couvrent le contenu et bloquent même le bouton Ajouter au panier. À ce stade, le FAB passe de commodité à obstacle. Un FAB, un objectif.
Quelques principes valables pour les quatre
Quel que soit le type choisi, ces trois points restent toujours vrais.
- Séparez votre configuration mobile et desktop. C’est la même boutique, mais les clients se comportent différemment sur les deux appareils. Un menu unique idéal pour les deux n’existe généralement pas ; mieux vaut utiliser un mega menu sur desktop et une tab bar ou un slide menu sur mobile.
- Ne sacrifiez pas la vitesse. Google fixe de bons objectifs pour les Core Web Vitals : LCP sous 2,5 secondes, INP sous 200 millisecondes et CLS sous 0,1. Un beau menu qui fait sauter la page ou la ralentit fait plus de mal que de bien. Selon les données de Shopify, une boutique installe en moyenne environ 6 applications, donc chaque application ajoutée alourdit la page — être sélectif compte.
- Ne laissez pas votre menu se casser quand vous changez de thème. Si le menu est figé dans le thème, vous devez le reconstruire de zéro à chaque changement d’apparence.
C’est aussi pourquoi beaucoup utilisent un outil de navigation dédié. Navi+ peut construire les quatre types ci-dessus — mega menu, slide menu, tab bar, FAB et un menu en grille — par glisser-déposer, sans code, avec une configuration mobile et desktop séparée, et le menu reste intact quand vous changez de thème. L’outil est aussi conçu pour ne pas plomber vos Core Web Vitals. Mais quel que soit l’outil que vous utilisez, le principe reste le même : choisissez votre type de menu en fonction des appareils de vos clients et de leur manière d’acheter, pas en fonction de celui qui paraît le plus tape-à-l’œil.
Cet article fait partie du guide plus complet sur Comment choisir le bon type de menu pour votre boutique Shopify.