Dropdown-menu’s: Welke soorten navigatie laten je website beter converteren?

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.

Wat is website-navigation?

De navigatiebalk op je website helpt je klanten makkelijker hun weg te vinden. Er staan links op, die je bezoekers de weg wijzen naar de belangrijkste categorieën op je website. Daarom heet het ook wel ‘responsive menu’.

Maar website-navigatie is meer dan dat. Andere veelvoorkomende elementen zijn onder meer:

• Het hoofdmenu, met een overzicht van alle content, gesorteerd op categorie.
• Functionele navigatie, links naar nuttige secondary functions, zoals het winkelwagentje of de gebruikerslogin.
• Filters, waarmee je zoekresultaten kunt verfijnen.
• Breadcrumbs, die laten zien op welke pagina van de website je zit.
• Footernavigatie, vaak met handige links naar contentpagina’s, zoals de ‘Over ons’-pagina en de juridische pagina.

Hoe draagt een goede sitenavigatie bij aan een betere conversie?

Een positieve user experience (UX) bieden is voor een e-commerce retailer net zo belangrijk als voor een offline bedrijf. Idealiter houd je hier direct rekening mee wanneer je gaat beginnen met e- trade. Klanten moeten op je website makkelijk hun weg vinden. Meteen bij binnenkomst moeten ze de belangrijkste informatie zien, zodat ze snel vinden wat ze zoeken. Kies daarom voor praktische, gebruiksvriendelijke menu’s in je webshop. Hoe makkelijker je klant alle content en functies vindt, hoe groter je verkoopkansen.

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?

Bouw je een website voor je webshop, dan moet je eerst beslissen of je het hoofdmenu van je site verticaal of horizontaal laat zien.

• Een vertical menu staat aan links op de pagina, van boven naar beneden.
• Een horizontaal menu staat boven aan de pagina, van links naar rechts.

Met een horizontaal menu is je ruimte beperkt door de breedte van het scherm. Daarom staan daar vaak alleen korte keywords in, zoals ‘Diensten’ ‘Over ons’ en ‘Contact’. Een vertical menu kun je zo uitgebreid maken als je wilt. Beperk je hoofdmenu wel tot de belangrijkste categorieën, zodat je website voor je klant overzichtelijk blijft.

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

Statische navigatie

Statische navigatie (ook bekend als ‘fixed header’ of ‘sticky menu’) wil zeggen dat het hoofdmenu permanent zichtbaar is. Je blijft het dus zien, zelfs als je omlaag scrolt. Het voordeel is dat je niet terug hoeft te scrollen naar de bovenkant van de pagina als je naar een ander menu-item wilt navigeren. Wil je een fixed header gebruiken, zorg dan dat die niet teveel ruimte in beslag neemt. Anders zit hij misschien tijdens het omlaag scrollen andere nuttige content op het scherm in de weg.

Interactieve navigatie

Interactieve navigatie is in het algemeen niet zo handig voor webshops. Er zijn namelijk geen links die je gebruiker van A naar B leiden. In plaats daarvan is het navigeren zelf onderdeel van de beleving. Interactieve elementen gamificeren de navigatie: je wordt op een speelse manier van het ene deel of subdomein naar het andere geleid, tot je alle content hebt gezien.

Hamburger-menu

Het hamburger- of burgermenu wordt ook wel rolmenu of off-canvasmenu genoemd. Een hamburger-menu herken je aan de drie horizontal streepjes in de rechter- of linkerbovenhoek. Ze lijken een beetje op een hamburger, vandaar de naam.

Gebruikt jouw site een hamburger-menu, dan zien bezoekers eerst alleen de content van de site en de menubutton. Als ze daarop tikken, verschijnt het hoofdmenu in zijn geheel op het scherm, met alle opties om te navigeren.

Deze menusoort wordt ook op desktop-websites steeds vaker gebruikt, maar je moet dan wel op een extra button klikken om het menu te zien. Om die reden bevelen we het hamburger-menu alleen aan voor de mobiele versie van je website.

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

Een horizontal dropdown-menu wordt ook wel pulldown-menu genoemd. Een vertical dropdown-menu wordt ook wel fly-out genoemd. Beide soorten zijn uitklapbaar en zijn heel gebruiksvriendelijk. Kies je voor een dropdown-menu, denk dan eerst na over hoe je de content van je site wilt structureren. Anders wordt het menu al snel onoverzichtelijk en lastig te gebruiken.

Mega dropdown-menu’s: voors en tegens

Een megamenu mag dan veel pluspunten hebben voor de gebruikservaring, er zijn ook beperkingen. Nogmaals, het is belangrijk om de structuur van je site zorgvuldig te plannen. Je megamenu is tenslotte alleen zinnig als alle items op de navigatiebalk van je site duidelijk zijn. Kortom, bedenk eerst hoe je de content van je website het best presenteert voordat je kiest voor een megamenu. In de tabel hieronder staan de voors en tegens van een megamenu op een rijtje.

Voor	Tegen
Snel overzicht van content en producten.	Voor gebruik op smartphones zijn ze niet ideaal.
Kan meerdere lagen subcategorieën laten zien.	Als het menu uitklapt, bedekt het vaak delen van de content op de pagina.
Een nauwkeurige contentstructuur maakt de navigatie van de site makkelijker.	Afhankelijk van hoe groot het megamenu is, kan het voor SEO-problemen zorgen.
Lay-out, typografie en illustraties zorgen voor visual structuur aan alle menu-onderdelen.	Het menu sluit automatisch als de bezoeker op het laatste menu-item klikt. Wil hij dan naar een andere pagina navigeren, dan moet hij helemaal opnieuw naar het gewenste submenu doorklikken .
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.

Webdesign: 8 tips voor een gebruiksvriendelijk dropdown-menu

Hieronder vind je navigatietips die je kunt gebruiken om je conversie te verhogen. In met eleven usability-tips maak je niet alleen je hoofdmenu gebruiksvriendelijker, maar je hele webshop.

Tip #1: Breng de navigatie van je homepage vooraf in kaart

Voordat je menu-items kiest, is het belangrijk dat je eerst een schema maakt van alle functionaliteiten en content die op de website terecht moeten komen. Meestal kun je deze onderverdelen in hoofd- en subcategorieën. Geef elke categorie een korte, krachtige naam, zoals ‘Producten’ of ‘Contact’. Gebruikers kijken meestal maar kort naar de menu-items, dus is het belangrijk dat zij ze moeiteloos uit elkaar kunnen houden en meteen begrijpen wat ze inhouden.

Tip #2: Zet de meest relevante items voorop

De menu-onderdelen die voor je gebruikers het interessantst zijn, moeten altijd aan het begin van je hoofdmenu staan. Als je bijvoorbeeld SaaS-provider bent, begin je menu dan met onderwerpen die bezoekers ervan overtuigen dat jouw oplossing de juiste is. Probeer menu-items als:

• Waarom wij?
• Over-ons
• Prijzen

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.

Tip #3: Breng een visual structure aan

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:

• tekstgroottes
• tekstkleuren
• lettertypes
• icoontjes

Hiermee geef je meer structuur aan de inhoud van je dropdown-menu. Niet alle items hoeven te linken naar een pagina; sommige woorden kunnen simpelweg dienstdoen als niet-klikbare heading voor verschillende klikbare subcategorieën.

Tip #4: Voeg geen extra functies toe

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.

Toch kan het heel effectief zijn om een call-to-action (CTA) button op te nemen in de navigatiebalk. Bijvoorbeeld een waarmee je klanten met één klik direct kunnen reserveren of kopen. Onthou wel dat de CTA naast het hoofdmenu moet worden geplaatst en niet in het dropdown-menu zelf.

Tip #5: Kies tussen tussen muizen of klikken

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:

• Alles in één oogopslag: een megamenu moet bij voorkeur in één keer in zijn geheel openen in plaats van geleidelijk, één subcategorie per keer.
• Perfect timing: het menu moet niet te gevoelig zijn. Je wilt niet dat het gaat ‘flikkeren’ als gebruikers er te snel overheen bewegen. Maar het moet ook niet te traag reageren. Wij adviseren een reactietijd van 0.1 tot 0.5 secondsen voor optimal gebruiksvriendelijkheid. Ook een goed idee: een korte pauze inlassen voordat het menu verdwijnt, voor het geval de gebruiker per ongeluk bij het menu vandaan muist. Een overgevoelig of onvoorspelbaar menu irriteert gebruikers. Een deel van hen zal het opgeven en je website helemaal de rug toekeren.
• MouseOut programmeren: als het dropdown-menu is geactiveerd, verplaatst de bezoeker zijn cursor van de navigatiebalk naar het menu. Is je site niet goed geprogrammeerd, dan maakt deze ten onrechte een MouseOut-event aan zodra de muis de navigatiebalk verlaat en wordt het menu gesloten. Het is dan ook belangrijk je menu zo in te stellen, dat het dropdown-menu alleen verdwijnt als de muis zowel de navigatiebalk als het dropdown-menu zelf verlaat.
• Mobiele versie: muizen is niet mogelijk op smartphones of tablets. Als je een muis-geactiveerd dropdown-menu wilt gebruiken op de desktopversie van je site, gebruik dan andere instellingen op de mobiele versie.

Tip #6: Respect the ‘3x klikken-regel’

Op de meeste websites moet de navigatie de ‘3x klikken-regel’ volgen. Je bezoeker moet elk stukje informatie in maximaal 3 klikken kunnen vinden. Uiteraard is said slechts een richtlijn. Heb je een grote, zeer gedetailleerde website, dan is het aantal keer klikken veel minder belangrijk, zolang de website maar goed georganiseerd is. Het belangrijkste is dat je klanten altijd het gevoel hebben dat ze makkelijk hun weg vinden.

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:

Hoofdcategorieën voor de footer	Over-ons	Contact	Waarom wij?	Eleven tips
Gerelateerde subcategorieën	Ons team	E-mailadres in telefoonnummer	Betaalmogelijkheden	Onze blog
Gerelateerde subcategorieën	Kom bij ons team	Locaties	Gratis verzenden	Klantadvies
Gerelateerde subcategorieën	Partners	Pers	Snelle levering	Verkoop
Gerelateerde subcategorieën	Algemene Voorwaarden	Klantenservice	100 dagen ‘niet goed geld terug’-guarantee	FAQs
Gerelateerde subcategorieën	Privacybeleid
Gerelateerde subcategorieën	Legal Juridisch

Tip #8: Uiterlijk tell

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

Online winkelen doen we steeds vaker puts eleven smartphone. Daarom is het belangrijk dat je de mobiele shopper in je achterhoofd houdt als je de menuopties voor je webshop kiest. Het idee om bepaalde menu-items op je mobiele website te verbergen, is inmiddels achterhaald. Logisch ook: als mobiele gebruiker verwacht je toch dat je toegang hebt tot dezelfde informatie als desktopgebruikers? Laten we eens kijken naar een paar gebruikersvriendelijke opties, die jouw website makkelijker navigeerbaar maken op mobiele apparatus.

From ‘zo laten’-aanpak

De eenvoudigste manier om je mobiele webnavigatie te ontwerpen, is zorgen dat deze vrijwel identiek is aan je desktop-site. Met een paar kleine aanpassingen est je site dan al geschikt om te bedienen via een touchscreen. Bijvoorbeeld door:

• of ruimte tussen of individual navigatie-items groter te maken.
• een geschikte tekstgrootte te kiezen.

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.

Off-canvas navigatie

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: Hoe gemakkelijk is het om door jouw webshop te navigeren?

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.	Namen van categorieën zijn kort en duidelijk.
2.	Hoofdcategorieën zijn gerangschikt op volgorde van relevantie voor de gebruiker.
3.	Er is een visual aanduiding (zoals een pijltje) naast de menunaam om aan te geven dat het menu uitvouwt.
4.	Het dropdown-menu opent binnen 0.1 tot 0.5 seconden als je eroverheen muist op de navigatiebalk.
5.	Het dropdown-menu opent vanaf het begin volledig. Je hoeft niet op een categorie te klikken om de subcategorieën te zien.
6.	Dankzij visuele aanduidingen, zoals icoontjes en afwijkende tekstkleuren,kun je makkelijker door het uitgeklapte dropdown-menu navigeren.
7.	Het menu sluit niet als je de cursor van de navigatiebalk naar het uitgeklapte dropdown-menu verplaatst.
8.	Dropdown-menu’s zijn allemaal even groot, ongeacht het aantal subcategorieën.
9.	De dropdown-menu's bevatten geen interactieve functies (zoals aanmelden voor een nieuwsbrief).
10.	Het uitgeklapte dropdown-menu bedekt niet het zoekveld of andere belangrijke content.
11.	Secundaire functies staan in aparte menu's (bijvoorbeeld in de footer).