Das Hamburger Menü im Internet

Einmal Hamburger zum Menü öffnen, bitte!

Jeder, der in den letzten Jahren auf dem Smartphone, Tablet oder am PC Internetseiten aufgerufen hat, wird dieses Symbol schon gesehen haben: Ein Icon mit drei horizontalen Balken. Dieses Icon dient dazu, das Navigationsmenü aus- bzw. einzuklappen. Doch was genau verbirgt sich dahinter? Und wie wird dieses Icon eigentlich genannt?

Das sog. "Hamburger Menü" hat sich, ähnlich wie die Lupe (Suchfunktion) oder die Weltkugel (Sprachauswahl) zu einem Standard in der digitalen Welt gemausert und wird nicht nur auf Webseiten eingesetzt. Mittlerweile finden wir es auch in Online-Tools, Programmen (Spotify), Apps (Sky Go) oder sogar Fernbedienungen.

Die Geschichte hinter dem Icon

Die Geschichte dieses kleinen Icons beginnt in den frühen 80er Jahren. Norm Cox, Designer der ersten Workstations (Xerox Star) mit grafischer Oberfläche, hat in der Designphase ein Symbol kreiert, das eine Menüoptionenauswahl darstellt. In einer offiziellen Stellungnahme nach einer Anfrage der Webseite "Gizmodo" erklärt er den Erstellungsprozess:

Er habe das Icon für eine kontextabhängige Menüoption entworfen.
Nach seinen Ansichten, würde es dem Menü ähneln, welches erscheint wenn Nutzer Objekte mit der rechten Maustaste anklicken.

Zudem solle das Icon sehr deutlich und einfach gehalten sein, damit es auch mit weniger Pixel (z.B. : 13x13) erkennbar ist. Im Nachhinein findet Norm Cox es bemerkenswert, dass sein Symbol den Test der Zeit bestanden habe und zu einem allgegenwärtigen Symbol geworden sei.

Ein kleines Beispielvideo mit der ersten "offziellen" Darstellung des Hamburger-Icons (ab 21.05 min):

Vorteile

• Mehr Platz: Dadurch, dass das Hamburger Menü so einfach wie möglich gehalten wurde, schafft es Platz. Hat man als Websitenbesitzer:in eine überladene Seite, kann das Hamburger Menü helfen aufzuräumen. Und auch für die mobile Ansicht kann das Menü hinter dem Icon "versteckt" werden.
  
  
• Immer einsetzbar: Ganz egal, wie die Seite aussieht, in fast jedes Webdesign kann sich das Icon integrieren lassen.
  
  
• Für große Seitenbesitzer wertvoll: Große Websiten wie Amazon können mit Hilfe des Hamburger Menüs ihre Hauptnavigation wortwörtlich verstecken, dies merken die Nutzer:innen meist gar nicht, da sie nicht mit Hilfe des Menüs sich durch die Seite navigieren, sondern mit Hilfe von Suchfunktionen, internen Verlinkungen uvm.

Nachteile

• Schlechte Auffindbarkeit: Erst durch einen Klick werden wichtige Bausteine sichtbar - das heißt: alles was sich hinter dem Menü verbirgt ist für Nutzer:innen nicht direkt sichtbar und kann im schlechten Fall nicht angeklickt werden.
  
  
• Ineffizienz: Auch wenn Nutzer:innen bereits wissen, dass sich hinter dem Hamburger Icon ein Menü verbirgt, bedeutet es: Nutzer:innen müssen klicken. ABER - die Nutzer:innen sind faul und vermeiden jeden Klick. Im schlimmsten Fall ist es den Nutzer:innen zu aufwendig weitere Informationen zu suchen und er verlässt die Seite. Zudem befindet sich das Hamburger-Icon oftmals links oben auf dem Display. 80-85% der europäischen Bevölkerung sind Rechtshänder und somit wird das Klicken des Buttons erschwert.
• Keine Neugier: Dadurch, dass die Nutzer:innen nicht wissen, was sich hinter den Icon verbirgt, kann es selbst nicht dazu beitragen, Besucher:innen am Anfang auf Seiteninhalte neugierig zu machen.

Fazit:

Ganz egal ob man Fan oder Feind des Hamburger-Icon ist, sollte man sich exakt überlegen, ob man diese Art der Navigation mit in das Online-Projekt einbaut.
Eine Navigation sollte die Nutzer:innen abholen und zeigen, was sie auf der Seite finden. Weiterhin soll sie erklären, wie sie diese Seite benutzen können. Menü-Labels wie „Andere" oder „Mehr“ werden deswegen seit Jahrzehnten als Design-Fehler bezeichnet, da sie keine Rückschlüsse darüber zulassen, was sich hinter ihnen verbirgt. Ein einfaches Austauschen eines nichtsagenden Textes durch ein nichtsagendes Icon ändert nichts an dem Grundproblem.

Man schadet sich selbst, wenn man die wichtigsten Funktionen hinter einem Hamburger versteckt und den Nutzer:innen die direkte Anzeige der Navigationsmöglichkeiten erschwert. Die ganze Diskussion ist ein zweischneidiges Schwert, denn zum einen soll die Benutzeroberfläche - ganz gleich ob auf dem Smartphone (Responsive Design) oder am Desktop übersichtlich und nicht überfüllt sein. Zum anderen soll den Anwender:innen eine einfache Handhabung geboten werden. Der letzte Punkt ist vor allem auf dem Smartphone in den meisten Fällen nicht gut umgesetzt.

Mögliche Alternativen:

Die klassische Menüfunktion am oberen Rand oder im Footer ist wohl aus Nutzersicht die optimalste Lösung. Er kann alles direkt überblicken und muss dafür keinen weiteren Klick tätigen. Hat man jedoch in der mobilen Sicht z. B. nicht den Platz dazu, ist eine Kombination aus dem Hamburger Menü und der klassischen Menü-Funktion eine Lösung: Die wichtigsten Punkte sind oberhalb oder unterhalb in einer Menü-Leiste zu erkennen, und weitere Punkte verstecken sich hinter dem Hamburger-Menü-Icon. Das Ganze ist zum Beispiel auch beim Facebook Menü vorzufinden und sieht so aus:

Aber auch bei der Kombination kann es sein, dass Nutzer:innen, die das Menü nur schnell überfliegen, denken sie haben bereits alles gesehen. Sie wissen dann nicht, dass sich hinter den Hamburger Icon noch weitere Menü Punkte verbergen.

Twitter und Google Bilder greifen deshalb auf eine reine Icon- oder Textverwendung in Ihren Menüs zurück. Auch das ist eine Alternative zum Hamburger Menü und kann Platz schaffen.

Ist die Funktion klar?

Anwender:innen müssen nicht genau wissen, wie dieses Symbol heißt - sie müssen lediglich die Funktion dahinter erkennen. Das stellt sich jedoch manchmal anspruchsvoller heraus, als es anfangs zu erscheinen mag. Technisch versierte Anwender:innen verstehen die Funktion hinter den drei Balken und wissen sofort, dass es sich um das "verborgene" Menü handelt. Weniger versierte Anwender:innen jedoch klicken nur dann auf Icons und Buttons, wenn sie ihnen bekannt vorkommen, oder eine Erklärung mitgeliefert wird. Während der Entwicklungsphase einer Webseite oder App ist dieser Punkt immer wieder zu beachten. Denn bei der Gestaltung von Benutzeroberflächen gilt: Aus den Augen aus dem Sinn!

James Foster, Web-Entwickler aus Australien, hat monatelang Daten gesammelt, die Aufschluss darüber geben, wie Anwender:innen das Menü-Icon benutzen. Alle Daten erzielten das selbe Ergebnis: Das Hamburger-Menü ist Anwender:innen nicht so klar, wie Webdesigner:innen es vermuten.
In einem ersten Testlauf stellt er den Anwender:innen vier verschiedene Versionen vor:

- Das Wort MENU unter die drei Balken zu schreiben, verbesserte den Klickwert um 7.2%.
- Das einfache Umrahmen des Icons, sodass es wie ein Button aussieht, steigerte die Klickrate um 22.4%.

Im zweiten größeren Test (250.000 Besucher:innen) wurden lediglich zwei Versionen (Hamburger-Icon+Rahmen & MENU+Rahmen) getestet.

- Die Text-Version des Icons ergab eine Klicksteigerung von 20%.

Es ist sehr beachtlich, was man mit einfachen Änderungen am Icon erzielen kann, und wie unterschiedlich Anwender:innen auf das Icon reagieren. Foster erklärt sich die unterschiedlichen Reaktionen, so dass es ziemlich leicht sei, es nicht zu bemerken und dass es für verschiedene Leute unterschiedliche Dinge bedeutet und nicht unbedingt ausdrückt "Hier sind noch mehr Dinge, die man sehen kann!"

Kurzum: Wir empfehlen, die klassische Menüfunktion zu nutzen und erst bei nicht ausreichenden Analyse-Daten verschiedene Varianten des Hamburger Menüs zu testen... Und wer weiß?! Manchmal lohnt es sich auszutesten!