Nu steeds meer mensen hun mobiele telefoon gebruiken om online te winkelen, is het essentieel dat websites goed werken op mobiel en gemakkelijk te gebruiken zijn. Het probleem: op een telefoonscherm is de ruimte beperkt. Als de navigatie-elementen van je website op elkaar gepropt zitten of onduidelijk zijn, haken bezoekers waarschijnlijk af en winkelen ze ergens anders.
Daarom kiezen veel websites en apps voor het zwitserse zakmes van de mobiele navigatie: het hamburgermenu. Het eenvoudige icoontje met drie streepjes is het internationale symbool geworden voor 'hier vind je meer navigatieopties' en vouwt het complete menu van een site samen in één stevige knop.
Hier lees je meer over de kracht en valkuilen van het hamburgermenu: de geschiedenis, de belangrijkste kenmerken en hoe je het effectief inzet in je mobiele websiteontwerp.
Wat is een hamburgermenu?
Jarenlang was de standaardmethode voor websitenavigatie een horizontaal menu: een rij woorden voor elke categorie die zich boven aan het scherm uitstrekte. Maar toen mobiel browsen eind jaren 2000 en begin jaren 2010 een enorme vlucht nam, aangedreven door vooruitgang in smartphonetechnologie en mobiel internet, hadden webdesigners een oplossing nodig die zuiniger omging met de ruimte.
Zo ontstond het hamburgermenu (☰): een eenvoudig icoontje van gestapelde, evenwijdige horizontale lijnen (het broodje, zeg maar) met daartussen een middellijn (de hamburger). Gebruikers kunnen de navigatieopties zo naar wens open- en dichtklappen. Meestal vind je de hamburgermenuknop in de linker- of rechterbovenhoek van de website of app.
De geschiedenis van het hamburgermenu
Het hamburgermenu is eigenlijk ouder dan mobiele apparaten. Begin jaren 80 ontwierp designer Norm Cox het voor de grafische gebruikersinterface van het Xerox Star-werkstation, een voorloper van de originele interface van de Apple Macintosh. Cox wilde een eenvoudig, herkenbaar icoontje waarmee je met één klik een lijst met acties kon openen.
Na de introductie werd het hamburgermenu maar mondjesmaat gebruikt en raakte het grotendeels in de vergetelheid, tot mobiele telefoons rond 2009 breed werden omarmd. De behoefte aan efficiënte manieren om menuopties op kleine schermen te tonen zonder gebruikers te overweldigen, maakte de compacte netheid van het hamburgermenu-icoontje tot de ideale oplossing.
De populariteit van het hamburgermenu was verzekerd toen Twitter en andere telefoonapps het overnamen, gevolgd door het gebruik in Voicememo's op de iPhone 3GS en het bijbehorende iOS 4. Daarmee werd het definitief een vertrouwd symbool voor verborgen navigatie.
Voor- en nadelen van het hamburgermenu
Hamburgermenu's zijn ideaal voor mobiele apparaten, maar navigatiebalken en tabbladmenu's werken misschien beter voor desktopgebruikers. Dit is waarom:
Voordelen
Het compacte formaat van het hamburgericoontje is meteen zijn bestaansreden. Het bespaart kostbare schermruimte en houdt het websiteontwerp overzichtelijk, vooral op kleinere schermen zoals die van smartphones. Klik of tik je op het hamburgericoontje, dan verschijnt de navigatie van de site, of dat nu via een uitschuivend menu, een vervolgkeuzemenu of een schermvullende laag is. Dat kan de mobiele klantervaring verbeteren.
Nadelen
Hoewel het voordeel van de ruimtebesparing onmiskenbaar is, zeggen sommigen dat hamburgermenu's in desktopbrowsers de vindbaarheid kunnen belemmeren. Als gebruikers het menu-icoontje niet kennen, missen ze het misschien helemaal en zien ze belangrijke inhoud of navigatieopties over het hoofd.
Om dit te ondervangen, kun je overwegen om responsieve ontwerpsjablonen te gebruiken met verschillende menustructuren voor verschillende apparaten. Een website kan op desktops een traditionele horizontale navigatiebalk tonen, maar op mobiele apparaten overschakelen op een hamburgermenu om schermruimte te besparen.
Praktijkvoorbeelden: hamburgermenu's in actie
Je ziet vaak dat een website responsief ontwerp toepast, zodat het hamburgermenu alleen op de mobiele versie verschijnt en op desktops een andere menustijl te zien is. Hier zijn een paar e-commercewebsites die hamburgermenu's effectief inzetten:
TCB Jeans
Bron: TCB Jeans
TCB Jeans houdt het simpel met een standaard hamburgermenuknop met drie streepjes boven aan de mobiele site. Klik je erop, dan schuift er vanaf de linkerkant een lijst met links tevoorschijn, met onder meer Home, Producten en Over ons. Naast de link Producten staat een klein plusteken, wat aangeeft dat er meer opties zijn als je erop tikt.
Bron: TCB Jeans
Ook de desktopwebsite van TCB heeft een hamburgermenu, waardoor een schermvullende achtergrondfoto en aantrekkelijke aanbiedingen alle aandacht krijgen. Op de mobiele versie schuift het hamburgermenu als een laag over het scherm, wat gebruikers visueel duidelijk maakt dat het menu weer weg te klikken is en de pagina erachter tevoorschijn komt. Het hamburgermenuontwerp van TCB is:
- Overzichtelijk. Menuknoppen op een klein telefoonscherm op elkaar proppen is geen goed idee. Beter verstop je ze in het hamburgermenu.
- Vertrouwd. De hamburger is gangbaar op mobiele sites, dus voor de meeste gebruikers is hij niet verwarrend.
- Gericht op de producten. Doordat het menu achter de hamburgerknop schuilgaat, springt de productfotografie er meer uit en komen de producten die je verkoopt beter tot hun recht.
Gymshark
De website van Gymshark is een mooi voorbeeld van hoe een desktopwebsite kan verschillen van de voor mobiel geoptimaliseerde versie. Op desktop is er geen hamburgermenu, maar op mobiel verschijnt het in de linkerbovenhoek. Tik je erop, dan verschijnen er een zoekvak en submenu's met productcategorieën. Om terug te gaan naar de startpagina tik je gewoon op het kruisje (X) rechtsboven.
Bron: Gymshark
Bron: Gymshark
Het hamburgermenu van Gymshark werkt goed omdat het prioriteit geeft aan wat het belangrijkst is: eerst aanbiedingen en nieuwe kleding tonen om bezoekers meteen te boeien. Het is ook vertrouwd, met de menuknop op de plek waar je hem verwacht, gevolgd door een eenvoudige, begrijpelijke lijst.
Tips voor een succesvol hamburgermenu
Website-eigenaren die een hamburgermenu gebruiken, kunnen deze zes tips in gedachten houden om de gebruikerservaring en conversieratio's te verbeteren:
Zorg dat het altijd zichtbaar is
Meestal is het hamburgermenu klein. Zorg ervoor dat het toch goed opvalt. Plaats het in de linker- of rechterbovenhoek van het scherm, waar gebruikers geneigd zijn te kijken. En houd de plek op al je sitepagina's consistent.
Houd vast aan het standaard hamburgericoontje
Gebruik de algemeen bekende drie evenwijdige horizontale lijnen (☰) voor je hamburgermenu. Deze icoontjes zie je overal en de meeste gebruikers begrijpen direct waar ze voor dienen.
Geef prioriteit aan de menuhiërarchie
Rangschik je menu-items logisch. Je kunt een zoekvak toevoegen en vervolgens de belangrijkste en meest bezochte categorieën of pagina's van boven naar beneden ordenen.
Maak het mobielvriendelijk en toegankelijk
Zorg ervoor dat je menu goed werkt op alle mobiele apparaten en touchscreens. De menu-items moeten groot genoeg zijn om er gemakkelijk met een vinger op te tikken.
Voeg animatie en visuele feedback toe
Terwijl de gebruiker met het menu bezig is, geven subtiele effecten visuele aanwijzingen. Zo kunnen de lijnen draaien en veranderen in een X of + om te laten zien dat het menu opent of sluit. Lijnen kunnen dikker worden of iets uitrekken. Fade- en verschuiveffecten geven diepte tijdens het gebruik. Of je verandert de kleur, of laat het icoontje licht stuiteren als erop wordt getikt.
Test en verzamel feedback
Test je hamburgermenu op echte gebruikers voordat je het definitief maakt. Kijk hoe ze ermee omgaan en verzamel hun feedback.
Een hamburgermenu combineren met andere navigatietools
Soms is de beste manier om de bruikbaarheid van je site te verbeteren, het combineren van verschillende knoppen en menu's. Elk type heeft zijn eigen sterke en zwakke punten, maar samen kunnen ze een naadlozere en effectievere gebruikerservaring creëren.
E-commercewebdesigners kunnen combinaties inzetten die het ontdekken van producten makkelijker maken, met duidelijke en directe toegang tot het winkelmandje en het afrekenproces. Controleer of alle navigatie-elementen op touchscreens goed aan te tikken zijn. Test verschillende combinaties om te zien wat het beste werkt voor je doelgroep:
- Bovennavigatie plus hamburger. Gebruik de bovennavigatie voor essentiële categorieën en functies zoals de shop en het winkelmandje, en reserveer het hamburgermenu voor minder gebruikte navigatieonderdelen zoals Over ons, Contact, Klantenservice en Voorwaarden. Zo blijft het hoofdscherm overzichtelijk, terwijl noodzakelijke pagina's snel bereikbaar blijven.
- Tabbladnavigatie plus hamburger. Gebruik tabbladnavigatie binnen een productcategoriepagina om producten te filteren of te sorteren, bijvoorbeeld op Nieuw binnen, Bestsellers en Sorteren op prijs. Zo kunnen gebruikers hun zoekopdracht snel verfijnen nadat ze je hamburgermenu voor de algemene sitenavigatie hebben gebruikt.
- Vastgezette header plus hamburger. De vastgezette header bevat belangrijke snelkoppelingen naar de hoofdcategorieën en blijft boven aan het scherm staan terwijl je scrolt. Het hamburgermenu gebruik je dan voor de bijkomende pagina's.
De website van Fly by Jing gebruikt bijvoorbeeld een hamburgermenu voor de brede menukeuzes, terwijl de shoppagina zelf een tabbladmenu met vier opties gebruikt ('Sauces', 'Sets', 'Pantry' en 'Merch') om verder te verfijnen.
Bron: Fly by Jing
Veelgestelde vragen over het hamburgermenu
Waarom heet het een hamburgermenu?
De term hamburgermenu verwijst naar de visuele gelijkenis van het icoontje met een hamburger. Het bestaat uit drie horizontale lijnen die op elkaar zijn gestapeld.
Wat is een hamburgermenu op een website?
Een hamburgermenu is een eenvoudig icoontje dat, wanneer je erop klikt of tikt, een navigatiemenu voor een website of webpagina laat verschijnen.
Hoe heet het menu met de drie puntjes?
Een menu dat wordt weergegeven met drie verticale puntjes wordt meestal een 'meer opties'-menu, een 'verticale ellips' of soms een 'kebabmenu' genoemd.
