Hamburger Menu – of Hamburger Icon – is een term die vaak wordt gebruikt als we het over apps hebben. Je zou er honger van kunnen krijgen, maar het heeft niets met eten te maken. Waar komt deze domme naam vandaan en wat doet het menu?

De geschiedenis van het hamburger-pictogram
Het Hamburger-pictogram – menu, symbool, knop, enz. – bestaat al sinds 1981. Het werd bedacht door Norm Cox, de grafische leider voor de Xerox Star, de eerste commerciële personal computer.

Norm ontwierp het symbool als een container voor menukeuzes. De horizontale lijnen zijn een abstracte weergave van een verticale lijst. U kunt de hamburger menu knoppen in actie zien op de Xerox Star in de video hieronder bij het 21:15 merk.

 

Het symbool moest heel eenvoudig zijn, deels vanwege de ontwerpbeperkingen van die tijd. Het mocht slechts ongeveer 16×16 pixels groot zijn, dus het moest duidelijk en goed zichtbaar zijn. Met drie vette lijnen werd dat doel bereikt.

Pas toen smartphones en mobiele apps op de markt kwamen, werd het hamburgerpictogram een bekendheid. Beperkte schermruimte betekent dat opties moeten worden weggestopt in menu’s, en het hamburgerpictogram is een populaire keuze geworden om dat aan te duiden.

De geschiedenis van het hamburgerpictogram in mobiele apps is een beetje duisterder. Het is mogelijk dat het voor het eerst werd gebruikt door een Twitter-app genaamd “Tweetie” in 2008. Kort daarna begon het op te duiken in Apple’s iOS besturingssysteem voor de iPhone, wat waarschijnlijk heeft geleid tot zijn populariteit in het ontwerp van mobiele apps.

Waarvoor dient het hamburger-pictogram?
Zoals eerder vermeld, was het oorspronkelijke doel van het hamburger icoon om te fungeren als een menu dat lijsten met opties bevatte. Dat is waar het ontwerp vandaan komt. Menu’s bevatten gewoonlijk opties in een verticale lijst, vandaar de drie boven elkaar gestapelde regels.

Dat is nog steeds waar het hamburgerpictogram vandaag de dag voor wordt gebruikt, maar het doel ervan is uitgebreid in mobiele apps. Het wordt nu vaak gebruikt voor menu’s die uit de zijkant van het scherm schuiven. (Dit type menu wordt ook wel een “sidebar” menu genoemd).

Hier is een voorbeeld van het hamburger icoon dat gebruikt wordt in de Gmail app voor Android. Door op het icoon te tikken opent u een menu aan die kant van het scherm.

Het hamburger icoon kan ook gevonden worden in het Windows 10 Start Menu. Door met de muis over het pictogram te bewegen of erop te klikken, worden de snelkoppelingen voor Instellingen, Energie en andere gebruikersopties uitgebreid.

Het hamburgerpictogram is gewoon een symbool dat “menu” is gaan betekenen. Als je er eenmaal naar begint te zoeken, kom je het overal tegen.

Waarom wordt het een “Hamburger” menu genoemd?
Dankzij het onderzoek van ontwerper Geoff Alday is de geschiedenis van het hamburger-icoontje aardig in kaart gebracht. We weten echter niet precies waarom of wanneer het de bijnaam “hamburger” heeft gekregen.

Iedereen lijkt het erover eens te zijn dat de bijnaam afkomstig is van de drie lijnen die enigszins lijken op een bovenste broodje, een hamburgerflapje en een onderste broodje. Maar wie was de eerste die dat verband legde? Dat weten we niet zeker. Norm Cox vermeldt alleen dat hij het gekscherend een “ventilatierooster” voor het raam noemde.

Mensen zien in veel dingen voedsel, blijkbaar.

De zaak tegen het hamburger menu
Niet iedereen is een fan van het alomtegenwoordige hamburger icoon. In de afgelopen jaren zijn app-ontwerpers begonnen om ervan af te stappen.

Het hamburger icoontje is ontworpen (met strikte beperkingen) om super simpel te zijn. Die eenvoud kan soms een nadeel zijn. Het is niet erg beschrijvend en kan gemakkelijk over het hoofd worden gezien als je er niet bekend mee bent.

Navigatiebalken zijn een populairdere manier geworden om menu-items te organiseren. In plaats van alles achter een onbeschreven knop te stoppen, kunnen meerdere pictogrammen op een balk met tekst worden gerangschikt. Dit is veel gemakkelijker voor iemand om te begrijpen.

Navigatiebalk in Google Maps
Een navigatiebalk werkt echter niet voor elke app, dus het is nog steeds gebruikelijk om het hamburgerpictogram te zien. Wat nog populairder is geworden, is het gebruik van drie puntjes als een menupictogram, zoals hieronder te zien is in Chrome voor Android.

(Onder de knop zie je een hamburger menu icoon op de mobiele website van How-To Geek. Websites gebruiken dit ontwerp ook vaak).

Dat is een hoop gepraat over hamburgers en software ontwerp. Het enige dat je hoeft te weten is dat een hamburger menu meestal bestaat uit drie horizontale lijnen in een verticale stapel. Let ook op drie stippen. Gebruik deze knoppen als je op zoek bent naar menu’s en meer opties.