Hamburger-Navigations-Icon auf Smartphone: Text-Button funktioniert besser

Interessante A/B-Tests zeigen dass ein Text-Button mehr Umsatz generiert und öfters geklickt wird als das oft benutzte Hamburger-Navigations-Icon.

Hamburger-Navigations-Icon-Beispiel

Das Hamburger-Icon ist für Smartphone-Websites und Apps zu einem beliebten Navigationselement geworden. Doch wie verständlich ist dieses Icon? Aus unserer Erfahrung in Usability Tests ist längst nicht allen Benutzern klar, dass sich hinter dem Icon ein Navigationsmenü versteckt. Das Icon hat 2 Nachteile:

  1. Verständlichkeit: Das Hamburger-Icon ist nicht selbstsprechend (Drei Striche können verschiedene Dinge bedeuten)
  2. Sichtbarkeit: Wenn nur 3 Striche ohne Rahmen verwendet werden, sieht das Icon nicht wie ein Button aus

Dies untermauern auch drei interessante A/B-Tests im Internet. Hier zusammengefasst die Ergebnisse der 3 Tests.

1. Ein Rahmen um das Hamburger-Icon führt dazu dass es mehr geklickt wird

Der Grund ist vermutlich, dass das Hamburger-Icon dann wie ein Button aussieht.

Hamburger Icon mit Rahmen wird oefter geklickt als ohne Rahmen

http://exisweb.net/mobile-menu-icons

2. Der Text „Menu“ führt dazu dass der Button öfter geklickt wird

Menu Button wird öfter geklickt als Hamburger Button

http://exisweb.net/mobile-menu-abtest

3. Der Text „Menu“ führt zu mehr Umsatz

MenuButton bringt mehr Umsatz als Hamburger Icon

http://conversionxl.com/testing-hamburger-icon-revenue/

 

Zusammengefasst kann man sagen

  • Überlegen Sie sich wer Ihre Zielgruppe ist. Kennt diese das Hamburger-Icon wirklich? Im Zweifelsfall schreiben Sie „Menu“ hin.
  • Verwenden Sie einen Rahmen um das Wort „Menu“ oder um das Hamburger-Icon, um zu zeigen, dass diese klickbar sind
  • Vor dem Go-Live: Machen Sie Usability Tests mit der Zielgruppe, um herauszufinden was besser funktioniert
  • Nach dem Go-Live: Machen Sie A/B-Tests, um herauszufinden was besser funktioniert

Zusammenfassung-MenuButton-funktioniert-besser-als-Hamburger-Icon-Empfehlung

Andreas Bossard

Möchten auch Sie die Bedienung ihres Produktes verbessern?
Gerne unterstützen wir Sie. Wir freuen uns auf Ihre Anfrage.

2 Kommentare zu “Hamburger-Navigations-Icon auf Smartphone: Text-Button funktioniert besser

  1. Grossartige Zusammenstellung die es wunderbar auf den Punkt bringt. Was haben wir schon über die eine oder andere Variante diskutiert!

    Gelegentlich ist es ganz gut dass das burger-menu nicht zuerst beachtet/geklickt wird, da wir die User durch den Inhalt navigieren. Es kann sogar völlig egal sein ob jemand da jemals draufklickt, Hauptsache ist die Conversion. Dann stellt sich die Frage anders: Wird es gefunden wenn man es wirklich sucht und braucht? Ich denke – aus eigenen Erfahrungen – das Burger-Menu hat sich in allen aufgeführten Variationen etabliert. Enorm wichtig ist jedoch auch die Platzierung und diese muss Erwartungskonform sein.

    Die Platzierung wäre auch ein Test-case für eine Studie … Besonders im Umgang mit Logos, die gerne die linke Ecke beanspruchen.

  2. Hallo Sven

    Vielen Dank für deinen Input.

    > Dann stellt sich die Frage anders: Wird es gefunden wenn man es wirklich sucht und braucht?

    Genau das ist die wichtige Frage.

    > Enorm wichtig ist jedoch auch die Platzierung

    Aus meiner Erfahrung ist dies weniger wichtig, solange es klar von anderen Elementen wie Logo unterscheidbar ist. Wichtig ist zuerst mal dass das Icon 1. gesehen wird und 2. man sieht was sich dahinter verbirgt.
    Darum bin ich im Blog Post auf diese 2 Punkte eingegangen. Ein erster Schritt wäre nur schon, wenn alle Hamburger-Icons einen Kontrast von 4.5:1 hätten. ( https://soultank.ch/2014/09/2-tools-fuer-gute-kontraste-damit-texte-wieder-lesbar-werden/ ) Noch besser wäre ein Rand drumherum, damit sie wie ein Button aussehen und noch besser wenn „Menu“ irgendwo steht, damit man weiss was sich dahinter verbirgt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.