Optimaliseren van het hamburger-menu

Optimaliseren van het hamburger-menu

Lieve Smeulders
Lieve Smeulders - 19 mei 2015

Het 'hamburger-menu' als navigatie is niet altijd duidelijk. Hoe zorg je ervoor dat de doelgroep 'de 3 streepjes' als 'menu' gaat zien?

Veel apps en websites maken gebruik van het zogenaamde 'hamburger-menu'.  De drie streepjes bovenaan de pagina waarmee je het menu kunt laten uitklappen. Een logische keuze wanneer je aan het ontwerpen bent voor smartphone of tablet (app, mobiele site of responsive website). Maar onderzoek wijst uit dat niet iedereen begrijpt dat er een menu schuil gaat achter de drie streepjes. Lees hier een artikel over het onderzoek.

Wat kun je doen?

  • Het gebruik van het hamburger-menu neemt toe met 7,2% wanneer er het woord 'menu' bij wordt geplaatst. 
  • Wanneer het hamburger-menu in een kader wordt geplaatst, neemt het gebruik toe met 22,4%.
  • Door de 3 streepjes met het woord 'menu' te vervangen, neemt het gebruik toe met 20%.

Andere opties

Naast het verduidelijken van het hamburger-menu als icoon, kun je ook het volgende doen:

  • Breng het hamburger-menu prominenter in beeld (door het menu bijvoorbeeld gecentreerd neer te zetten of door minder afleiding eromheen te creëren).
  • Zorg dat de gebruiker niet alleen afhankelijk is van de hoofdnavigatie (door bijvoorbeeld de verschillende onderdelen van de website als content/ thema's op de homepage terug te laten komen).
  • In een responsive design pas te kiezen voor een hamburger-menu bij een smartphone-schermformaat (en voor tablet en desktop een traditioneler menu te hanteren).