Hoe gebruiksvriendelijk is een hamburgermenu?

Published: 03/02/2021
Latest update: 06/01/2023

Sinds 2014 zetten webdesigners enthousiast de hippe hamburgerknop in voor hun responsive designs, omdat dat toen hot was. Niemand was echt bezig met de vraag of deze knop een maximale user experience gaf. Vanwege de nieuwe trend ‘mobile first design’ kwam het hamburgermenu ook in het desktopdesign te staan.

Maar waar ligt de grens nu tussen gebruiksvriendelijkheid en een mooi maar onpraktisch out-of-the-box design, zeker omdat eerder ‘less is more’ heilig was en het design niet strak genoeg kon. Al vier jaar werk ik bij Goeiezaak.com als visual designer en is het hamburgermenu niet meer weg te denken uit de designs. Daarom ga ik als visual designer in dit artikel op zoek naar het antwoord op de vraag hoe gebruiksvriendelijk een hamburgermenu echt is.

Is een hamburgermenu de juiste keuze?

Het hoofdmenu en de daarbij horende navigatie is een van de meest ontworpen onderdelen van een website. Tenzij je je website beschouwt als een online escaperoom, is een website zonder navigatie toch een tikkeltje te uitdagend voor potentiële klanten. De introductie van het veelbelovende en welbekende hamburgermenu gaf extra mogelijkheden op het gebied van navigatie. Die drie streepjes zijn tegenwoordig niet meer weg te denken uit het straatbeeld van het world wide web. Ook al lijkt het een kleine toevoeging, het kiezen van een icoontje in plaats van een uitgeschreven navigatiemenu kan grote gevolgen hebben.

Mobiel

Op mobiel geldt de regel van vier. Bij meer dan vier linkjes is het gebruik van een hamburgermenu zeker noodzakelijk. Simpelweg omdat er niet genoeg ruimte is op mobiele schermen. Bij minder dan 4 links kun je een oplossing als een tabnavigatie gebruiken. Deze zie je veel terug bij mobiele applicaties.

Desktop

Of een hamburgermenu op desktop de juiste keuze is, ligt aan het doel van je website. Wil je de focus meer leggen op andere elementen in de header die belangrijker zijn zoals buttons dan is het gebruik van een hamburgermenu voor de minder belangrijke pagina’s een goede keuze. Ook creëer je hierdoor meer ruimte in de header en meer focus op de contentbeleving. Daarnaast is het hamburgermenu inmiddels een begrip en vertrouwen gebruikers op deze functie. Daartegenover staat dat bij het gebruik van alleen een hamburgermenu als navigatie het klikpercentage aanzienlijk lager is dan bij andere linkjes. Het vereist 1 klik extra. Het is geen consistent design waardoor bezoekers niet getraind zijn om te weten waar ze wat kunnen vinden. Ook valt het hamburgermenu vaak weg in het design. Een klein pictogram is moeilijker op te merken op een groot scherm. Het verbergt ook de meest belangrijke informatie.

Conclusie

Het is dus functie over design of design over functie. Wat is het belangrijkste doel van je website? Vanuit daar is het belangrijk om de keuze te maken om een hamburgermenu te gebruiken in plaats van een uitgeschreven menu. In de rest van het artikel zal ik bovenstaande punten nog eens extra benoemen met meer uitleg.

Het klassieke menu vs hamburgermenu

Met de komst van responsive design werd al snel door veel designers het hamburgermenu-icoontje geïntegreerd om gebruikers te wijzen op een verborgen menu. Het klassieke menu (een opsomming van pagina’s/categorieën op een website onder of naast elkaar) nam op de kleine schermen van smartphones te veel ruimte in beslag. Eerdere menu’s met responsive designs namen minimaal de helft van het touchscreen in beslag en dat was uiteraard niet gebruiksvriendelijk.

Nu is al een tijd een trend gaande om op grotere schermen zoals desktop ook het hamburgermenu te tonen in plaats van alleen op de mobiele variant. Ook daar is het een handige feature, omdat het verborgen menu ruimte geeft voor het plaatsen van belangrijke onderdelen naast het icoontje van het hamburgermenu. Denk aan de belangrijkste pagina’s, zoekmodules, korte informatie en call-to-action buttons. Maar trend of niet, is het wel zo slim om de navigatie tussen je belangrijke pagina’s in het verborgen menu te verstoppen? Ik geef je hieronder de voors en tegens op een rijtje.

Voors

Meer ruimte voor het plaatsen van andere elementen in de header.
Meer beeldschermruimte voor het verborgen menu zodat je daar meer in kwijt kunt (overlay bij klikken op het hamburgermenu).
De gebruiker roept zelf het menu op en je ziet daarom wanneer hij die gebruikt.
Met een verborgen menu neem je de focus niet weg van andere call-to-actions op de pagina of in de header.
Herkenbaarheid. Mensen kennen het icoontje en kunnen vertrouwen op zijn functie.
Meer focus op contentbeleving. Om de simpele reden dat er meer ruimte voor beschikbaar is.

Tegens

Aanzienlijk lager klikpercentage (en betrokkenheid) dan bij andere knoppen.
Er is geen consistent design (het is niet gestandaardiseerd, dus zijn bezoekers niet getraind om te weten waar ze te vinden zijn en hoe ze werken).
Het vereist twee klikken in plaats van één.
Het letterlijk benoemen van de functie (menu-item naam) is stukken duidelijker dan het tonen van alleen een icoon.
Ze zijn vaak moeilijk in één oogopslag te zien. Een klein pictogram is moeilijker op te merken op een groot scherm.
Het verbergt de meest belangrijke informatie.

Hamburgermenu ook op desktop gebruiken?

Is het hamburgericoon wel een goed element voor een doordachte user interface? Het icoon zelf biedt de bezoeker geen enkele duidelijkheid over de indeling van een website, de mogelijkheden of werkwijze. Ze moeten eerst op het icoon klikken voordat zichtbaar wordt welke informatie en functionaliteiten beschikbaar zijn.

Het is natuurlijk logisch dat je op een mobiele website zuinig bent op de beperkt beschikbare schermruimte. Maar eigenlijk offeren we met de streepjesknop een van de belangrijkste elementen op: het menu. Wat we tegenwoordig ook steeds vaker zien als alternatief (met name op desktopdesign), is dat de belangrijkste menu-items zichtbaar zijn en aanvullend een hamburgermenu wordt toegevoegd.

Elke goede ontwerper weet dat het een groot taboe is om gebruikers extra stappen te laten nemen om hun einddoel te bereiken. Je hebt natuurlijk liever dat het meteen aan je wordt gepresenteerd.

Uit onderzoek van de Nielsen Norman Group bleek dat bij gebruik van een hamburgermenu de vindbaarheid bijna gehalveerd wordt, doordat de hoofdnavigatie van de website verborgen is. Ook is de taaktijd langer en neemt de waargenomen taakmoeilijkheid toe.

Op desktop gebruikten mensen de verborgen menu’s in slechts 27 procent van de gevallen, terwijl ze zichtbare navigatie of combonavigatie (hamburgermenu én zichtbare navigatie) bijna twee keer zoveel gebruikten: in respectievelijk 48 en 50 procent van de gevallen.

Op mobiel gebruikten mensen de verborgen navigatie in 57 procent van de gevallen en de combonavigatie in 86 procent van de gevallen – 1,5 keer zoveel.

Uit dit onderzoek bleek ook dat gebruikers een slechtere ervaring hebben wanneer de navigatieknoppen verborgen zijn, zowel in mobiele als in desktopinterfaces. Zelfs grote spelers als YouTube, LinkedIn en Facebook erkenden de impact die het hamburgermenu had op hun engagementcijfers en zijn ervan afgeweken. Elke goede ontwerper weet dat het een groot taboe is om gebruikers extra stappen te laten nemen om hun einddoel te bereiken. Je hebt natuurlijk liever dat het meteen aan je wordt gepresenteerd.

navigatieknoppen zichtbaarheid percentages voor desktop en mobile

Home button in het menu opnemen?

Om ruimte te besparen in het hoofdmenu wordt vaak de ‘home’ knop weggelaten. Maar wat is wijsheid: wel of geen home knop in de navigatie gebruiken? Voor velen is het vanzelfsprekend om het niet te doen, maar is het echt not-done om het wel te doen? Sommige gebruikers vinden het namelijk niet altijd duidelijk dat je via het logo terug kan klikken naar de homepage. Als je een home knop overweegt in de navigatie, kun je nadenken over de volgende vragen:

Neemt de homepage een centrale plaats in het geheel van de website in of fungeert die slechts als landingspagina?
Bevat de site een duidelijk kruimelpad met als eerste item ‘home’?
Schat je de doelgroep van je site in als digitaal vaardig of juist niet?
Is er voldoende ruimte binnen het grafisch ontwerp voor een home button?
Wat is je persoonlijke voorkeur?

De meeste gebruikers (voornamelijk jonge gebruikers) herkennen het logo als een weg om terug te keren naar de homepage. Maar het kan zijn dat het grootste gedeelte van je doelgroep zich daar niet in herkent. Het is en blijft een persoonlijke voorkeur, maar is er genoeg ruimte binnen het ontwerp en ben je niet teveel bezwaren tegengekomen, dan is het zeker aan te raden.

Wel of niet het woordje ‘menu’ naast of onder je hamburgermenu pictogram?

James Foster van Exisweb voerde een paar zeer interessante A/B-testen uit om te zien of het simpelweg aanpassen van het hamburgerpictogram de bruikbaarheid aanzienlijk zou vergroten en verwarring zou verminderen. Hij ontdekte dat pictogrammen met het woord ‘menu’ het aantal klikken aanzienlijk verhoogden in vergelijking met alleen het pictogram, met wel 20%. Als je geen grote verandering in je app wilt toepassen, maar de bruikbaarheid wel wilt vergroten, is dit een goed alternatief. De Nielsen Norman-group raadt ook aan om het hamburgermenu te labelen voor meer conversies.

Voordelen hiervan zijn:

Snel en gemakkelijk toe te passen zonder de user flow of het menu aan te passen
Hoewel gebruikers het hamburgersymbool misschien niet begrijpen, zullen ze het woordmenu zeker begrijpen
Verbeterd pictogramherkenning

Hamburgermenu alternatief: Geen vaste regels voor mobiele varianten

Er is geen vaste regel voor gebruik op telefoons. Maar er zijn wel een paar algemene aanbevelingen zijn. Als jouw site vier of minder navigatielinks op het hoogste niveau heeft, geef die dan weer als zichtbare links. Dat voorkomt de toevoeging van een knop waar je eerst op moet klikken voordat het menu wordt getoond. Maar let erop dat het geen afweging moet zijn welke menu-items het van elkaar winnen. Ga niet geforceerd menuknoppen achterwege laten die belangrijk zijn voor je bezoekers.

Heeft je site meer dan vier navigatielinks op het hoogste niveau, dan is de enige redelijke oplossing een aantal daarvan te verbergen. Een optie is om in het tabmenu de bezoeker te laten swipen om meer menuknoppen weer te geven. Maar er wordt dan wel vanuit gegaan dat dit een vanzelfsprekende handeling is voor bezoekers en dat is het in veel gevallen nog niet.

Tab menu Hamburger menu met meer dan vier navigatielinks

Een andere optie is om alle menu-items onder het hamburgermenu te zetten, zodat het voor de gebruikers duidelijk is dat ze die hier kunnen vinden. Daarin adviseren we om in-page links naar belangrijke informatie op jouw site te gebruiken, of gebruik andere methoden om het hamburgermenu (of een ander verborgen menu) te ondersteunen.

Nog een optie is om in plaats van het hamburgericoon het woord ‘menu’ op te nemen. Je omschrijft daarmee letterlijk de functie van de knop. Om het nog duidelijker te maken kan er een lijntje om de tekst heen, zodat het meer op een knop lijkt. Die benadering kan weer nadelig zijn als de header al tekst bevat. Dat leidt namelijk af, waardoor de menuknop minder opvalt. Ook heeft het woord ‘menu’ weer een andere betekenis op de website van een restaurant.

hamburgericoon vervangen voor het woord ‘menu’

Links of rechts?

90 procent van de mensen houdt volgens onderzoek van UXmatters hun smartphone met de rechterhand vast. Daarmee is de rechterzijde van het scherm gemakkelijker te bereiken dan de linker. Ondanks dat een kleine groep (10 procent volgens UXmatters) hun smartphone met twee handen liggend beethoudt. Daaruit kunnen we dus concluderen dat als je gebruik maakt van het hamburger menu deze aan de rechterzijde moet staan.

rechterzijde van het scherm gemakkelijker te bereiken dan de linker.

De regel van 4

Nog altijd zijn de meeste gebruikers gewend om het menu standaard boven in de website terug te vinden. Maar veel goedbezochte sites hebben de trend gevolgd om het menu te vervangen met een sexy kleine hamburger knop. Uit statistieken bleek echter al snel dat bezoekers veel minder pagina’s bezochten tijdens hun bezoek en korter op de website bleven rondhangen. Ook pogingen om de hamburgerknop opvallender te maken en daarmee beter toe te lichten zorgden er niet voor dat de betrokkenheid van bezoekers toenam.

Uiteindelijk hebben veel van deze sites andere oplossingen geïmplementeerd en meestal gewoon weer het oude menu teruggezet. Het klassieke menu is niet cool, het is niet sexy, het is niet high-tech. Maar het werkt omdat het menu zelf ook informatief is. Gebruikers kunnen de pagina scannen en zodra ze een woord zien dat ze aanspreekt, kunnen ze erop klikken (wetenschappelijk bewezen dat dit werkt).

Is er voldoende schermruimte voor het weergeven van navigatie-opties dan raad ik je aan om geen verborgen navigatie te gebruiken in desktopinterfaces. Geef in plaats daarvan de navigatie-opties op het hoogste niveau weer, meestal aan de bovenkant van de pagina of aan de linkerkant.

Als je site minder dan vier navigatielinks op het hoogste niveau heeft, geef die dan weer als zichtbare links. Zijn het er meer, dan verberg je ze onder het hamburgermenu. Eventueel kan je naast het hamburgermenu één of twee duidelijke iconen of buttons plaatsen met de belangrijkste conversies, zoals een locatiepin, search-icon of winkelmandje.

Wat heeft dit voor invloed op de vindbaarheid (SEO) van je website?

In principe maakt het voor de vindbaarheid van je website niet zoveel uit wat er in het menu wordt weergegeven op desktop. Google gebruikt namelijk sinds een tijdje de ‘mobile-first-index’. Alle websites worden vanaf maart 2021 geïndexeerd met mobile-first-indexing. Dat houdt in dat de Googlebot crawlt als een mobiel apparaat en dus de mobiele weergave gebruikt.

Je hamburgermenu op mobiel moet wel goed zijn geïmplementeerd. Dat betekent dat de links in de broncode staan. Als de links pas worden geladen als het menu wordt geopend, kan Googlebot ze waarschijnlijk niet vinden. Het gevolg daarvan is dat de pagina’s in je menu minder of geen linkwaarde krijgen en dat is niet goed voor je rankings.

Al met al hoef je dus niet van je SEO te laten afhangen of je wel of geen hamburgermenu gebruikt op desktop, zolang je het op mobiel maar goed implementeert.

Het juiste menu vinden voor jouw website

Ben je na het lezen van deze blog er toch niet helemaal over uit wat je aan moet met het menu op je website? Dat is niet zo gek; het is geen eenvoudige beslissing. Onze webdesigners hebben de juiste kennis in hun arsenaal en een creativiteit in overvloed. Zij kunnen samen met jou snel zorgen voor de beste visuele keuzes. Natuurlijk kunnen wij je ook helpen met andere onderdelen van je site. Bel ons gewoon even of reageer en dan bespreken we wat wij voor jou kunnen doen.

Neem contact op

Veelgestelde vragen over het hamburgermenu

Wat is een hamburgermenu?

De hamburgerknop, zo genoemd vanwege de onbedoelde gelijkenis met een hamburger, is een knop die meestal in een bovenhoek van een grafische gebruikersinterface wordt geplaatst. De functie is om te schakelen tussen een menu of navigatiebalk tussen samengevouwen achter de knop of weergegeven op het scherm.
Wat is mobile first design?

“Mobile first”, zoals de naam al doet vermoeden, betekent dat we bij het ontwerpen van een product beginnen vanaf het mobiele uiteinde, dat meer beperkingen heeft, en vervolgens de functies uitbreiden om een tablet- of desktopversie te maken.
Moet je een hamburgerknop links of rechts plaatsen?

90 procent van de mensen houdt volgens onderzoek van UXmatters hun smartphone met de rechterhand vast. Daarmee is de rechterzijde van het scherm gemakkelijker te bereiken dan de linker. Ondanks dat een kleine groep (10 procent volgens UXmatters) hun smartphone met twee handen liggend beethoudt. Daaruit kunnen we dus concluderen dat als je gebruik maakt van het hamburger menu deze aan de rechterzijde moet staan.
Wat is de regel van vier?

Als je site minder dan vier navigatielinks op het hoogste niveau heeft, geef die dan weer als zichtbare links. Zijn het er meer, dan verberg je ze onder het hamburgermenu. Eventueel kan je naast het hamburgermenu één of twee duidelijke iconen of buttons plaatsen met de belangrijkste conversies, zoals een locatiepin, search-icon of winkelmandje.
Wat heeft een hamburgermenu voor invloed op de vindbaarheid (SEO) van je website?

In principe maakt het voor de vindbaarheid van je website niet zoveel uit wat er in het menu wordt weergegeven op desktop. Google gebruikt namelijk sinds een tijdje de ‘mobile-first-index’. Alle websites worden vanaf maart 2021 geïndexeerd met mobile-first-indexing. Dat houdt in dat de Googlebot crawlt als een mobiel apparaat en dus de mobiele weergave gebruikt.

Je hamburgermenu op mobiel moet wel goed zijn geïmplementeerd. Dat betekent dat de links in de broncode staan. Als de links pas worden geladen als het menu wordt geopend, kan Googlebot ze waarschijnlijk niet vinden. Het gevolg daarvan is dat de pagina’s in je menu minder of geen linkwaarde krijgen en dat is niet goed voor je rankings.

Meer interessante artikelen

Online trends , UX-design , Webdesign

Hoe gebruiksvriendelijk is een hamburgermenu?