LAYOUTGEFLÜSTER
Unsere Kultusministerin hat es nicht erfunden. Von der Alster stammt es auch nicht: das Hamburger-Menü. Schon 44 Jahre alt ist das Zeichen mit den drei gestapelten Lagen. Es erinnert entfernt an ein belegtes Brötchen. Es birgt eine größere Auswahlliste oder Ausklapp-Menü. Hinter dem Piktogramm steckt ein interaktives Widget, eine Art Mini-App. Es spart Platz und ist deshalb unter Web-Designern ein Objekt von Liebe oder Hass. Ein Blick auf das Für und Wider und wie es bisher im Bildungsportal benutzt wird.
Im Bildungsportal wird in die Hamburger-Scheiben das ganze Hauptmenü gepfercht. Allerdings nicht in der Desktop-Ansicht in voller Fensterbreite. Da hat man das Hauptmenü vor Augen.
Das Hauptmenü verschwindet, sobald das Fenster kleiner wird. Wer das Bildungsportal auf Tablet (hochkant gehalten), Smartphone oder gar Smartwatch aufruft, sieht das Hauptmenü zuerst gar nicht. Nur den Burger.
Das kann Besucher in die Irre führen. Denn die sehr bunten Knöpfe des Zielgruppen-Menüs verschwinden nicht, sie werden sogar, relativ gesehen, größer und aufdringlicher.
Mancher Mobilnutzer meint deshalb, die Sechs-Knöpfe-Batterie sei das Hauptmenü des Bildungsportals, es gebe also gar kein weiteres Hauptmenü, das man suchen müsste. Das erklärt die recht hohen Klickquoten der Zielgruppen-Knöpfe im Mobilbetrieb.
Vorteile des Burger-Menüs
Die drei Balken ≡ sind ein Raumwunder. Dahinter lassen sich kompakt Dutzende Menüpunkte verstecken. Ein Klick, und das ganze Buffet entfaltet sich.
- Viele Redakteure lieben Burger, weil sie mehr Inhalte auf den Bildschirm bringen können. Denn Inhalte konkurrieren mit Navigationselementen um knappen Platz.
- Viele Designer lieben Burger, weil sie einen blanken, schlanken, leichten Gesamtauftritt ermöglichen. Designer finden Navigationselemente meist hässlich, lästig und uninteressant.
- Experten für User Experience (UX) empfehlen es für alle Mobilgeräte. Überladene Seiten kann man da gar nicht gebrauchen. Mobil-User navigieren geübt mit solchen Symbolen.
Grafisch variabel ist das Piktogramm auch. Es gibt inzwischen eine ganze Küche voll. Die Symbolgelehrten reden – kein Scherz – von Cheeseburger, Veggie Burger, Kebab, Döner, Meatballs, Hot Dog, Fries, Oreos, Cake, Candy Box, Chocolate, Strawberry… Man kann darüber ganz hungrig werden.
Nachteile des Burger-Menüs
Der Vorteil des Burgers ist sein Nachteil. Er versteckt. Für Platzersparnis und Eleganz zahlt man einen Preis. Er macht es schwerer, Seiten und Inhalte zu finden. Seine Kritiker murmeln „poor usability“, miese Nutzerfreundlichkeit.
▶ Der Weg zum Ziel kostet Seitenbesucher mehr Zeit, Aufmerksamkeit und Geduld. Je mehr Optionen in einem Hamburger untergebracht werden, desto mehr User fühlen sich überfordert und genervt. Burger bremsen die Nutzer aus. Wer sich nicht in den Seitenstrukturen auskennt, muss mehr klicken und gucken.
▶ Nicht jeder kennt das ≡ Burger-Symbol. Wer vorrangig mit Mobilgeräten ins Netz geht oder wer sich vorwiegend auf sehr modern gestalteten Seiten bewegt, wird das nicht verstehen. Doch eingefleischte Schreibtisch-Nutzer benutzen es seltener. Sie suchen eher nach Wörtern oder einem Knopf, nicht nach drei winzigen Strichen. Am PC spielt ≡ nur eine Nebenrolle.
▶ Konservative Web-Designer verzichten ganz darauf. Es gibt nämlich eine simple Alternative: „Menü“, vier Buchstaben und dazu vielleicht ein Pfeil. Die Anwälte der Barrierefreiheit wissen das zu schätzen. Nicht jedes Leseprogramm für Sehbehinderte kann das Symbol ≡ vorlesen.
▶ Hamburger sind technische Sorgenkinder. Sie sind interaktive Elemente, vergleichbar mit einem Akkordeon, das ebenfalls Inhalte versteckt, bis man den Befehl zum Öffnen gibt. Sie machen es Web-Crawlern der Suchmaschinen schwerer, den Inhalt einer Seite zu indexieren. Für die Suchmaschinen-Optimierung (SEO) ist das schlecht.
Expertenrat: „Wenn du die Navigation nicht verstecken musst, tu’s nicht“
„Hamburger-Menüs sind heute viel vertrauter als vor 10 Jahren“, schreibt Kate Kaplan im Blog der Nielsen Norman Group (NN/G), einer renommierten Agentur für User Experience (UX). „Die meisten erkennen das Hamburger-Menü und wissen, was es ist. Trotzdem haben wir es immer noch mit den alten Design-Risiken zu tun.“
Im Juni hat Kaplan in einem Artikel alte (2015/16) und neue Forschungsergebnisse ihrer Agentur verglichen, die in der Studie „Digital Icons That Work“ publiziert worden sind. Witzig: ein unterhaltsames Quiz zu den Web-Wegweisern auf der Basis des Buches.
Das NN/G-Fazit gestern und heute: Navigation muss so sichtbar sein wie irgend möglich. Hamburger sind sparsam einzusetzen. Nur dann, wenn man sie unbedingt braucht – und niemals in der Desktop-Ansicht. Denn…
- Besucher interagieren weniger mit Inhalt, der hinter einem Hamburger steckt.
- Wenn sie auf Seiten mit Hamburger-Menüs eine Aufgabe erfüllen sollen, sind die Besucher weniger erfolgreich, brauchen mehr Zeit und sind weniger zufrieden.
- Die Probleme tauchen sowohl auf Mobil- wie Desktop-Seiten auf, aber bei Nutzern einer Desktop-Ansicht sind sie sogar schlimmer.
Heute ist der Burger, so Kaplan, „ein Klassiker geworden“. Er wird leicht erkannt. Es wird eher zum Problem, wenn Websites versuchen, ein ähnliches Piktogramm für andere Funktionen einzuführen, etwa Filter oder Listenansichten. Das geht tendenziell schief, weil die User eine klassische Hamburger-Menühilfe vermuten. Vor allem, wenn das Zeichen dort steht, wo typischerweise Navigationselemente stehen, nämlich links oben.
Klassiker hin, Klassiker her: Nur weil der Wiedererkennungswert der Burger gewachsen ist, sinke damit weder der Klickaufwand, noch werde der Seitenbesucher effizienter und zufriedener. Die Wahrheit bleibt bestehen: Ein Burger erleichtert das Navigieren nicht, er erschwert und bremst es.
„Wenn es nicht notwendig ist, die Navigation zu verstecken, tu’s nicht“, mahnt Kaplan. „Vertrautheit allein gleicht keine grundlegenden Nachteile aus. Ausgeblendete Navigation verursacht immer Interaktionskosten. Die Benutzer müssen jedes Mal zusätzliche Schritte gehen, und wichtige Inhalte bleiben außer Sichtweite.“
Ein klassischer Burger kann, so Kaplan, auch schnell übersehen werden:
- wenn er nicht links oben steht, wo ihn die meisten Leute erwarten.
- wenn er relativ zu anderen Grafikelementen zu klein ist, besonders in der Desktop-Ansicht.
- wenn er nicht „klickfähig“ aussieht, also zu flach und nicht hervorgehoben wirkt wie ein Knopf/Schaltfläche.
- wenn er zu nahe an andere grafische Elemente heranrückt.
Wir werden unsere Burger-Platzierung daraufhin einmal genauer untersuchen müssen.
Immerhin: Das Bildungsportal folgt schon der Empfehlung, auf jeden Fall zusätzlich zum Hamburger immer weitere Navigationshilfen anzubieten, etwa eine gut sichtbare Suchleiste, Linklisten und menüartige Links in Spalten und im Fußbalken (Footer).
Wer hat’s erfunden?
Als Erfinder des Hamburger-Menüs gilt der US-Designer Norman Cox, der an grafischen Abkürzungen für die Workstation Xerox Star tüftelte. Das war 1981. Cox hat davon in einem Interview mit Medium.com erzählt. Xerox experimentierte mit neuartigen WIMP-Benutzeroberflächen, bei der man auf Symbole zeigte, Menüs und Fenster öffnete. Berühmter wurde damit Apple. Microsoft zog nach. Als 1985 das erste Windows auf die Welt kam, benutzte es Cox’ Widget.
Bei 2.0 war es aber wieder weg. Das Ding mit den drei Scheiben geriet fast in Vergessenheit – bis es mit den Smartphones in den 2000ern ein furioses Comeback erlebte. Mobilgeräte haben wenig Anzeigeplatz. Wer auf dem Klein-Display herumwischt, kann auf miniaturisierte Menüs nicht verzichten. Die meisten Leute kennen es aus Online-Shops, etwa Amazon. Die Großen des Internethandels bauten es früh ein.
Irgendeine hungrige Seele nannte es schließlich „Hamburger“. Der Name blieb kleben wie die Soße auf einem Big Mac.
- Kate Kaplan (2025, 13. Juni). „The Hamburger-Menu Icon Today: Is it Recognizable?“ Nielsen Norman Group NN/g.