Toute boutique commence au même point : quelques dizaines de produits, une idée, et beaucoup d’incertitude. À ce stade, la navigation d’une nouvelle boutique n’a pas besoin d’être complexe. Elle doit être juste et suffisante. Le plus difficile n’est pas de donner au menu un air « bien rempli » — c’est de se retenir, pour ne pas bâtir un système de navigation plus grand que ce dont la boutique a réellement besoin.
Cet article porte sur la première étape : une nouvelle boutique avec un petit catalogue de moins de 50 produits. Je vais décrire à quoi elle ressemble, ce dont la navigation a vraiment besoin, quelques erreurs récurrentes, et une configuration suggérée pour démarrer.
À quoi ressemble cette étape
Le catalogue est petit, souvent quelques groupes de produits seulement. Parfois, toute la boutique tient dans un « tous les produits » sans qu’il soit encore nécessaire de créer des catégories.
Le trafic est encore faible et irrégulier. Les visiteurs viennent de quelques publications, de quelques partages, ou d’un cercle d’amis. Quelques dizaines à quelques centaines de vues par jour, c’est normal.
Le plus important : vous êtes encore en phase d’expérimentation. Vous testez ce qui se vend, vous testez les prix, vous testez la façon de photographier, vous testez la façon d’accueillir. Tout bouge encore. Une navigation rigide, soigneusement construite dès le départ, devient un fardeau qu’il faut corriger à chaque changement de cap.
Autrement dit, c’est une période qui appelle plus de souplesse que d’exhaustivité.
Ce dont a besoin la navigation d’une nouvelle boutique
La réponse courte : simple et claire. Le client doit pouvoir trouver son chemin pour acheter en quelques secondes — il n’a pas besoin d’un beau schéma de menu.
Sur ordinateur, un en-tête soigné de 3 à 5 éléments suffit. Par exemple : Produits, À propos, Contact. Les gens parcourent généralement une page de gauche à droite et de haut en bas, donc les éléments les plus importants doivent se trouver à gauche et rester visibles, pas cachés.
Vous n’avez pas besoin d’un mega menu à ce stade. Un mega menu convient aux boutiques comptant de nombreuses sous-catégories qui doivent s’afficher toutes en même temps. Quand le catalogue est encore petit, un mega menu paraît vide et encombrant : vous l’ouvrez et vous n’y voyez qu’une ligne ou deux flottant dans un grand cadre. Cela donne à la boutique un air plus grand qu’elle ne l’est vraiment, sans rien apporter au client.
N’oubliez pas le mobile
C’est la partie la plus facilement négligée, et pourtant la plus importante. Dans l’e-commerce d’aujourd’hui, la plupart des visites en boutique viennent des téléphones — de nombreux chiffres du secteur situent ce nombre autour de 70 à 80 %. Autrement dit, la majorité de vos clients regardent votre boutique à travers un petit écran tenu dans leur main.
La façon dont les gens tiennent leur téléphone détermine ce qui est facile à toucher. Une étude de Steven Hoober (publiée sur Smashing Magazine) a constaté que la plupart des actions sur mobile sont faites avec le pouce, et que la zone la plus facile à atteindre est la moitié inférieure de l’écran — souvent appelée la « thumb zone ». Le coin supérieur est l’endroit le plus difficile à atteindre.
C’est pourquoi une barre de navigation placée en bas de l’écran (une Tab Bar) a du sens : elle se trouve juste à portée de pouce. Le client n’a pas à s’étirer vers le coin supérieur pour trouver le menu.
Quant au menu hamburger — l’icône à trois traits qui cache toute la navigation derrière elle — le Nielsen Norman Group a confirmé qu’il rend les éléments plus difficiles à remarquer et plus longs à trouver, comparé au fait de les garder visibles. Pour une petite boutique avec seulement quelques éléments principaux, il n’y a aucune raison de les cacher. Une tab bar de base qui garde quelques boutons importants visibles sert bien mieux le client.
Deux erreurs fréquentes
J’ai vu ces deux erreurs si souvent que je les considère presque comme un rite de passage pour les débutants.
Erreur n°1 : complexifier le menu trop tôt. Les vendeurs regardent les grandes boutiques, voient des menus à plusieurs niveaux, et veulent que leur boutique ait tout de suite un air « professionnel ». Alors ils créent des catégories pour des produits qu’ils n’ont pas encore, ou découpent un groupe de six articles en quatre sous-catégories pour donner au menu un air rempli.
Le résultat : un client qui clique sur « Accessoires » et n’y trouve que deux articles, qui clique sur « Nouveautés » et la trouve vide. Cette expérience est bien pire qu’une catégorie « Tous les produits » bien nette. Un petit catalogue n’est pas une faiblesse à cacher — regrouper les choses facilite en réalité l’achat.
Erreur n°2 : ne penser qu’à l’ordinateur et oublier le mobile. On construit généralement la boutique sur un ordinateur, on l’admire sur un grand écran, puis on oublie de la vérifier sur un téléphone. Le menu sur ordinateur semble correct, mais sur mobile les éléments s’agglutinent, les boutons se serrent, ou la navigation disparaît derrière une petite icône dans le coin.
La solution est simple : à chaque fois que vous ajustez le menu, ouvrez la boutique sur votre propre téléphone et essayez d’acheter quelque chose comme un vrai client. Si votre main doit s’étirer ou si vous ratez quelques fois la cible, vos clients aussi — et ils sont moins patients que vous.
Une configuration suggérée avec Navi+
Navi+ vous permet de configurer l’ordinateur et le mobile séparément, sans avoir à imposer un seul design aux deux. À ce stade, je conseille de rester vraiment minimaliste.
Sur ordinateur, construisez un en-tête simple de 3 à 5 éléments. Choisissez exactement les pages dont le client a besoin : la catégorie de produits principale, la page à propos, la page contact. Gardez le mega menu pour le moment où le catalogue grandira vraiment.
Sur mobile, utilisez une Tab Bar de base à 4 éléments. Une disposition sûre que les acheteurs connaissent déjà :
- Accueil — retour à la page d’accueil
- Boutique — vers la liste des produits
- Panier — le panier, toujours à portée de main
- Compte — compte ou connexion
Ces quatre boutons couvrent presque tout ce que le client a besoin de faire. Placer le panier directement sur la barre du bas a aussi un intérêt pratique : selon le Baymard Institute, le taux moyen d’abandon de panier dans l’e-commerce avoisine les 70 %, donc tout ce qui aide le client à revenir au panier et à poursuivre vaut la peine d’être fait. Un bouton Panier toujours visible et toujours facile à toucher est un petit pas dans cette direction.
Autre chose à surveiller dès le départ : la vitesse. Google fixe les seuils « bons » pour les Core Web Vitals : LCP sous 2,5 secondes, INP sous 200 millisecondes, et CLS sous 0,1. Le menu est un élément qui se charge tôt et apparaît sur chaque page, donc un menu lourd peut entraîner toute la boutique vers le bas. Navi+ est conçu pour ne pas nuire à ces métriques — c’est une bonne habitude à prendre tôt, car corriger plus tard est toujours plus difficile.
Au stade de la nouvelle boutique, un menu simple que le client peut utiliser tout de suite l’emporte toujours sur un menu sophistiqué qu’il faut sans cesse corriger.
Parce que Navi+ fonctionne par glisser-déposer et ne nécessite aucun code, vous pouvez construire la disposition ci-dessus en quelques minutes et l’ajuster à tout moment, à mesure que le catalogue grandit. Le menu reste également en place quand vous changez de thème, de sorte que les expérimentations de design des débuts ne casseront pas la navigation que vous venez de construire.
Commencez petit. Quand la boutique grandira, faire grandir la navigation avec elle ne sera pas trop tard.
Cet article fait partie du guide plus large sur la navigation à chaque étape de la croissance d’une boutique — de 10 à 10 000 produits.