Après avoir lu les articles consacrés à chaque type de menu, beaucoup de gens restent bloqués à la dernière étape : alors, qu’est-ce que ma boutique doit vraiment utiliser ? Ce sentiment est normal. La théorie sur les Tab Bars, les Mega Menus ou les Slide Menus ne devient utile que lorsqu’on l’applique à ses propres chiffres.
Cet article présente une méthode de sélection de menu en 5 étapes, que vous pouvez parcourir en une après-midi environ. Il n’existe pas de formule unique qui convienne à toutes les boutiques, mais il existe une façon de procéder qui vous aide à décider à partir de données réelles plutôt qu’au feeling. Je suis arrivé à cette approche après avoir géré quelques petites boutiques et m’être trompé une ou deux fois.
Étape 1 : Regardez votre propre répartition mobile / ordinateur
Ne vous fiez pas à l’idée reçue selon laquelle « tout le monde dit que le mobile est majoritaire ». Ouvrez vos propres chiffres et regardez.
Allez dans Google Analytics (catégorie Tech / Device) ou Shopify Analytics (Online store sessions by device type). Sortez les 30 à 90 derniers jours pour avoir un échantillon assez large. Vous verrez le pourcentage de sessions venant des téléphones par rapport aux ordinateurs.
Ce chiffre détermine pour quel écran vous concevez en premier. Si 80 % des visiteurs arrivent sur un téléphone, l’expérience mobile est la scène principale, et l’ordinateur passe au second plan. Si vous vendez en B2B et que la plupart de vos clients utilisent un ordinateur au bureau, l’histoire est inversée.
Regardez aussi le taux de conversion par appareil, pas seulement le trafic. D’après le Baymard Institute, l’abandon de panier sur mobile tourne autour de 80 %, soit plus que sur ordinateur (environ 66 %). Si votre boutique reçoit beaucoup de visiteurs mobiles mais que la conversion mobile est faible, une navigation difficile à utiliser peut faire partie de l’explication.
Étape 2 : Comptez vos catégories de niveau 1 et de niveau 2
Ouvrez la section Navigation dans Shopify et comptez pour de vrai.
- Catégories de niveau 1 : les grands groupes. Pour une boutique de mode, par exemple : « Femme », « Homme », « Accessoires », « Soldes ».
- Catégories de niveau 2 : les sous-branches à l’intérieur de chaque catégorie de niveau 1. « Femme » peut contenir « Hauts », « Bas », « Robes », « Chaussures ».
Ce chiffre réduit vos options. Une boutique qui n’a que 3 ou 4 catégories de niveau 1 et presque aucune catégorie de niveau 2 n’a pas besoin d’un Mega Menu — le Mega Menu existe pour accueillir des structures à plusieurs niveaux. À l’inverse, une boutique avec 8 catégories de niveau 1, chacune comptant 5 à 6 sous-branches, ferait défiler les clients jusqu’à la crampe si tout était entassé dans un seul Slide Menu.
Une règle approximative que j’utilise souvent : plus votre structure est plate et réduite, plus vous devez privilégier un menu toujours visible (comme une Tab Bar en bas). Plus votre structure est profonde et ramifiée, plus vous avez besoin d’un menu qui regroupe et se déploie (un Mega Menu sur ordinateur, un Slide Menu sur mobile).
Étape 3 : Identifiez les 3 à 5 pages que les clients ont le plus besoin d’atteindre
C’est l’étape la plus souvent négligée, et pourtant elle compte.
Retournez dans Google Analytics ou Shopify Analytics et ouvrez le rapport des pages les plus consultées (Top pages / Landing pages). Notez les 3 à 5 destinations dont les clients ont vraiment besoin. Elles tombent généralement dans : la page d’accueil, quelques collections clés, la page de recherche, le panier, et parfois une page de suivi de commande ou de contact.
Pourquoi seulement 3 à 5 ? Parce que c’est le nombre raisonnable de « raccourcis » que vous pouvez placer aux endroits les plus faciles à toucher. Une Tab Bar en bas d’un écran mobile ne peut généralement contenir que 4 à 5 éléments avant de devenir trop serrée. Si vous identifiez correctement les 4 destinations les plus importantes, vous savez exactement quoi mettre dans la Tab Bar.
Soyez honnête à cette étape. Ce que vous voulez que les clients voient (par exemple, votre page sur l’histoire de la marque) n’est pas forcément ce dont ils ont besoin pour acheter. Suivez les données de comportement, pas les souhaits.
Étape 4 : Choisissez votre configuration de menu en fonction de quatre facteurs
Maintenant, combinez les trois étapes précédentes avec les quatre facteurs abordés dans les articles précédents : l’appareil dominant, la profondeur des catégories, le nombre de destinations importantes, et les spécificités de votre catégorie de produits. Recoupez avec les tableaux comparatifs de ces articles. Voici quelques combinaisons courantes.
| Votre situation | Configuration suggérée |
|---|---|
| Visiteurs majoritairement mobiles, structure plate, 4 destinations claires | Tab Bar en bas + Slide Menu pour le reste |
| Beaucoup de catégories, beaucoup de sous-branches, trafic ordinateur important | Mega Menu sur ordinateur + Slide Menu sur mobile |
| Besoin d’une action qui se démarque (chat, réservation, appel) | FAB pour cette action, combiné au menu principal |
| Catalogue riche en images, peu de texte (cosmétiques, alimentation) | Visual Grid Menu |
Une remarque sur la façon dont les gens tiennent leur téléphone. D’après les recherches de Steven Hoober, environ la moitié des utilisateurs tiennent leur téléphone d’une seule main, en faisant l’essentiel du travail avec le pouce. La zone facile à atteindre du pouce se situe dans la moitié inférieure de l’écran. C’est pourquoi une Tab Bar en bas est généralement plus facile à toucher qu’un hamburger dans le coin supérieur — le coin supérieur tombe dans la zone « difficile à atteindre ».
C’est aussi le moment de réfléchir à la navigation cachée. Le Nielsen Norman Group a mesuré que les menus toujours visibles sont découverts et utilisés environ 1,5 fois plus que les menus cachés derrière une icône hamburger. Cela ne veut pas dire que le hamburger est une erreur — il reste utile pour accueillir les éléments secondaires — cela veut dire : ne cachez pas vos destinations les plus importantes derrière lui.
Étape 5 : Installez Navi+, construisez un prototype et regardez-le sur un vrai appareil
À ce stade, vous avez une hypothèse. Il reste à la construire et à la voir de vos propres yeux.
Navi+ vous permet de construire des Tab Bars, des Mega Menus, des Slide Menus, des FABs et des Grid Menus sans code — par simple glisser-déposer — et de configurer le mobile et l’ordinateur séparément. Vous mettez en place exactement la configuration choisie à l’étape 4, un style par appareil, puis vous activez le mode aperçu. Comme le menu est créé indépendamment du thème, il reste intact même si vous changez de thème plus tard.
Le point que je veux souligner : regardez-le sur un vrai téléphone, pas seulement dans un émulateur.
L’émulateur de votre navigateur vous donne la bonne taille d’écran, mais il ne peut pas reproduire la façon dont un vrai doigt touche un bouton — si le bouton est trop petit, ou si la Tab Bar se retrouve cachée par le clavier ou par la barre de navigation du téléphone. Certains problèmes n’apparaissent que lorsque vous prenez le téléphone en main et que vous essayez d’acheter quelque chose comme un vrai client.
Pendant l’aperçu, surveillez aussi la vitesse. Google fixe le seuil « bon » des Core Web Vitals à un LCP inférieur à 2,5 secondes, un INP inférieur à 200 millisecondes et un CLS inférieur à 0,1. Un menu lourd peut faire saccader la page ou décaler la mise en page. Navi+ est optimisé pour limiter son impact sur ces métriques, mais vous devez tout de même le vérifier sur votre propre boutique.
Enfin, n’ayez pas peur d’ajuster. La configuration choisie à l’étape 4 est un point de départ, pas un verdict. Ajouter ou retirer un outil de navigation n’a rien de grave. Construisez un prototype, regardez les chiffres après quelques semaines, puis ajustez. C’est ainsi que cette méthode porte vraiment ses fruits.
En résumé, une bonne méthode de sélection de menu ne part pas du type de menu qui vous plaît, mais des chiffres : votre répartition mobile / ordinateur, la profondeur de vos catégories et les destinations dont les clients ont vraiment besoin. Les quatre facteurs, plus un prototype sur un vrai appareil, vous donneront une réponse plus proche de votre boutique que n’importe quel conseil générique.
Cet article fait partie du guide plus complet sur Comment choisir le bon type de menu pour votre boutique Shopify.