Hamburger menu

Dé ultieme handleiding voor het Hamburger Menu

De kans is groot dat je het hamburger menu in de bovenhoek van veel mobiele websites hebt gezien. Het zijn drie op elkaar gestapelde lijnen om de vorm van een hamburger uit te beelden. Het wordt massaal gebruikt in apps, op mobiele websites en zelfs desktopwebsites. Maar hoe gebruik je het hamburg menu nu het meest effectief?

 

Wat is een hamburger menu?

Een hamburger menu is een pictogram dat wordt geopend om een navigatie menu weer te geven wanneer erop geklikt wordt. De ‘lekkere’ naam komt door het ontwerp: het bestaat uit drie horizontale lijnen die lijken op, nou ja, een hamburger; bovenste broodje, stukje vlees en onderste broodje. Ik krijg er nu al bijna honger van. 😉

En net als zijn echte versie, heeft het hamburgermenu voor- en nadelen. Voor sommigen is het een essentieel onderdeel van een design. Voor anderen is het een verwarrend element op een website. Een effectieve navigatie voor op je website is zo gemakkelijk nog niet.

Voorheen was het hamburger menu niet zo populair. Pas toen UX-ontwerpers een manier moesten vinden om een veelvoud aan knoppen op kleine schermen van onze telefoons te passen, begon het menu overal weer te verschijnen. Sindsdien is het burger menu de standaard geworden voor apps en websites om navigatielinks in te plaatsen.

Hamburgermenu

Wél of geen hamburger menu?

Het menu heeft voorstanders en tegenhangers gekregen om verschillende redenen en scenario’s. Om dat duidelijk te maken, beschrijf ik de voordelen en nadelen van het hamburgermenu. 😉

 

Nadelen

Er zijn echter enkele nadelen aan het gebruik van deze kleine hamburger-menupictogrammen op alle schermen.

1) Ze hebben een aanzienlijk lager klikpercentage (en betrokkenheid) dan andere knoppen. Wat in het hamburgermenu staat lijkt minder belangrijk. Het pictogram zelf wordt ook niet altijd herkend.

2) Er is geen consistent design
Het design en de positie van het hamburgermenu niet is gestandaardiseerd, en dus zijn bezoekers niet “getraind” om te weten waar ze te vinden zijn en hoe ze werken.

Soms vind je deze menu’s linksboven, rechtsboven, in het midden, en soms zijn zelfs de icons van het hamburgermenu verschillend. Omdat er zoveel variaties worden gebruikt, zijn veel mensen niet gewend waar ze gemakkelijk te vinden zijn en hoe ze het moeten gebruiken.

3) Ze vereisen twee klikken in plaats van één
Een hamburgermenu verdubbelt ook het aantal acties dat een bezoeker nodig heeft om naar de juiste pagina te navigeren. Ze moeten een keer klikken om het menu te openen en vervolgens een tweede klik gebruiken om de gewenste optie te selecteren, waardoor hun kans om ooit daar aan te komen wordt gehalveerd.

4) Ze zijn vaak moeilijk in één oogopslag te zien
Omdat ze soms zo goed in het design passen, zijn ze lastig om te vinden. Degenen die het hamburger icon om te beginnen niet begrijpen, zullen dit misschien nooit doen. Wat weer samenhangt met puntje 2 dus.

 

Voordelen

Maar gelukkig zitten er ook een hoop voordelen aan.

1) Het is herkenbaar – Het hamburgermenu is overal aanwezig en is overal te vinden, van apps tot websites, computersoftware en videogames.

2) Ideaal voor secundaire functies – Het hamburgermenu kan een geweldige plek zijn voor navigatieknoppen die niet direct het doel je webpagina ondersteunen.

3) Het bespaart ruimte – Je kunt gemakkelijk al je navigatielinks in het menu kwijt.

 

Hoe moet het hamburger menu icon eruit zien?

Wanneer je een hamburger menu maakt, maak het dan niet visueel overweldigend. De drie lijnen blijven de basis van het design. Echter zijn die lijntjes er in veel vormen en maten te vinden. Soms wordt het menu icon zelfs geanimeerd.

Maar…

Menu icons met het woord ‘Menu’ verhogen aanzienlijk het aantal klikken in vergelijking met een normaal hamburgermenu zonder het woord. Bezoekers begrijpen niet altijd waar de drie lijntjes voor staan, maar de meesten begrijpen wel wat een ‘menu’ is.

Hamburger menu voorbeelden

Neem een kijkje in de app van Facebook. Het belangrijkste doel van de app is de tijdlijn, meldingen en de marketplace. Dingen zoals Instellingen, pagina’s of evenementen zijn secundaire functies en hebben geen topprioriteit. Die verdwijnen dan al snel onder het hamburgmenu die zich in het tab bar menu bevindt.

Bij veel kledingwebshops, zoals Zalando, Vero Moda of Wehkamp, staat het hamburgermenu zelfstandig linksbovenaan. Maar ook bij grotere algemene webshops zoals Bol.com of Coolblue staat het menu linksboven.

Hamburger menu icon voorbeelden

Voorbeeld van hoe het hamburgermenu eruit ziet op verschillende websites

 

Moet het hamburger menu op mobiele apparaten links of rechts staan?

Het is moeilijk om een definitief antwoord op deze vraag te geven, omdat het menu bij het design van de website en de doelgroep moet passen.

Het wordt echter voorgesteld om het aan de rechterkant te plaatsen om het klikken eenvoudiger te maken, aangezien de meerderheid van de mensen rechtshandig is en de rechterkant iets toegankelijker is dan de linkerkant.

Daarnaast is een hamburger menu aan de onderkant van het scherm beter dan bovenaan. De betrokkenheid van de bezoeker wordt groter, omdat de knop gemakkelijk te bereiken is met de duim. Het is gemakkelijker om de onderkant van het scherm te bereiken dan de bovenkant.

Het komt erop neer dat je de natuurlijke beweging van je duim volgt, zie afbeelding hieronder. Het is dus belangrijk om te weten hoe jouw doelgroep via mobiel op het internet surft; met een duim, met een wijsvinger, met twee duimen, enzovoort. Het is belangrijk dat je dit menu te testen bij je bezoeker met een goede A/B test tool.

Thumb zones op mobiele apparaat

Duimbereik op mobiele apparaten

 

Plaats je het in apps, mobiele websites of op desktopwebsites?

Op mobiele apparaten wordt het menu erg vaak gebruikt, omdat designers alle informatie en content op dat kleine schermpje proberen te proppen. Maar wat is het excuus voor het gebruik van een hamburgermenu op een desktopwebsite?

Het komt steeds vaker voor dat alle navigatie menu’s worden vervangen met een hamburgermenu op een desktop versie van een website.

Hoewel mobiele gebruikers bekend zijn geworden met dit menutype op desktops, verstop je de navigatie-opties van de bezoeker op de website en voeg je een klik toe. Geen van beide is noodzakelijk en kan uiteindelijk verwarring veroorzaken, en loop je dus een lead of een aankoop mis.

 

Alternatief voor het hamburgemenu?

Marktleiders zoals Facebook en Spotify gebruiken dit type menu niet meer. Ze gebruiken wel een tab bar menu in hun apps. Geen van beide partijen heeft hamburgermenu’s volledig afgeschaft; in plaats daarvan hebben ze ze opgenomen in het tabmenu voor secundaire opties.

Tab bar menu’s organiseren de inhoud in categorieën en bieden veel duidelijkheid. Men kan 4 of 5 navigatie-opties kwijt. Je kunt je opties echter uitbreiden door een extra burger menu te gebruiken.

tab bar menu voorbeeld

Voorbeeld van een tab bar menu 

 

Conclusie

Hamburger menu’s kunnen een geweldige manier zijn om je website op te schonen en je bezoekers door je conversietrechter te leiden, maar soms gaat dat ten koste van de gebruikservaring.

Nogmaals, het is aan jou om te ontdekken wat het beste werkt voor je bezoekers en potentiële klanten en dat kan voor elke doelgroep weer anders zijn.

Wat denk jij?

Is het hamburgermenu een goed idee? En dan alleen voor op mobiele apparaten of moet het overal gebruikt worden? 🙂

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *