Si vous vendez sur Shopify et que votre menu sur téléphone vous pose problème, il existe un schéma qu’utilisent de nombreuses grandes applications e-commerce, et il vaut la peine de s’en inspirer. C’est la façon de combiner une tab bar et un slide menu : laissez la Tab Bar gérer les trajets rapides, et laissez le Slide Menu gérer la navigation en profondeur. Cet article explique comment ces deux éléments fonctionnent ensemble, et où s’insère le FAB dans ce tableau.
J’ai un jour tenu une boutique et commis l’erreur classique : j’ai tout entassé dans un seul menu hamburger en me disant que « les clients le toucheront s’ils en ont besoin ». En réalité, les clients sont moins patients qu’on ne le pense.
Pourquoi un seul type de menu ne suffit pas
Sur un téléphone, le comportement des clients se répartit en deux groupes assez nets.
Le premier groupe sait ce qu’il veut. Il vient consulter son panier, faire une recherche ou revenir à la page d’accueil. Il a besoin d’aller vite et d’arriver directement à destination.
Le second groupe n’a pas encore décidé quoi acheter. Il veut flâner à travers les catégories et voir ce qui l’intéresse. Il a besoin d’une carte complète de la boutique.
Un menu unique peine à bien servir les deux. Si vous entassez tout dans un hamburger, le premier groupe doit faire une étape de plus pour des choses qui devraient se faire en un seul appui. Le Nielsen Norman Group a constaté que cacher la navigation principale derrière un bouton la rend plus difficile à trouver et plus lente à utiliser que lorsque les éléments sont affichés ouvertement. À l’inverse, si vous essayez d’exposer tout l’arbre des catégories à l’écran, le premier groupe est submergé et l’écran devient encombré.
La solution n’est pas d’en choisir un seul. C’est de répartir les rôles.
La Tab Bar gère les destinations principales
La Tab Bar est une barre de navigation fixe en bas de l’écran, qui contient généralement 4 à 5 éléments. Elle est toujours visible, donc les clients n’ont pas à toucher quoi que ce soit pour l’ouvrir.
Sa position en bas n’est pas un hasard. D’après les recherches de Steven Hoober, menées sur plus de 1 300 observations d’utilisateurs, environ 75 % des actions à l’écran sont effectuées avec le pouce. Le centre-bas de l’écran est précisément l’endroit que le pouce atteint le plus facilement quand on tient le téléphone d’une seule main. Y placer les destinations importantes permet aux clients d’appuyer avec précision et rapidité, avec moins d’erreurs.
Que faut-il donc mettre dans la Tab Bar ? Uniquement les destinations les plus utilisées et qui doivent être atteintes le plus vite. Par exemple, pour une boutique de mode :
- Accueil
- Recherche
- Catégories (ou « Produits »)
- Panier
- Compte
Cinq éléments, c’est parfait. Au-delà, chaque bouton est comprimé et difficile à toucher ; en deçà, vous gaspillez un espace précieux. Ce n’est pas l’endroit où lister chaque sous-catégorie — c’est l’endroit pour quelques-unes des plus grandes portes d’entrée.
Le Slide Menu gère toute la structure des catégories
La Tab Bar n’a que 4 à 5 emplacements. Mais une vraie boutique compte généralement des dizaines de catégories et sous-catégories. Où vont-elles ?
C’est là qu’intervient le Slide Menu. Le Slide Menu s’ouvre depuis le bord de l’écran et peut contenir toute la structure des catégories, sur plusieurs niveaux. Un client veut passer de Homme à Femme, de Hauts à Bas, d’une collection à une autre — le Slide Menu est l’endroit fait pour ça.
Ce qui est appréciable dans ce schéma, c’est la façon dont le Slide Menu s’ouvre. Vous placez un élément « Catégories » ou une icône « Plus » directement sur la Tab Bar. Le client le touche, et le Slide Menu se déploie. Ainsi les deux menus se connectent : la Tab Bar est toujours là pour les trajets rapides, et c’est aussi la porte d’entrée vers le Slide Menu pour la navigation en profondeur.
Un détail petit mais important : quand vous utilisez bien un Slide Menu, étiquetez-le clairement avec du texte au lieu de laisser une icône seule, et placez-le là où les clients s’attendent à le trouver. Le NN/G recommande d’utiliser l’icône standard à trois traits accompagnée d’un libellé, afin que les clients puissent deviner ce qu’il contient. Le Slide Menu n’est pas mauvais — il ne l’est que lorsqu’on lui fait faire à la fois le travail de la Tab Bar et le sien.
La répartition des rôles se résume à ceci : quand un client a besoin de rapidité, il utilise la Tab Bar ; quand il veut tout parcourir, il ouvre le Slide Menu. C’est exactement la combinaison d’une tab bar et d’un slide menu qu’utilisent de nombreuses grandes applications e-commerce, et elle fonctionne sur Shopify sans nécessiter de changements radicaux.
Le FAB : un complément, pas un remplaçant
Le FAB (Floating Action Button, bouton d’action flottant) est un bouton rond flottant, généralement dans le coin inférieur droit, superposé au contenu de la page. Beaucoup le trouvent séduisant et veulent l’utiliser pour la navigation. Je le déconseillerais.
Le FAB devrait être réservé à exactement une action — une action importante et répétée. Quelques exemples pertinents :
- Un bouton de chat d’assistance, pour que les clients puissent poser des questions rapides quand ils hésitent
- « Voir les offres du jour » pendant une promotion
- Un retour en haut de page sur les pages de listes de produits très longues
La raison pour laquelle le FAB ne doit pas porter la navigation principale : ce n’est qu’un seul bouton. Quand on le touche, il doit ouvrir un menu — ce qui nous ramène droit au schéma de navigation cachée que l’on voulait justement éviter. La Tab Bar gère mieux la navigation parce qu’elle est toujours visible et dispose de plusieurs emplacements. Le FAB, lui, convient à un appel à l’action unique et clair.
Autrement dit : la Tab Bar et le Slide Menu gèrent « où aller », tandis que le FAB gère « faire une chose ». Ne les laissez pas se marcher dessus.
Pourquoi il vaut la peine de bien réussir ce schéma
Il y a une raison pratique de se soucier de son menu sur téléphone. D’après le Baymard Institute, le taux moyen d’abandon de panier est d’environ 70 %, et sur mobile il est encore plus élevé, autour de 80 %. Quand les clients peinent déjà à s’orienter depuis le menu, ils repartent avant même de songer à passer commande.
La vitesse de la page compte aussi. Un menu lourd peut ralentir le chargement et provoquer des décalages de mise en page. 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. Plus le menu est épuré et léger, plus il est facile de rester dans ces seuils.
Il y a encore un élément à peser : le nombre d’applications. Une boutique Shopify installe généralement de nombreuses applications, et chacune ajoute un morceau de code de plus qui s’exécute sur la page. Si un seul outil de menu peut gérer la Tab Bar, le Slide Menu et le FAB au même endroit, vous évitez d’assembler tant bien que mal plusieurs éléments séparés.
Construire ce schéma sans code
La partie difficile du schéma combiné, c’est la configuration. Il vous faut une Tab Bar distincte pour mobile, un Slide Menu qui y est relié, et éventuellement un FAB pour un CTA — le tout devant s’emboîter sans toucher à la version desktop.
C’est précisément ce que Navi+ a été conçu pour résoudre. Vous configurez la Tab Bar et le Slide Menu au même endroit, vous les réglez séparément pour le mobile, par glisser-déposer, sans code. Les configurations mobile et desktop sont distinctes, donc la version desktop utilise toujours un Mega Menu classique. Le menu reste également en place quand vous changez de thème, et il est optimisé pour ne pas plomber vos Core Web Vitals.
Ce que je veux vous laisser, ce n’est pas un outil précis, mais l’état d’esprit de la répartition des rôles : ne demandez pas à un seul menu de tout faire. Laissez la Tab Bar gérer les trajets rapides, le Slide Menu gérer la navigation en profondeur, et le FAB gérer une seule action. Vos clients s’y retrouveront plus facilement, et c’est souvent le premier pas pour qu’ils restent plus longtemps.
Cet article fait partie du guide plus complet sur la Navigation mobile — pourquoi le menu hamburger passe de mode et par quoi le remplacer.