Die Nachteile des Hamburger-Icons...

Überall taucht es auf - das Hamburger-Icon mit den drei horizontal parallel verlaufenden Balken. Manchmal auch eingerahmt in einem Kreis oder einem Rechteck. Hinter diesem Icon versteckt sich in vielen Fällen die mobile Navigation einer Webseite oder einer App. In anderen Fällen ein erweitertes Menü oder allenfalls eine Filterfunktion.

Nutzertests und die Theorie sagen uns aber, dass wir das Hamburger-Icon nicht verwenden sollten. Einige Gründe dafür:

• Ein Icon soll dem Nutzer primär zeigen, wofür es steht (Icon Usability von Aurora Bedford). Das Hamburger-Icon kann allenfalls für eine Liste von irgendwelchen Inhalten stehen. Es gibt aber keinen Anhaltspunkt, dass sich eine Navigation dahinter verbirgt.
• Wird ein Hamburger-Icon eingesetzt, bleibt oftmals vordergründig die komplette Navigation versteckt. Möchte ein Nutzer sich über die Inhalte und die Seitenstruktur orientieren, muss er dafür immer zuerst auf das Icon drücken. Ausserdem: Was man nicht sieht geht vergessen. Somit kann man davon ausgehen, dass daraus weniger Klicks resultieren.

Was nun?

Anscheinend ist das Hamburger-Icon nicht gut. Ersetzen wir es also einfach durch eine Alternative. Nur, gibt es überhaupt Alternativen und sind diese auch wirklich besser? Oder können wir eventuell am Hamburger-Icon selbst Anpassungen vornehmen?

Der Text-Button

Eine Alternative ist die drei horizontalen Balken durch das Wort «MENU» zu ersetzen. Somit ist allenfalls das Problem gelöst, dass das Icon nicht selbstsprechend ist.

Mobile Menu AB-tested

Umbauen der Navigation

Man könnte beispielsweise auf mobilen Geräten eine Tab-Navigation wie auf iOS anbieten. Das funktioniert gut, wenn man nur wenige Navigationspunkte hat. Ist dies nicht der Fall, muss die Navigation um eine Dimension erweitert werden. Und wieder wäre man beim Hamburger-Icon angelangt.

Eine Tab-Bar, wie sie in der Facebook-App auf iOS vorkommt (http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/)

Kontext geben

Das Icon allein könnte man mittels dem Wort «MENU» erweitern, um dem Nutzer zu zeigen, was sich dahinter versteckt.

Mobile Menu AB-tested

Eine gute Variante schlägt Adrian Zumbrunnen vor: Anzeigen von «MENU» wenn man auf die Webseite gelangt und Ausblenden dieses Wortes, sobald das Hamburger-Icon einmal aus dem sichtbaren Bereich verschwunden ist. So lernen Nutzer während der Benutzung wie das User Interface zu bedienen ist.

Interaktivität fördern

Drei horizontale Balken, dazu noch im Flat Design gehalten, fordern den Nutzer nicht direkt auf, darauf zu klicken. Indem man aus dem Hamburger-Icon einen Button macht, das Icon also einrahmt und allenfalls graphisch hervorhebt, zeigt man dem Nutzer ein klickbares Element an.

Challenge: Re-Imagining the Hamburger Icon 

Wer setzt nun das Hamburger-Icon ein?

Trotz unzähligen Artikeln welche gegen das klassische Hamburger-Icon sprechen, wird es weiterhin zahlreich eingesetzt. Sogar Meinungsbilder im Webbereich verwenden es auch nach Redesigns immer noch. Einige Beispiele sind: The Next Web, Techcrunch, Awwwards oder Smashing Magazine.
Im Gegenteil, man könnte sogar sagen, dass das Hamburger-Icon an Beliebtheit gewinnt. Dies vor allem auch deshalb, weil immer mehr Webseiten in einer respnsiven/mobiletauglichen Version zur Verfügung stehen und daher eine Lösung für die mobile Navigation benötigen. Es scheint, dass diese Variante der Navigation trotz aller Kritik sehr erfolgreich ist. Das Hamburger-Icon ist ein universelles Icon und ist visuell kompakt. Haben es Nutzer einmal erkannt und das Prinzip verstanden, was viele bereits getan haben, ist der Wiedererkennungswert und die Benutzerfreundlichkeit sehr hoch.

Fazit von netnode - Webagentur von Luzern

Aufgrund der oben beschriebenen Fakten sehen wir zurzeit also keinen Grund, auf das Hamburger-Icon zu verzichten. Selbstverständlich nehmen wir aber, wo angebracht, graphische Optimierungen zur besseren Erkennbarkeit vor.
Während einem Projekt besteht ausserdem die Möglichkeit, die Bedienbarkeit verschiedener Navigationskonzepte der Webseite zu testen. Wir beraten Sie gerne über die diversen Möglichkeiten. Kostenlose Beratung anfordern