Waarom het hamburgermenu (niet) werkt – deel 1

In deze serie gaan we dieper in op B2B Webdesign en richten we ons op het hamburgermenu. Waarom werkt deze wel of waarom werkt deze nou niet. In dit eerste deel nemen we een aantal onderzoeken onder de loep die er vanuit gaan dat het hamburgermenu niet werkt.

Wat is een hamburgermenu?

Dit is een hamburgermenu:

Het wordt zo genoemd omdat het er ongeveer uitziet als een hamburgerbroodje met een hamburger ertussen.

Het idee achter dit menu is dat je een groter menu erachter verstopt. Door erop te klikken wordt het volledige menu getoond aan de bezoeker waarmee hij/zij dan verder kan navigeren in de website. Hierdoor hoeft het volledige menu niet altijd meer getoond te worden aan een bezoeker wat met name op mobiele apparaten en tablets erg handig is, omdat hier de ruimte beperkt is.

Deze hamburger is een onbekend stuk vlees

De term “mystery meat navigation” is door Vincent Flanders in 1998 bedacht om een terugkerend probleem te beschrijven: website navigatie die niet duidelijk is voor de gebruiker.

Een kort voorbeeld is te vinden op:

https://www.youtube.com/watch?v=zZ_aaCYCxVQ

Let wel op, deze video beschrijft een type navigatie van een website die meerdere jaren oud is en dus niet meer actueel.

Het basisprincipe van websitenavigatie is dezelfde als die in de normale wereld: zichtbaarheid en eenvoudig herkenbaar zijn belangrijk. Als je bijvoorbeeld over de snelweg rijdt zie je meestal veel goed zichtbare en opvallende borden langs de weg die je op de hoogte brengen van de situatie die je kan verwachten.

Stel je nu eens voor dat je over de snelweg rijdt zonder al deze hulpmiddelen. Om deze aan te zetten moet je eerst op een knop drukken voordat je ze ziet. Dat maakt het navigeren extra lastig.

Hamburgermenu’s maken gebruik van ditzelfde principe. Het klinkt logisch dat als iemand het menu wilt zien dan gewoon op deze knop drukt, maar als je verder nadenkt is dit helemaal niet logisch.

Wat is er mis met een hamburger?

Stel je de volgende conversatie voor:

Client: “Wat als de gebruiker de producten wilt zien?”
Designer: “Oh, ze klikken gewoon op het menu icoon en klikken dan op ‘producten’. Simpel toch?!”

Klinkt totaal logisch. Maar de designer gaat hierbij vanuit dat de gebruiker weet welke onderdelen er in het menu zitten en dat hij of zij deze ook actief zal gebruiken.

De meeste mensen navigeren gebaseerd op iets dat heet “information scent”. Wanneer je wordt geconfronteerd met een aantal opties, kies je bijna altijd voor de optie waarvan je denkt dat deze optie je dichter bij je doel brengt.

Als een bezoeker op zoek is naar de collectie van je producten gaat hij of zij op zoek naar bepaalde woorden die dit omschrijven op je website. Als deze informatie verstopt zit achter een menu waar een bezoeker eerst op moet klikken geeft dat niet direct informatie voor de bezoeker. Vooral als dit icoon eruit ziet als drie strepen boven elkaar zonder enig kenmerk dat dit de bezoeker verder gaat helpen.

De tegenvallers van het hamburgermenu

In het artikel “Obvious Always Wins” van Luke Wroblewski, Product Director bij Google, geeft hij een aantal voor en na voorbeelden van applicaties die eerst een hamburgermenu gebruikte en daar vanaf zijn gestapt. (Afbeeldingen afkomstig van LukeW).

Misschien wel het meest prominente voorbeeld van het hamburger menu wat niet doet wat het moet doen is te vinden bij de website van de Amerikaanse nieuwszender NBC News.

Het eerste design zag er als volgt uit waarin duidelijk te zien is dat de navigatie is verdwenen en de bekende drie strepen te zien zijn:

Deze nieuwe website van NBC News bracht een groot aantal artikelen met zich mee over hoe geweldig en mooi dit nieuwe design was en hoe andere websites snel zouden volgen.

Maar, het hamburgermenu werkt niet. Dus voegde ze een uitleg toe aan de website en de woorden: “menu” onder de drie streepjes.

Maar dit hielp ook nog steeds niet. Dus als laatste reddingspoging maakte ze de icoon geel.

Als allerlaatste (wat je ook kunt zien in bovenstaande afbeelding) gaven ze up en hebben weer traditionele navigatie aan de website.

Deze navigatie is niet cool, sexy of high tech. Maar werkt wél. Gebruikers kunnen de pagina scannen naar de informatie en op basis van de gescande informatie weer verder klikken naar de pagina die zij zoeken.

Hamburgers met variatie

Doordat steeds meer mensen door hebben gekregen dat het hamburgermenu niet goed werkt zijn er een aantal variaties op de hamburger gekomen. Zoals bijvoorbeeld de toevoeging van het woord “menu” onder de nietszeggende streepjes.

Het woord menu toevoegen geeft al meer betekenis aan het icoon, maar zorgt er nog steeds niet voor dat een gebruiker snel naar informatie kan zoeken.Sommige mensen beweren dat de meeste mensen nog moeten wennen aan het hamburgermenu. Inmiddels blijkt uit onderzoek dat het herkennen van het icoon al beter gaat, maar het snel scannen van een pagina verhelpt dit probleem niet. Mensen weten het icoon dan wel te herkennen, maar moeten nog steeds zoeken naar de verborgen informatie.

Maar wat is dan de oplossing?

De oplossing voor B2B Webdesign en het hamburger menu is simpel. Dit vertellen we in de volgende delen.