Warum das "Burger-Icon" schlecht ist ...

Fast überall ist es zu sehen, in vielen Apps und auf vielen Websites.
Das Burger-Icon.
Viele Nutzer wissen aber gar nicht was hinter dem und anderen Icons versteckt ist.

PlayStore Mobile Menü Icon
Burger Icon – Google PlayStore

Tests haben gezeigt dass ein Button mit der Beschriftung „Menü“ deutlich besser funktioniert und wahrgenommen wird [1]. Aber warum nutzen so viele Frameworks (Bootstrap, Foundation, …) und Templates (Ja, sogar mein WordPress-Theme) das Burger-Symbol?
Der Nutzer stand bei der Implementierung des Icons wohl eher weniger im Fokus. Viel eher stand das Aussehen und wie man möglichst viel Platz an der Stelle spart (denn dort muss oft noch ein Logo oder Titel rein) im Mittelpunkt. Klar, für diesen Fall ist ein einfaches kleines Icon perfekt.

Slack - Menü Button
Deutlicher Menü Button – Slack.com

Am Beispiel der Website von Slack.com kann man allerdings sehen, wie es funktionieren kann. Das Menü ist in der mobilen Ansicht klar als Button zu erkennen, auf der rechten Seite (gut für Rechtshänder) und wird zum „X“-Symbol. Der Nutzer weiß hier in jedem Fall was ihm hinter „Menü“ erwartet, nämlich das Menü. Die klare Hervorhebung als Button ist dabei ebenfalls essentiell.

Das Burger-Icon ist natürlich eine platzsparende Alternative, aber hier sollte die Nutzerperspektive nicht außer Acht gelassen werden. Denn sie, die Nutzer, haben oft keine Ahnung was es bedeutet oder (viel schlimmer noch) erkennen nicht, dass es sich dabei um ein Button handelt, den sie drücken können.

Slack Close Button
Menü schließen – Slack.com

Des Weiteren kann die Position (links oder rechts oben) auch eine wichtige Rolle spielen. Denn für Rechtshänder ist das Menü besser zu erreichen, wenn das Icon auch rechts liegt [2]. Gerade bei großen Smartphones ab 5 Zoll ist ein Menü-Button oben links als Rechtshänder schwer und nur mit Umgreifen zu erreichen.

Wie Smartphones mit einer Hand bedient werden - uxmatters.com
Wie Smartphones mit einer Hand bedient werden – uxmatters.com

In einem Beitrag über „Icon Usability“ wird folgendes zusammengefasst [3]:

A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

Ob ein Nutzer ein Icon versteht, hängt demnach immer damit zusammen, wie viele Icons der Nutzer schon vorher gesehen und genutzt hat. Da es keine Standards für die meisten Icons gibt, sind Icon-Beschriftungen für die Bedeutung und Vermeidung von Mehrdeutigkeiten notwendig.

Was denkst du über das Burger Icon?
Dein Feedback kannst du gerne im Kommentarbereich posten.

Update 17. August 2015: 

Ein ausführlicherer Artikel hierzu auf deep.design: The Hamburger Menu Doesn’t Work. It’s a beautiful, elegant solution that gets it all wrong, and it’s time to move on. (EN)

Quellen und weiterführende Links:
[1] Mobile UX Part 1: Menu burgers and navicons – peakusability.com.au
[2] Hamburger menu icons – should they be on the left or right? – ux.stackexchange.com
[3] Icon Usability – nngroup.com

Bildquellen:
– Slack.com
– Google PlayStore
– uxmatters.com

Weiterempfehlen:

2 Gedanken zu „Warum das "Burger-Icon" schlecht ist ...“

  1. Hallo Christian,

    interessanter Artikel.

    Ich bin mir zwar nicht sicher wo der „Hamburger“ ursprünglich her kommt, aber auf meinem Handy erschien er zum ersten mal zusammen mit dem „Navigation Drawer“ in Android. Die ersten Apps sind anfangs mit dem Menu im offenem Zustand gestartet da viele Nutzer noch nicht so wirklich wussten was es damit auf sich hat. Diese „Eingewöhnungszeit“ scheint jetzt aber langsam vorbei zu sein, zumindest ist der Hamburger so langsam überall und wird nur noch selten erklärt.

    Hast du Erfahrungen damit wie man so ein neues Bedienkonzept am besten einführt? Schick aussehen tut er ja, nur wirklich sonderlich intuitiv ist er beim ersten mal nicht, da hast du recht.

    Cheers,
    Philipp

  2. Hallo Philipp,

    vielen Dank für dein Feedback!

    Dass die ersten Apps anfangs mit dem geöffneten Menü gestartet sind, ist mir gar nicht so bewusst gewesen. Das ist natürlich eine Möglichkeit die Irritationen mit dem Icon zu umgehen. Ich denke da erlernt der Nutzer relativ schnell den Umgang.

    Auf der anderen Seite möchte ich das als Nutzer vielleicht nicht immer bei jeder App wegdrücken müssen (auch wenn es nur beim ersten Start wäre). Auch als App-Entwickler möchte ich nicht, dass ich meinen super coolen App-Startbildschirm mit dem Menü überlagern muss, wenn der Nutzer die App zum ersten Mal öffnet.

    Zu deiner Frage, wie man so ein Bedienkonzept am besten einführt. Meiner Meinung nach funktioniert das nur mit zuvor durchgeführten Nutzertests eines Prototypen. Fünf bis zehn qualitative Nutzer reichen meist schon aus um eine Tendenz auszumachen. Man kann auch verschiedene Ansätze (A/B Tests) durchtesten, um zu sehen, was am besten funktioniert.
    Wenn dort herauskommt, dass ein grüner Button mit dem Text „Menü“ besser wahrgenommen wird, dann sollte ich diesen wahrscheinlich auch verwenden.
    Eine Ausnahme würde ich nur machen, wenn das Menü (oder das, um was es in dem Test eben ging) nicht wichtig für den eigentlichen Zweck ist. Bspw. wenn keine wichtigen Funktionen hinter dem Menü liegen, die für die App/Website entscheidend sind.

    Das grundsätzliche Problem sind aber die Icons. So eindeutig wie sie manchen erscheinen sind sie gar nicht.
    Das habe ich auch schon bei einem einfachen „Kommentar schreiben“ Icon in einer App gemerkt. Einer findet eine Sprechblase aussagekräftig. Der Nächste dann einen Bleistift. Wieder ein anderer denkt beim Bleistift eher an das „Editieren“ von etwas. Man könnte auch ein Papierflugzeug wie bei manchen E-Mail-Clients nehmen…

    Wie löst du solche konzeptionellen Fragen?

    Viele Grüße,
    Christian

Kommentare sind geschlossen.