Das Burger Menu

Geschrieben von Jenny Funk veröffentlich am in der Kategorie Design, UX

Was ist das Burger Menu? Ist es ein Trend? Und was gibt es eigentlich für Alternativen? Was hat es mit Progressive Menu und Tab Menu auf sich?

 

Das Burger Menu

  • ist erkennbar am „Burger Icon“
  • und dieses Icon ist tatsächlich ein abstrahierter „Hamburger“ (Brot-Frikadelle-Brot; außer www.apple.com, die haben nur zwei Apfel-Scheiben 😉)
  • ist ein sehr häufig diskutiertes Element im Bereich der Usability und User Experience
  • hat Synonyme -> Hamburger Menu -> Burger Navigation

 

Burger Menu Animation - wie sieht ein Burger Menu aus

 

Die Funktion 

 

Die Funktion heute

  • ist die Verschachtelung einzelner ansteuerbaren Bereiche (Navigation oder Menu) einer Website oder einer App
  • soll alle (oder die wichtigsten) auf dem Desktop erreichbaren Bereiche auch auf mobilen Geräten zugänglich machen

 

User Experience- und Usability-Engineers müssen Features wie das Burger Menu…

  • in einem entsprechenden Kontext betrachten
  • hinsichtlich Ergonomie und „Mensch-bedient-Computer“ diskutieren
  • in nutzer-sensitiven Branchen (u.a. Industrie und Medizin) aufkommende Trends, Neuheiten und Innovationen auf gute Handhabung und Erfolg testen

 

Deine Meinung

Ist das Burger Menu ein Trend?

 

Ein Trend…

  • hat Ursprünge oder Vorläufer
  • ist entstanden durch ein Bedürfnis
  • ist vergänglich
  • kann übertrieben häufig genutzt werden

 

Prüfe selbst, welche Eigenschaften „guter Features“ auf das Burger Menu deiner Meinung nach zutreffen:

  • Klar
  • Effizient
  • Intuitiv
  • Prägnant
  • Interessant/Attraktiv
  • Vertraut/Geläufig
  • Konsistent
  • Reagierend/Antwortend (responsiv)
  • Tolerant/Korrigierbar

Mit einem Blick auf die Eigenschaften wird deutlich, dass ein "Ja" oder "Nein" nicht einfach ist. Das zeigen auch folgende Argumentationen, die kein einmaliges "Dafür" oder "Dagegen" aufzeigen:

PRO 

  • je weniger Fläche desto eher Orientierung durch ein (bekanntes) Icon
    -> ABER: für Desktop-User ist dieses „pro“ ein „contra“: je mehr Fläche desto weniger Orientierung durch ein Icon
  • je bekannter ein Icon, desto schneller das Verständnis 
  • je größer die mögliche Navigation, desto platzsparender das Icon
  • trendfolgend

CON 

  • je weniger Gewissheit über Inhalte, desto mehr Zeit für die (erste) Orientierung
  • je weniger Einblick in Produkt/Unternehmen, desto unsicherer desto skeptischer der Nutzer
  • je wichtiger die Navigation, desto häufiger muss das Icon aufgerufen werden 
  • je häufiger der Einsatz, desto beliebiger das Feature

Je nach Zielgruppe, Zielsetzung und Kontext sei also überlegt, ob ein Burger Menü sowohl auf mobile als auch auf Desktop seinen Zweck erfüllt und bei der Zielerreichung - für den User und damit für das Business - behilflich ist.

 

Alternativen zum Burger Menu

Progressives Menu (engl. „progressively/stepwise navigation“)

Progressives Menu beim Guardian Progressives Menu bei dn.se

Progressives Menu bei bento

 

Dropdown Menu

Dropdown Menu bei Bloomberg Dropdown Menu bei Bloomberg ausgeklappt

 

 

Bottom Menu

  • Häufig in Apps zu finden (Bsp. Apple Store)

 

Bottom Menu

 

Tab Menu

beide Beispiele sind auf zweiter Ebene und innerhalb eines Burger Menus erreichbar

Tab Menu bei zalando Google Tab Menu

 

Weiterführende Artikel

 

Die Zukunft und das Fazit

Die Annahme ist, dass Vielfalt die Kreativität belebt 😊 https://www.usabilityblog.de/5-richtungsweisende-trends-fuer-uxler-in-2018/. Es wird Zeit, dass neue Wege ausprobiert werden – mit Sicherheit werden auch wir navigierende Features, Strukturen und Inhalte direkt in mobilen Anwendungen neu denken, gestalten und testen!

 

Artikel-Tipps

Charakteristiken guter Features: http://usabilitypost.com/2009/04/15/8-characteristics-of-successful-user-interfaces/

Grundlagen der Dialoggestaltung: http://www.handbuch-usability.de/iso-9241.html .

Vorteile vs. Nachteile Burger Menu: https://www.nngroup.com/articles/hamburger-menus/

Wo & wann einsetzen? https://uxplanet.org/when-to-use-a-hamburger-menu-199d62f764aa