CREATIVE CONSTRUCTION | Digital Innovation - delivered. » Hamburger-Menü – Ja oder Nein?

Hamburger-Menü – Ja oder Nein?

7. Juli 2014 Agnieszka Walorska (@agaw)

Mit der exponentiellen Verbreitung der Facebook-Mobile-App verbreitete sich auch ein von Facebook genutztes Design-Pattern meist unreflektiert in anderen Apps und mobilen Website-Darstellungen: das sogenannte Hamburger-Menü (auch Navigation Drawer).

Hamburger Menü

Quelle: QBN

Mit einem Tap auf dieses in der Regel oben links angeordnete Menü-Element fährt ein Navigationsmenü von der Seite herein und ermöglicht es so, eine Vielzahl von Funktionen hinter einer aufgeräumten Oberfläche zu verstecken. Bei der Verbreitung wirkte Facebooks Prominenz für andere Mobile-Designer gleich doppelt als Rechtfertigung:

  • wenn Facebook mit seiner App derart erfolgreich sein konnte, musste das Hamburger-Menü schon irgendwie für alle Nutzer verständlich sein
  • selbst für den Fall, dass die Nutzer das Hamburger-Menü nicht verstanden haben sollten, würde die nahezu ubiquitäre Verbreitung der Facebook-App dafür sorgen, dass jeder diese Form des Menüs in Kürze versteht

Dies und die Erleichterung, im Design-Prozess keine harten Entscheidungen hinsichtlich der Priorität von Menü-Punkten mehr treffen zu müssen, da alles nochso Irrelevante bequem in dieser neuen Form des Miscellaneous-Links untergebracht werden kann, hat das Hamburger-Menü zum dominanten Design mobiler Apps und Websites werden lassen. Bei genauerer Betrachtung stellen sich diese Annahmen jedoch als Trugschluss heraus, haben doch Einführungen des Hamburger-Menüs zu einem Rückgang des User-Engagements von 50 Prozent geführt. Eine genaue Analyse der Sinnhaftigkeit dieser Navigation ist folglich geboten, möchte man mit der eigenen App keine Bruchlandung erleiden.

Was spricht gegen ein Hamburger-Menü?

  1. Schlechte Auffindbarkeit:
    Hinter dem Hamburger-Icon bleiben wichtige Features verborgen und werden erst durch einen Klick/Tap sichtbar oder überhaupt erst als Navigation erkennbar. „Aus den Augen, aus dem Sinn“ – jede Navigationsoption, die nicht direkt gesehen wird, läuft Gefahr, nicht erkannt, vergessen oder zumindest sehr viel weniger genutzt zu werden. Um zu verstehen, dass sich hinter dem Button eine bzw. mehrere Aktionen verstecken, benötigt der Nutzer zunächst etwas Zeit. Eine sofortige Orientierung innerhalb der Navigationsstruktur ist daher nicht möglich.
 Auch Usability-Tests zeigen, dass es viele Nutzer gibt, die verzweifelt nach der Navigation suchen und erst sehr spät oder auch gar nicht darauf kommen, den Hamburger zu benutzen. „Wie komme ich denn jetzt weiter?“ oder „Was muss ich denn jetzt machen?“ sind nur einige der Fragen, die bei Nutzertests mit einer Hamburger-Navigation häufig gestellt werden. Das mangelnde Nutzerverständnis könnte durch die folgenden Nutzerkommentare nicht deutlicher zur Geltung kommen:
    Hamburger-Menü Usability
    Quelle: Layer Vault

  2. Ineffizienz: 
    Selbst wenn die Nutzer sich im Klaren darüber sein sollten, dass sich hinter einem Hamburger die Navigation befindet, bleibt ein Problem: das Menü muss zunächst geöffnet werden, damit alle Objekte gesehen und schließlich erreicht werden können. Das bedeutet mindestens einen Tap/Klick mehr, um die Zielfunktion zu erreichen. Dabei ist es auch nicht sonderlich hilfreich, dass der Hamburger meistens links oben angeordnet wird – der Stelle, die in der gängigsten einhändigen Smartphone-Nutzung mit der rechten Hand am schwersten zu erreichen ist.
  3. Konflikt mit Navigationsmustern:
    Problematisch ist außerdem das Konfliktpotential mit bestimmten Betriebssystemen. In iOS beispielsweise kann die Hamburger-Navigation nicht einfach implementiert werden, ohne in Konflikt mit den Standard-Navigationsmustern zu stehen.

    Der linke Button der Navigationsleiste sollte eigentlich für das Menü verwendet werden, aber Nutzer müssen auch die Chance bekommen zurück zu navigieren. Designer begehen in diesem Fall häufig den oben abgebildeten Fehler und überladen die Navigationsleiste teilweise sogar so sehr, dass nicht einmal Platz für den Titel bleibt.

Was spricht für ein Hamburger-Menü?

Geräte mit kleinen Screens haben wenig Platz für Informationen und können durch die Verwendung einer versteckten Navigation den Platz sparen, den sie für die Darstellung der Inhalte der jeweiligen Seiten brauchen. Das Responsive Webdesign benutzt beispielsweise sehr häufig diese Methode, um das „große“ Navigationsmenü der Website für eine mobile Seite anpassen zu können.

Für Websites wie etwa Google+ oder Pinterest, bei denen zufälliges Browsen das dominante Navigationsmuster ist, spielt es keine große Rolle, ob die Navigation versteckt ist. Auf diesen Seiten navigiert der Nutzer typischerweise nicht über die einzelnen Menüpunkte, sondern scrollt sich durch den Content. Die Anbieter dieser Seiten können ihre Navigation verstecken, da sie im überwiegenden Teil der User Journeys nicht verwendet wird.

Fazit: Hamburger-Menü – oder lieber nicht?

Für Seiten, wie Pinterest mag der Hamburger-Button eine gute Idee sein, bei den meisten Websites und Applikationen sind sichtbare und selbsterklärende Navigationselemente jedoch unverzichtbar. Eine Navigation sollte den Nutzer abholen, ihm zeigen, was er auf der Seite finden und wie er sie benutzen kann. Seit Jahrzehnten werden Menü-Labels wie „Miscellaneous“, „Andere“ oder „Mehr“ deswegen als Design-Fehler bezeichnet: sie lassen keine Vermutung darüber zu, was sich hinter ihnen verbirgt. Indem man ein solches nichtssagendes Label nun einfach durch ein nichtssagendes, aber trendiges Icon ersetzt, hat sich an dem Grundproblem nichts geändert.

Es kann Sinn ergeben, belanglose Features, die nur sehr selten genutzt werden, in einem Hamburger-Menü zu verstecken. Ob diese dann überhaupt beinhaltet sein sollten und die Fokussierung klar genug ist, bleibt damit allerdings unbeantwortet. Man schneidet sich jedoch ins eigene Fleisch, wenn die wichtigsten Funktionen hinter einem Hamburger verborgen bleiben und dem Nutzer der Weg dorthin erschwert wird. Die Entwickler haben zu hart an den einzelnen Funktionen gearbeitet, um sie hinterher vor dem Nutzer zu verbergen. Wichtige Funktionen sollten für den Nutzer sichtbar sein und somit die Chance haben genutzt zu werden.

Diese Erkenntnis scheint sich unterdessen auch bei Facebook durchgesetzt zu haben: so wurde der App-Header inzwischen entschlackt, indem die zentralen Navigationselemente in einen stets sichtbaren Tab-Balken ans untere Ende des App-Screens verschoben wurden. Dort befindet sich nun auch nach wie vor ein Button mit der Anmutung eines Hamburger-Menüs, die Funktionsweise wurde gegenüber der klassischen Hamburger-Navigation jedoch deutlich abgeschwächt: während eine Hamburger-Navigation eine Menü-Leiste von der Seite in den Screen schiebt und somit der ganze Screen durch diese ausgetauscht wird, bleiben die Hauptmenüpunkte des Tab-Balkens konstant sichtbar.

Facebook Hamburger Menü

Facebook Hamburger Menü vor der Umstellung

Facebook Tab-Bar

Facebook Tab-Balken nach der Umstellung

Facebook scheint damit einen Mittelweg aus der permanenten Zugänglichkeit zentraler Navigationselemente und dem Verbergen weniger intensiv genutzter Features zu suchen.

#####

Wir freuen uns auf Ihre Nachricht!

Sie haben ambitionierte Pläne und benötigen Unterstützung? Wir freuen uns darauf, von Ihnen zu hören!

Kontakt aufnehmen

Bitte lasse dieses Feld leer.

Ähnliche Artikel

Bots noch im Anfangsstadium

Tech-Landschaft im Umbruch durch Abo-Modell und Bots

Für 2017 und die nächsten Jahre zeichnen sich grundlegende Veränderungen in der Tech- und Medienlandschaft ab, die sowohl die Landschaft im Ganzen neu strukturieren, als auch die Machtverhältnisse in den einzelnen Segmenten beeinflussen werden. Verschiebungen in der Medienlandschaft: Gaming und Messaging wachsen am stärksten Der Konsum von Medien wird in den nächsten Jahren insgesamt ansteigen; das größte […]

Fokusgruppen: der beste Weg um Innovation im Keim zu ersticken

Während sich 89 Prozent der Unternehmen in diesem Jahr durch Customer Experience von der Konkurrenz abheben wollen, haben nur ein Viertel der Führungskräfte in unserem Digital Maturity Assessment angegeben, dass sie ihre digitalen Produkte nutzerzentriert entwickeln. Ein Drittel der Unternehmen gibt jedoch an, ihre Kunden in Form von Fokusgruppen einzubeziehen. Viele Unternehmen greifen gerne auf die Fokusgruppe zurück, weil sie eine bequeme und […]

Artificially Intelligent Design(er). Das Ende der User Experience wie wir sie kennen?

Auf der IA Konferenz in Berlin sprach unsere Geschäftsführerin Agnieszka Walorska zum Thema: Artificially Intelligent Design(er). Das Ende der User Experience wie wir sie kennen? Den Beitrag gibt es nun hier zum Nachlesen: Artificially Intelligent Designer from CREATIVE CONSTRUCTION HEROES GMBH Ich habe vor etwa 10 Jahren angefangen, in dem Bereich Customer Experience zu arbeiten. Zu […]

Alle Artikel

Trends 2017

Trends 2017: Frictionless Travel

Die Reisebranche war eine der ersten Branchen, die durch die Digitalisierung grundlegend verändert wurde. Am meisten waren hiervon zunächst die Reisebüros betroffen. Während noch zur Jahrtausendwende die Urlaubsplanung fast zwangsläufig mit dem Besuch eines Reisebüros verbunden war, kann heutzutage jeder selbst seine Reise einigermaßen bequem im Internet planen und zusammenstellen. Auf Basis aktueller technologischer Entwicklungen […]

Trends 2017: Insurance – On-demand transparency

Durch die Digitalisierung werden Daten zum Kern eines jeden Geschäftsmodells. Für Versicherungen ist dieser Umstand nichts Neues: Daten ermöglichen die Einschätzung von Risiken und standen daher schon immer im Zentrum ihrer Analysen. Mit der Verbreitung von Smartphones in jeder Tasche, Sensoren an jedem Handgelenk und dem Teilen von Inhalten über eine Vielzahl von Plattformen erleben wir […]

Trends 2017: Humanizing healthcare through technology

Das Jahr 2016 war von einer Reihe bahnbrechender Entwicklungen im Gesundheitsbereich gekennzeichnet. Algorithmen können Krebs-Therapien empfehlen, 3D-gedruckte Prothesen sind bereits im Einsatz und Telechirurgie und Telemedizin sind nicht mehr wegzudenken. Genomsequenzierung, Internet of Things, Konnektivität, immer günstigere Sensoren und Hardware, Machine Learning – der Einsatz von Technologie könnte (auch wenn das paradox klingen mag) zur Humanisierung […]

Alle trends