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

E-commerce zonder dropdown-menu’s? Je kunt het je eigenlijk niet voorstellen; ze zijn immers een belangrijk onderdeel van webdesign voor nagenoeg alle soorten websites. Toch lukt het opvallend weinig webwinkels om ze ook echt gebruiksvriendelijk te maken. In dit artikel bespreken we je mogelijkheden om effectieve navigatiemenu's te ontwerpen voor websites, zowel voor desktop als mobiel. We geven je 8 tips om de dropdown-menu's van je webshop te optimaliseren en je website nog gebruiksvriendelijker te maken.

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 ;
• Footernavigatie, vaak met handige links naar contentpagina’s, zoals de ‘Over ons’-pagina en de juridische pagina.

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.

Als je website daarentegen verwarrend is, of lastig te navigeren, zijn klanten al snel geneigd weg te klikken en ergens anders te gaan kopen. Dat verhoogt je bouncepercentage en verlaagt je conversie. Hieronder laten we je zien hoe je een betere UX maakt, met dropdown-menu’s en andere navigatieopties, zodat jij het conversiepercentage van je webshop kunt verhogen.

Het juiste type hoofdmenu kiezen: wat zijn je opties?

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é.

Hieronder beschrijven we een aantal veelvoorkomende hoofdmenu’s. De meeste kun je zowel verticaal als horizontaal op het scherm plaatsen.

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.

Dropdown-menu’s

Menu’s die je het vaakst op e-commerce websites ziet, zijn responsieve dropdown-menu’s. Deze tonen een hoofdmenu met alleen de hoofdcategorieën. Als je op een menu-item klikt of eroverheen muist, vouwt de lijst uit en zie je alle subcategorieën. Je kunt zo veel lagen dropdown-subcategorieën toevoegen als je wilt. Toch is het beter om er niet meer dan twee te hebben. Is je productassortment zo uitgebreid dat je er meer nodig hebt, dan heb je een megamenu (zie onder).

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.	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.
Als de lijst uitvouwt en andere subcategorieën laat zien, zijn de menu-items waar eerder op is geklikt nog steeds zichtbaar. De klant hoeft dus niet te onthouden welke opties hij koos. Ook kan hij makkelijker door de opties klikken tot hij vindt wat hij zoekt in die categorie.

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

Heb je een webshop voor een modemerk, dan moet je menu de aandacht vestigen op je producten. Links naar andere content, zoals productadvies of blogberichten, zet je aan het eind van het menu. In het algemeen bepaalt de branch waarin je actief bent put je online bedrijf wat de beste manier is om je conversie you optimaliseren.

Conseil n°3 : adoptez une structure visuelle

Een gewoon menu kan tekst alleen in een eenvoudig format laten zien. Met een mega dropdown-menu kun je specifieke menu-onderdelen accentueren. Gebruik bijvoorbeeld verschillende:

• 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

Voeg geen ingewikkelde interacties toe aan je dropdown-menu’s, zoals aanmelden voor de nieuwsbrief of keuze- en zoekvelden; deze kunnen bezoekers afschrikken. Het laatste wat je wilt, is dat je hoofdmenu er onoverzichtelijk uitziet. Bovendien verschijnen dit soort onderdelen vaak op meerdere plaatsen. Ze hebben meer effect als ze op de pagina’s staan waar ze thuishoren.

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

Veel websites gebruiken dropdown-menu’s die openen zodra je over het menu-item muist. Als je deze optie overweegt, moet je eerst over een paar punten nadenken:

• 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.

Tip #7: Gebruik meerdere menu’s

Voor websites met veel informatie kan het handig zijn om meer dan één menu te gebruiken. Kies bijvoorbeeld voor een dropdown-menu, met je productcategorieën als hoofdmenu en een apart menu in de footer voor de secondary categorieën. Je hoofdmenu blijft dan overzichtelijk. Zo zou dat eruit kunnen zien:

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

Een aantrekkelijk menu moet hetzelfde formaat behouden, zelfs als de items in het hoofdmenu verschillende aantallen subcategorieën bevatten. Als je website een zoekfunctie heeft, zorg dan dat de dropdown-menu’s die niet onzichtbaar maken zodra ze uitvouwen.

Neem ook een kleine visuale aanduiding op, die aangeeft of een item in de navigatiebalk uitklapt tot een dropdown-menu als de gebruiker erop klikt of eroverheen muist. Plaats bijvoorbeeld een klein pijltje naast de menunaam: voor dropdown-menu’s moet het pijltje omlaag wijzen; voor fly-outs wijst het naar right. Zo weten je kopers instinctief dat ze meer informatie kunnen verwachten.

Mobiel winkelen: Maak je webshop makkelijk navigeerbaar op smartphones

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.

Deze aanpak werkt alleen voor websites met korte menu’s en weinig items om naartoe te navigeren. Voor grotere websites is een meerlaags mobiel navigatie-ontwerp gebruiksvriendelijker.

Dropdown-menu’s

Met dropdown-menu’s kun je precies dezelfde opties aanbieden als je desktop-website, in een lay-out die beter past bij mobiel winkelen. Als je op een menu-item tikt, vouwt de navigatie uit over de content. Daarom wordt dit type menu voor mobiele websites ook wel overlay-menu genoemd.

Slidedown-menu’s

Voor mobiele sites zijn slidedown-menu’s handiger dan dropdown-menu’s. Als een slidedown-menu opent, bedekt dit niet de inhoud van de pagina, maar shuift het omlaag. Dat zorgt ervoor dat je omlaag kunt scrollen en de content kunt zien als je dat wilt, zelfs als het menu openstaat. Dit type menu is wat lastiger te programmer, maar heel populair bij gebruikers.

La navigation off-canvas

Met deze optie is het menu niet geïntegrerd in de lay-out van de pagina, dus het neemt geen ruimte in beslag op het scherm. Je hoeft alleen maar op de menubutton te tikken om het menu te openen, dat de rest van de pagina bedekt. Vervolgens is de navigatiestructuur van de website het enige op het scherm. Dit is vooral een goede optie voor sites met veel subcategorieën.

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

Er zijn veel opties om voor je webshop een gebruiksvriendelijk menu te maken. Afhankelijk van welk winkelsysteem je gebruikt, kun je kiezen uit veel navigatiedesigns. Wat je ook kiest, het is belangrijk dat je begint met een duidelijke structuur voor de content op je site. Heb je een groot assortment, dan kun je het beste dropdown-menu’s gebruiken voor je desktopwebsite en slidedown-menu’s voor de mobiele versie. Gebruik onderstaande checklist om onze tips te onthouden als je het navigatiemenu ontwerpt.

	Checklist voor gebruiksvriendelijke dropdown-menu’s	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.	Het dropdown-menu opent vanaf het begin volledig. Je hoeft niet op een categorie te klikken om de subcategorieën te zien.
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.	Dropdown-menu’s zijn allemaal even groot, ongeacht het aantal subcategorieën.
9.	From dropdown-menu’s bevatten geen interactieve functions (zoals aanmelden voor een nieuwsbrief).
10.	Le menu déroulant ne masque pas la barre de recherche ou d'autres éléments importants lorsqu'il est déployé.
11.	Secondary functions staan in aparte menu’s (bijvoorbeeld in de footer).