Bei vielen Nutzertests wirft das Burger-Menü Fragen auf. Sowohl von unseren Kunden, wie auch von Nutzern. Wir reden hierbei aber keineswegs über Einen BigWhopper oder einen McSteakhouse, sondern über die drei übereinander liegende Striche. So manch ein Mensch sieht darin 2 Brötchenhälften und ein Patty.
Das Burger-Menü ist eine Variante der so genannten verstecken Navigation. Im Klartext heißt das, dass die Elemente des Hauptmenüs nur durch eine Nutzeraktion (Klick auf das Burger-Icon) sichtbar werden.
Doch kommen wir nun zu unserer ersten Frage:
Wird das Burger-Icon überhaupt erkannt?
Leider kann ich diese Frage nicht mit einem klaren Ja, oder einem klaren Nein beantworten. Auf Smartphones wird das Burger-Icon sehr gut angenommen. Bei Desktop-Seiten gab es allerdings häufiger Probleme. Die Gründe dafür sind relativ einfach:
Auffindbarkeit:
Smartphone-Displays sind natürlich deutlich kleiner als Desktop-Computer. Das Burger-Icon kann bei großen Bildschirmen sehr schnell zwischen den anderen Seitenelementen untergehen.
Verständnis
Als die ersten Smartphones mit Touchscreens herauskamen, mussten sich Designer und Entwickler Gedanken machen, wie große Navigationen auf den kleinen Bildschirmen passend dargestellt werden. Das Burger-Menu eignete sich dafür hervorragend. Doch es gab ein Problem: Kein Mensch kannte dieses Icon. Es musste also von jeder einzelnen Person neu erlernt werden. Mittlerweile haben wir aufgrund der hohen Verbreitung von Smartphones dieses Problem nicht mehr. Es gibt Niemanden, der auf seinem Smartphone noch nicht mit dem Burger-Icon in Berührung kam. Wohl aber gibt es viele Leute, die mit einem Smartphone und damit logischerweise auch nicht mit dem Burger-Icon in Berührung kamen. Dadurch können diese Menschen auf kein Vorwissen zurückgreifen und sind erstmal verwirrt.
Design
Das Burger-Icon kommt in den verschiedensten Formen vor. Dies sind einige typische Varianten:
In sämtlichen Usability-Test sind die Varianten mit „Label und Rahmen“, sowie „Burger mit Label und Rahmen“
für die Nutzer am eingängigsten gewesen. Sprich: Das Menü wurde als solches erkannt und auch benutzt.
Welche Nachteile bringt das Burger-Menü?
Das Burger-Menu hat sehr viele Vorteile. Um diese kümmern wir uns allerdings erst später. Fangen wir mit den Nachteilen an:
1. User übersehen das Icon oder kennen den Sinn des Icons nicht
Wie grade eben schon angesprochen kennen einige (vor allem ältere Menschen ohne Zugang zum Smartphone) das Burger-Icon nicht. Außerdem ist das Icon sehr klein und geht dadurch unter. Doch der wohl größte Nachteil an dieser versteckten Navigation ist die schlechte Sichtbarkeit. Wichtige Funktionen oder Inhalte verstecken sich unter dem Icon und werden erst durch einen Klick sichtbar. Bei der Konzeption der Webseite ist dies eine weitere Hürde und benötigt eine sehr gute Konzeption.
2. Ein zusätzlicher Tap oder Klick wird zwingend benötigt.
Gehen wir einmal davon aus, dass die Menschen das Icon sofort verstanden haben. Das Icon muss dennoch immer angeklickt oder angetippt werden. Das erfordert eine weitere Nutzerhandlung und ist ineffizient. Schließlich muss das Menu (der Navigation) erst über einen zusätzlichen Klick geöffnet werden, bevor überhaupt die gewünschten Inhalte sichtbar werden.
3. Probleme bei der Implementierung
Es kommt bei bestimmten Betriebssystemen, wie iOS, bei der Implementierung des Burger-Menüs immer wieder zu Komplikationen, da die Standard-Navigationsstruktur darunter leiden muss. So gibt es leider Fälle, in denen so manch ein iOS-App-Entwickler die Navigationsleiste dermaßen überlädt, dass kaum Platz für den Titel bleibt. Bei iOS gibt es in der Navigationsleiste immer in der linken Ecke ein Pfeil für das zurückblättern. Hinzukommt noch das Suchsymbol, dass Burgermenü und der Titel der App. Ganz schön eng!
Welche Vorteile bringt das Burger-Menü auf Desktopgrößen?
Das dass Burgermenü auf mobilen Geräten fantastisch läuft, sofort erkannt wird und praktisch alternativlos ist, wissen wir jetzt. Unser größtes Sorgenkind ist der Desktop. Denn für ihn wurde das Burger-Menü nicht konzipiert.
Dennoch besteht grade für Webseiten, bei denen zufälliges Browsen im Vordergrund steht ein massiver Vorteil: Bei Webseiten wie Google-Plus, YouTube oder Pinterest spielt das Menü keine große Rolle, da sich die Nutzer durch den Seiteninhalt scrollen oder die Suchfunktion benutzen. Da im typischem User-Journey Menüs nicht benutzt werden, können solche Seiten der Navigation hinter dem Hamburger Menü eingeklappt werden. Im Web-Design geht es in erster Linie darum Inhaltselemente nach ihrer Priorität anzuordnen um Nutzer so gezielt durch die Seite zu führen. Wenn das Ziel der Seite darin besteht ein konkretes Ziel auszuführen, beispielsweise das Eintragen in einen Newsletter, oder der Anmeldung zu einem Event und so weiter. Hier würde eine große Navigation mit vielen Elementen ablenkend wirken. Hier sorgt das kleine und feine Burger-Icon dafür, dass das Auge des Nutzers auf die tatsächlich gewünschten Elemente fällt.
Gilt der Grundsatz „mobile first“ auch für die Navigation?
Der Grundsatz, dass eine Webseite in erster Linie mobil optimal dargestellt werden muss hat sich in die Köpfe der meisten Webdesigner eingebrannt. Ich persönlich bin aber kein Fan von „mobile First“ oder „Desktop First“. Menschen verwenden nicht nur ein Gerät und lassen das andere verstauben. Eine Webseite muss auf allen Geräten top aussehen. Aus diesem Grund sollte bei der Konzeption und bei der Gestaltung der Webseite sowohl mobil wie auch Desktop berücksichtigt werden. Viele Nutzer benutzen tagsüber ihr Smartphone, sehen ein interessantes Produkt, schreiben sich dieses auf und schauen am Abend auf dem Laptop oder am Rechner nochmal genau nach diesem Produkt.
Eine Webseite sollte daher niemals nur für ein Gerät konzipiert werden. Eine tolle mobile Seite bietet lange nicht die Grundlage für eine tolle Desktop-Seite. Andersrum gilt das Selbe. Kleine Elemente am Desktop lassen sich wunderbar mit der Maus ansteuern. Auf dem Smartphone wird das aber deutlich schwieriger. Ein platzsparendes Burger-Icon auf dem Desktop verhindert unter Umständen, dass alle Inhalte wahrgenommen werden und die klassische Navigation passt auf kein Smartphone-Display.
Welche Art die Navigation für dein Projekt das Richtige ist, entscheidet sich vor allem durch den Content deiner Seite. Denn diese Inhalte entscheiden, wie wichtig eine sichtbare Navigation ist. Ebenso wichtig ist das Ziel deiner Seite, sowie die Zielgruppe deiner Seite. Auch hier bleibt ein User Research unabdingbar.
Fazit:
Das Burger-Menü ist zeitgemäß und kann je nach Zielgruppe, Ziel der Seite und Content perfekt in das Konzept passen. Doch es gibt erhebliche Nachteile die ein Designer im Blick haben muss. Jedes UI-Element muss sich dem zentralen Ziel deiner Seite unterordnen.