Drop-down-navigatiemenu’s: waarom niet?

Met enige regelmaat krijgen wij de vraag of we een drop-down-menu kunnen implementeren als basisnavigatie voor een website. Een drop-down-menu – ook wel bekend als pull-down-menu – is een lijst van subpagina’s onder de items van een hoofdmenu. Deze klapt zich direct uit onder het hoofditem. In de afgelopen decennia is het een gangbare manier geworden om veel pagina’s te groeperen op een website. Deze vorm van navigatie wordt echter steeds minder populair – en daar zijn goede redenen voor.

Wat zijn dan de nadelen van een drop-down-menu? Mag je ze echt helemaal niet meer gebruiken? En wat zijn de alternatieven? In dit artikel zet ik alles voor je op een rijtje.

Klik of hover? De usability problemen

Er zijn twee manieren waarop je een drop-down-menu kunt activeren: via een klik en via een “hover”. Bij deze laatste beweeg je je muis over een menu-item en klapt het drop-down-menu vanzelf open.

Een klassiek voorbeeld van een drop-down-menu
Afbeelding 1: Een klassiek voorbeeld van een drop-down-menu

Dat er twee manieren zijn waarop drop- down- menu’s op het world wide web gebruikt worden is al een probleem op zich. Bij binnenkomst op een website zie je namelijk niet hoe de drop-down in kwestie zich zal gedragen, tot je het uitprobeert. Dit kan leiden tot vertraging in gebruik: de bezoeker wacht tot het menu openklapt op een hover, maar er gebeurt niets. Het kan ook ronduit frustrerend zijn, als een bezoeker op een hoofditem klikt om het menu open te klappen, maar in plaats daarvan doorklikt naar een volgende pagina. Beide situaties zijn niet wenselijk. Je wilt immers de gebruikservaring op je website optimaal maken, zonder obstakels.

Hovermenu’s

Een hover-drop-down-menu brengt nog meer nadelen met zich mee. Doordat het menu reageert op een hover, kan de websitebezoeker deze dus per ongeluk activeren of deactiveren. Met als gevolg dat de bezoeker klikt op een andere link dan eigenlijk de bedoeling was. Het menu kan onverwacht verschijnen omdat de cursor zich per ongeluk over een menu-item bewoog. Om maar niet te spreken over submenu’s met meerdere niveaus, die de bezoeker dwingen om door een zogenaamde “hover-tunnel” te gaan met hun muis om hun doel te bereiken (afb. 2). Dit vraagt zelfs vaardigheden van de bezoeker om de basisnavigatie van je website te kunnen gebruiken! Geen goed idee dus.

Een hover-tunnel
Afbeelding 2: Een hover-tunnel: de bezoeker moet met de muis een specifiek pad volgen om bij het juiste menu item te komen.

Een ander groot nadeel van een hover-drop-down-menu, is dat je door de afwezigheid van een muis niet kunt hoveren op touch devices. Een drop-down-menu op een touch device moet dus altijd openen met een klik. Het goede nieuws: dat is mogelijk. Zijn alle problemen dan opgelost? Helaas niet.

Klikmenu’s

Het grootste nadeel van klik-drop-down-menu’s, is dat de hoofdcategorie van de sub-items niet meer bereikbaar is. Stel dat een website productenpagina’s heeft. Deze producten zijn opgedeeld in meerdere categorieën. In dat geval zou je in het hoofdmenu een pagina “Producten” hebben en als sub-items in het drop-down-menu de productcategorienamen. De pagina waar normaal een productoverzicht getoond zou worden (na het klikken op “Producten”), valt dat in dit geval weg. Standaard wordt nu namelijk het submenu geopend, in plaats van dat de bezoeker naar die pagina wordt geleid. Dit is niet altijd wenselijk. Vaak is een overzichtspagina juist heel belangrijk, waarbij je de mogelijkheid hebt om productcategorieën op een overzichtelijke manier te ordenen, met bijvoorbeeld afbeeldingen erbij. Deze is veel sprekender voor een bezoeker dan een lange lijst met namen in een submenu.

In sommige gevallen opent de hoofdpagina zich na een tweede keer klikken op het hoofd-item, als een manier om de hoofdpagina toch bereikbaar te houden. Helaas is er voor de bezoeker geen enkele aanwijzing dat dit een manier is om die pagina te bereiken. Daarnaast kan een bezoeker er niet van uitgaan dat dit standaard gedrag is van een drop-down-menu. Het gebeurt vaker dat het submenu zich sluit na de tweede klik. Soms gebeurt er zelfs helemaal niets na een tweede klik op het hoofd-item. Met andere woorden, dit soort “oplossingen” zijn onvoorspelbaar voor de bezoeker en komen de usability van het menu niet ten goede.

Informatie architectuur

Drop-down-menu’s zorgen niet alleen voor problemen op het gebied van usability. Een goede structuur op een website begeleidt de bezoeker naar de informatie waar hij naar op zoek is. Een menu wordt echter vaak ingedeeld vanuit het oogpunt van de makers of de redactie van een website. Zij kennen de content door en door en weten alles op de website te vinden. Voor deze groep is het juist handig als een drop-down-menu een klik scheelt. De locatie van de informatie is immers bekend.

Voor de gemiddelde bezoeker is het echter niet bekend waar de informatie waar hij naar op zoek is zich bevindt. De bezoeker start in dit geval dus een zoektocht door een onbekende website. In tegenstelling tot wat veel mensen denken, vindt een bezoeker het helemaal niet erg om een keer extra te klikken, als hij met elke klik zekerder wordt dat hij op het juiste pad zit. Dit concept wordt ook wel de “Scent of Information” genoemd. De bezoeker gaat hierbij op “jacht” naar informatie. Hoe dichter hij bij deze informatie denkt te komen, hoe gretiger hij wordt.

Keuzestress

In het submenu van een drop-down-menu passen een hoop links. Helaas betekent dit vaak dan ook dat er ook heel veel links in worden geplaatst (afb. 3). Maar meer keuzemogelijkheden is niet altijd beter. Uit onderzoek blijkt dat hoe meer keuzemogelijkheden je hebt, hoe moeilijker het juist wordt om te kiezen! Een maar al te bekend fenomeen in de supermarkt. Psycholoog Barry Schwartz noemt dit “The Paradox of Choice”.

Houd het menu dus liever zo simpel mogelijk. Beperk het aantal hoofdmenu-items tot een minimum en verfijn de keuzes pas op de dieperliggende pagina’s. Zo overlaad je een bezoeker niet onnodig met een enorm scala aan keuzemogelijkheden, waarvan het grootste deel niet relevant is.

Een overload aan keuzemogelijkheden in het submenu
Afbeelding 3: Een overload aan keuzemogelijkheden in het submenu.

Applicaties vs. Websites

In iedere software-applicatie zijn drop-down-menu’s de standaard voor navigatie. Deze menu’s gaan vaak ook nog eens twee of meer niveaus diep. Denk maar aan een standaard tekstverwerkingsprogramma. Het kan toch niet zo zijn dat al die sofware-ontwikkelaars het bij het verkeerde eind hebben?

Dat is ook zeker niet zo. Er is namelijk een wezenlijk verschil tussen (software)applicaties en websites. Een applicatie wordt gebruikt om een taak of een serie van taken te volbrengen. Een computergebruiker is in dit geval bereid om tijd en moeite te investeren om de applicatie te leren gebruiken. Bij een website werkt dit anders. Een bezoeker besluit bij binnenkomst op een website binnen een fractie van een seconde of deze website voor hem relevant is. Als hij niet snel genoeg iets ziet wat hij nodig heeft, verlaat hij direct de website.

Je kunt in Google Analytics zien hoeveel mensen de website verlaten zonder naar een andere pagina te navigeren. Dit is het bouncepercentage van de homepage. Hoe hoger dit bouncepercentage is, hoe meer mensen direct de site verlaten. Als je juist wil dat je bezoekers de onderliggende pagina’s op de website bezoeken, is een hoog bouncepercentage op deze pagina dus geen goed teken. De menustructuur kan hier van grote invloed op zijn.

Kortom: een website is geen applicatie. Daarom moeten we ze ook verschillend behandelen. Er zijn natuurlijk uitzonderingen op deze regels, denk aan een webapplicatie. Dit zijn applicaties die via de webbrowser worden geopend en zich dus eerder gedragen als een applicatie dan als een website. Het is echter ook hierbij geheel afhankelijk van de context wat de beste vorm van navigatie is.

Megamenu’s

Een relatief nieuw fenomeen is het “megamenu”. Een megamenu is ook een drop-down-menu, maar met flexibele content. Zo kunnen er bijvoorbeeld wel afbeeldingen en iconen in een megamenu geplaatst worden en kan de informatie beter gestructureerd worden (afb. 4). megamenu’s zijn wat dat betreft een beter alternatief voor een standaard drop-down-menu. Echter blijven hier een aantal problemen bestaan, zoals de moeilijk te bereiken hoofdpagina, daarnaast is een megamenu moeilijk schaalbaar. Maar belangrijker: waarom is een megamenu een goede oplossing voor de site in kwestie? Helpt het de bezoeker de goede informatie te vinden?

Een megamenu
Afbeelding 4: Bij een megamenu kun je de menu-items makkelijk ordenen voor de bezoeker.

Wat dan wel?

Een drop-down-menu dient vaak als verzamelbak voor links naar alle pagina’s op een website. Deze links zijn er altijd en op iedere pagina, maar zijn niet altijd relevant voor de bezoeker. Het is beter om meer opties aan te bieden op het moment dat het relevant is voor de bezoeker. Toon bijvoorbeeld pas de productcategorieën op het moment dat de bezoeker al op “Producten” heeft geklikt (afb. 5). Op deze overzichtspagina kunnen de categorienamen verduidelijkt worden met afbeeldingen, iconen en eventueel beschrijvende tekst. Zo geef je de bezoeker het vertrouwen dat hij zal vinden wat hij zoekt en dat hij met elke klik dichter bij zijn doel komt.

Productpagina op TSSR.nl
Afbeelding 5: Voor TSSR maakten we een overzichtelijke productenpagina.

Op de meeste websites die we bij Insyde bouwen, laten we op de verdiepende pagina’s subnavigatie zien op de pagina. Dit menu wordt dan indien nodig getoond aan de zijkant van de pagina (afb. 6). Dit is een goede manier om subnavigatie aan te bieden aan je bezoeker. Je laat niet meer zien dan nodig is.

Categoriepagina op TSSR.nl
Afbeelding 6: Op een categoriepagina bij TSSR staat een submenu met productcategorieën rechts op de pagina. Alleen de relevante items worden getoond.

Het is echter wel belangrijk dat de website strategisch zo goed mogelijk gestructureerd is. Zorg daarbij ook voor logische benaming van de menu-items. Als de website qua structuur logisch in elkaar zit, is het voor de bezoeker veel eenvoudiger om informatie te vinden dan wanneer hij overladen wordt met alle opties in een drop-down-menu. Een goede structuur op een website maakt het drop-down-menu geheel overbodig.

Bronnen

Geschreven door Anouk van der Wulp

Webdesigner & Front-end Developer

Blijf up-to-date en ontvang updates in je mailbox

Lees ook deze interessante blogs

Easy LMS - Van de eerste stapjes naar een volwassen product

Easy LMS is ons online Saas Learning Management System. In een kleine 4 jaar is ons product uitgegroeid tot een volwaardig Learning Management Systeem met meer dan 1500 betalende klanten wereldwijd. In deze serie artikelen neem ik jullie mee in onze ontdekkingsreis van het ontwikkelen van een Saas-product voor de internationale markt. Lees hier deel I.

Easy LMS – de eerste stappen

Insyde maakt niet alleen mooie producten voor klanten, maar ook voor zichzelf. Zo hebben wij het product Easy LMS gelanceerd. In 2013 begon het als online quiz tool om mooie gamified quizzen te maken. In een kleine 4 jaar tijd is de tool uitgegroeid tot een volwaardig Learning Management Systeem met meer dan 1500 betalende klanten wereldwijd. Voor ons een enorm succes, en een groot leertraject. In deze reeks artikelen nemen je dan ook graag mee in onze ontdekkingsreis van het ontwikkelen van...

De kracht van Kaizen en waarom de invoering ervan soms moeilijk is

Wij vinden kwaliteit belangrijk. Het is leuker om een kwaliteitsproduct te maken dan een wegwerpartikel of een product dat steeds stukgaat. Wij geloven erin dat je kwaliteit brengt door continu kleine stappen voorwaarts te maken, door Kaizen te werken. In een eerder artikel heb ik uitgelegd wat de Kaizen-aanpak inhoudt. In dit blogartikel wil ik vooral inzoomen op de kracht van Kaizen en waarom het soms zo verdomde moeilijk toe te passen is.