Webinar - Je website toegankelijk maken
Jurrien heeft onlangs een webinar gegeven over het toegankelijk maken van je website. Bekijk de webinar hier terug.
Het perfecte menu maak je met deze 6 tips
Een goed menu is altijd zichtbaar, klapt niet uit, bestaat uit maximaal 9 items en schept duidelijkheid voor je bezoeker.
1. Altijd zichtbaar
Je menu moet altijd zichtbaar zijn. Dit betekent dat het het beste is om deze bovenaan de pagina vast te plakken zodra een bezoeker naar beneden scrolt. Op die manier kan de bezoeker altijd direct gebruik maken van het menu om naar een ander onderdeel van je website te gaan. Hyrum Denney heeft verschillende onderzoeken gedaan naar de gebruikersvriendelijkheid van deze zogenaamde sticky menu’s (oftewel vastgeplakte menu’s). Zijn resultaten heeft hij gepubliceerd op Smashing Magazine. Hieruit blijkt dat bezoekers 22% sneller kunnen navigeren als ze gebruik maken van een vastgeplakt menu. Denney geeft aan dat 22% veel impact kan hebben op een bezoek van vijf minuten:
“22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website.”
2. Gebruik geen hamburger menu!
Een hamburger menu is een menu verstopt achter een knop. Je herkent een hamburger menu aan een icoontje met drie horizontale streepjes onder elkaar: de zogenaamde hamburger. Het idee om je menu achter een knop te verstoppen is ontstaan met de opkomst van mobiele telefoons en responsive webdesign. Op een mobiele telefoon is er niet altijd ruimte om een volledig menu te laten zien dus werd er een techniek bedacht waarmee het menu pas zichtbaar wordt wanneer je op het hamburger icoon klikt. Tegenwoordig zie je zelfs websites die, ongeacht of er genoeg ruimte is voor een normaal menu, altijd een hamburger menu hebben. Volgens een onderzoek uitgevoerd door Nielsen Norman Group is een hamburger menu een aanslag op de gebruiksvriendelijkheid van je website. De conclusie van het onderzoek is als volgt:
“Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”
Je maakt het voor je bezoeker dus lastiger om iets te vinden of om een taak uit te voeren.
Als je er toch voor kiest om een hamburger menu te gebruiken let er dan in ieder geval wel op dat je niet alleen het hamburger icoontje gebruikt als knop. Zorg ervoor dat er minstens het woord ‘Menu’ naast staat. Nog niet iedereen begrijpt het icoontje wat uit blijkt uit dit onderzoek die de twee opties vergelijkt.
3. Gebruik ook op apparaten met een kleiner scherm geen hamburger menu!
Hoewel het hamburger menu meestal alleen op apparaten met kleine(re) schermen gebruikt wordt is het eigenlijk het beste om ook daar het volledige menu te laten zien. Het nadeel is dat je weinig ruimte hebt maar als je zes of minder menu items hebt moet het te doen zijn. Zorg er dan meteen voor dat het menu voor bezoekers die een mobiele telefoon gebruiken makkelijk aan te klikken is. Meestal wordt het menu bovenaan getoond maar op een mobiele telefoon is het eigenlijk logischer om het menu onderaan de pagina vast te plakken. Zo zorg je er namelijk voor dat jouw website met één hand te bedienen is omdat het menu zich dan in de zogenaamde ‘thumb zone’ bevindt. Dit is het gebied op het scherm dat gemakkelijk met de duim te bereiken is.
Nick Babich geeft op Smashing Magazine ook nog een paar handige tips met betrekking tot 'Bottom navigation design':
- Laat alleen de belangrijkste navigatie opties zien.
- Geef duidelijk aan wat de huidige locatie is.
- Zorg ervoor dat de menu items vanzelfsprekend zijn.
4 . Gebruik geen drop down menu
In dit artikel leg ik uitgebreid uit waarom je geen drop down menu moet gebruiken en wat de alternatieven zijn.
Meer tips ontvangen over webdesign? Schrijf je in voor de nieuwsbrief!
5. Maak het menu niet ondergeschikt aan je zoekmodule
Is een menu nog wel nodig als je kan zoeken? Bezoekers kunnen immers toch gewoon iets intypen in de zoekbalk van jouw website en het dan direct vinden? Een ander onderzoek van de Nielsen Norman Group wijst uit dat een goed menu nog steeds belangrijk is omdat:
- Om te zoeken moet je weten waar je op kan zoeken. Je verwacht van de bezoeker dat hij of zij al precies weet wat hij/zij wil vinden.
- Zoeken kost gebruikers meer moeite. Moeite omdat ze een zoekopdracht moeten verzinnen en moeite omdat ze moeten typen wat in sommige gevallen lastig(er) kan zijn (bijvoorbeeld op een mobiele telefoon).
- De meeste zoekmachines op websites leveren slechte resultaten op. Google en Amazon pompen bakken met geld in hun zoekalgoritme om deze optimaal te maken. Dit kun je niet verwachten van standaard zoekmodules die gebruikt worden binnen bekende CMS-en zoals Drupal, Joomla of Wordpress.
- Bezoekers kunnen niet zoeken. Jakob Nielsen noemt de zoekvaardigheden van bezoekers zelfs 'incompetent'. Usability onderzoek na usability onderzoek leert dat het voor gebruikers blijkbaar heel lastig is om een goede zoekopdracht te formuleren.
6. Maak duidelijke menu items
Dit klinkt logisch maar is soms lastiger dan het lijkt. Neem bijvoorbeeld het menu item ‘video’s’. Als dit demonstratievideo’s zijn van jouw producten dan is het beter om het menu item ‘demonstraties’ te noemen. Of als je boeken en magazines verkoopt is het beter om dit als twee aparte menu items op te nemen in je menu dan dat je de content van beide onder een menu item ‘producten’ zet. De bezoeker moet in één oogopslag kunnen zien wat de website te bieden heeft wat blijkt uit weer een ander onderzoek van de Nielsen Norman Group:
“...the main navigation of a website should allow a first-time visitor to infer what the company does, what it's offerings are, and what type of content is available.”
Heb jij nog tips?
Heb je zelf nog tips om een menu nog beter te maken? Of heb je vragen over bovenstaande adviezen? Laat het mij dan weten door hieronder een reactie achter te laten en ik zal zo snel mogelijk antwoord geven!
Gerelateerde artikelen
Wij delen graag de kennis die we in huis hebben
Reacties
Wil je dat ik eens kritisch naar je menu kijk? Laat hieronder dan een reactie achter.
Reactie van Robert Roose op 3 oktober 2016
Hi, ik heb wel een hamburger menu en ben op zoek naar een alternatief omdat mijn HB-menu steeds uitvalt. Heb je een tip voor me?
Reactie van Fred van Eck op 26 april 2017
Hi, ik ben op zoek naar een manier om een website te maken waarbij mijn menu van de website op mijn telefoon wordt weergegeven als horizontaal menu en niet met een drop down menu.
Wat kan ik hiervoor doen?
Reactie van Anne op 15 februari 2021
Hi Anne, in dit artikel adviseert Robert om dat niet te doen. Zie ook de onderzoeksresultaten die hij deelt. Bekijk daarnaast ook eens onze website op een smartphone. Dan zie je dat we het menu onderin plaatsen. Door die locatie kun je makkelijker met je duim bij de menu items.
Mocht je toch een hamburger icon willen voor je website, dan is kun je het beste kijken naar modules/plugins voor je CMS die dit voor je regelen. Voor Drupal heb je bijvoorbeeld: https://www.drupal.org/project/responsive_menus en voor Wordpress: https://nl.wordpress.org/plugins/wp-responsive-menu/
Succes!
Reactie van Thomas van Eldijk op 16 februari 2021