Que vous ayez opté pour une navigation classique, un megamenu, un panel, une bottom bar… le menu de navigation de votre site e-commerce est non seulement l’un des premiers éléments visibles par votre client, mais aussi le point d’entrée vers les pages les plus importantes de votre site, vous garantissant une bonne conversion ou non.

Passage en revue des bonnes pratiques pour construire une expérience de navigation fluide en s’appuyant sur votre menu : suivez le guide !

1. La forme au service du fond

Il est nécessaire de penser votre menu de navigation en fonction du reste de votre site, des contenus et produits qu’il accueille ainsi que des habitudes de consultation de vos clients. Son utilisation doit être simple, voire familière pour vos clients réguliers, qui doivent y retrouver les polices, couleurs, visuels, etc. de votre marque. Ces éléments graphiques doivent être optimisés pour assurer la lisibilité des contenus par toutes et tous. Donc pas de polices trop alambiquées et pas de ton sur ton !

Mobile vs desktop : quid des déclinaisons et du responsive ? Il apparait évident en 2023 qu’un bon menu de navigation se doit d’être responsive et adapté au device de consultation. Si des adaptations sont parfois nécessaires pour accueillir les contenus du site (par exemple, megamenu en desktop VS side panel en mobile), il est important de conserver une arborescence similaire et une cohérence graphique. Vos clients vous remercieront lorsqu’ils reviendront sur votre site sur un nouveau device et qu’ils retrouveront leurs marques !

La disposition des contenus doit être pensée pour faciliter la compréhension du maillage :

  • Si possible, privilégiez peu d’entrées dans les premiers niveaux, et 5 à 7 maximum pour les niveaux en aval (au-delà, les utilisateurs sont souvent perdus)
  • Pensez à indiquer en premier ce qui se vend (en commençant par vos produits phares), puis en dernier les pages de contenu qui convertissent moins. Les liens plus utilitaires (pages légales notamment) trouveront quant à elles leur place au niveau du footer.
  • La disposition verticale se prête aux listes longues et l’horizontal un nombre de points d’entrée + réduits. Jouer sur les deux mises en forme entre les différents niveaux peut être une approche utile dans certains cas.
Exemple : <a href="https://www.ohmycream.com/">https://www.ohmycream.com/</a>

 

2. Chaque chose à sa place

Rappelez-vous que le menu de navigation est la porte d’entrée vers l’ensemble de votre catalogue : il serait dommage que certains clients passent à côté du produit de leur rêve parce qu’il était mal indiqué ! Pour cela, il est nécessaire de structurer en amont l’ensemble de votre catalogue en collections claires et organisées.

Par exemple, vous pouvez identifier des “dimensions” dans lesquelles constituer vos collections de produits : par catégories de produits (manteaux et vestes, pantalons et jeans, etc.), par genre (homme, femme), par marque, par solution (anti-stress, minceur, etc.), par événement (soldes, Noël, etc.). Ces différentes dimensions doivent être claires tout au long de la navigation. Astuce : n’hésitez pas à utiliser les balises produits Shopify pour créer des collections automatiques.

Les intitulés de ces différents points d’entrée doivent être compréhensibles pour un client qui effectue sa première visite sur le site. Si le client ne comprend pas ce que c’est, il y a peu de chance qu’il clique dessus en priorité. Si nécessaire, pensez à ranger ces “intitulés exotiques” sous des dénominations plus claires (une collection au nom original sous un en-tête “collections” par exemple).

Enfin, il ne s'agit pas que des collections et produits, mais aussi de penser aux autres pages du site qui ont du sens dans votre menu : blog, page de présentation de la marque, formulaire de contact, store locator... 

Exemple : <a href="https://moonjuice.com/">https://moonjuice.com/</a>

 

3. The cherry on the cake

Une fois que vous aurez construit vos contenus à afficher dans votre menu de navigation et optimisé sa structure, vous pourrez alors penser à apporter des petits “plus” qui ajouteront des points de contact visuels qui vont conquérir les visiteurs de votre site :

  • Des animations du header / menu au scroll down sur la page (utile pour maintenir une navigation sticky sans qu’elle n’encombre trop d’espace d’écran)
  • Des comportements custom au hover des éléments de menu
  • Un style “accentué” pour les entrées de menu plus événementielles (couleur, police… différenciante), comme pour les soldes ou la Saint Valentin par exemple. Vous pouvez aussi (si en ligne avec l’ADN de votre marque) des icônes ou emojis au niveau des titres !
  • Des visuels pour présenter les catégories principales
Exemple : <a href="https://www.rhodeskin.com/">https://www.rhodeskin.com/</a>

 

Des questions ? Des besoins ? N'hésitez pas à nous contacter pour échanger