‘Het ‘hamburger menu’ ­- wel of niet doen?’

Het is zondagmiddag 17.00 uur als ik mijn eerste letter tik van dit artikel met het ‘hamburger menu’ als onderwerp. Wel of niet doen is de vraag? Mijn eerste reactie is volmondig ‘ja’ en de details schieten door mijn hoofd. Het liefst met avocado, kaas, tomaat en zelfgemaakte friet ‘on the side’ alstublieft. Een hamburger menu dat er goed uit ziet en echt bij zo’n weekend hoort. Maar terwijl ik nadenk over het ordenen van de ingrediënten slaat de twijfel toe. Is een hamburger­ menu nu wel verstandig?

Het hamburger menu

Oh nee… even ter verduidelijking; dit artikel gaat niet over een hamburger menu van mijn favoriete hamburger tent Burgertrut. Dit artikel gaat over webdesign en het veelgebruikte icoontje met drie horizontale streepjes dat symbool staat voor een ‘verstopt’ of ‘uitschuifbaar’ menu.

Ze waren waarschijnlijk niet de eerste, maar in 2011 introduceerde Facebook het schuifmenu dat je kon openen door op het het icoontje met drie horizontale streepjes linksboven in beeld te klikken. Al snel groeide het zogenoemde hamburger menu uit tot dé standaard. Eerst voor apps en later ook voor mobiele sites. En door de opkomst van responsive websites en minimalistische designs zie je het hamburger menu ook steeds vaker op desktop sites gepresenteerd.

Op de gril

Alle content binnen handbereik achter slechts 1 icoontje. Door je menu te ‘verstoppen’, bespaar je ruimte en kan je een clean en consistent responsive design creëren. Want dat is handig en overzichtelijk. Maar is dit wel zo verstandig? Ondertussen is er ook een groeiende anti-beweging aan de gang. Bij sommigen is een irritatie ontstaan voor het feit dat de hamburger is uitgegroeid tot een gestandaardiseerd icoon. “Hoe ongebruiksvriendelijk is het wel niet om jouw waardevolle content te ‘verstoppen’ achter drie lijntjes?”

Waarom geen hamburgers?

Bezoekers van een website die specifieke informatie willen, screenen allereerst de ‘body’ van je website. Alle ‘verstopte’ informatie kan dus over het hoofd worden gezien of niet gebruikt. Halverwege dit jaar publiceerde Luis Abreu een artikel waarom je het hamburger menu eigenlijk moet vermijden. Bij een hamburger menu moeten bezoekers allereerst je icoon identificeren als button, dat vervolgens leidt naar een uitklapbaar menu om dan pas de relevante informatie te vinden. Een extra handeling dus.

Een afbeelding zegt toch meer dan duizend woorden? Althans, dat zou je zeggen. Uit onderzoek naar iconen blijkt dat een icoon beter werkt met begeleidende tekst. Metingen wijzen uit dat er minder wordt geklikt op mobiele hamburger menu’s (ongeveer 20% minder). Sommige ontwikkelaars van apps zijn dus alweer bezig om ervan af te stappen. Die kiezen nu bijvoorbeeld voor tabbladen. Een rijtje met iconen onderaan het scherm.

Iconisch

Maar toch blijft het icoon steeds terug komen. Zoals de diskette ooit is ingevlogen om op te slaan en de prullenbak om te verwijderen, is de hamburger een icoon geworden die niet direct van plan is te verdwijnen. Terwijl ik dit schrijf, zie ik in mijn rechter ooghoek het hamburger menu van Chrome me aanstaren. Ook in onze ontwerpen maken wij soms gebruik van het icoon.

Een bedrijf als Facebook is ook constant aan het spelen met het icoon. In de eerste mobiele applicatie waren bijna alle functionaliteiten van de app verstopt achter drie horizontale streepjes. Maar in de laatste re-design is het icoon gecombineerd met andere belangrijke functies in een tab-constructie met een beschrijvende tekst er onder. Minder ruimte, maar een bevordering voor de interactie en gebruiksvriendelijkheid. En inmiddels zijn zelfs de tekstjes weer verdwenen onder de tabbladen. De hamburger blijft, maar het gebruik is veranderd.

Wanneer wel?

Een menu gaat over het ordenen en presenteren van al je informatie. Zowel bij apps, mobiele en desktop sites. Soms zal een hamburger menu dan ook een juiste keuze zijn. Zeker als het gaat om het ordenen van je extra opties die buiten je hoofdmenu vallen. Soms zijn er nu eenmaal teveel opties om allemaal kwijt te kunnen. Een uitschuifbaar menu met hamburger icoon past perfect bij een strak en minimalistisch design en staat symbool voor het volwassen worden van een medium. Minder poespas en beperkingen tot de essentie. Het icoon heeft in veel gevallen een probleem opgelost en daarmee dus een standaard gedefinieerd.

Dus?

We moeten ernaar streven onze interactie zo eenvoudig en natuurlijk mogelijk te maken. Iconen dienen ter verduidelijking en moeten de gebruikers ondersteunen bij een actie op zowel desktop, mobiel of tablet. Het pictogram hamburger is een instrument dat kan helpen, als we het goed toepassen. De context en het design moeten perfect in lijn zijn met de actie die een bepaalde bezoeker wil uitvoeren. We moeten er rekening mee houden dat wij door ervaring weten wat het icoon betekent. En dat kunnen we niet van iedereen verwachten. Het is dus essentieel om te begrijpen wie de bezoeker of gebruiker is en wat hij of zij wil bereiken.

We willen je dus niet aanmoedigen om zoveel mogelijk hamburgers te eten, maar soms is het gewoon de beste keuze. De hamburger is een onderdeel van modern en minimalistisch webdesign. En dat betekent niet dat we alles moeten verstoppen. Het betekent dat gebruikers alleen te zien krijgen wat zij nodig hebben voor een optimaal gebruik. Dat is een schone taak voor ons als internetbureau! Creëren van clean design zonder functionaliteit te schrappen.

Hamburgers met mate

Iconen zijn te standaardiseren, maar we kunnen niet het gedrag van gebruikers standaardiseren. Maak het nooit moeilijker voor bezoekers of gebruikers om belangrijke content te vinden. Zeker als het gaat om desktop design waar ruimte genoeg is om content overzichtelijk in een menu te presenteren. Gebruiksvriendelijkheid staat altijd voorop.

Wij geloven niet in een goed of fout in deze kwestie. Wij geloven niet in het klakkeloos neerzetten van een icoon om het jezelf ‘makkelijk’ te maken. Wij geloven wel in onszelf constant uitdagen en in het blijven nadenken over de beste manier van implementeren. Dat is juist het mooiste van webdesign. Het is constant in ontwikkeling. Het hamburger menu is het perfecte voorbeeld van de veranderingen.

Welke content helpt bij het bepalen van de doelstelling en hoe kunnen we dit het beste online presenteren in de juiste stijl? Maak keuzes in lijn met de gewenste doelstelling. De beste oplossing verschilt per bedrijf en bezoeker. En test, test en test!