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?

© 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.

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-Entwicklern (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 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 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 den Nutzer nicht direkt sichtbar und kann im schlechten Fall nicht angeklickt werden.

  • Ineffizienz: Auch wenn Nutzer bereits wissen, dass sich hinter dem Hamburger Icon ein Menü verbirgt, bedeutet es: Nutzer müssen Klicken. Nutzer sind aber faul und vermeiden jeden Klick. Im schlimmsten Fall ist es dem Nutzer 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.
    files/kontor4/images/aktuelles/2015/HamburgerIcon/huawei-ascend-mate-hand-264x300.jpg

  • Keine Neugier: Dadurch, dass die Nutzer nicht wissen, was sich hinter den Icon verbirgt, kann es selbst nicht dazu beitragen, Besucher 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 den Nutzer abholen und Ihm zeigen, was er auf der Seite findet. Weiterhin soll sie Ihm erklären, wie er diese Seite benutzen kann. 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 dem Nutzer 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 dem Anwender 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.

Aber auch bei der Kombination kann es sein, dass Nutzer, 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.
Die Google verwendet im Bilder-Menü herkömmliche Textverweise.

Ist die Funktion klar?

Anwender 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 verstehen die Funktion hinter den drei Balken und wissen sofort, dass es sich um das "verborgene" Menü handelt. Weniger versierte Anwender 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 das Menü-Icon benutzen. Alle Daten erzielten das selbe Ergebnis: Das Hamburger-Menü ist Anwendern nicht so klar, wie Webdesigner es vermuten.
In einem ersten Testlauf stellt er den Anwendern 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) 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 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!

Zurück

Legomännchen mit Werkzeug in der Hand - Werkzeuge für Ihr Business

Sie möchten auch von modernen Online-Tools profitieren und den Erfolg Ihrer Seite damit langfristig ankurbeln?