Guide des menus Shopify : Architecture, modèles de navigation, ergonomie mobile et UX storefront
La navigation est le moteur d’orientation de votre boutique Shopify. Avant qu’un acheteur n’examine les détails d’un produit, ne lise les avis ou n’achète, il doit trouver où se trouvent les articles. Des parcours clairs dynamisent l’exploration, tandis que des liens cachés, des libellés vagues et des zones tactiles difficiles freinent le parcours client.
L’e-commerce moderne englobe deux réalités distinctes : de larges écrans d’ordinateur offrant un espace de balayage horizontal, et des smartphones manipulés d’un seul pouce. Équilibrer la lisibilité sur ordinateur avec l’ergonomie mobile exige des choix structurels réfléchis.
Ce guide fournit un plan pratique pour la navigation Shopify : comment la plateforme gère les données de menu, comment comparer les quatre modèles clés, ce que préconise la recherche en utilisabilité et une checklist pour tester votre boutique sur de vrais appareils.
Réponse rapide : Fonctionnement des menus Shopify
Les menus Shopify sont créés dans Contenu > Menus et affichés par votre thème ; un élément de premier niveau peut contenir jusqu’à deux niveaux imbriqués (trois au total). Utilisez un menu déroulant simple pour les petits catalogues, un méga menu sur ordinateur pour les offres larges, et sur smartphone gardez les liens clés visibles au lieu de tout cacher derrière un hamburger.
| Modèle de navigation | Idéal pour | Points de vigilance | En savoir plus |
|---|---|---|---|
| Menu déroulant simple | Petits catalogues et boutiques mono-produit avec collections ciblées | Longues listes verticales sur une colonne cachant les options sous la ligne de flottaison | Limites des menus de thèmes Shopify |
| Méga menu multi-colonnes | Catalogues étendus avec collections variées et sous-catégories structurées | Scintillement intempestif au survol et panneaux surdimensionnés écrasant les petits écrans | Meilleures pratiques pour méga menu Shopify |
| Tiroir coulissant off-canvas | Liens utilitaires, service client et hiérarchies mobiles profondes | Dissimule toute la navigation derrière une icône, rendant les catégories clés difficiles à repérer | Pratiques d’excellence pour tiroir mobile |
| Barre d’onglets inférieure | Boutiques à fort trafic mobile exigeant un accès immédiat sous le pouce | Tenter d’intégrer plus de 5 destinations réduit la taille des cibles tactiles | Barre d’onglets inférieure pour Shopify |
Points clés à retenir
- Hiérarchie de la plateforme : Shopify applique une limite stricte de trois niveaux d’imbrication (un élément principal et jusqu’à deux niveaux déroulants imbriqués) gérés dans Contenu > Menus (Shopify Help Center).
- Visibilité sur ordinateur : Les recherches du Nielsen Norman Group démontrent que les méga menus permettent d’embrasser les options d’un coup d’œil plutôt que de devoir mémoriser des listes (NN/g).
- Engagement sur mobile : Les tests d’utilisabilité de NN/g ont révélé que les menus cachés n’étaient utilisés que dans 57% des cas sur mobile, contre 86% lorsque la navigation combinée garde les liens clés visibles (NN/g).
Comment les menus Shopify sont construits : Contenu > Menus, Thèmes et Limite de trois niveaux
Configurer une navigation performante commence par comprendre la séparation opérée par Shopify entre les données de menu et la présentation du thème. Les hiérarchies existent en tant qu’enregistrements persistants, tandis que les thèmes gèrent l’apparence visuelle.

Figure 1 : Illustration conceptuelle (Concept illustration) — Comment les menus Shopify sont construits : Contenu > Menus, Thèmes et Limite de trois niveaux
Où résident les menus dans l’administration
Dans l’administration Shopify, les structures de navigation sont gérées sous Contenu > Menus (selon le Shopify Help Center). Depuis cet écran, les marchands créent des menus, ajoutent des liens et organisent les parcours du storefront.
Comme les menus existent en tant que données de plateforme et non de code de thème, votre arborescence reste intacte lors d’un changement de thème. Vous créez des relations imbriquées simplement en glissant les éléments sous un lien parent.
Comment le thème sélectionne un menu
Tandis que les données résident dans l’admin, votre thème contrôle le rendu sur le storefront. Les thèmes Shopify se connectent aux menus d’administration via un paramètre link_list (documenté dans la Documentation Développeur Shopify), vous permettant de choisir le menu pour l’en-tête, le tiroir ou le pied de page.
Lors d’un changement de thème, vos liens restent préservés. Vous devez cependant ouvrir l’éditeur de votre nouveau thème et réassigner votre menu dans le sélecteur link_list de l’en-tête. Les bannières ou blocs de méga menu propres à l’ancien thème ne sont pas transférés automatiquement.
La limite des trois niveaux
La base structurelle de la navigation Shopify repose sur sa limite d’imbrication : un élément principal peut comporter jusqu’à deux niveaux déroulants imbriqués, créant une profondeur maximale de trois niveaux (selon le Shopify Help Center et la Documentation Développeur Shopify). Cela forme un modèle à trois paliers : Catégorie principale → Sous-catégorie → Élément enfant.
Concevez votre arborescence pour qu’elle reste dans ces trois niveaux. De plus, le Shopify Help Center rappelle que la majorité des thèmes ne prennent en charge que deux niveaux déroulants imbriqués.
Une règle d’accessibilité fondamentale s’applique ici : lorsqu’un élément de premier niveau contrôle un sous-menu, il agit comme un bouton pour ouvrir le panneau et non comme un lien direct (selon le Shopify Help Center). Intégrez toujours un lien explicite “Voir tout [Catégorie]” à l’intérieur pour permettre d’accéder à toute la collection.
Les quatre modèles de navigation clés : Dropdown, Méga menu, Tiroir et Barre d’onglets
Les storefronts Shopify s’appuient principalement sur quatre modèles de navigation, chacun offrant un compromis spécifique entre encombrement d’écran et découvrabilité.
1. Menu déroulant simple
Le menu déroulant simple est un modèle classique où un lien principal dévoile une liste verticale. Il fonctionne très bien pour les catalogues concentrés. En revanche, pour les catalogues étendus, les menus déroulants classiques masquent généralement la plupart des options de l’utilisateur (NN/g).
2. Méga menu multi-colonnes
Un méga menu déploie la navigation sur un large panneau à colonnes multiples. Le Nielsen Norman Group confirme que les méga menus affichent tout en un coup d’œil, permettant aux clients de voir plutôt que de devoir mémoriser (NN/g). Regrouper les liens sous des rubriques nettes rend un catalogue étendu plus facile à parcourir sur ordinateur.
Consultez notre guide des meilleures pratiques pour méga menu Shopify.
3. Tiroir coulissant off-canvas
Le tiroir coulissant—ouvert via une icône hamburger—masque la navigation jusqu’au toucher. Bien que standard sur mobile, le Nielsen Norman Group avertit que cacher la navigation derrière une icône rend les options beaucoup moins découvrables (NN/g).
Pour dynamiser ce format, consultez nos pratiques d’excellence pour tiroir mobile.
4. Barre d’onglets inférieure
La barre d’onglets inférieure ancre les destinations majeures au bas de l’écran, directement sous le pouce. Cependant, le Nielsen Norman Group note que dépasser 5 options dans une barre d’onglets complique fortement le maintien d’une taille de cible tactile optimale (NN/g).
Découvrez notre guide pour concevoir une barre d’onglets inférieure pour Shopify.
Architecture de navigation hybride
Les boutiques associent souvent plusieurs modèles : un méga menu sur ordinateur combiné à une barre d’onglets inférieure et un tiroir sur mobile pour concilier rapidité de repérage et profondeur de catalogue.
Navigation sur ordinateur : Quand un méga menu surpasse un menu déroulant
Sur grand écran, les marchands disposent d’un large espace horizontal. Les recherches du Nielsen Norman Group soulignent que les méga menus présentent tout en un seul coup d’œil, aidant les clients à voir plutôt qu’à mémoriser (NN/g). À l’inverse, les menus déroulants classiques cachent généralement la plupart des options de l’utilisateur.
Calibrer le survol pour éliminer les scintillements
Une erreur fréquente sur ordinateur réside dans une sensibilité de survol non calibrée. Si le menu s’ouvre dès que le curseur touche un élément de l’en-tête, il peut s’ouvrir par erreur lorsque le client déplace la souris sur l’en-tête.
Le Nielsen Norman Group fournit des préconisations temporelles claires : le curseur doit rester immobile pendant 0,5 seconde avant d’ouvrir un panneau dépendant du survol (NN/g). Une fois ce délai franchi, le méga menu doit s’afficher en moins de 0,1 seconde (NN/g). Ce calibrage évite les ouvertures accidentelles tout en restant parfaitement réactif.
Structurer les liens à l’intérieur du panneau
L’organisation interne d’un méga menu réclame une hiérarchie visuelle rigoureuse. Regroupez les liens par thématiques avec des en-têtes explicites. Veillez à ce que chaque lien de catégorie n’apparaisse qu’à un seul endroit logique. Les vignettes peuvent orienter le regard, mais ne doivent en aucun cas se substituer aux libellés textuels.
Ne dissimulez jamais la navigation principale derrière un bouton hamburger sur ordinateur lorsque l’espace est disponible. Le Nielsen Norman Group a constaté que les utilisateurs d’ordinateurs n’utilisaient les menus cachés que dans 27% des cas (NN/g). Pour approfondir, lisez nos meilleures pratiques pour méga menu Shopify.
Ergonomie mobile : Zone du pouce, menus masqués et barres d’onglets
Tandis que la navigation sur ordinateur relève de l’architecture d’information, la navigation sur mobile est avant tout une contrainte biomécanique physique. Lors de la navigation sur smartphone, la portée des doigts dicte la facilité d’exploration.

Figure 2 : Illustration conceptuelle (Concept illustration) — Ergonomie mobile : Zone du pouce, menus masqués et barres d’onglets
Comment les utilisateurs tiennent réellement leur téléphone
Dans une étude ergonomique empirique, Steven Hoober a relevé 1 333 observations de personnes manipulant des appareils mobiles en environnement public naturel (UXmatters). Parmi elles, 780 touchaient activement l’écran pour faire défiler, saisir ou appuyer.
L’analyse des postures de prise en main de ces 780 utilisateurs actifs a révélé la répartition suivante :
- Usage à une main : 49% tenaient et pilotaient leur smartphone uniquement d’une seule main.
- Prise soutenue : 36% soutenaient l’appareil d’une main tout en interagissant avec les doigts de la seconde main.
- Usage à deux mains : 15% tenaient le téléphone à deux mains, tapant généralement avec leurs deux pouces.
L’étude de Hoober a consigné les habitudes physiques en public en 2013 sans mesurer les taux de conversion e-commerce. Les smartphones ont évolué depuis 2013 : lisez ces chiffres comme un instantané des habitudes de prise en main, pas comme une mesure de vos propres clients.
La leçon ergonomique : dans l’échantillon de Hoober, environ la moitié des personnes touchant l’écran le faisaient d’une seule main. Quand la navigation se trouve cantonnée aux coins supérieurs, ces utilisateurs peuvent devoir changer de prise. Pour mesurer cet impact, explorez notre recherche sur l’ergonomie de la zone du pouce.
Ce que coûte réellement un menu dissimulé
Cacher la navigation mobile derrière une icône hamburger engendre une baisse d’utilisabilité mesurable. Lors de ses tests sur la navigation masquée, le Nielsen Norman Group a comparé l’engagement selon les configurations (NN/g) :
| Configuration | Contexte d’affichage | Taux d’utilisation | Source de recherche |
|---|---|---|---|
| Menu caché (Hamburger) | Ordinateur de bureau | 27% des cas | Nielsen Norman Group (2016) |
| Menu caché (Hamburger) | Écran smartphone | 57% des cas | Nielsen Norman Group (2016) |
| Navigation combinée (Liens visibles + Tiroir) | Écran smartphone | 86% des cas | Nielsen Norman Group (2016) |
NN/g a constaté que les acheteurs sur mobile utilisaient la navigation masquée dans 57% des cas, et la navigation combinée—gardant les accès clés visibles à côté d’un tiroir—dans 86% des cas (NN/g). NN/g n’a pas testé de sites à navigation uniquement visible sur smartphone ; la comparaison porte donc sur la navigation masquée et la navigation combinée. Dans ce test, garder des liens clés visibles allait de pair avec une utilisation nettement plus élevée de la navigation.
Quand installer une barre d’onglets inférieure
Pour pallier le déficit de découvrabilité sur smartphone, les boutiques adoptent une barre d’onglets inférieure fixe. Le Nielsen Norman Group recommande explicitement d’afficher 4 liens de premier niveau ou moins sous forme d’options visibles (NN/g).
Une barre d’onglets inférieure respecte cette règle en installant les destinations majeures à portée immédiate du pouce. Pour autant, restez sobre : NN/g met en garde sur le fait qu’aligner plus de 5 options rend très difficile la préservation de dimensions tactiles adaptées (NN/g).
Le Nielsen Norman Group note aussi que des liens trop exigus ou trop serrés sont une source majeure d’agacement pour les mobinautes (NN/g). Entasser trop d’icônes génère des erreurs de frappe. Restreignez la barre à quelques destinations phares.
Pour bâtir cette structure, découvrez comment installer une barre d’onglets inférieure pour Shopify et explorer la navigation mobile au-delà du hamburger.
Accessibilité et Performance : Des menus que les clients peuvent utiliser sans friction
Le style graphique ne vaut rien si le menu s’avère fastidieux à manipuler ou ralentit le chargement de la boutique. Les menus Shopify d’élite doivent respecter les exigences d’accessibilité et conserver un poids DOM mesuré.
Boutons de déclenchement vs liens hypertextes
Les commandes interactives doivent expliciter clairement leur comportement. Selon le Shopify Help Center, un élément de menu principal assorti d’un sous-menu fait office de bouton d’ouverture ou de fermeture, et non de lien vers une page collection.
Contraindre un élément à être simultanément un lien et un bouton d’ouverture demande à un seul contrôle de remplir deux rôles, ce qui déroute les utilisateurs de clavier, de lecteur d’écran et d’écran tactile. Traitez un élément de premier niveau qui a un sous-menu comme un simple déclencheur d’ouverture/fermeture et placez un lien explicite “Voir tout [Catégorie]” à l’intérieur.
Indicateurs d’emplacement et cibles tactiles
Le Nielsen Norman Group considère que l’omission d’un indicateur de position actuelle constitue probablement l’erreur la plus répandue sur les menus (NN/g). Les catégories consultées doivent être mises en exergue par du gras, un contraste franc ou un soulignement distinct.
Les cibles tactiles réclament la même attention. NN/g rappelle que des liens trop étroits ou trop rapprochés frustrent intensément les utilisateurs sur smartphone (NN/g). Les zones de frappe mobiles exigent un espacement généreux.
Pour appliquer ces normes, consultez notre guide d’accessibilité de la navigation.
Volume de nœuds DOM et surcharge de rendu
Chaque lien, conteneur de colonne, image et puce alourdit le Document Object Model (DOM) de votre page. Dans ses audits de performance, Google Chrome Lighthouse émet un avertissement dès que le corps de page dépasse environ 800 nœuds, et signale une erreur au-delà de 1 400 nœuds environ (Google Chrome Lighthouse).
Si votre thème génère des conteneurs distincts pour le menu ordinateur et le menu mobile, le même arbre de catégories peut apparaître deux fois dans le code de la page. Vérifiez votre propre thème : chaque lien dupliqué ajoute des nœuds au total évoqué plus haut.
Interaction to Next Paint (INP) sur smartphone
Dans le cadre des signaux web essentiels de Google, l’Interaction to Next Paint (INP) évalue la réactivité de la page face aux actions utilisateurs. D’après Google Chrome Web.dev, un score INP inférieur ou égal à 200 millisecondes correspond à une bonne réactivité.
Google précise que l’INP n’intègre pas le défilement passif (Google Chrome Web.dev). L’indicateur mesure en revanche la latence des clics et pressions tactiles—comme l’ouverture d’un tiroir ou le déploiement d’un accordéon. Des scripts JavaScript trop lourds bloquent le thread principal et propulsent l’INP au-delà de 200 millisecondes.
Pour optimiser vos temps, lisez notre analyse sur l’impact de la navigation sur la vitesse de page.
Choisir le bon modèle de menu pour votre boutique
Déterminer un modèle de navigation est un arbitrage d’architecture fondé sur la densité de votre offre et les habitudes d’achat de vos clients.
Matrice des profils de boutique
| Archétype de boutique | Envergure catalogue | Recommandation Desktop | Recommandation Mobile | Principe d’architecture |
|---|---|---|---|---|
| Produit unique / Boutique ciblée | Gamme d’articles restreinte | Liste de liens horizontaux simples | En-tête fixe avec lien principal | Supprimer les paliers intermédiaires ; offrir un accès direct aux articles |
| Mode saisonnière | Sélections tournantes et lookbooks | Méga menu compact avec bannières | Barre d’onglets pour catégories phares + tiroir | Mettre en avant les campagnes du moment sans encombrer les chemins d’accès |
| Grand magasin multi-catégories | Lignes de produits denses et ramifiées | Méga menu multi-colonnes structuré | Barre d’onglets permanente + tiroir hiérarchisé | Regrouper logiquement pour balayer d’un coup d’œil et rester accessible au pouce |
| Catalogue B2B / Spécialisé | Caractéristiques techniques complexes | Méga menu ordonné par gamme produit | En-tête orienté recherche + onglets | Accompagner les commandes récurrentes via recherche rapide et indexation claire |
Cadre de décision pour la navigation
Pour retenir le modèle le plus pertinent, examinez ces trois critères structurels :
- Nombre d’accès prioritaires : Si votre boutique comporte 4 liens de premier niveau ou moins, affichez-les directement au lieu de les camoufler (NN/g).
- Ramification des sous-catégories : Si votre offre se divise en plusieurs univers distincts, un méga menu permet aux clients d’embrasser l’ensemble d’un regard (NN/g).
- Part du trafic mobile : Analysez vos rapports Shopify Analytics. Une forte dominante smartphone impose de privilégier la zone du pouce et la navigation combinée pour préserver l’accès aux rayons phares.
Arbre décisionnel de navigation pour boutique Shopify :
+-- Destinations de 1er niveau <= 4 ?
| +-- Oui : Les afficher sous forme de liens visibles (recommandation NN/g)
| +-- Non : Regrouper en pôles logiques de catégories
|
+-- Le catalogue comprend-il plusieurs sous-catégories distinctes ?
| +-- Non : Préférer de simples listes déroulantes pour éviter les grands vides
| +-- Oui : Mettre en place un méga menu multi-colonnes sur ordinateur
|
+-- Bilan du trafic sur smartphone :
+-- Prédominance écrasante d'acheteurs mobiles ?
+-- Bannir la navigation purement cachée sous hamburger (57% d'usage)
+-- Privilégier la navigation combinée : liens clés visibles + tiroir pour le catalogue profond (86% contre 57% dans le test NN/g)
Compromis : Quand éviter les menus sophistiqués
Les fonctionnalités élaborées comme les méga menus multi-colonnes et les barres d’onglets facilitent la lecture des gros catalogues, mais ne conviennent pas partout. Mal employées, elles créent des frictions inutiles.
1. Catalogues restreints ou boutiques mono-produit
Pour un magasin à assortiment court, installer un méga menu multi-colonnes s’avère contre-productif. Éparpiller une poignée d’articles dans de larges panneaux crée des vides béants et complique inutilement le clic. Pour les petites marques, un en-tête horizontal épuré offre un accès bien plus direct aux pages produits.
2. Chevauchement d’interfaces sur mobile
Si les barres d’onglets inférieures améliorent l’ergonomie, elles consomment une bande d’écran verticale. Si votre storefront affiche déjà des bulles de chat, des bandeaux de consentement ou des barres de promotion fixes, l’ajout d’une barre basse peut générer des superpositions gênantes. Si une bulle recouvre le bouton d’ajout au panier ou un onglet, le client ne peut plus y accéder. Auditez vos éléments flottants avant tout déploiement.
3. Surcharge de rendu et visuels haute définition
Surcharger les méga menus de photos et de bannières publicitaires alourdit considérablement le volume de code HTML. Précharger des médias secondaires augmente la quantité de nœuds DOM vers le seuil d’alerte des 800 nœuds de Lighthouse (Google Chrome Lighthouse). De plus, les panneaux qui ne s’ouvrent qu’au survol sont difficiles à utiliser sur les écrans tactiles.
4. Quand le thème Shopify par défaut suffit amplement
Si votre arborescence s’insère sans encombre dans la structure native à 3 niveaux et que votre thème offre déjà un tiroir mobile réactif, vous n’avez peut-être pas besoin d’une application tierce. Vérifiez d’abord ce que votre thème propose déjà. Évaluez vos besoins en consultant notre guide sur les limites des menus de thèmes Shopify.
La place de Navi+ dans cette approche
Pour les marchands dont le catalogue ou l’expérience mobile dépasse les capacités offertes par leur thème natif, Navi+ met à disposition une suite modulaire de navigation conçue spécifiquement pour Shopify.
Une navigation modulaire conçue pour Shopify
Navi+ permet aux e-commerçants de déployer des composants cruciaux—tels qu’une barre d’onglets inférieure mobile, un tiroir coulissant, des méga menus pour ordinateur et mobile, une grille d’icônes et des boutons d’action flottants—sans écrire une ligne de code. La barre d’onglets garde les zones d’achat sous le pouce, avec un masquage automatique optionnel au défilement.
Code de thème préservé & prise en charge native sur 3 niveaux
Navi+ s’installe exclusivement via les App Embeds natifs de Shopify sans modifier les fichiers de modèles Liquid. Les fichiers de votre thème restent intacts. Les structures respectent la hiérarchie à 3 niveaux de la plateforme. Enfin, le Mobile Menu permet d’intégrer un menu Shopify existant et d’en actualiser la copie d’un simple clic sur “Sync now”.
Réutilisable lors des changements de thème
Vos menus étant conservés au sein de Navi+, changer de thème Shopify n’efface pas votre structure de navigation. Vous devez activer l’app embed Navi+ sur le nouveau thème et vérifier son emplacement. Navi+ a été testé sur 331 thèmes, listés dans le répertoire de compatibilité des thèmes Navi+.
Si le menu de votre thème convient déjà à votre catalogue, conservez-le. Si vous souhaitez ajouter une barre d’onglets inférieure ou un méga menu sans modifier le code de votre thème, vous pouvez essayer Navi+ sur votre thème actuel et le vérifier par rapport à la checklist ci-dessous.
Checklist d’action : Auditer votre menu Shopify
Utilisez cette checklist méthodique pour passer en revue la navigation de votre boutique sur des terminaux réels, en garantissant ergonomie et performance optimales.
- Vérifier la profondeur dans l’Admin : Dans Contenu > Menus, vérifiez que l’arborescence ne dépasse pas trois niveaux. Assurez-vous que les éléments parents intègrent bien un lien “Voir tout [Catégorie]” explicite.
- Effectuer le test à une main sur mobile : Prenez un smartphone réel et tentez d’ouvrir vos trois collections majeures avec le pouce sans changer de prise. Si l’exercice demande un effort, ajoutez des liens directs ou une barre d’onglets.
- Mesurer les nœuds DOM de la page : Dans la console Chrome, lancez
document.querySelectorAll('body *').lengthet confrontez le résultat au seuil d’avertissement de 800 nœuds et d’erreur de 1 400 nœuds de Lighthouse. - Contrôler les indicateurs de position et cibles tactiles : Veillez à ce que les catégories actives soient distinctement signalées (gras ou souligné) et que les zones de frappe présentent un espacement suffisant pour écarter les faux clics.
- Comparer les analyses de navigation et de recherche : Dans Shopify Analytics, analysez le taux de conversion des visiteurs explorant le menu par rapport à ceux recourant à la recherche interne pour détecter les rayons sous-exposés.
FAQ
Combien de niveaux de menu Shopify prend-il en charge nativement ?
Shopify prend en charge jusqu’à trois niveaux de navigation : un élément de premier niveau accompagné d’au maximum deux niveaux déroulants imbriqués (Shopify Help Center). La majorité des thèmes respecte ce modèle à trois paliers.
Où modifier les menus de navigation dans l’administration Shopify ?
Vous gérez toute la navigation de votre boutique dans l’admin Shopify sous Contenu > Menus (Shopify Help Center), où vous ajoutez vos liens et organisez les niveaux. Les réglages du thème choisissent ensuite quel menu afficher.
Mes menus vont-ils disparaître si je change de thème Shopify ?
Non. Les structures de liens sont enregistrées comme des données de plateforme sous Contenu > Menus, et non dans le code du thème. Lors d’un changement de thème, réassignez simplement votre menu dans les réglages d’en-tête du nouveau thème (Documentation Développeur Shopify).
Quand faut-il préférer un méga menu à un menu déroulant sur Shopify ?
Privilégiez le méga menu lorsque votre boutique comprend de multiples sous-catégories que les acheteurs doivent balayer d’un coup d’œil (NN/g). Pour les catalogues modestes, un menu déroulant sur une colonne évite les espaces vides inutiles.
Pourquoi est-il risqué de masquer toute la navigation derrière un menu hamburger sur mobile ?
Les tests d’utilisabilité du Nielsen Norman Group indiquent que les acheteurs n’interagissent avec un menu mobile masqué que dans 57% des cas, contre 86% lorsque la navigation combinée laisse les liens essentiels apparents (NN/g).
Quel est le nombre maximal d’éléments préconisé pour une barre d’onglets mobile ?
Limitez la barre d’onglets mobile à quelques destinations essentielles. NN/g indique qu’au-delà de 5 options, il est difficile de toutes les loger dans une barre d’onglets ou de navigation tout en conservant une taille de cible tactile optimale (NN/g).
Sources
- Shopify Help Center: Menus and links — Guide officiel sur la création et la gestion des menus de navigation dans l’admin Shopify.
- Shopify Help Center: Drop-down menus — Directives sur la limite de trois niveaux et le rôle de déclencheur des éléments parents.
- Shopify Dev Documentation: Navigation Architecture — Référence technique pour le paramètre de thème
link_listet le rendu hiérarchique. - Nielsen Norman Group: Mega Menus Work Well (Angie Li & Jakob Nielsen, 2017) — Recherches sur la vision d’ensemble immédiate et la recommandation d’un survol stationnaire de 0,5 seconde.
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Kara Pernice & Raluca Budiu, 2016) — Étude comparative de l’engagement entre navigation visible, cachée et combinée.
- Nielsen Norman Group: Mobile Navigation Patterns (Raluca Budiu, 2015) — Analyse des tiroirs et barres de navigation, déconseillant de dépasser 5 éléments.
- Nielsen Norman Group: Menu Design Best Practices (Page Laubheimer, 2024) — Principes pour expliciter la position du visiteur et garantir l’espacement tactile.
- UXmatters: How Do Users Really Hold Mobile Devices? (Steven Hoober, 2013) — Étude empirique observant 1 333 personnes utilisant un appareil mobile et détaillant l’usage à une main, soutenu et à deux mains.
- Google Chrome Lighthouse: DOM Size Thresholds — Référentiel de performance fixant l’alerte à 800 nœuds et l’erreur critique à 1 400 nœuds.
- Google Chrome Web.dev: Interaction to Next Paint (INP) — Métrique Core Web Vitals établissant le seuil d’excellente réactivité à 200 millisecondes.
- Répertoire de compatibilité des thèmes Navi+ — Page de référence listant les 331 thèmes Shopify sur lesquels Navi+ a été testé.
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.