Waarom het hamburgermenu (niet) werkt – deel 1

Geschreven door: op donderdag 1 oktober 2015

Leestijd:

In deze serie gaan we dieper in op de 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 hamburger menu niet werkt.

Wat is een hamburgermenu

Dit is een hamburger menu:

Hamburgermenu voorbeeld

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).

Studie hamburgermenu

Studie hamburgermenu

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:

hamburgermenu NBC

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.

hamburgermenu NBC news

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

Hamburgermenu NBC news geel

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

Hamburgermenu NBC zonder hamburger

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 het hamburger menu is simpel. Dit vertellen we in de volgende delen.


Op De Hoogte Blijven?

Online Succes realiseren is een vak, een vak wat wij verstaan en waarover we je graag vertellen. Schrijf je in voor onze maandelijkse nieuwsbrief en blijf op de hoogte van trends, thema’s en succesverhalen.

Aanhef

Andere blogartikelen

Bel 072 5345 888
Meer dan 40 bedrijven vertrouwen op ons
Allrig is de alles in een leverancier binnen de energie-industrie
Aliancys is een toonaangevend wereldwijd bedrijf actief in de verkoop van kwaliteitsharsen
ERIKS is een toonaangevende en innovatieve leverancier aan de procesindustrie en aan machinebouwers, die zowel de rol van specialist als die van brede MRO-leverancier vervult
Industrieel dienstverlener Heinen & Hopman Engineering uit Bunschoten is dé wereldwijde specialist op het gebied van klimaatbeheersing
Handicare is een internationale organisatie die ouderen helpt om hun dagelijks leven gemakkelijker te maken door het produceren van hoogwaardige trapliften
Onze Middelen en Technologieën
Microsoft partner
Adobe partner
Asp dotnet
Google analytics
Google adwords
TelefoonE-mail