The Hamburger Menu
Wie startte deze discussie?
Voor ons begon het met deze eenvoudige blogpost “Mobile Menu AB Tested: Hamburger Not the Best Choice?” van @exisweb. Een doodgewone developer die houdt van A/B testing. Hij wilde achterhalen hoe users interageren met het hamburger icoon. Omdat hij weet wat commerciële A/B testing tools zoals Visual Website Optimizer kunnen kosten, deelde hij z’n resultaten gratis online. Dat zijn post meteen viraal zou gaan, had hij echter niet verwacht. Hij zette heel wat developers, designers en consultants zoals wij aan het denken.
Je hoeft zijn blogpost niet helemaal te lezen. Wij geven je hier de key take-aways mee:
- Developers en designers gaan er te snel van uit dat bezoekers de betekenis achter bepaalde iconen meteen begrijpen.
- Het hamburger menu is, ondanks het niet gebruiksvriendelijk is, een standaardoptie geworden om het mobiele menu weer te geven.
- Het gebruik van het woord MENU in de vorm van een duidelijke button biedt bezoekers doorgaans meer ondersteuning. De term MENU is herkenbaar voor de bezoeker en trekt dan ook meer aandacht.
Gezien mobiel verkeer aan een opmars bezig is in België, leek ons dit een interessante discussie om verder op te volgen. Een vlotte navigatie voor mobiele gebruikers is hierbij namelijk van cruciaal belang.
Usability Guru Jakob Nielsen bevestigt
Ook usability experts zoals Jakob Nielsen hebben al onderzoek gedaan naar icon usability. Nielsen raadt aan om onbekende iconen zoals het hamburger icoon steeds te vergezellen van een tekslabel. Dit is ook wat James Foster gedaan heeft met z’n A/B-test. Op deze manier voorkom je namelijk verkeerde interpretaties. Daarnaast kunnen we er zo ook voor zorgen dat dergelijke iconen ingeburgerd raken. Het vergrootglas is daar een ideaal voorbeeld van.
De oorsprong van het hamburger-menu
Waar komt het hamburger-icoon eigenlijk vandaan? Wij waren benieuwd naar de oorsprong van het symbool en gingen op onderzoek. Het duikt voor het eerst op bij de Xerox Star, een computer uit het jaar 1981(!). Norm Cox was de verantwoordelijke voor het design van de interface die er toen ongeveer als volgt uit zag:
Daar zien we het hamburger/menu-icoon meermaals terugkomen. Om even zijn woorden aan te halen:
Experts aan het woord
In september 2014 was Websauce aanwezig op de Google Partners Summit in Mountain View, California. Een van de vele interessante sessies ging over mobile user experience, met Jennifer Gove aan het woord. Als mobile UX lead bij Google, had ze hierover vast en zeker een mening, niet?
Onbevreesd stapte Michiel op haar af en vroeg hij naar haar mening. Ze vindt het een zeer interessant discussie, al vreest ze dat het menu-icoon aka “the hamburger” nog verre van ingeburgerd is bij het gewone publiek. Mensen die er dagdagelijks mee bezig zijn, zoals designers en usability-experts, kennen het ondertussen al. Maar zijn dat de doorsnee gebruikers van jouw website? Uiteraard is dit afhankelijk van website tot website en van app tot app, maar in principe zou iedereen moeten testen wat er voor zijn of haar product het beste werkt.
Uiteraard hebben we dit ook zelf getest!
We mochten deze mobile menu-test ook uitvoeren voor één van onze klanten, die zeer bewust zijn van het belang van het mobiele verkeer, namelijk Durabrik.
Originele versie: Menu
Variant 1: Menu + boord
Variant 2: Menu + boord + hamburger
Resultaten
Zoals jullie zien kreeg de variant ‘menu + boord + hamburger’ opvallend meer clicks dan de andere versies van het mobiele menu. Er was een improvement van 25,6%.
Opmerkelijk is dat we in onze Google Analytics rapporten zagen dat er net via deze variant minder conversies werden geregistreerd. De conversieratio (1,17%) ligt hier dan ook beduidend lager.
De versie ‘menu + boord’ daarentegen kreeg ook meer clicks dan de originele versie en zorgde bovendien voor een lichte stijging van het aantal conversies t.o.v. de huidige variant. Met die reden hebben we ook besloten om de variant ‘menu + boord’ tot winnaar van deze test te benoemen. Ook onze eigen test bevestigde opnieuw de twijfels omtrent het hamburger-icoon.
Conclusie
