UX-Glossar · engl. Hamburger Menu
Hamburger-Menü
Das Hamburger-Menü ist ein Symbol aus drei waagerechten Strichen, hinter dem sich die Navigation einer Website oder App verbirgt. Es spart Platz, macht Inhalte aber schwerer auffindbar.
Stell dir vor, du öffnest auf dem Smartphone die Website eines Fahrradladens und suchst die Öffnungszeiten. Auf dem Bildschirm siehst du ein Logo, ein großes Foto und oben rechts drei waagerechte Striche. Ob sich dahinter die Öffnungszeiten verstecken, weißt du erst, wenn du draufgetippt hast.
Diese drei Striche sind das Hamburger-Menü.
Einfach erklärt
Das Hamburger-Menü ist ein Symbol aus drei übereinanderliegenden Linien, hinter dem sich die Navigation einer Website oder App verbirgt. Seinen Namen hat es, weil die Striche an Brötchen, Patty und Brötchen erinnern. Ein Vergleich aus dem Alltag: Es funktioniert wie eine Schublade. Der Inhalt ist ordentlich verstaut, aber du musst wissen oder ahnen, dass es die Schublade gibt, und sie aufziehen.
Das Symbol ist älter, als viele denken. Der Designer Norm Cox entwarf es für die Oberfläche des Xerox Star, einer Arbeitsstation, die 1981 auf den Markt kam. Dort öffnete es eine Liste mit weiteren Befehlen. Auf Smartphones verbreitete es sich etwa ab 2009, weil auf kleinen Bildschirmen wenig Platz für eine sichtbare Navigation ist.
Was die Forschung zeigt
Der Vorteil liegt auf der Hand: Das Menü spart Platz. Der Nachteil ist ebenso klar: Was nicht sichtbar ist, wird seltener genutzt. Die Nielsen Norman Group hat 2016 untersucht, wie Menschen mit versteckter Navigation umgehen. Auf dem Desktop nutzten Testpersonen eine versteckte Navigation in 27 Prozent der Fälle, eine sichtbare in 48 Prozent. Auf Smartphones war der Unterschied kleiner, aber vorhanden: 57 Prozent bei versteckter Navigation gegenüber 86 Prozent bei einer Kombination aus sichtbaren und versteckten Einträgen. Aufgaben dauerten mit versteckter Navigation zudem länger und wurden als schwieriger empfunden.
Das heißt nicht, dass das Hamburger-Menü grundsätzlich falsch ist. Es heißt: Die wichtigsten Wege sollten nicht ausschließlich darin stecken. Mehr dazu im Artikel Die 4 meistgestellten Fragen zum Burger-Menü.
Ein Beispiel
Zurück zum Fahrradladen. Vorher stecken alle Seiten im Hamburger-Menü, auch Öffnungszeiten und Werkstatttermin, die beiden häufigsten Anliegen. Viele Menschen scrollen erfolglos und rufen dann an.
Nachher stehen „Werkstatttermin“ und „Öffnungszeiten“ als sichtbare Links direkt unter dem Logo. Seltenere Seiten wie Jobs oder Impressum bleiben im Menü. Das Symbol bekommt zusätzlich die Beschriftung „Menü“, damit auch Menschen, die es nicht kennen, wissen, was sich dahinter verbirgt.
In der Praxis
- Zeig das Wichtigste sichtbar. Finde mit Daten oder User Research heraus, welche zwei bis vier Ziele am häufigsten sind, und stelle sie direkt dar.
- Beschrifte das Symbol. Das Wort „Menü“ neben den drei Strichen kostet wenig Platz und nimmt Unsicherheit. Für Screenreader braucht der Button zudem einen verständlichen Namen.
- Verzichte auf dem Desktop darauf. Dort ist meist genug Platz für eine sichtbare Navigation, und der Nachteil versteckter Menüs fiel in der Studie dort am größten aus.
Verwandte Begriffe
Informationsarchitektur, Progressive Disclosure, Affordance, Mentales Modell