Webinar - Je website toegankelijk maken
Jurrien heeft onlangs een webinar gegeven over het toegankelijk maken van je website. Bekijk de webinar hier terug.
Drop down menu: doe het niet!
De zogenaamde ‘Drop down menu’ wordt door veel gebruikers als irritant ervaren omdat ze niet werken op apparaten zonder muis. Daarnaast zijn ze verwarrend en moeilijk te gebruiken. Gelukkig zijn er alternatieven zoals het traditionele submenu, overzichtelijke pagina’s en filters.
Waarom je geen drop down menu moet gebruiken
Niet (goed) te gebruiken op apparaten zonder muis
De drop down menu’s werden populair toen nog vrijwel niemand een smartphone had en de tablet zoals we die nu kennen niet eens bestond. Iedereen bezocht websites via een desktop computer waar je met behulp van een muis navigeert. Met de muis kun je met je aanwijzer boven een element blijven zweven, het zogenaamde ‘hoveren’. Het is daarom mogelijk om een bepaalde actie te verbinden aan het hoveren. Op die manier kun je een menu laten uitklappen wanneer een gebruiker over een bepaalde link zweeft. Maar met de opkomst van apparaten (mobiele telefoons en tablets) die niet meer met een muis bestuurd worden is dit problematisch. Met je hand kun je namelijk wel klikken maar niet ergens overheen zweven wat een drop down menu onbruikbaar maakt. Hier zijn wel oplossingen voor maar die werken over het algemeen matig tot niet. Als je dus wil dat je website ook goed werkt op apparaten zonder muis is het verstandig geen drop down menu te gebruiken.
Verwarrend
Een drop down menu maakt het ook gemakkelijk om heel veel menu items toe te voegen. Dit kan verwarrend werken voor de gebruiker omdat hij of zij heel veel keuzes heeft. Wanneer je maar beperkt bent tot zeven menu items wordt je geforceerd meer na te denken over welke menu items je de gebruiker wil aanbieden. Stef Miller van UserTesting heeft duizenden uren aan video’s gekeken van gebruiksvriendelijkheid testen. Een veel voorkomend probleem was de zogenaamde ‘information overload’ van de vele menu opties die een drop down menu biedt.
Hover tunnels
Soms zijn drop down menu’s net een spelletje. Je moet precies over het juiste stukje hoveren om het submenu uit te laten schuiven. En als je er ook maar iets naast zit dan klapt alles weer in en kan je opnieuw beginnen. Het spelletjes wordt met name frustrerend als je meerdere lagen in je drop down menu hebt zitten. De gebruiker zit in een zogenaamde ‘hover tunnel’ die precies gevolgd moet worden.
Alternatief voor het drop down menu
Simpel submenu
Wanneer je al je menu items echt niet kwijt kan in je hoofdmenu kun je een submenu maken. Je laat dit submenu dan alleen zien op pagina’s zien waar dit relevant is. Je hebt bijvoorbeeld een hoofdmenu item ‘Producten’. Daaronder wil je een onderverdeling maken tussen ‘tablets’ en ‘smartphones’. De gebruiker klikt dan op het hoofdmenu ‘Producten’ en wordt doorverwezen naar de ‘Producten’ pagina waar een submenu verschijnt met de keuzes ‘tablets’ en ‘smartphones’. De gebruiker wordt pas geconfronteerd met de keuze wanneer het van toepassing is.
Navigatie overzicht op de pagina zelf
Een andere manier om dit probleem op te lossen is door de gebruiker op de ‘Producten’ pagina een keuze te bieden tussen ‘tablets’ en ‘smartphones’. Het mooiste is om deze oplossing te combineren met het submenu zodat wanneer de gebruiker een keuze heeft gemaakt ook makkelijk kan schakelen tussen de andere opties.
Filters
Je kan op de ‘Producten’ pagina ook alle producten laten zien en de gebruiker de mogelijkheid geven om te filteren op de type producten ‘tablets’ of ‘smartphones’. Dit ideaal wanneer je meerdere factoren hebt waarop je content gefilterd kan worden. Denk bijvoorbeeld aan evenement die gefilterd moeten worden op datum, categorie of locatie.
Drop down menu’s zijn hopeloos uit de tijd en voornamelijk frustrerend voor de gebruikers van je website. Maar gelukkig zijn er alternatieven die het gebruiken van jouw website een stuk makkelijker maken. Heb je nog vragen over drop down menu’s of over de alternatieven die ik bespreek? Laat het mij weten door hieronder een reactie achter te laten!
Gerelateerde artikelen
Wij delen graag de kennis die we in huis hebben
Reacties
Mooi overzicht van navigatie- en selectiemogelijkheden. Je hebt gelijk dat het hover-effect alleen op computers met muis werkt en nuttig is, en geen waarde heeft op het steeds meer opkomende touch-screen gebruik. En het is zinvol dat te benoemen, want ook ik merk dat er nog veel interfaces zijn die vooral op een desktop aantrekkelijk zijn en veel minder op een tablet of smartphone, en ik ben het eens dat je het aantal menu-opties sowieso klein moet houden.
Toch blijft een hover-menu op een desktop nuttig en efficiënt en zijn hover-effecten daar simpel en decoratief in het design. Een simpele oplossing verbindt de twee werelden, door het mogelijk te maken het hover-menu ook te openen met een klik. Dat is simpelweg een kwestie van de link op het hoogste niveau te laten gaan naar "#" in plaats van een url. En of je het dan weergeeft als een traditoneel uitklap-menu, of als een tweede menu-balk is dan slechts een design-keuze.
Laten we het kind niet met het badwater weggooien. Het is goed mogelijk om een site zowel op een laptop als een tablet als op een smartphone soepel te laten werken, ook met een uitklapbaar menu. we kunnen elk apparaat hun eigen werkwijze en weergave laten hebben, merendeels getriggerd door de schermgrootte van het toegangsapparaat. Gewoon een kwestie van overschakelen, en als je wilt dat een gebruiker dat zelf kan kiezen, dan is het toevoegen van een knop of andere besturingselement goed te doen. En het wiel hoeft hierin niet worden uitgevonden, er zijn genoeg voorbeelden om op verder te bouwen.
En dat gezegd hebbend blijft het inderdaad zaak om een website zo te bouwen dat keuzestress wordt voorkomen, en duidelijk is welke stappen verwacht worden. Dus als het met een rij opties afkan, heeft dat inderdaad beter. Nadenken over de gebruikerservaring is altijd zinvol.
Ik zie dat jullie ook zonder Sidebar werken, iets waar veel nieuwe thema's op het genesis Framework ook mee bezig zijn, en qua opties is het daarmee erg rustig op de website. Ik ben wel benieuwd naar het effect van dat soort keuzes op bijvoorbeeld het aantal inschrijvingen.
Bezoekers willen liefst zonder reclame en afleidingen, en gebruiken misschien daarom zelfs readers of apps (al zijn ze ook daar niet veilig), terwijl bedrijven een doel met hun website willen behalen en de gebruiker willen leiden en verleiden naar zaken die hij anders niet zou vinden of met meer moeite. Ik ben benieuwd naar voorbeelden en resultaten, waarin hetzelfde bereikt wordt op nieuwe manieren, ook voor websites met meer functionaliteit.
Reactie van Hans Schuijff op 21 april 2015
Hoi Hans, bedankt voor je uitgebreide antwoord. Het gaat mij ook niet zozeer om de techniek, want zoals je terecht aangeeft is daar best een oplossing voor te vinden. Het gaat mij juist omdat je goed nadenkt over je menu structuur en hoe je de bezoeker een goede ervaring geeft in het gebruik van jouw website. Een drop down menu is een makkelijke manier om tientallen items in je menu te proppen. Maar is de bezoeker daar ook mee gebaat?
Neem bijvoorbeeld ons menu. Deze bestaat uit slechts vijf items. Eerst hadden we ook een 'Diensten' menu item en een 'Drupal' menu item, maar we hebben het juist afgeslankt naar de menu items die echt belangrijk zijn.
Reactie van Robert Roose op 23 april 2015
Het argument dat een dropdown menu enkel op een desktop, vanwege de muis, goed te gebruiken is, is verre van steekhoudend.
Immers ingeval van een tablet of smartphone heb je geen muis nodig daar de meeste mensen zijn uitgerust met "vingers".
En daar kun prima een dropdown menu mee besturen.
Reactie van Marinus op 17 november 2016
Het verschil met een muis en een vinger is de mogelijkheid om te 'hoveren' (dus te zweven boven een menu item) wat ervoor zorgt dat het menu uit klapt. Met een vinger kun je alleen klikken en niet hoveren. Toegegeven zijn er steeds betere technieken waardoor een drop down menu ook kan werken op mobiele apparaten. Bijvoorbeeld dat het menu pas uit klapt als je er met je vinger op drukt. Maar in dat geval vind ik de alternatieven die ik in het artikel schets een betere oplossing.
Reactie van Robert Roose op 18 november 2016
Dag Robert, Hartelijk dank voor deze tip. Ondanks het feit dat ik op mijn iPhone en iPad het probleem had wat jij schetst, drong het niet tot mij door dat dan vanzelf ook alle bezoekers van mijn website daar natuurlijk ook last van hebben. Ik wil mijn website daar graag vriendelijker voor maken, maar ik begrijp niet goed de alternatieven die beschrijft. Hoe doe je dat? Ik heb mijn website opgemaakt in wordpress. Ik verkoop niets, maar plaats (lezenswaardige) artikel op pagina's. Om niet een ellenlange pagina te krijgen heb ik steeds een nieuwe pagina gemaakt waarop je verder kunt lezen. Wel natuurlijk met een logische knip. Maar die pagina's staan dus in een bepaalde volgorde van lezen. Als je mij zou willen helpen, wil je dan even naar mijn website kijken? www.debijbellezer.nl dan begrijp je direct wat ik bedoel. Hoe kan ik dat drop-down menu zo aanpassen dat ze ook op een mobiel of tablet makkelijk zijn aan te tikken. Het is wel zo als lezers echt geïnteresseerd zijn ik op elke pagina een link naar de volgende pagina heb, dus dan doet het probleem zich niet voor. maar voor bezoekers die vanuit het menu direct naar een sub-menu willen wordt dat dus lastig.
Reactie van Piet van der Vloed op 23 januari 2017
Hi Pieter, het alternatief is een simpel submenu zoals Robert aangeeft. Als de werking hiervan niet helemaal duidelijk is dan kun je kijken op http://www.congresscompany.com/nl/diensten/een-congres-organiseren. De submenu items verschijnen dus niet tijdelijk via een dropdown menu maar blijven pertinent in beeld wanneer de gebruikers op een hoofdmenu item heeft geklikt. Met de meeste cms-en kun je meerdere menu's aanmaken en door een submenu aan te maken en deze toe te kennen aan de juiste pagina's bouw je een submenu structuur op. Hoe je dit technisch opzet binnen een wordpress website is een vraag die we niet kunnen oplossen in een artikel of reactie. Dit hangt van verschillende factoren, zoals de gebruikte theme, af die per website anders kunnen zijn. Wanneer je dit zelf niet technisch kan oplossen, dan raden we aan om op zoek te gaan naar een tutorial / cursus of hier een Wordpress specialist voor in te huren.
Reactie van Thomas van Eldijk op 27 januari 2017
Dag Thomas,
Nuttig artikel! Ik ben op zoek naar iets wat ik op mijn manier kan uitleggen. Excuus
Ik wil graag mijn wordpress blog zo maken dat als ik voor leken een begrip wil uitleggen ik een driehoekje achter dat woord kan plaatsen, wat mensen kunnen aanvinken voor een nadere uitleg. Ik herinner me websites waarmee dit kon, ik weet alleen niet hoe je dat benut. De driehoekjes zijn vooral handig als je snel to the point wil komen.
Begrijp je wat ik bedoel?
Jan Korff de Gidts
Reactie van Jan Korff de Gidts op 28 oktober 2017
Hi Jan,
Ik begrijp wat je bedoelt. Meestal wordt deze functionaliteit Glossify genoemd en voor vrijwel alle bekende open source cms-en zoals Wordpress, Drupal en Joomla heb je plugins en modules die dit voor je regelen.
Echter... adviseer ik je om deze niet te gebruiken. Vaak zie je dat deze modules/plugins werken met tooltips die de uitleg laten zien zodra je hier met je muis over zweeft. Sinds de sterke opkomst van de mobiele gebruikers (smartphones/tablets) moet je er rekening mee houden dat een groot deel. Bij sommige websites vaak de helft van de bezoekers... Geen muis heeft. Daarnaast werkt de tooltip niet altijd even goed of heb je te weinig ruimte in de tooltip om de uitleg te geven. Nog een nadeel is dat deze plugins en modules een eigen database gedeelte gebruiken waarin je de woorden en de uitleg moet plaatsen. Stel dat je CMS dan een grote update krijgt en de Glossify plugin/module achter blijft, raak je al je uitleg kwijt wanneer je over zou of moet stappen.
Om je probleem op te lossen zou ik de uitleg direct in de tekst plaatsen als deze niet te groot is. En als de uitleg vrij veel tekst beslaat dan zou ik hier een aparte pagina voor maken en het woord linken naar deze pagina. Zo hou je de uitleg binnen de content van je CMS. Een bijkomend voordeel is Google de uitleg op die manier ook goed kan vinden en wellicht voor meer bezoekers zorgt. Hou er dus ook rekening mee dat bezoekers direct binnenkomen op je uitleg en weer hun weg moeten vinden naar je andere content. Succes en groeten, Thomas van Eldijk.
Reactie van Thomas van Eldijk op 6 november 2017
Helder verhaal, Thomas ! Ik volg je advies op: "aparte pagina maken en het woord linken naar deze pagina" En vice versa. Wel zo slim. Hartelijk Dank. Jan
Reactie van Jan Korff de Gidts op 10 november 2017
Hi Jan
Daarvoor heb je het mobile first principe. Op een desktop zie je een mooi uitklap menu met hover effecten en op een mobiel apparaat zie je een uitklap menu zonder hover effect. Dat is eenvoudig op te lossen door middel van media queries.
Reactie van Harald op 12 december 2017
hallo, ik bouw momenteel een website en wilde een dropdown menu gebruiken. ik lees dat je het niet aanbeveelt ivm mobile. Maar dit dropdown menu werkt toch prima op pc of mobile?
Reactie van douwe monsma op 8 november 2020
Hi Douwe, het is niet zozeer dat wij dat niet aanbevelen. Er zijn erg veel studies die aantonen dat het geen gebruiksvriendelijke manier is om een bezoeker een keuze te laten maken in de pagina's van je website.
De Norman Nielson Group. (Een van de meest toonaangevende usability onderzoeksbureau's) zegt het volgende over drop down menus: "Dropdown boxes and menus are overused and clunky but can be useful for revealing a list of options or commands." https://www.nngroup.com/articles/drop-down-menus/
Opvallend is het woord "revealing". Dat is eigenlijk wat je niet wilt op een website. Je wilt juist duidelijkheid en een goed overzicht creëren.
Een simpel dropdown menu met weinig opties zal voor mensen zonder beperkingen in veel situaties prima werken. Maar meestal breidt een dropdown menu zich toch naar verloop van tijd uit. En aangezien er prima alternatieven zijn die wel gebruiksvriendelijk werken, zoals een vast submenu, raden we altijd aan om geen submenu te gebruiken. Gr, Thomas van Eldijk.
Reactie van Thomas van Eldijk op 10 november 2020