Menus déroulants : quels modes de navigation améliorent la conversion de votre site ?

Il est presque impossible de penser à l'e-commerce sans penser aux menus déroulants. Ils sont essentiels dans la conception d'une page internet, peu importe le type de site. Pourtant, peu d'e-commerçants réussissent à leur apporter un niveau de convivialité optimum. Dans cet article, nous aborderons la conception de menus de navigation pour site web efficaces, sur ordinateurs comme sur smartphones. Nous vous donnerons 8 conseils pour optimiser les menus déroulants de votre boutique en ligne et rendre la navigation plus conviviale.

Qu’est-ce que la navigation web ?

La barre de navigation de votre site permet à vos visiteurs de s’orienter facilement. Elle propose des liens directs vers les principales catégories de votre site internet. C’est pourquoi on l’appelle également « menu réactif ».

Cela ne résume pas entièrement la navigation web. Voici d'autres éléments fréquents inhérents à la navigation internet :

• Le menu principal qui répertorie l’ensemble du contenu du site en catégories hiérarchisées ;
• La navigation secondaire qui regroupe des liens pratiques vers des fonctionnalités secondaires, comme le panier d’achat ou l’identification utilisateur ;
• Des filtres qui permettent à l’utilisateur d’affiner les résultats de recherche ;
• Un fil d’Ariane qui situe l’utilisateur dans l’arborescence du site internet ;
• La navigation en pied de page qui présente des liens pratiques vers certaines pages, comme les mentions légales ou la rubrique « à propos ».

En quoi une navigation web efficace améliore la conversion en e-commerce ?

Une expérience utilisateur engageante (UX) est aussi importante pour un e-commerçant que pour un magasin physique. Cela signifie que les clients doivent pouvoir facilement s’orienter sur votre boutique en ligne. Dès leur arrivée sur votre site, les informations les plus importantes doivent apparaître clairement pour faciliter les recherches. Il est donc primordial que les menus de votre page soient pratiques et simples d’utilisation. En permettant à vos clients de trouver intuitivement le contenu ou les fonctions dont ils ont besoin, vous augmentez la probabilité de réaliser une vente.

En revanche, si la navigation sur votre site est difficile, les clients risquent d’aller cliquer ailleurs. Vous augmentez votre taux de rebond et réduisez votre conversion. Nous vous montrons ci-dessous comment créer une meilleure UX avec menus déroulants et autres éléments de navigation, pour optimiser le taux de conversion de votre boutique en ligne.

Choisir le menu principal adéquat : quelles sont les options ?

Lorsque vous créez le site web de votre activité e-commerce, vous devez d’abord choisir entre un menu principal vertical ou horizontal.

• Un menu vertical s’étale sur la gauche de la page, du haut vers le bas.
• Un menu horizontal s’étale en haut de la page, de la gauche vers la droite.

Avec un menu horizontal, l'espace est limité par la largeur de l'écran. C'est pourquoi il ne contient souvent que de courts mots-clés. À l'inverse, un menu vertical peut s'étendre à loisir. Gardez à l'esprit qu'il est toutefois préférable de limiter le menu principal aux catégories les plus importantes par souci de clarté.

Voyons quelques types de menus que l’on retrouve fréquemment sur la toile. La plupart sont utilisables aussi bien horizontalement que verticalement.

Le menu sticky

Le menu sticky, également appelé menu fixe ou flottant, est visible en permanence. Il reste à l'écran même lorsque l'utilisateur fait défiler la page vers le bas. L'avantage est que l'utilisateur n'a pas à revenir en haut de la page s'il veut aller dans une autre catégorie du menu. Si vous utilisez un menu fixe, faites attention à ce qu'il ne prenne pas trop de place afin de ne pas masquer de contenu important lorsque l'utilisateur fait défiler la page.

La navigation interactive

La navigation interactive est rarement une bonne solution pour les boutiques en ligne. Avec ce type de navigation, il n’y a pas de liens qui mènent vos utilisateurs de A à B. La navigation sur le site fait partie de l’expérience offerte à l’utilisateur. Les éléments interactifs rendent l’expérience de navigation ludique et guident l’utilisateur d’une section ou d’un sous-domaine à l’autre jusqu’à ce qu’il ait découvert l’ensemble du contenu.

Le menu hamburger

Le menu hamburger, parfois appelé menu latéral ou menu à tiroir, s’est largement développé avec la croissance rapide des smartphones. Ce type de menu est facilement identifiable par son bouton aux trois lignes horizontales parallèles, généralement placé dans le coin supérieur droit ou gauche d’une page internet. Les lignes font penser à un hamburger et donnèrent son nom au menu.

Avec un menu hamburger, les utilisateurs ne découvrent de prime abord que le contenu de votre site et le bouton du menu hamburger. Lorsque l’utilisateur appuie sur le bouton, le menu principal s’affiche à l’écran et révèle toutes les options de navigation de votre site.

Les sites internet utilisent de plus en plus ce type de menu même pour leur version ordinateur. Cependant, du fait que les utilisateurs doivent cliquer sur un bouton supplémentaire juste pour afficher le menu, il est recommandé d’utiliser le menu hamburger uniquement pour la version mobile de votre boutique en ligne.

Menus déroulants

Le menu le plus utilisé par les sites e-commerce est le menu déroulant réactif. Seul un menu général avec les principales catégories s’affiche d’abord à l’écran. Ensuite, en survolant ou en cliquant sur l’une de ces catégories, l’utilisateur déroule une liste de sous-catégories. Vous pouvez d’ailleurs ajouter autant de couches de sous-catégories déroulantes que vous le souhaitez, même si nous vous conseillons de ne pas en mettre plus de deux. Si cependant votre gamme de produits est si étendue que vous avez besoin de plus de niveaux déroulants, vous pouvez utiliser un méga menu (voir plus loin).

Le menu déroulant peut être horizontal ou vertical. Peu importe son orientation, un menu déroulant garantit une très grande ergonomie pour les clients. Si vous optez pour un menu déroulant, pensez à la structure du contenu de votre site afin qu'il ne soit pas trop surchargé ou difficile à utiliser.

Méga menus déroulants : avantages et inconvénients

Un méga menu, bien qu’il ait ses limites, offre de nombreux avantages en termes d’expérience utilisateur. Encore une fois, l’élaboration de l’arborescence de votre site est très importante. Effectivement, un méga menu n’est vraiment pratique que si les catégories de la barre de navigation sont significatives. Avant la mise en place d’un méga menu, prenez le temps de réfléchir à une organisation simple et efficace de votre contenu. Le tableau suivant répertorie les principaux avantages et inconvénients d’un méga menu.

Avantages	Inconvénients
Offre un aperçu rapide du contenu et des produits.	N’est pas optimisé pour les smartphones .
Permet d’afficher plusieurs niveaux de sous-catégories.	Au fur et à mesure que le menu se déroule, il peut masquer le contenu de la page.
Une arborescence explicite facilite la navigation web.	En fonction de la taille du méga menu, il peut occasionner des problèmes de SEO .
La mise en page, la typographie et les illustrations apportent une structure visuelle aux éléments du menu.	Le menu se referme automatiquement lorsque l’utilisateur clique sur l’article désiré. Si par la suite l’utilisateur veut visiter une autre page, il doit à nouveau retrouver son chemin vers la sous-catégorie.
Au fur et à mesure que le menu se déroule pour afficher les sous-catégories, le chemin suivi reste apparent. Ainsi, l’utilisateur n’a pas à s’en rappeler et peut simplement cliquer jusqu’à trouver ce qu’il cherche dans la catégorie désirée.

Conception web : 8 conseils pour améliorer la convivialité des menus déroulants

Vous trouverez ci-dessous quelques conseils de navigation web qui vous aideront à améliorer votre taux de conversion. Grâce à nos conseils d’usabilité, vous apprendrez également comment assurer une meilleure ergonomie de votre boutique en ligne, en plus du menu principal.

Conseil n°1 : créez l’arborescence de votre site à l’avance

Avant de choisir les éléments du menu, il est important de penser aux fonctionnalités et au contenu de votre site. Divisez les fonctionnalités et le contenu en catégories principales et en sous-catégories et attribuez-leur un intitulé explicite et concis. Les utilisateurs survolent rapidement les éléments du menu, vous désirez donc qu'ils puissent facilement les identifier et savoir ce qu'ils contiennent.

Conseil n°2 : commencez par les éléments les plus importants

Les éléments les plus intéressants pour vos utilisateurs doivent toujours apparaître au début du menu principal. Si vous êtes par exemple un fournisseur SaaS, il est pertinent de commencer votre menu par des éléments qui vont convaincre le visiteur que votre solution est celle qu’il lui faut. Essayez des éléments de menu tels :

• Pourquoi nous ?
• À propos
• Tarifs

Si vous gérez la boutique en ligne d’une enseigne de mode, votre menu doit être centré sur les produits. Les liens vers d’autres contenus, comme des conseils produits ou des articles de blog, doivent apparaître vers la fin du menu. D’une manière générale, il n’y a pas une seule façon d’optimiser la conversion de votre boutique en ligne puisque cela dépend de votre secteur d’activité.

Conseil n°3 : adoptez une structure visuelle

Un menu classique ne permet d’afficher que du texte en format simple. Les méga menus déroulants, quant à eux, vous permettent de mettre en évidence certains éléments du menu. Vous pouvez jouer sur :

• La taille du texte ;
• La couleur du texte ;
• La police de caractères ;
• Les icônes.

Cela vous aide à apporter de la structure au contenu de votre menu déroulant. Tous les éléments ne doivent pas obligatoirement renvoyer à une page, certains mots peuvent être simplement des titres de rubrique pour des sous-catégories qui elles renvoient à une page de votre boutique en ligne.

Conseil n°4 : évitez d’insérer des fonctionnalités auxiliaires

N'introduisez pas de fonctionnalités complexes à vos menus déroulants, comme l'inscription à la newsletter ou la barre de recherche, elles peuvent nuire à la fluidité de votre navigation. Ce que vous voulez éviter par-dessus tout est que votre menu principal soit surchargé. Qui plus est, ce genre d'éléments peuvent être placés à différents endroits d'une page web. Leur impact est plus efficace si vous les placez de façon plus appropriée..

Intégrez un bouton d’appel à l’action (CTA) dans la barre de navigation peut s’avérer efficace. Par exemple, créez un bouton qui permet à vos clients de faire une réservation ou un achat en un seul clic. Rappelez-vous d’une chose : le CTA doit se trouver à côté du menu principal mais pas dans le menu déroulant lui-même.

Conseil n°5 : choisissez entre le survol et le clic

De nombreux sites font le choix de menus déroulants qui s'ouvrent lorsque l'utilisateur survole la catégorie du menu avec la souris. Si vous considérez cette option, il y a quelques points à prendre en compte.

• En un seul coup d’œil : un méga menu doit plutôt se dérouler entièrement qu’un seul niveau de catégorie à la fois.
• Timing parfait : le menu ne doit pas être trop sensible. Il ne doit ni s’activer lors d’un survol rapide, ni mettre trop de temps à réagir. Un temps de réaction entre 0,1 et 0,5 seconde offre une convivialité optimale. Pensez également à autoriser une courte pause avant de masquer le menu, au cas où l’utilisateur s’en éloigne par accident. Un menu trop sensible ou erratique n’apporte que frustration à vos utilisateurs et nombre d’entre eux quitteront tout simplement votre site.
• Programmation MouseOut : lorsque le menu déroulant est activé, les visiteurs déplacent le curseur de la barre de navigation au menu. Si votre site n'est pas correctement programmé, un événement MouseOut sera enregistré à tort lorsque la souris quittera la barre de navigation et le menu se refermera. C'est pourquoi il est préférable de configurer le menu de sorte qu'il ne se referme que lorsque la souris quitte la barre de navigation et le menu déroulant.
• Version mobile : le survol n’est pas possible sur smartphones ou tablettes. Si vous désirez utiliser cette option pour votre site internet, pensez à configurer différemment votre version mobile.

Conseil n°6 : suivez la règles des trois clics

Pour la plupart des sites web, la « règle des trois clics » doit être respectée. Cela signifie que n’importe quelle information du site doit être atteignable en trois clics ou moins. Il s’agit d’une règle générale qui ne s’applique peut être pas si vous avez un site internet très volumineux et détaillé. Dans ce cas, contournez la règle mais pensez à bien organiser votre site. Ce qu’il faut garder en tête, c’est que vos clients doivent toujours trouver facilement leur chemin.

Conseil n°7 : utilisez plusieurs menus

Pour les sites internet qui contiennent beaucoup d’informations, il peut être utile d’avoir plus d’un menu. Préférez un menu déroulant avec vos catégories de produits comme menu principal, tout en utilisant un menu séparé avec les catégories secondaires en pied de page. Cela évite de surcharger votre menu principal. En voici un exemple avec le tableau ci-dessous :

Catégories en pied de page	À propos	Contact	Pourquoi nous ?	Nos conseils
Sous-catégories associées	Notre équipe	E-mail et téléphone	Moyens de paiement	Notre blog
Sous-catégories associées	Rejoignez-nous	Adresse	Livraison gratuite	Conseils aux clients
Sous-catégories associées	Partenaires	Presse	Livraison express	Vente
Sous-catégories associées	Conditions générales	Service client	Garantie de remboursement de 100 jours	FAQ
Sous-catégories associées	Politique de confidentialité
Sous-catégories associées	Mentions légales

Conseil n°8 : soignez l’apparence

Même lorsque ses éléments n'ont pas le même nombre de sous-catégories, un menu efficace a toujours la même taille. Si votre page à une fonction de recherche, assurez-vous que les menus déroulants ne la masquent pas lorsqu'ils s'ouvrent.

Il est bon de placer un petit indice visuel pour indiquer si l'un des éléments de la barre de navigation est un menu déroulant. Une petite flèche à côté du menu fait parfaitement l'affaire. Orientez-la vers le bas pour les menus horizontaux et vers la droite pour les menus verticaux. De cette façon, les visiteurs savent instinctivement où trouver davantage d'informations.

Commerce mobile : faciliter la navigation sur smartphone de votre boutique en ligne

Les e-acheteurs utilisent de plus en plus leurs smartphones pour commander en ligne. Il est donc important d'y penser lorsque vous configurez le menu de votre boutique en ligne. Auparavant considéré comme une bonne idée, réduire le nombre d'éléments pour la version mobile n'est plus d'actualité. Après tout, les utilisateurs mobiles s'attendent à avoir accès aux mêmes informations que sur ordinateur. Abordons quelques astuces qui améliorent la convivialité et la navigation de votre site sur les appareils mobiles.

L’approche « ne rien changer »

La manière la plus simple de concevoir votre site mobile est de le rendre quasi identique à la version ordinateur. Procédez simplement à quelques ajustements pour permettre à vos utilisateurs d’actionner aisément les éléments du menu avec leur écran tactile. Par exemple :

• Augmentez l’espace entre les éléments de navigation ;
• Optez pour une taille de texte adaptée.

Cette approche ne fonctionne parfaitement que pour les sites aux menus concis et qui contiennent peu d’éléments. Les sites internet plus volumineux réclament une conception mobile à plusieurs niveaux pour garder une navigation conviviale.

Le menu déroulant

Les menus déroulants offrent les mêmes options que votre page internet classique, en s’adaptant mieux aux achats sur mobile. Lorsque l’utilisateur presse un élément du menu, les options de navigation se déroulent sur le contenu. C’est pourquoi ce type de menu pour sites mobiles est aussi appelé menu superposé.

Le menu glissant

Pour les sites mobiles, les menus glissants sont plus pratiques que les menus déroulants. Lorsqu’un menu glissant se déploie, il ne couvre pas le contenu de la page mais le pousse vers le bas. Le visiteur peut ainsi toujours faire défiler la page et consulter le contenu même si le menu est ouvert. Ce type de menu est un peu plus difficile à programmer mais est très apprécié des utilisateurs.

La navigation off-canvas

Cette solution exclut le menu de la mise en page du site, il ne prend donc aucune place sur l’écran. L’utilisateur doit simplement appuyer sur le bouton du menu pour le faire apparaître sur la page. L’arborescence du site est alors la seule chose qui apparaît à l’écran. C’est une option très intéressante pour les sites aux nombreuses sous-catégories.

Conclusion : est-il facile de naviguer sur votre boutique en ligne ?

De nombreuses solutions s’offrent à vous pour adopter un menu convivial à votre boutique en ligne. En fonction de la plateforme e-commerce que vous utilisez, vous pouvez choisir parmi de nombreux designs. Peu importe votre choix, il est important de commencer par structurer précisément le contenu de votre site. Si votre gamme de produits est très importante, la meilleure option consiste à utiliser des menus déroulants pour la version desktop de votre site web et des menus coulissants pour la version mobile. Utilisez la checklist suivante pour vous assurer de suivre l’ensemble de nos conseils lorsque vous concevez le menu de votre site internet.

	Checklist pour créer des menus déroulants conviviaux	Check
1.	Les intitulés des catégories sont courts et explicites.
2.	Les catégories principales sont classées par ordre d’importance.
3.	Un indice visuel à côté du menu (par exemple une petite flèche) indique qu’il peut se dérouler.
4.	Le menu déroulant se déploie dans les 0,1 à 0,5 secondes lorsqu’il est survolé par l’utilisateur.
5.	Le menu déroulant se déploie complètement dès le début. Les visiteurs n’ont pas à cliquer sur chacune des catégories pour découvrir ses sous-catégories.
6.	Des indices visuels comme des icônes ou la couleur du texte sont utilisés pour faciliter la navigation sur le menu déroulé.
7.	Le menu ne se referme pas si l’utilisateur déplace le curseur de la barre de navigation vers le menu déroulé.
8.	Les menus déroulants sont tous de la même taille, peu importe le nombre de sous-catégories qu’ils contiennent.
9.	Il n’y a pas de fonctionnalités interactives dans les menus déroulants (comme l’inscription à la newsletter).
10.	Le menu déroulant ne masque pas la barre de recherche ou d’autres éléments importants lorsqu’il est déployé.
11.	Les fonctionnalités secondaires font partie d’un menu séparé (en pied de page par exemple).