Chroma Experience

Hamburger-Menü

2010 sah man erstmals auf Websites und in Anwendungen ein neues grafisches Oberflächenelement in Form dreier kurzer, paralleler Balken. Seither hat es sich als „Hamburger"-Icon etabliert. Wird das Icon angeklickt, öffnet sich die Navigation und legt sich über die Inhalte. Das Icon wechselt dann oft zu einem „Schließen"-Icon, das die ganze Fläche mit Navigationspunkten schließt und zurück zu den Inhalten führt.

Neonröhren als Hamburger Icon

Einfluss eines Hamburger-Menüs

Sichtbare Menüpunkte erleichtern den Umgang mit einer Bedienoberfläche und helfen dabei, sich schnell durch eine Anwendung zu navigieren. In qualitativen Studien wurde mehrfach unter Beweis gestellt, dass sowohl in Desktop- als auch in mobilen Anwendungen eine offene Navigation beliebter ist, als das Hamburger-Menü. Das Hamburger-Menü verlangsamt die Interaktionen erheblich. Dies gilt gleichermaßen für Desktop und mobile Anwendungen.
Um die Größe dieses Effekts in einer quantitativen Studie zu messen, hat sich die Nielsen Norman Group mit WhatUsersDo (ein auf Remote-Usability-Tests spezialisiertes Unternehmen) zusammengetan und eine Studie mit 179 Teilnehmern durchgeführt. Die Gruppe erhielt die Aufgabe, bestimmte Informationen auf sieben verschiedenen Websites zu finden.

Sowohl auf mobilen Endgeräten als auch auf Desktops wurde die Navigation deutlich öfter verwendet, wenn alle oder einige der Navigationspunkte sichtbar waren. Auf dem Desktop ist das versteckte (Hamburger-)Menü in nur 27% der Fälle geöffnet worden, während die offene oder kombinierte Navigation fast doppelt so häufig genutzt wurde. Auf mobilen Endgeräten wurde in 57% der Fälle die versteckte Navigation und in 86% der Fälle die kombinierte Navigation verwendet. Die Studie zeigte ebenfalls, dass die Navigation allgemein, ob versteckt oder teilweise sichtbar, auf mobilen Endgeräten öfter verwendet wurde als auf dem Desktop. Wenn die Navigation sowohl auf dem Desktop als auch auf dem mobilen Endgerät ausgeblendet war, brauchten die Teilnehmer länger um sie zu verwenden, als wenn sie offen oder teilweise offen war.

Diese Ergebnisse zeigen, dass eine versteckte Navigation deutlich seltener genutzt wird, als eine offene oder kombinierte Navigation.
Quelle: https://www.nngroup.com/articles/hidden-navigation-methodology/

Wann ist ein Hamburger-Menü sinnvoll?

Wenn wir uns nicht von den oben beschriebenen Einwänden beeinflussen lassen und das Hamburger-Menü nutzen wollen, könnten folgende Fälle für diese Entscheidung sprechen:

Wir wollen mithilfe des Hamburger-Menüs Nebenfunktionen ausblenden. Wenn die wichtigsten Navigationselemente und Funktionen unserer Anwendung sichtbar sind, können wir sekundäre Optionen, die nicht den primären Zielen dienen, mittels Hamburger-Menü ausblenden.

Auch wenn uns der Platz für sekundäre Optionen zur Verfügung steht und wir nicht möchten, dass die Seite ein zu hohes Maß an Interaktionsmöglichkeiten bietet, kann das Hamburger-Menü ein probates Hilfsmittel sein. So kann eine Reizüberflutung beim Betrachtenden vermieden werden.

Wann sollte das Hamburger-Menü vermieden werden?

Das Hamburger-Menü sollte nicht genutzt werden, wenn Funktionen, Optionen oder Einstellungen, die dabei verborgen werden, wichtig oder zentral für das Ausführen der User Tasks sind. Diese Optionen oder Menüpunkte sollten stets zur Verfügung stehen.

Bevor die Entscheidung zur Verwendung eines Hamburger-Menüs getroffen wird, sollte zunächst definiert werden, welche Interaktionsmöglichkeiten der Anwendung essentiell sind und welche Risiken das Verbergen von Menüpunkten birgt.

Ein weiterer wichtiger Aspekt, sofern ein Menüpunkt im Hamburger-Menü versteckt wird, ist die Anzahl auszuführender Klicks um das gewünschte Ziel zu erreichen. Zusätzliche und vor allem unnötige Klicks entfernen den Benutzer von seinem Ziel und tragen maßgeblich zu schlechter User Experience bei.