Das Hamburger Menü im Internet

von Sina Koch

Webdesign & Webentwicklung > Das Hamburger Menü im Internet

Einmal Hamburger zum Menü öffnen bitte!

Inhalt öffne dich!

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?

Zusammenfassung der wichtigsten Informationen hier im Video:

Ein Bild von einer Fernbedienung, Nahaufnahme
© http://www.uxmatters.com

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.

Kontextmenü eines Webbrowsers mit verschiedenen Bildoptionen.

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

all-the-widgets from Brad Myers on Vimeo.

Weitere Bezeichnungen für das "Hamburger Menü":
  • Hamburger-Icon – Diese Bezeichung bezieht sich auf die rein optische Ähnlichkeit mit einem Hamburger. 
  • Hamburger-Drawer-Icon – „Drawer“ beschreibt das Bewegungsprinzip des Icons, welches Berührung/Klick vollzogen wird. Drawer bedeuet in dem Zusammenhang "Schublade".
  • Off-Canvas-Menü-Icon – „Off Canvas“ wurde im Artikel bereits erklärt.
  • Drei-Balken-Icon – Einfach weil es aus drei Balken besteht.
  • Toggle-Menü-Icon – „Toggle Menu“ ist der englische Fachbegriff für ein Menü, das sich ein- und ausklappen lässt, ähnlich wie ein Hebel "toggle".
  • Navicon – Diese Bezeichnung ist eine Wortschöpfung aus „Navigation“ und „Icon“; ähnlich wie „Favicon“.
  • Hotdog – Diese Bezeichnung stammt von GoogleChrome-Entwickler:innen (Link).
  • Menü-Icon – Die schlichte Variante, die ebenso ein Zeichen in einer klassischen Hauptnavigation beschreiben könnte.

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.

Künstliche Intelligenz für Ihr Online Marketing – bleiben Sie auf dem Laufenden.

Roboter mit futuristischem Design

Jetzt unseren neuen Newsletter abonnieren!

Es ist Wahnsinn, was man jetzt schon alles damit erreichen und umsetzen kann. Ob Videoinhalte, Produkttexte oder das passende Bildmaterial - alles ist mittlerweile möglich! Mit unserer Liste

"KI-Tools für Ihre Webseite und Ihr Online Marketing"

stellen wir Ihnen unsere Tool-Sammlung zur Verfügung.

  • Kostenlose Liste mit über 50 KI-Tools – die Liste wird ständig erweitert.
  • Konkrete Anwendungsbeispiele und Videos
  • Tipps und Tricks per E-Mail
  • Jederzeit abbestellbar

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:

Im rechten Bereich verwendet auch Facebook das Hamburger Menü, um auf weitere Funktionen zu verweisen.
Im rechten Bereich verwendet auch Facebook das Hamburger Menü, um auf weitere Funktionen zu verweisen.

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.

Das mobile Twitter-Menü greift auf Icons zurück.
Das mobile Twitter-Menü greift auf Icons zurück.
Die Google verwendet im Bilder-Menü herkömmliche Textverweise.
Die Google verwendet im Bilder-Menü herkömmliche Textverweise.

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:

Hamburger Menü Symbol

- 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!

Sie brauchen Unterstützung?

Ohne (An-) Frage - keine Antwort. So einfach ist das. Nutzen Sie einfach unser Kontaktformular und wir melden uns umgehend bei Ihnen zurück.

Wir können Ihnen bei folgenden Leistungen weiterhelfen:

Wer schreibt hier?

Sina Koch - Online Marketing Managerin

Leidenschaftliche Teetrinkerin, äußerlich sowie innerlich ein kleiner (Kreativ-) Fuchs

Mehr erfahren ...

Sina Koch

Weitere Beiträge zum Thema Webdesign