Vor- und Nachteile vom Burger-Menü

Das Burger-Menü siehst Du ständig irgendwo. In erster Linie auf dem Smartphone. Doch in den letzten Jahren schleicht sich dieses Ding auch auf den Desktop. Das gefällt mir überhaupt nicht. Es gehört da nicht hin.

Bevor Du, der Du dieses Menü vielleicht gerne siehst und verwendest, mich teeren und federn willst, gib mir fünf Minuten, um mich zu erklären.

Sinn und Zweck des Burger-Menüs

Das Bürger-Menü ist ein klassisches Überlaufmenü. Es versteckt Menüpunkte, die nicht ständig angezeigt werden sollen. Sei es, weil ihre Anzeige zu viel Platz verschwenden würde, oder weil es zu viele (unwichtige) Menüpunkte sind, was auf das Selbe hinausläuft. Halten wir fest: Es soll Platz sparen. Und das klappt wunderbar. Mit einem Klick sieht der Nutzer alle verfügbaren Optionen und kann sie genauso schnell wieder verschwinden lassen. Prima.

Besonders bei Anwendungen fürs Smartphone ist das Burger-Menü eine tolle Sache, denn Platz ist auf den kleinen Bildschirmen Mangelware. Hier ist der Einsatz des Menüs oft gerechtfertigt.

Auf dem Desktop

Was auf dem Smartphone beinahe vorbehaltlos eingesetzt werden kann, hat auf dem Desktop (allg. Geräten mit größeren Bildschirmen) nichts verloren. Die Sache mit dem eingesparten Platz ist auf Endgeräten im Desktopformat und auf größeren Tablets nicht mehr so wichtig. Dort schadet dieses Überlaufmenü mehr als es nützt. Folgende Nachteile des Menüs überwiegen hier den Vorteil der Platzersparnis:

  • Aufwand: mind. ein Klick mehr, um zum gewünschten Menüpunkt zu gelangen
  • Mögliche Optionen sind erstmal versteckt (nachteilig gegenüber ständig sichtbaren Menüpunkten)
  • Nicht jeder Nutzer kennt das Burger-Menü (Burger wird nicht als Schaltfläche erkannt)

Ist das Burger-Menü nicht zwingend erforderlich, dann setze es nicht ein. Nur weil das gerade jeder macht, ist es nicht Maß aller Dinge. Soweit genügend Platz vorhanden ist, kann ein Menü ruhig offen daliegen. Beispielhaft für den ungerechtfertigten Einsatz des Menüs ist die vor Kurzem umgestaltete Seite vice.com. Der freie Raum in der oberen Leiste der Desktop-Version hätte es auch getan. Jetzt könnte man anführen, dass deren Zielgruppe jung, internetaffin und mit dem Burger-Menü vertraut ist. Aber nicht jeder weiß, wozu der Burger gut ist. Auch wenn er seit Jahren praktisch omnipräsent ist, kann nicht davon ausgegangen werden, dass alle darüber Bescheid wissen. Denk an Deine älteren Verwandten, die hin und wieder Deine Hilfe bei der Mutter aller IT-Probleme brauchen – dem Drucker. Besonders sie würden sich über die einfachst mögliche Menügestaltung freuen. Und genau darum geht es.

Wenn Burger-Menü, dann richtig

Auf mobilen Geräten mit kleinen Displays ist es manchmal unumgänglich. So einfach das Burger-Menü auch scheint, gibt es doch ein paar Details, auf die es ankommt:

Erstmal sollte die Schaltfläche nicht zu klein sein. Ja, der Platz ist rar, hier aber gut investiert. Ein Beispiel:

Burger Menü Beispiel

Eigenlob stinkt, aber das ist einfach eine saftige, große Schaltfläche. Trotzdem nicht perfekt. Dazu gleich mehr.

Neben der Größe kommt es auch auf die Technik an. Hast Du nicht auch schon ein so langsames, ruckelndes Menü erlebt, dass Du es nur noch von seinem Leid erlösen wolltest? Genau. Das passiert ständig. Also wie verhindern wir das jetzt?

Animationen sind schon trendy. Aber genau wie bei PowerPoint-Präsentationen ist – was die Animationen angeht – weniger mehr. Wenn Du nicht ganz darauf möchtest, dann verwende CSS-Transitions. Mit Javascript lassen sich Menüs auch animieren, aber das Ergebnis ist langsamer – vor allem auf schwacher Hardware.

Falls Du Optimierungen von Animationen auch so spannend findest, dann ist der Artikel CSS Animations vs. Javascript bestimmt was für Dich.

Mit dezenten, flotten Animationen und einer großen Schaltfläche fehlt nur noch der Weg zurück aus dem Menü. Bei meinem RNA-Menü wird der Burger in einer kleinen Animation gedreht und ein weiterer Klick auf ihn schließt das Menü wieder:

Ausgeklapptes Burger Menü

Auch wenn sich der Burger dreht und damit seine Funktion in Bezug auf das Menü verdeutlicht, wäre es besser, die drei Stiche beim Öffnen durch ein X zu ersetzen.

Weiter vereinfachen ließe es sich, wenn der Burger durch das geschriebene Wort Menü ersetzt würde. Nach dem Öffnen könnte anstelle vom X dort schließen stehen. Ausgeschriebene Wörter kollidieren aber eventuell mit dem Design einer Seite.

Ob Burger oder Wort, das ist letztlich eine Ermessensentscheidung. Hier ein paar Beispiele für verschiedene Schaltflächen:

Verschiedene Arten des Burger-Menüs

Es gilt zwischen den schlanken Streifen und der selbsterklärenden, dafür sperrigeren Variante mit Text abzuwägen. Kombinationen sind ebenfalls möglich.

Alternativen

Natürlich existieren andere Möglichkeiten, um auf Mobilgeräten ein brauchbares Menü zu bauen. Zum Beispiel lassen sich die Kernfunktionen in einer Menüleiste am unteren Bildschirmrand platzieren. (Aussagekräftige und verständliche Icons – evt. durch Text ergänzt – vorausgesetzt.) Instagram macht das so:

Instagram App-Menü

Praktisch dabei ist die leichte Bedienbarkeit, denn ein Menü am unteren Bildschirmrand ist näher am Daumen vom Smartphone-Nutzer.

Im obigen Beispiel sind nur die Kernfunktionen abgebildet. Weil selten alle Optionen in eine horizontale Leiste passen, kannst Du eine Kombination von Überlaufmenü und ständig angezeigten Kernfunktionen einsetzen:

Überlaufmenü

Damit sind die häufigsten Bedienelemente immer sichtbar. Außerdem lässt ihre Nähe zum Überlaufmenü unerfahrene Nutzern leichter erkennen, wo sich weitere Optionen verstecken.

Fazit

Ein Burger-Menü ist auf Smartphones eine nützliche Funktion, während es auf größeren Displays nichts verloren hat. Wenn es zum Einsatz kommt, dann achte darauf, eine große und auffällige Schaltflächen zu benutzen. Beim Einblenden sollte mit Animationen sparsam umgegangen werden. Ist das Menü entfaltet, muss der Nutzer sofort erkennen, wie er es wieder verlassen kann.

Schließen