Der Burger-Mythos: Jeder kennt sicher das Experiment mit dem niemals verwesenden Burger.
Tage, Wochen, sogar Monate vergehen, aber der Burger hält und geht nicht ein.

Die Frage stellt sich, wie lange es dauert, bis der momentan in der UX-Design-Welt so kontrovers diskutierte aber umso exzessiver verwendete Menü-Burger eingeht und wieder von den Screens verschwindet. Zahlreiche Blogs wettern dagegen und wollen ihn am liebsten aussterben lassen.

Von welchem Burger reden wir hier eigentlich?

Burger-Brötchen oben und unten und dazwischen alles rein was in den Fleischwolf passt und sich der Kunde wünscht. Die bekannten drei Streifen oben links oder eben rechts.

Das Menü-Icon ist mittlerweile weit bekannt und wird von den meisten als Button zum Einblenden der Navigation wahrgenommen – zumindest von den jüngeren Zielgruppen und den web-affinen Älteren.

Was häufig als revolutionäres UX-Element der letzten Jahre gesehen wird, hat seine Wurzeln schon Anfang der 80er Jahre des letzten Jahrhunderts. Mit dem Xerox „Star“ (Vimeo – ab 21:05 min) wurden bereits Menüs bei einem der ersten grafischen User Interfaces mit den uns so bekannten Burger-Icon dargestellt. Die Idee ist also eigentlich alles andere als neu.

Warum ist der Hamburger als Menü-Icon so beliebt bei den Designern?

Nun, weil es einfach alle machen – würde bestimmt so mancher entgegnen. Als Navigationslösung für fast alle Apps und Mobile-Seiten verwendet und mittlerweile auch bei sehr vielen Desktop-Seiten den Header-Bereich schmückend muss der Hamburger wohl gut sein.

Nicht zu Unrecht…

Die Vorteile des Hamburger-Menüs

Hamburger-Icons sind schlicht, minimalistisch und lassen sich so gut wie überall im Design einfach einbinden. Man spart sich viel Platz und kann Flächen besser nutzen oder gewinnt durch den Einsatz des Hamburgers Weißraum, was zum zeitgemäßen cleanen Look beiträgt.

PRO

  1. schlicht / minimalistisch und so gut wie überall einsetzbar in das Design
  2. man kann so viele Patties reinlegen wie man möchte, Navigation problemlos erweiterbar
  3. schafft Platz
  4. der eingesparte Raum kann anderweitig genutzt werden (speziell im Mobile-Bereich ein großer Pluspunkt)

Man muss sich nicht mit dem Platzieren von Navigationspunkten auseinandersetzen. Wenn der Kunde ein oder zwei Navigationspunkte mehr wünscht, kein Problem. Die Navigationsliste wird dem User sowieso erst einmal vorenthalten und ausgeblendet.

Damit wären wir schon bei den Nachteilen…

Das Vorenthalten von Informationen (oder besser Navigationspunkten) und der dadurch erschwerte Interaktionsfluss sind absolut kontraproduktiv.

Nehmen wir an, Sie erreichen eine Seite und sehen keine Navigationspunkte. Das Erste was Sie wohl tun werden, ist die Seite zu durchstöbern und zu scrollen. Findet sich etwas Interessantes (Teaser, Schaltflächen, Links), klicken Sie es an und kommen hoffentlich auf die Seite mit dem für Sie ansprechenden Inhalt.

Wäre oben allerdings ein von Anfang an eingeblendetes Menü, würden Sie ohne Umwege und größere Suche direkt zum gewünschten Inhalt gelangen.

A/B Tests haben gezeigt, dass das Sichtbarmachen elementarer Navigationspunkte – also die Alternative zum Hamburger-Menü – eine deutliche Erhöhung der Sessions, der Verweildauer und des Engagements bewirkt haben.

User „irren“ weniger herum und kommen direkter zum gewünschten Inhalt. Das spart Zeit, Nerven und bindet User besser und länger an App oder Website.

CONTRA

  1. Bekanntheit nicht durchgängig vorhanden (einige Zielgruppen können mit den Icons nichts anfangen)
  2. Häufig unscheinbar bzw. geht unter (selten als Schaltfläche zu erkennen)
  3. Extraklick um die Navigation sichtbar zu machen
  4. Verbirgt Inhalte der Seite / App

James Foster, ein Web-Entwickler aus Neuseeland, stellte bereits das Hamburger-Icon gezielt auf die Probe und führte über mehrere Monate hinweg einen Usability Test durch. Das Resultat: Das Icon sei weit nicht so klar für Benutzer wie viele Designer und Entwickler zu glauben scheinen.

Die Alternative(n)

Facebook (iOS), Twitter, YouTube und viele weitere weichen mittlerweile auf Tabs als Navigations-Alternative aus. Klar kann man dabei nicht alle Punkte aus der Navigation bearbeiten. Muss man aber auch nicht.

twitter

Twitter.com

 

YouTube löst das Problem mit einem Hybrid aus Tab- und Hamburger-Navigation. Home, Subscriptions und Account sind über die Tabs erreichbar. Die restlichen Bereiche wie Einstellungen, Hilfe, Datenschutz etc. werden per Hamburger abgearbeitet.

youtube

Youtube.com

 

Ran an den üppigen Belag. Warum nicht „einfach“ die Struktur anpassen: Navigation überdenken, reduzieren wo es geht und vor allem priorisieren. Statt versuchen alles draufzupacken nur die wichtigsten Zutaten hernehmen und den Rest auf Tellerchen servieren. Wenn der User näheres zu einem Thema erfahren möchte, wird er den Weg über den Content nehmen (in Form von Links, Teasern und Schaltflächen) um zur relevanten Seite zu gelangen.

Fazit

Trotz der aktuellen Schlacht um den Burger und einigen Nachteilen, die diese Navigationsform mit sich bringt: Ganz ohne Hamburger-Menü wird es nicht immer funktionieren. Kritische und wichtige Funktionen sollten in Zukunft allerdings immer! sichtbar sein. Alles Weitere kann in den Burger.

Mahlzeit!

Zeit für einen neuen Anstrich?

Wir bringen Ihr Webdesign auf den neuesten Stand.

Kommentare

[js-disqus]
лечение зубных каналов ценакупить чехол для карповых удилищmegamixмейкапрfireworks decorationssunnic