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

Hamburger-Menü – Ja oder Nein?

Agnieszka Walorska 7. Juli 2014

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

Please leave this field empty.

Ähnliche Artikel

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 […]

5 Day Sprint

Produkt in nur einer Woche validieren? Geheimnis hinter Erfolg von Slack und nest

Bei der Entwicklung von neuen Produkten existieren zunächst viele ungeklärte Fragen: Welches Problem soll für welche Zielgruppe gelöst werden? Welche Funktionen sind hierfür erforderlich? Erfüllt das Produkt die Erwartungen der Nutzer? Was ist den Nutzern besonders wichtig? Um planen zu können und mit der Umsetzung zu beginnen, gilt es daher stets eine ganze Reihe von Annahmen zu […]

Design, Design Thinking, Computational Design

Wieso Design zum entscheidenden Faktor erfolgreicher Unternehmensführung geworden ist

Während Design meist mit „schön aussehen“, der attraktiven Gestaltung von Produkten, gleichgesetzt wird, bedeutet es heute wesentlich mehr. Statt nur eine isolierte Tätigkeit der Designer zu sein, umfasst Design einen Mindset, der einen kreativen Prozess über das gesamte Unternehmen hinweg mit dem Ziel etabliert, den Kunden besser zu verstehen und seine Bedürfnisse bestmöglich zu erfüllen. Kreativität kein Selbstzweck Kreativität […]

Alle Artikel

Trends 2016

Trends 2016: Blockchain

Trends 2016: Blockchain – Automation of Trust

Unserer Prognose vom Vorjahr entsprechend hat der Finanzsektor 2015 eine große Dynamik erlebt. Dabei vollzogen Banken insbesondere in einem Teilaspekt einen grundlegenden Sinneswandel: der Blockchain. Während die Skepsis etablierter Player gegenüber der Digitalwährung Bitcoin nach wie vor dominiert, sind sich unterdessen alle Banken einig, dass die Blockchain alles im Banking grundlegend verändern wird. Weit über den Finanzsektor hinaus wird sie 2016 […]

Trends 2016: API-Economy

Trends 2016: The API-Economy

Die Disruptoren von morgen erfinden das Rad nicht neu: Sie orchestrieren existierende Services virtuos zu einem überragenden Benutzererlebnis, das es ihnen mit sehr geringem Ressourcenaufwand ermöglicht, mit Großunternehmen zu konkurrieren. Warum APIs auf die strategische Agenda eines jeden CEOs gehören und warum ein überragendes Benutzererlebnis zum zentralen erfolgsentscheidenden Faktor wird.  

Trends 2016: Battle of Platforms

Trends 2016: Battle of Platforms – Death of the Open Web

Die dezentrale und offene Struktur des Internets gehört zu den architektonischen Grundprinzipien dieses aus dem ARPANET hervorgegangenen Netzwerks. Seine ersten Erfolge bei einem Massenpublikum erzielte es in der zweiten Hälfte der 1990er-Jahre jedoch innerhalb eines geschlossenen Ökosystems: AOL. Die Komplexität der Nutzung wurde den Kunden von AOL ebenso verborgen wie die mitunter qualitativ minderwertigen Inhalte eines derart anarchischen […]

Trends 2016: Messaging as Platform

Trends 2016: Messaging as Platform

Stellt das natürlichsprachige Interface die nächste Evolutionsstufe in der Kommunikation mit dem Computer dar? Gelingt es Facebook und Slack, die Vormachtstellung von Apple und Google als Inhaber der mobilen Betriebssysteme und App-Stores zu beenden? Und welche Konsequenzen haben diese Entwicklungen für die Digitalstrategie eines jeden Unternehmens?

Trends 2016: AI-Revolution

Trends 2016: The AI-Revolution

2015 war von einer beispiellosen Dynamik auf dem Gebiet der künstlichen Intelligenz (Artificial Intelligence/AI) gekennzeichnet. Diese Entwicklung wird sich 2016 weiter beschleunigen und AI zu einem zentralen Faktor in der Strategie eines jeden Unternehmens werden lassen.

Alle trends