uxzentrisch erörtert:
Die Hamburger-Navigation: Usability-Schwierigkeiten und Alternativen

hamburger navigation

Komplexe Navigationen auf kleinen Bildschirmen abzubilden stellen den ein oder anderen Informations-Architekten vor eine größere Herausforderung.

Eine Hamburger-Navigation, oder Off-Canvas-Navigation, welche sich seitlich einfährt und über den Inhalt legt, scheint vielen die beste Lösung zu sein – Schließlich wird dies bei Facebook und Google vorgelebt.

Jedoch birgt das Pattern Hamburger-Navigation Usability-Probleme, wenn es unreflektiert eingesetzt wird.

Schwächen der Hamburger-Navigation

Auffindbarkeit

Viele Nutzer kennen das Hamburger-Icon und dessen Funktionalität nicht und vermuten dahinter erst gar nicht die Navigation.

Zu dieser Erkenntnis kamen exis web und zeebox in A/B-Tests.

Exis web lies in einem A/B-Test das Hamburger-Icon gegen einen Button mit dem Text »Menu« ins Rennen – Der Button mit »Menu« wurde häufiger angesteuert als das Hamburger-Icon.

Zeebox testete in ihrem A/B-Test die Hamburger-Navigation gegen eine immer sichtbare horizontale Navigation – Die Anzahl der Interaktionen  mit der horizontalen Navigation war wesentlich höher.

An diesem Pattern festzuhalten und dennoch die Auffindbarkeit gewährleisten zu wollen, führt unter Umständen zu seltsamen Blüten wie auf time.com. Das Hamburger Icon wird auf 2 Weisen erklärt. 1. Durch das sehr kleine Wort »Menu« unter den Icon und 2. durch ein Pop-Up, das auf die Funktionalität hinweist.

Ergonomie

Meistens ist das Hamburger-Icon oben links angeordnet. Auf Smartphones ist dies der Platz, der am schwierigsten mit dem Daumen zu erreichen ist.

tnav-touch-phones2

Lesenswertes dazu schrieb LukeW in seinem Artikel Responsive Navigation: Optimizing for Touch Across Devices und Designing for Large Screen Smartphones

Ineffizient

Auch wenn der Nutzer weiß, wie die Off-Canvas-Navigation mit dem Hamburger-Icon funktioniert, ist immer ein Tap auf das Hamburger-Icon notwendig, um die Navigation einzublenden. Erst dann erkennt der Nutzer, welche Navigations-Punkte oder Funtionalitäten sich unter dem Hamburger-Icon verstecken. Und bei jedem neuem Seitenaufruf ist die Navigation wieder ausgeblendet.

 

Mögliche Alternativen

Welche Alternativen und gibt es denn nun zu der Hamburger-Navigation?

Verzicht auf Hamburger-Navigation

Wenn möglich sollte auf die Hamburger-Navigation verzichtet und die Navigationspunkte direkt angezeitg werden. Jedoch ist dies nur dann eine Option, wenn sehr wenige Menüpunkte mit einer sehr niedrigen Navigations-Hierarchie vorhanden sind. Zu diesem Fazit kommt wie bereits beschrieben der A/B-Test von zeebox.

Eine weitere Optimierung dieser Navigation kann darin bestehen, diese beim Runterscrollen auszublenden, und beim hochscrollen direkt wieder einzublenden. So wird die Bildschirmhöhe optimal für die Darstellung des Inhalts ausgenutzt und die Navigation ist trotzdem schnell erreichbar. Dies ist am Beispiel von medium.com sehr gut zu sehen.

 

medium

Hybrid-Lösung

Besteht die Navigation aus vielen Navigationspunkten mit weiteren Unterkategorien, sehe ich momentan keine Alternative zur Hamburger-Navigation. Jedoch ist eine Hybridlösung ein guter Kompromiss. Primäre Ziele, die die Nutzer häufig aufrufen, können außerhalb der Hamburger-Navigation angezeigt werden und sind so für den Nutzer direkt sichtbar und aufrufbar.

Auf forbes.com werden die Navigationspunkte »Home«, »New Posts« und »Popular« nebem dem Hamburger-Icon angezeigt und sind dadurch direkt ansteuerbar.

Die einzelnen Rubriken hingegen verstecken sich hinter der Hamburger-Navigation.

f1    f2

 

Zeit.de verzichtet ebenfalls nicht komplett auf die Hamburger-Navigation. Jedoch verstecken sich dahinter nur sekundäre Funktionen wie beispielsweise die Schriftgröße ändern oder den Inhalt in Social Networks zu teilen.

Die Nachrichten- Rubriken sind hingegen über den Navigationspunkt »Ressorts« aufrufbar.

z1  z2

 

Fazit

Trotz allen Kontras sehe ich momentan für komplexe Navigationen auf kleinen Bildschirmen die Hamburger-Navigation als sinnvoll an. Sie gibt dem Inhalt den größtmöglichen Platz. Geöffnet wird ein klarer Fokus auf die Navigation gelegt und auch hier wieder der beschränkte Platz gut ausgenutzt. Beim Einsatz sollten einem jedoch die Schwierigkeiten bewusst sein, die die Hamburger-Navigation mit sich bringt und wie man den Schwierigkeiten begegnen kann.

Was habt ihr für Erfahrungen mit der Hamburger-Navigation gemacht? Kennt ihr andere Best Practices?

 

8 Kommentare

Peter vor 11 Monaten

Zum Kapitel »Ergonomie«: Linkshänder sehen das naturgemäß anders, und wer ein Phlabet hat, dem ist in diesem Punkt eh nicht mehr zu helfen ;-)

Tamim Swaid uxzentrisch vor 11 Monaten

Die Wichtigkeit der »Sichtbarkeit« von Inhalten zeigt sehr schön dieser Tweet von LukeW: https://twitter.com/lukew/status/454637989503590400

Niclas vor 11 Monaten

Im September hat Booking.com seine Test-Ergebnisse (Hamburger-Icon vs. »Menu«-Button) veröffentlicht. Und das Fazit: »In our experiment, changing the icon to the word »menu« had no significant impact on the behaviour of our users.« Ganzer Artikel: http://blog.booking.com/hamburger-menu.html

Deshalb würde beim Punkt »Auffindbarkeit« mal widersprechen. Ich glaube, dass das Hamburger-Icon mittlerweile angekommen ist. Natürlich mag es bei einigen Zielgruppen noch Probleme geben aber die perfekte Lösung gibt es wahrscheinlich nicht.

Philipp vor 10 Monaten

Wir haben das Icon explizit bei einem Usability-Test untersucht. Auf der getesten Seite gibt es in allen Auflösungen nur das Hamburger Icon. Ergebnis: den Nutzern war die Navigation eigentlich völlig egal, so lange sie über Teaser oder die Suche zum Ergebnis gekommen sind. Nicht ein Nutzer hat explizit nach einer Navigation gefragt bzw. sie gesucht.

Tamim Swaid uxzentrisch vor 10 Monaten

Die Suche ist ja nicht die Alternative zur Navigation sondern wird auf Content Seiten dann genutzt, wenn die Navigation nicht hilfreich war.

Teaser im Content sind ja an sich eine Navigation zu Inhalten.

Der Punkt ist: Keiner weiß was hinter dem Hamburger steckt, bis er darauf klickt. Man muss sich bewusst sein das die Punkte, Funktionen, die man in einen Hamburger steckt, aus dem Blickfeld sind. Die Nutzer suchen nicht zwangsläufig dort danach.

Tamim Swaid uxzentrisch vor 10 Monaten

Ein weiterer interessanter A/B Test zum Hamburger / Icon / Menü: http://conversionxl.com/testing-hamburger-icon-revenue/

Peter Schramm vor 10 Monaten

Wie wäre es mit einer Lösung ohne Icon sondern mit einer Beschriftung der Navigation mit „Menü“, „Navigation“, o.ä. …? Ich denke, dann ist es schon viel offensichtlicher und sowohl Nutzer die eine

Klar man hat Platzprobleme, aber warum? Nur um ein für den Nutzer überflüssiges Logo anzuzeigen? Sieht man sich Zeit-Online auf einem Smartphone ein, nimmt das Logo ja schätzungsweise schon 20% – 25% im Portrait-Modus und 50% im Landscape-Modus des verfügbaren Platzes ein. Und das ist bei vielen anderen Seiten ebenso der Fall.

Nikolai Merk Autor vor 9 Monaten

Redbooth verabschiedete sich ebenfalls von der Hamburger-Navigation und stellten nach der Umstellung eine Steigerung der Nutzung-Dauer und Interaktionen fest.
https://redbooth.com/blog/hamburger-menu-iphone-app