Warum dir das Hamburger-Icon Deine Conversion killt

Hamburger Icon Conversion Rate

Kennt Ihr diese 3 Striche, die sich auf Apps und Webseiten verstecken und nicht wirklich aussagekräftig sind? Ich rede vom sogenannten Hamburger-Icon. Angefangen hat es auf Smartphones, doch in letzter Zeit beobachte ich es auch zunehmend bei klassischen Webseiten. Anstelle von einer offensichtlichen Navigation oder Menübenennung wird immer öfter das Hamburger-Icon eingesetzt. Warum ich davon abrate, zeige ich euch in diesem Beitrag.

Du willst deine Nutzer nerven? Dann nimm das Hamburger-Icon

Webdesigner lieben die 3 horizontalen Striche. So schön schlank und minimalistisch, nehmen nicht viel Platz weg und erzeugen keinen Aufwand bei der Erstellung. Programmierer wissen es auch nicht besser und der Marketing-Verantwortliche sowieso nicht. Also landet dieses Icon nicht nur in Apps und auf mobilen Seiten sondern auch zunehmend im Web.

Ursprünglich entstand das Hamburger-Icon, oder auch Triple-Bar genannt, schon in den 80er Jahren auf dem Xerox Star System. Es ist also keine Erfindung der Neuzeit. Schon damals erklärten die Entwickler potentiellen Nutzern das Icon als eine Art “Lüfter”. Es hat anscheinend schon damals niemand verstanden.

Wo verdammt ist denn hier das Menu?

Als Usability-Consultant schaue ich mir tagtäglich Aufnahmen von Usability-Tests an. Wenn ein Auftraggeber seine Webseite untersucht haben möchte und ich dieses “wunderbar verständliche” Icon entdecke, lenke ich mein Testdesign auch gerne mal in diese Richtung. Beispielsweise lasse ich bestimmte Seitenbereiche suchen, die sich nur mit der Menüleiste auffinden lassen.

Startseite mit Hamburger-Icon / responsive Ansicht
Startseite mit Hamburger-Icon / responsive Ansicht

So habe ich Nutzer gesehen, die genervt aufgegeben haben und nicht ein Mal auf die Idee gekommen sind auf diesen Bereich zu klicken. Andere gaben zudem zu Protokoll, dass sie es zwar gefunden haben, aber auch nur durch Glück und weil sie dieses Icon von einer App kannten.

Auch auf Applikationen sind Nutzer verwirrt

Ich bin natürlich nicht der Erste, der sich mit Icons uns ihrer Usability beschäftigt. Und der ein oder andere mag vielleicht auch sagen: “Das wird sich noch durchsetzen, das Lupen-Icon, kennt doch auch jeder.”

Richtig. Die Lupe kennt jeder, weil sie:

  1. weit verbreitet eingesetzt wird & dadurch Nutzer sehr vertraut sind
  2. ein “Suchen, Untersuchen oder Beleuchten” suggeriert

Beim Hamburger sieht die Sache schon anders aus. Es gibt ein paar wirklich interessante A/B-Test zum Thema Hamburger-Icon. Auf Exisweb finden sich gleich mehrere Studien, die sich mit der Conversion von verschiedenen Designs des Icons beschäftigen. Teilweise haben 22 % mehr Nutzer das Icon angewählt, wenn es umrandet bzw. benannt war. Auch hier war der Tipp: umranden bzw. benennen!

Ein unauffälliges Menu:

  • führt eher zum Verlassen der Seite, da Besucher sich schlechter orientieren können
  • erzeugt weniger Aufrufe der einzelnen Seiten, „stöbern“ wird unterbunden/erschwert
  • liefert Webseitenbesuchern weniger Informationen über die Leistung der Seite

Kenne deine Zielgruppe

Vielleicht setzen sich die 3 Balken ja irgendwann mal zielgruppen-übergreifend durch.

Grundlegend sind Nutzer eher mit dem Hamburger vertraut, wenn sie:

  • unter 30 Jahre alt,
  • shoppingaffin (online),
  • Smartphonebesitzer sind.

In den von mir untersuchten Usability-Tests konnte ich das ebenfalls beobachten. Übergreifend ist es immer wichtig seine Nutzer zu kennen. Bei der Seite Glücklich im Erzgebirge macht eine große Navigation nicht unbedingt Sinn, also wurde hier auf das Hamburger-Icon gesetzt. Ohne großes Hintergrundwissen, möchte ich behaupten, dass die Zielgruppe breit gefächert ist und sich zum Großteil auch aus älteren Nutzern zusammensetzt.

Ob das Icon wirklich alle verstehen bleibt eher zu bezweifeln. So gibt es etliche Beispiele im Netz, wo das Design nicht ansatzweise der Zielgruppe entspricht oder für diese verständlich ist.

Lösung – Mach es deutlich

Simpel ist gut – zu simpel aber nicht immer verständlich. Falls ihr euch die Studien zum Hamburger-Icon genauer angeschaut habt, dann seid Ihr sehr schnell zu einer ganz einfachen Lösung gekommen. Beim App-Design hilft eine Benennung des Icons / alternativ auch eine Umrandung. Für Webseiten empfehle ich eine Umrandung und Benennung, wenn Ihr schon nicht auf das Icon verzichten könnt.

Hamburger-Icon mit Beschriftung und Umrandung
Hamburger-Icon mit Beschriftung und Umrandung

Es versaut nicht euer Design, für eure Webseitenbesucher ist es verständlich und alle sind glücklich. Und noch ein Vorteil: Ihr erzieht eure Nutzer und lernt ihnen was, vielleicht setzt sich das Hamburger-Icon ja doch irgendwann mal so durch wie die Lupe.

Ich hoffe Ihr denkt zukünftig kurz drüber nach bevor Ihr dieses Icon (ab jetzt nur noch mit Benennung) einsetzt. Dann gönne ich mir jetzt mal einen Hamburger, zumindest entstehen hierbei keine Missverständnisse :).

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s