Ouvrez votre boutique Shopify sur un téléphone. Où est la navigation ? Elle est derrière l’icône hamburger — trois lignes horizontales dans le coin supérieur gauche ou droit. C’est là que la plupart des thèmes Shopify placent votre catalogue entier sur mobile. Derrière une petite icône, dans l’endroit le plus difficile à atteindre sur l’écran.
Pensez maintenant à la façon dont vous utilisez vos applications préférées. Instagram a une tab bar en bas. Amazon a une barre de navigation inférieure. Uber, Spotify, Google Maps — tous utilisent une navigation inférieure qui reste visible lors du défilement. Ces entreprises ont dépensé des millions en recherche d’utilisabilité avant de s’installer sur ce modèle. Et pourtant, la plupart des thèmes Shopify utilisent toujours le seul modèle de navigation mobile que la recherche montre constamment comme étant le pire : le menu hamburger cachant tout dans le coin supérieur.
- La plupart des thèmes Shopify offrent un seul modèle de navigation mobile : le menu hamburger dans le coin supérieur.
- Les menus hamburger réduisent l'utilisation de la navigation de près de 50 % par rapport à une navigation visible (Nielsen Norman Group).
- Les tab bars inférieures se situent dans la zone de pouce naturelle et génèrent un gain de conversion mobile de 15 à 25 % selon les études de commerce électronique.
- Les approches hybrides (tab bar visible + menu déroulant pour les catégories plus profondes) surpassent le hamburger uniquement en combinant l'accès rapide à la profondeur.
Pourquoi les thèmes Shopify utilent par défaut le hamburger uniquement
Le menu hamburger domine les thèmes Shopify pour des raisons pratiques, pas parce que c’est le meilleur modèle pour les conversions.
L’espace écran est limité. Un écran mobile mesure environ 375 pixels de large. Une barre de navigation horizontale affichant cinq noms de catégories a besoin d’au moins 50 à 70 pixels par étiquette pour rester lisible, ce qui signifie que vous pouvez afficher au maximum 5 à 6 articles. L’icône hamburger condense une navigation illimitée en un seul bouton de 44 pixels. Pour les développeurs de thèmes qui doivent prendre en charge des boutiques ayant de 3 à 30 catégories, le hamburger est le seul modèle qui fonctionne universellement sans personnalisation.
Les thèmes doivent être génériques. Un thème vendu sur le Shopify Theme Store doit fonctionner pour une boutique de bijoux avec 4 catégories et un magasin de pièces automobiles avec 200. Le menu hamburger gère les deux cas de manière identique. Une tab bar, en revanche, oblige le commerçant à choisir quelles 4 à 5 catégories apparaissent dans la navigation persistante — une décision qui exige la connaissance du catalogue que le développeur de thème n’a pas.
Simplicité de mise en œuvre. Le modèle hamburger est simple à construire : un bouton bascule une superposition plein écran contenant le menu. Il n’y a pas besoin de calculer les points d’arrêt réactifs pour les étiquettes visibles, aucune préoccupation concernant la troncature de texte, et aucune interaction complexe entre une tab bar persistante et le comportement de défilement de la page. Les développeurs de thèmes peuvent le mettre en œuvre de manière fiable en quelques heures.
Cohérence du design. Lorsque chaque thème Shopify utilise un menu hamburger, les acheteurs développent un comportement appris : « Je tape sur les trois lignes pour voir le menu. » Les développeurs de thèmes peuvent raisonnablement supposer que les utilisateurs mobiles connaissent ce modèle et le rechercheront.
Ce sont des raisons d’ingénierie et d’affaires valides. Le problème est qu’elles optimisent pour les contraintes du développeur de thème, et non pour l’expérience de l’acheteur.
Le coût de conversion de la navigation hamburger uniquement
La recherche sur les menus hamburger montre constamment le même résultat : cacher la navigation derrière une icône hamburger réduit l’utilisation et nuit à l’accomplissement des tâches.
L’utilisation de la navigation chute de près de moitié. La recherche du Nielsen Norman Group sur les menus hamburger a révélé que la navigation masquée réduit considérablement la découvrabilité. Lorsque le menu est visible, les gens l’utilisent. Quand il est caché derrière une icône, un grand pourcentage d’utilisateurs ne l’ouvrent jamais — ils s’appuient soit sur les liens visibles sur la page actuelle, utilisent la recherche, soit partent.
Le problème de la zone de pouce. La recherche influente de Steven Hoober sur comment les gens tiennent et interagissent avec les téléphones a montré que les coins supérieurs d’un écran de téléphone sont les plus difficiles à atteindre d’une seule main. L’icône hamburger se situe exactement dans cette zone morte. Sur les téléphones de plus de 6 pouces (ce qui inclut désormais la plupart des modèles), atteindre le coin supérieur nécessite soit un changement de prise, soit une deuxième main. Une tab bar inférieure se situe où le pouce repose naturellement — dans le tiers inférieur de l’écran — la rendant accessible sans effort.
Impact spécifique au commerce électronique. Pour les magasins en ligne, le coût d’une navigation cachée est directement mesurable dans les taux de conversion. La recherche citée par LibauTech montre que les tab bars inférieures génèrent un gain de conversion mobile de 15 à 25 % par rapport à la navigation hamburger uniquement. Le mécanisme est simple : lorsque les acheteurs peuvent voir les liens de catégories de manière persistante en bas de l’écran, ils parcourent plus de catégories, découvrent plus de produits et sont plus susceptibles de trouver quelque chose qu’ils veulent acheter.
Connexion à l’abandon de panier. La recherche du Baymard Institute sur l’utilisabilité mobile montre que la difficulté de navigation est un contributeur significatif à l’abandon de panier mobile. Lorsque les acheteurs ne peuvent pas naviguer facilement entre les catégories, ils ont tendance à afficher moins de produits par session. Moins de produits consultés signifie moins de probabilité de trouver un produit à acheter, ce qui se manifeste par des taux de rebond plus élevés et des taux de conversion plus faibles sur mobile.
L’impact cumulatif est substantiel. Pour une boutique avec 60 % de trafic mobile réalisant 100 000 $/mois de revenus, une amélioration de 15 % de la conversion mobile se traduit par environ 9 000 $/mois de revenus supplémentaires. C’est le coût de s’en tenir à un modèle hamburger uniquement quand de meilleures alternatives existent.
Modèles de navigation mobile : une comparaison
Tous les modèles de navigation mobile ne fonctionnent pas de manière égale. Voici comment les approches les plus courantes se comparent :
| Modèle | Visibilité | Accessibilité pouce | Capacité catégorie | Idéal pour |
|---|---|---|---|---|
| Hamburger uniquement | Masqué jusqu’à appui | Mauvaise (coin supérieur) | Illimitée (tout masqué) | Petits catalogues, sites de contenu |
| Tab bar inférieure | Toujours visible | Excellent (zone de pouce) | 4 à 5 articles | Boutiques avec des catégories principales claires |
| Barre d’en-tête collante | Visible au défilement vers le haut | Modérée (haut de l’écran) | 3 à 4 articles | Boutiques privilégiant la recherche + panier |
| Bouton d’action flottant | Toujours visible | Bon (coin inférieur) | 1 action (s’étend davantage) | Boutiques à focus unique (ex. « Acheter maintenant ») |
| Hybride : tab bar + menu déroulant | Tab bar toujours visible, menu complet à la demande | Excellent pour les tâches courantes, bon pour la navigation profonde | 4 à 5 visibles + illimitée dans le menu | Boutiques avec 20+ catégories |
L’approche hybride — une tab bar inférieure pour les 4 à 5 principales catégories plus un menu déroulant (déclenché à partir d’un des emplacements de tab bar) pour la navigation complète — surpasse systématiquement les autres modèles. Elle donne aux acheteurs un accès instantané aux destinations les plus populaires tout en préservant l’accès à l’arborescence de catégories complète.
Ce que les thèmes Shopify populaires offrent réellement sur mobile
Voici à quoi ressemble la navigation mobile dans les thèmes largement utilisés :
Dawn (gratuit, Shopify) : Menu hamburger dans l’en-tête. Pas de tab bar. Le menu mobile s’ouvre comme une superposition plein écran avec des menus déroulants de type accordéon pour les catégories imbriquées. Une mise en œuvre propre, mais strictement hamburger uniquement. Aucun paramètre pour changer le modèle de navigation mobile.
Prestige (Clean Canvas) : Menu hamburger avec un panneau coulissant légèrement plus soigné. Prend en charge les images en vedette dans le menu mobile, ce qui ajoute de l’intérêt visuel mais ne change pas l’interaction fondamentale. Nécessite toujours un appui dans le coin supérieur pour accéder à la navigation.
Impact (Maestrooo) : Menu hamburger avec une barre latérale coulissante. Impact inclut une option « sticky header » qui garde l’icône hamburger visible lorsque les utilisateurs font défiler, ce qui est une petite amélioration — mais l’icône est toujours dans le coin supérieur. Aucune option de tab bar.
Impulse (Archetype) : Menu hamburger avec un panneau de type tiroir. Impulse dispose d’un menu mobile relativement sophistiqué avec des animations fluides et le support des images dans la navigation. Mais comme les autres, il est déclenché strictement par le hamburger et n’offre pas une couche de navigation visible persistante.
Warehouse (Maestrooo) : Menu hamburger avec une barre inférieure affichant les icônes de panier et de recherche. Cela se rapproche le plus d’une approche hybride en plaçant certaines icônes utilitaires en bas, mais la navigation elle-même (parcourir les catégories) est toujours derrière le hamburger dans le coin supérieur.
Le modèle est cohérent : dans tous les thèmes Shopify majeurs, la navigation mobile est accessible exclusivement via une icône hamburger dans la zone d’en-tête. Aucun des thèmes populaires n’offre une option de tab bar inférieure intégrée ou une navigation hybride.
Ajouter une tab bar sans changer votre thème
Si votre thème n’offre pas de tab bar (et aucun des thèmes populaires ne le fait), vous avez trois options :
Option 1 : Code de thème personnalisé. Un développeur Shopify peut ajouter une tab bar inférieure en modifiant les modèles Liquid et le CSS du thème. Cela implique :
- Créer un extrait avec le HTML de la tab bar
- Ajouter du CSS pour le positionnement fixe inférieur, les états actifs et le dimensionnement réactif
- L’inclure dans le fichier de mise en page
theme.liquid - Écrire du JavaScript pour gérer les états actifs et le comportement mobile
Le coût de développement est généralement de 4 à 8 heures pour un développeur familiarisé avec les thèmes Shopify. Le résultat est une tab bar légère et rapide, entièrement intégrée au thème. L’inconvénient : les mises à jour de thème peuvent écraser vos modifications, et vous aurez besoin d’une intervention de développeur chaque fois que vous voulez modifier les articles de la tab bar.
Option 2 : Une injection JavaScript via l’éditeur de script Shopify ou un bloc d’application personnalisé. Vous pouvez ajouter une tab bar à l’aide d’un bloc d’application ou d’une section Liquid personnalisée qui injecte du HTML, du CSS et du JavaScript dans la page. Cela ne modifie pas les fichiers principaux du thème, donc les mises à jour de thème ne l’écraseront pas. Mais la mise en œuvre est fragile — elle dépend de la structure DOM du thème, qui peut changer entre les versions de thème.
Option 3 : Une application menu avec support de tab bar. Les applications comme Navi+ incluent des composants de tab bar pré-construits qui s’installent aux côtés de votre thème sans modifier les fichiers de thème. L’application rend la tab bar comme une superposition au bas de l’écran, indépendante de la navigation existante du thème. Vous configurez les catégories qui apparaissent dans la tab bar via l’admin de l’application, et l’application gère tout le comportement réactif, les états actifs et l’interaction avec la navigation d’en-tête existante du thème.
L’approche par application a l’avantage de zéro modifications de code de thème et une interface de configuration visuelle. Le compromis est une charge JavaScript supplémentaire (généralement 30 à 50 KB pour une application bien construite) et un coût d’abonnement mensuel. Pour les boutiques où l’amélioration de la conversion mobile justifie un investissement même modeste, les calculs de ROI fonctionnent généralement — le gain de revenus d’une navigation mobile visible dépasse de loin le coût de l’application.
Concevoir une tab bar efficace pour votre boutique
Que vous construisiez une tab bar personnalisée ou utilisiez une application, les décisions de conception ont de l’importance :
Choisir 4 à 5 articles maximum. Chaque onglet doit être suffisamment grand pour que l’appui soit fiable (minimum 44x44 pixels selon le HIG d’Apple et les directives Material Design de Google). Sur un écran large de 375 pixels, 5 articles donnent à chaque onglet environ 75 pixels — assez pour une icône et une étiquette courte. Plus de 5 articles réduisent les cibles d’appui en dessous de la taille utilisable.
Placer les catégories les plus visitées dans la tab bar. Examinez vos analyses pour identifier les 3 à 4 pages de collection principales par trafic. Ce sont vos candidats de tab bar. L’emplacement restant doit être soit un élément « Menu » (qui ouvre la navigation complète), soit une action « Recherche ».
Utiliser des icônes avec des étiquettes, pas juste des icônes. La recherche du Nielsen Norman Group montre que les icônes sans étiquettes sont fréquemment mal comprises. Une icône de sac d’achat peut signifier « Panier », « Magasiner » ou « Liste de souhaits » selon les attentes de l’utilisateur. Toujours associer les icônes à des étiquettes de texte court (1 à 2 mots).
Inclure un onglet « Plus » ou « Menu ». La tab bar affiche vos catégories principales, mais les acheteurs ont toujours besoin d’accès à la navigation complète. Réserver un onglet pour ouvrir le menu complet (généralement un panneau coulissant). Cela vous donne le modèle hybride : accès rapide aux destinations populaires plus profondeur de navigation complète à la demande.
Faire correspondre le style de la tab bar à votre thème. La tab bar doit ressembler à une partie naturelle de votre boutique, pas à une arrière-pensée. Utiliser la même famille de polices, la palette de couleurs et le style d’icône que le reste de votre thème. Si votre thème utilise des coins arrondis et des ombres douces, la tab bar devrait aussi.
Gain rapideAvant de mettre en œuvre une tab bar complète, testez l'impact de la navigation visible en ajoutant un bouton collant « Parcourir les catégories » au bas de vos pages mobiles. Si les taux de clic sont élevés, cela valide l'investissement dans une tab bar appropriée.
Mesurer l’impact de la navigation hybride
Après avoir mis en œuvre une tab bar ou une navigation hybride, suivez ces métriques sur 4 à 6 semaines pour mesurer l’impact :
Taux de rebond mobile. Devrait diminuer à mesure que les acheteurs s’engagent avec la navigation visible au lieu de partir s’ils ne peuvent pas immédiatement trouver ce qu’ils veulent.
Pages par session mobile. Devrait augmenter à mesure que les acheteurs parcourent plus de catégories via la tab bar. Un gain de 3,2 à 4,1 pages par session est typique après l’ajout de la navigation persistante.
Taux de conversion mobile. La métrique principale. Comparer la moyenne sur 4 semaines avant et après le changement. Tenir compte de la saisonnalité en comparant avec la même période de l’année précédente si possible.
Taux d’appui de la tab bar. Si votre mise en œuvre suit les clics, mesurez la fréquence avec laquelle les acheteurs appuient sur chaque onglet. Ces données vous aident à optimiser les catégories qui apparaissent dans la barre — remplacer les articles à faible appui par des catégories auxquelles les acheteurs veulent réellement un accès rapide.
Utilisation de la recherche du site. Devrait diminuer pour les requêtes liées aux catégories. Si les acheteurs recherchaient « chaussures pour hommes » avant parce qu’ils ne pouvaient pas la trouver dans le menu hamburger, une tab bar se reliant à « Hommes » devrait réduire ce volume de requête de recherche.
Ajouts au panier par session depuis mobile. Plus de découverte de produits grâce à une meilleure navigation devrait se traduire par plus d’articles ajoutés aux paniers. Cette métrique isole l’impact de la navigation d’autres facteurs de conversion comme la tarification ou le flux de paiement.
Exécuter la comparaison pendant au moins 4 semaines pour lisser la variation hebdomadaire. Si votre boutique a des fluctuations de trafic significatives (périodes de vacances, campagnes marketing), prolonger la période de mesure ou utiliser un calculateur de significativité statistique pour valider les résultats. Le gain de conversion peut prendre 1 à 2 semaines pour se stabiliser à mesure que les visiteurs réguliers apprennent le nouveau modèle de navigation.
Cet article fait partie du guide plus large sur Limitations des menus Shopify : quand utiliser une application menu à la place.