Lorsqu’une boutique dépasse les 500 produits et les 15 catégories, les choses changent de nature. Le défi de la navigation d’une boutique à grande échelle n’est plus « comment garder tout cela en ordre », mais « comment aider des milliers de visiteurs, animés par des dizaines d’intentions différentes, à trouver chacun ce qu’il cherche en quelques secondes ». C’est l’étape avec laquelle j’ai le plus lutté en gérant une boutique, alors laissez-moi partager ce que j’en ai appris.
À quoi ressemble l’étape 3
Le trait le plus évident est un catalogue vaste et structuré sur plusieurs niveaux. Vous n’avez plus quelques catégories à plat, mais un arbre à 2 ou 3 niveaux : un groupe principal, des sous-groupes, puis un filtrage par attributs. Une boutique de mode peut avoir Homme / Femme / Enfant, chaque branche étant divisée en Hauts / Bas / Accessoires, puis encore selon l’occasion ou la saison.
Le trafic devient lui aussi plus varié. Les visiteurs venant d’une recherche Google savent généralement déjà ce qu’ils veulent. Ceux qui arrivent depuis des publicités Facebook ou TikTok débarquent souvent sur un coup de tête, cliquent sur un produit, puis décident de la suite. Ceux qui viennent de l’e-mail sont des clients fidèles qui connaissent les lieux. Chaque source se comporte différemment, et le menu doit servir ces trois publics sur la même interface.
À ce stade, beaucoup de boutiques vendent aussi sur plusieurs marchés et en plusieurs langues. Et la vitesse devient désormais une question de survie. Selon Google, les bons seuils des Core Web Vitals sont un LCP inférieur à 2,5 secondes, un INP inférieur à 200 ms et un CLS inférieur à 0,1. Chaque application supplémentaire que vous installez peut grignoter ce budget, alors garder la page légère demande une vraie discipline.
Les besoins de navigation à cette échelle
Une simple barre de menu ne suffit plus pour la navigation d’une boutique à grande échelle. Les besoins incluent généralement :
- Un Mega Menu plus complexe : plusieurs colonnes pour déployer tout l’arbre des catégories, avec de la place pour un produit mis en avant et une bannière promotionnelle saisonnière.
- Une navigation mobile optimisée : la plupart des commandes viennent du téléphone, l’expérience tactile doit donc être fluide et à portée de pouce.
- Des tests A/B de menu : quand le trafic est suffisant, mesurez plutôt que de deviner.
- Un FAB pour les CTA saisonniers : un bouton flottant pour pousser la campagne en cours sans toucher à l’ensemble du menu.
Le méga menu multicolonne — et ses limites
Un méga menu multicolonne permet aux visiteurs de voir toute la structure de la boutique d’un seul survol. C’est un atout majeur sur ordinateur, où l’espace est généreux et le curseur précis.
Mais plusieurs colonnes ne veut pas dire y entasser tout. Les visiteurs balaient l’écran de gauche à droite et de haut en bas : la toute première colonne, à gauche, doit donc accueillir le groupe le plus important. Placer un produit mis en avant ou une bannière dans la colonne la plus à droite — la zone que l’œil atteint en dernier — est généralement plus judicieux que de la glisser au milieu du flux de lecture.
Le mobile : là où se décide la commande
Sur un téléphone, le pouce est le curseur. Selon Steven Hoober (UXmatters), la plupart des utilisateurs tiennent leur téléphone d’une seule main et le manipulent avec le pouce : la zone la plus facile à toucher est donc la moitié inférieure de l’écran. C’est pourquoi une Tab Bar fixée en bas est généralement plus efficace que d’entasser tout dans un menu hamburger en haut.
Le Nielsen Norman Group souligne aussi que cacher toute la navigation derrière un hamburger réduit nettement l’usage que les visiteurs font du menu. Ils recommandent une combinaison : quelques raccourcis importants affichés en évidence, le reste rangé dans un menu coulissant. Pour une boutique de plus de 500 produits, ce duo est presque obligatoire — vous ne pouvez pas attendre des visiteurs qu’ils ouvrent eux-mêmes le hamburger pour explorer le catalogue.
Quelques décisions difficiles
À cette échelle, les choix n’ont plus de réponse unique valable pour tous. Voici quelques points que j’ai dû peser :
Faut-il découper le menu par persona ? Par exemple, séparer « Pour moi » et « Pour offrir ». Cela fonctionne quand les deux groupes de visiteurs raisonnent réellement différemment — celui qui achète un cadeau pense à l’occasion, au budget, au destinataire. Mais si vous imposez un persona auquel les visiteurs ne pensent pas, vous ne faites qu’ajouter une couche d’hésitation. Regardez les données de votre recherche interne avant de trancher.
Faut-il rattacher la recherche au méga menu ? Avec un grand catalogue, la recherche est souvent le chemin le plus rapide pour qu’un visiteur déterminé atteigne sa cible. Placer le champ de recherche juste à l’intérieur du méga menu ou à côté sert les deux publics — ceux qui aiment parcourir et ceux qui aiment taper. C’est généralement une décision du registre « à faire ».
Quand utiliser un produit mis en avant dans le méga menu ? Lorsque vous avez un produit qui mérite vraiment d’être poussé : une nouveauté, un article en forte promotion, ou le best-seller du groupe. Ne placez pas un produit mis en avant juste pour combler un espace vide — un encadré image sans raison rend le menu plus encombré et plus lent.
Une règle que je me suis fixée : chaque élément du menu doit répondre à la question « aide-t-il le visiteur à avancer, ou n’est-il qu’une décoration ? »
Un repère à garder en tête : selon le Baymard Institute, le taux moyen d’abandon de panier tourne autour de 70 %, et ce chiffre n’a quasiment pas bougé depuis de nombreuses années. Une bonne navigation ne peut pas régler l’étape du paiement, mais un menu encombré, lent et difficile à interroger fera partir les visiteurs très tôt — avant même qu’ils n’aient eu l’occasion d’ajouter au panier.
Conseils de configuration avec Navi+
À ce stade, je sépare généralement le bureau et le mobile plutôt que d’utiliser une configuration commune. Navi+ permet de configurer les deux environnements de façon indépendante : c’est le moment d’en profiter.
Sur ordinateur : utilisez un Mega Menu complet. Déployez l’arbre des catégories sur plusieurs colonnes, réservez une colonne à un produit mis en avant ou à une bannière saisonnière, et envisagez de placer un champ de recherche directement dans le menu. Comme Navi+ fonctionne en glisser-déposer sans code, vous pouvez modifier la disposition des colonnes assez vite quand vous voulez tester une nouvelle structure.
Sur mobile : combinez trois couches. Une Tab Bar optimisée en bas pour les 4 à 5 parcours les plus importants, bien calée dans la zone du pouce. Un Slide Menu contenant l’ensemble du catalogue pour les visiteurs qui veulent explorer en profondeur. Et un FAB pour les CTA saisonniers — par exemple « Soldes 11.11 » ou « Cadeaux du Nouvel An lunaire » — activé pour l’occasion puis désactivé ensuite, sans reconstruire le menu.
Comme le menu Navi+ reste en place lorsque vous changez de thème et qu’il est optimisé pour ne pas dégrader les Core Web Vitals, vous pouvez expérimenter des dispositions plus librement, sans craindre de tout recommencer à chaque changement de design.
Mesurer et réévaluer par cycles
La grande échelle permet de mesurer de façon utile. Servez-vous des statistiques pour voir quels éléments de menu sont beaucoup cliqués et lesquels sont quasiment morts. Avec assez de trafic, les tests A/B de menu vous aident à comparer deux options — par exemple un méga menu avec produit mis en avant face à un autre sans — et à laisser les chiffres décider plutôt que l’intuition.
Pour une boutique multilingue, rappelez-vous qu’un menu traduit automatiquement casse parfois la mise en page : l’allemand est plus long que le vietnamien, et certaines langues se lisent de droite à gauche. Vérifiez chaque version linguistique comme une expérience à part entière ; ne partez pas du principe qu’un beau texte d’origine donne une belle traduction.
Enfin, fixez-vous un rythme de revue régulier — trimestriel, par exemple. À ce stade, le catalogue change en permanence, et un menu qui avait du sens il y a six mois peut déjà être en décalage avec votre structure de produits actuelle. La navigation n’est pas une tâche qu’on fait une fois pour toutes.
Cet article fait partie du guide plus complet sur La navigation à chaque étape de la croissance de votre boutique — de 10 à 10 000 produits.