Das Hamburger-Menü im Webdesign: Ein Muss für Websites?

Es wurde aus der Not heraus geboren, klingt lecker und ist bei Webdesignern umstritten: das sogenannte Hamburger-Menü. Das Design-Element hat sich zwar mittlerweile etabliert, trotzdem sollten Sie über Alternativen nachdenken.

Was ist das Hamburger-Menü?

Als Hamburger-Menü bezeichnet man das Icon mit drei horizontalen Strichen, das auf immer mehr Websites links oder rechts oben zu sehen ist. Klicken die Nutzer und Nutzerinnen darauf, öffnet sich eine Navigation mit Menüpunkten. Die Bezeichnung stammt daher, dass die Striche mit einem stilisierten Hamburger verglichen werden.

Warum setzt man das Hamburger-Symbol ein?

Im Webdesign hat es sich durchgesetzt, Websites „responsive” (zu Deutsch „reagierend”) zu gestalten. Das heißt: Die Elemente einer Website werden an das jeweilige Endgerät angepasst. Auf einem Desktop-Browser sehen die Inhalte daher anders als auf einem Tablet- oder Smartphone-Browser aus.

Mit der Einführung der Smartphones verbreitete sich auch das Hamburger-Menü-Icon, denn auf den kleinen Displays können die meisten Website-Navigationen mit ihren vielen Menüpunkten nur schwer bis gar nicht dargestellt werden. Das Hamburger-Menü hilft: Der Button fasst die komplette Navigation zusammen. Klicken die User und Userinnen auf den Button, öffnet sich in der Regel eine vertikale Navigation.

Die Geschichte des Hamburger-Menü-Icons

Das, was wir heute als Hamburger-Menü bzw. Hamburger-Symbol bezeichnen, hieß ursprünglich „air vent”. Der englische Begriff steht für Lüftungsschlitze, wie sie zum Beispiel bei Klimaanlagen zu sehen sind. Diese alte Bezeichnung trug dazu bei, dass sich das Icon im Gedächtnis einbrannte.

Heutzutage denken beispielsweise Designer und Designerinnen eher an die drei Schichten des Hamburgers: oben und unten das Brötchen, dazwischen der Belag. Wie es zu der Umbenennung von „air vent” in „hamburger” kam, ist nicht klar.

Quelle: Screenshot Evernote

Erfinder des Icons ist der Designer Norm Cox. Er gestaltete das Symbol im Jahr 1981 für die grafische Benutzeroberfläche des Computersystems Xerox Star. Da Cox für das Icon nur wenige Pixel Platz hatte, zeichnete er drei horizontale Striche. Diese sollten eine Liste darstellen.

Hamburger-Menü: Beispiele

Sehr oft sehen Sie das Hamburger-Menü bei der Smartphone-Variante einer Website. So setzt Microsoft die drei Striche in der Mobil-Variante seiner Homepage ein.

Quelle: Screenshot Microsoft

Ähnlich hält es Apple. Wobei das Hamburger-Symbol bei Apple.com aus nur zwei Strichen besteht.

Quelle: Screenshot Apple

Etwas anders sieht es bei Spiegel.de aus: Auf der Nachrichtenseite gibt es auch in der Desktop-Variante ein Hamburger-Menü. Es stellt eine Ergänzung zur normalen, horizontalen Navigation dar.

Quelle: Screenshot Der Spiegel (Desktop-Version)

Die Vor- und Nachteile des Hamburger-Menüs

Das Hamburger-Menü ist mittlerweile weltweit etabliert. Die Verwendung des Icons auf Ihrer Website geht außerdem mit folgenden Vorteilen einher:

• Das Icon verbraucht nur wenig Platz. Somit eignet es sich bestens, um die Navigation zu verschlanken. Der obere Teil einer Website oder einer App wirkt aufgeräumt, da es nicht so viele Menüpunkte gibt.
• Wenn Sie möchten, können Sie das Ausklappen der Navigation auf Ihrer Website mit einem Farb- oder Aufklapp-Effekt unterlegen. Das sorgt für Aufmerksamkeit und Abwechslung.

Den Vorteilen stehen folgende Nachteile gegenüber::

• Das Icon ist nicht so selbsterklärend wie das Drucker- oder Brief-Symbol. Weniger digital-affine Menschen verstehen nicht sofort, wofür der Button mit den drei Strichen stehen könnte.
• Dazu kommt: Eine Navigationsleiste hat einen Sinn, deshalb kommt sie bei der Desktop-Variante von Websites meist zum Einsatz. Mit dem Hamburger-Menü werden eventuell wichtige Informationen wie auch Menüpunkte „versteckt”.
• Die User und Userinnen müssen den Button zuerst anklicken oder -tippen, bevor sie sehen können, was sich dahinter verbirgt. Jeder zusätzliche Klick oder Tap kann allerdings dazu führen, dass sie womöglich das Interesse verlieren. Das resultiert wiederum in einer niedrigeren Conversion-Rate.

Tipps zum Aufbau des Hamburger-Menüs

Wie alles beim Webdesign sollten Sie auch den Einsatz des Burger-Menüs durchdenken. Überlegen Sie sich zuerst, ob Sie das Icon wirklich einsetzen möchten oder müssen. Gibt es vielleicht eine Alternative, die besser wäre?

Denken Sie außerdem an Ihre Zielgruppe: In westlichen Ländern lesen die Menschen von links nach rechts, in China oder Japan von rechts nach links. Diese gewohnten Lese- und Blickrichtungen sollten Sie bei der Platzierung des Buttons bedenken.

Achten Sie darauf, wie Sie das Burger-Icon gestalten. Fällt es zu schlicht aus, wird es wahrscheinlich häufig übersehen. Es bietet sich zum Beispiel an, einen Rahmen um den Button zu setzen oder ihn mit einer anderen Farbe zu versehen.

Stellen Sie sich zudem folgende Fragen: Benötigen Sie wirklich einen Effekt wie eine Animation oder eine Farbänderung, wenn ein Besucher oder eine Besucherin Ihrer Website auf das Symbol geht? Wird die Performance der Website dadurch beeinflusst? Kommt es eventuell zu technischen Fehlern? Gehen Sie diese Fragen durch und finden Sie eine individuelle Antwort.

Und zuletzt: Denken Sie an die Endgeräte der User und Userinnen! Auf Smartphones mit kleinen Displays bzw. geringen Auflösungen haben Sie weniger Platz, um die sich ausklappenden Menü-Punkte zu benennen, als auf großen Desktop-Bildschirmen.

Fazit: Ziehen Sie Alternativen zum Hamburger-Menü in Betracht

Überlegen Sie gut: Müssen Sie die Navigation Ihrer Website oder Ihrer App derart verschlanken, dass ein Hamburger-Menü notwendig ist? Experimentieren Sie vor der Entscheidung für Ihr Design mit verschiedenen Alternativen. Beispielsweise könnten Sie Ihre Menüpunkte als Icons darstellen, anstatt sie mit Worten zu benennen oder eine Navigation entwickeln, die auf Smartphones horizontal scrollbar ist. Möchten Sie nicht komplett auf das Icon verzichten, können Sie auch verschiedene Varianten kombinieren.

Titelbild: Tara Moore / iStock / Getty Images Plus