Warum das Hamburger-Icon die Conversion killt

Warum das Hamburger-Icon die Conversion killt

Claudia Heinze in User-Experience-Tipps
Lesezeit: 3 Minuten · 26. Oktober 2016
von | 26. Oktober 2016 | User-Experience-Tipps

Auf mobilen Endgeräten wird das Hamburger-Icon schon länger genutzt, neuerdings hält es jedoch auch auf Desktop-Geräten Einzug und ersetzt häufig eine klassische Hauptnavigation.

So hat auch die Telekom vor einigen Wochen ihr neues Webdesign gelauncht und setzt nun Device-übergreifend das „Hamburger-Icon“ als Hauptnavigation ein. Aus User-Experience-Sicht kein guter Schachzug… In diesem Beitrag möchte ich zeigen, warum.

Das Hamburger-Icon – ein Resultat von Mobile First?

Das Hamburger-Icon besteht aus drei horizontalen Strichen. Mit etwas Phantasie sehen diese aus wie ein Burger-Brötchen mit einem Fleisch-Patty dazwischen.

Seit die kleinen Bildschirme mobiler Geräte Einzug in unseren Alltag gehalten haben, ersetzt es immer häufiger eine klassische Hauptnavigation. Tatsächlich wurde das Icon jedoch schon in den 80er-Jahren von Norm Cox für das User-Interface des Xerox Star konzipiert. Danach ist es erst einmal lange von den Bildschirmen verschwunden.

Das erste Hamburger Icon

Xerox Star (Quelle: http://toastytech.com/guis/starbitmap2.gif )

Als Interface-Designer fühle ich mich selbst häufig verleitet, das schlichte Hamburger-Icon einzusetzen. Schließlich ist es platzsparend und sieht minimalistisch-cool aus – aus Designer-Sicht.

Dass es nun immer häufiger auch auf Desktop-Geräten eingesetzt wird, kommt wahrscheinlich durch eine Fehlinterpretation des Mobile-First-Ansatzes. Dank immer besser werdender Bildschirm-Auflösungen gibt es aber keinen Grund, diesen Platz auf Desktop-Geräten einzusparen. Im Gegenteil – hier 3 Gründe, warum das Hamburger-Icon auf Desktop-Geräten die Conversion killt:

1. Hamburger-Icons verstecken die Hauptnavigation

Der erste Eindruck einer Website wird bereits in den ersten Sekunden bestimmt. Die Hauptnavigation spielt an dieser Stelle eine wichtige Rolle, denn sie bietet einen schnellen Überblick über das Angebot der Seite. Außerdem hilft sie uns zu entscheiden, ob die Seite für uns relevant ist. Mit dem Hamburger-Icon müssen die Nutzer jedoch einen Klick mehr tätigen, um die Inhalte der Hauptnavigation zu sehen – wenn sie sie überhaupt finden.

Hamburger Icons verstecken die Hauptnavigation

Die Telekom versteckt gleich drei Navigations-Ebenen in einer (leider auch recht unübersichtlichen) Off-Canvas-Navigation, die nur über das Hamburger-Icon erreichbar ist. (Quelle: http://telekom.de)

Durch die Markierung des aktiven Menüpunkts bietet die Hauptnavigation dem Nutzer außerdem Orientierung, wo er sich auf der Website befindet.

2. Icons erhöhen den Lernaufwand für die Nutzer

Bedauerlicherweise ist das Hamburger-Icon – wie viele andere Icons – nicht selbsterklärend und erhöht somit den Lernaufwand für den Nutzer. Das Icon wird aktuell häufig ohne ein entsprechendes Text-Label „Menü“ eingesetzt.

Aus zahlreichen Usability-Tests wissen wir, dass besonders ältere Nutzer mit dem Hamburger-Icon wenig anfangen können und es in den meisten Fällen schlicht übersehen.

Hinter dem Hamburger-Icon steht die Metapher für eine – wohlgemerkt vertikale – Navigation. Kennt die Zielgruppe das Hamburger-Icon nicht, wird sie das aber kaum erahnen. Ohne ein Text-Label hat der Benutzer keinerlei Hilfestellung bei der Interpretation des Hamburger-Icons und klickt es unter Umständen nicht an.

Das Hamburger Icon erhöht den Lernaufwand

Auch der Telekom ist schnell aufgefallen, dass das Hamburger-Icon für ihre sehr breite Zielgruppe nicht selbsterklärend ist. Inzwischen verwenden sie daher – anders als direkt nach dem Relaunch – das zusätzliche Text-Label „Menü“. (Quelle: http://telekom.de)

Wurde ein Icon erst einmal erlernt, hat es jedoch einen stärkeren Wiedererkennungswert als Text – ein deutlicher Vorteil.

3. Hamburger-Icons sind kein guter Call-to-Action

Klickbare Elemente müssen auch klickbar aussehen, das ist ein wichtiger Faktor bei der Gewinnung von Klicks.

Exis schickte das Hamburger Icon gegen einen Hamburger Button (Hamburger-Icon mit Umrandung) in einen A/B-Test (http://exisweb.net/mobile-menu-abtest). Ergebnis: Der Button wurde häufiger verwendet als das Icon.

In einem zweiten A/B-Test (http://exisweb.net/menu-eats-hamburger) verglich Exis die Conversion eines Hamburger-Buttons (Hamburger-Icon mit Umrandung) mit dem eines Menü-Buttons (Text-Label „Menü“ mit Umrandung). Ergebnis hier: Die Anzahl der Klicks auf das Wort war ca. 20% höher.

Neben der Gestaltung als Button und der Verwendung eines Text-Labels, spielt auch Farbe eine wichtige Rolle dabei, Elemente klickbar erscheinen zu lassen. Dazu ist es wichtig, im Styleguide klar zwischen Auszeichnungs- und Interaktionsfarbe zu unterschieden. Das Hamburger-Icon sollte in der Interaktions-Farbe gekennzeichnet sein.

Hamburger Icons sind kein guter Call-to-Action

Das Hamburger-Icon der Telekom sieht durch seine hellgraue Farbe inaktiv aus. (Quelle: http://telekom.de)

Fazit – Schauen Sie auf Ihre Zielgruppe

Ich empfehle generell, auf den Einsatz von Hamburger-Icons auf Desktop-Geräten zu verzichten, da sie ein potenzieller Conversion-Killer sind. Falls Sie sich doch dafür entscheiden, ist ein ganzheitliches Verständnis Ihrer Zielgruppe und deren Nutzungsverhalten essentiell:

  • Mit Usability-Test erhält man qualitative Insights, wie das Hamburger-Icon gestaltet und positioniert sein muss, damit die Zielgruppe die Hauptnavigation verwendet.
  • Mit A/B- oder multivariaten Tests kann überprüft werden, welche Gestaltung und Positionierung die beste Conversion hat.
  • In der Webanalyse kann zudem verglichen werden, ob die klassische Hauptnavigation einer Website besser konvertiert, als das Hamburger-Menu.

Auf mobilen Geräten sollten drei Grundregeln für die Gestaltung des Hamburger-Icons beachtet werden:

  1. Hamburger-Icon mit Text-Label „Menü“ kombinieren
  2. Hamburger-Icon als Button gestalten
  3. Interaktions-Farbe für das Hamburger-Icon verwenden

Was halten Sie vom Hamburger Icon? Conversion-Killer oder doch praktikabel für Ihre Nutzer? Welche Erfahrungen haben Sie mit dem Hamburger Icon gemacht?

Mobile First oder Context First? Wann Mobile First die falsche Strategie ist

Mobile First oder Context First? Wann Mobile First die falsche Strategie ist

Martin Schröter in User-Experience-Tipps
Lesezeit: 4 Minuten · 14. Oktober 2016
von | 14. Oktober 2016 | User-Experience-Tipps

Steht man vor der Frage nach der idealen digitalen Strategie, hört man in letzter Zeit immer wieder den Begriff „Mobile First“. So geht es auch unserem UX-Berater Martin Schröter, der hier seine Erfahrungen und vor allem seine Meinung zu diesem Vorgehen mit Ihnen teilen möchte. Wann ist „Mobile First“ der richtige Ansatz und wann sollte man seine Verwendung noch einmal überdenken?

Ich schreibe diesen Artikel, weil ich mit einigen Missverständnissen aufräumen möchte. Missverständnisse bezüglich eines Begriffs, der uns in der digitalen Branche in den letzten Jahren immer häufiger begegnet: „Mobile First“.

Folgende Situation hatte ich schon häufiger in Projekten: Nehmen wir an es geht um den Relaunch einer Website – Es steht die Frage im Raum, welche digitale Strategie dabei verfolgt werden soll. Von Kundenseite heißt es dann oft sofort: „Mobile First!“

Diese Aussage wird dann untermauert mit aktuellen Statistiken zum mobilen Traffic auf Webseiten: „Viele Websites verzeichnen inzwischen mehr Aufrufe von Smartphones als von Desktop-Computern.“ oder „Der Verkauf von Smartphones hat den Verkauf von Laptops weltweit eingeholt.“

Ja, wir alle kennen diese Statistiken. Aber was sagen sie uns?

Was bedeutet Mobile First und wie wird der Begriff verwendet?

Bevor ich zurück zu diesen Statistiken komme, möchte ich ganz kurz erklären, was Mobile First eigentlich bedeutet.

Beim Mobile First Ansatz wird eine neue Website zuerst für mobile Geräte konzipiert und designt, bevor sie für die Desktop-Anwendung erweitert wird. Grundsätzlich klingt das erstmal gar nicht schlecht – wenn es richtig eingesetzt wird.

Die Frage „Mobile First oder nicht?“ zielt meiner Meinung nach aber an der eigentlich entscheidenden Frage vorbei, nämlich „Wem dient mein Produkt in welcher Situation und welches Problem löst es?“

Mobile First? – Context First!

Die Statistiken zeigen uns, dass Mobile ein unglaublich wichtiger Markt ist, der keinesfalls missachtet werden sollte. Was sie allerdings nicht verraten: Ist Mobile tatsächlich das, was die Nutzer meines Produktes brauchen?

Zu Beginn der Entwicklung eines neuen Produktes oder vor einem Relaunch sollte man sich daher die Frage stellen: „Was will mein Kunde mit meinem Produkt erreichen?“

Um diese Frage zu beantworten muss ich drei Dinge über mein Produkt ganz genau verstehen:

  • Wer nutzt das Produkt?
  • In welcher Situation wird das Produkt genutzt?
  • Welche Ziele verfolgt mein Kunde, wenn er dieses Produkt nutzt?

Dabei helfen uns Use Cases, Personas und Szenarien. Denn erst wenn wir verstehen, warum Menschen aus meiner Zielgruppe mein Produkt in einer ganz bestimmten Situation nutzen, können wir uns die Frage stellen, wie wir das Produkt umsetzen.

Ein Beispiel: Stellen wir uns vor, die fiktive Firma UX-Print hat ein Tool entwickelt, das dazu dient, großformatige Collagen zu erstellen und Fotos für den Posterdruck zu bearbeiten. Dem Nutzer werden eine Reihe sinnvoller Werkzeuge an die Hand gegeben, mit denen sich selbst kleinste Details der Bilder überarbeiten lassen.

Auf den kleinen Smartphone Bildschirmen dürfte das ein schwieriges Unterfangen sein. Es gibt schlichtweg Produkte, die für kleine Bildschirme nicht geeignet sind. Hier wäre „Mobile First“ daher fehl am Platz.

Wann mobile First nicht die richtige Strategie ist

Die Strategie „Mobile First“ ist fehl am Platz, wenn das Produkt für den Einsatz auf mobilen Geräten nicht geeignet ist, wie bei der Bearbeitung großformatiger Fotos.

Ich empfehle Ihnen stattdessen: Gestalten Sie eine informative Landingpage, die für mobile Geräte optimiert ist. Dort erklären Sie das Produkt, geben nützliche Tipps und bieten  ein Registrierungsformular an, mit dem man sich in wenigen Sekunden anmelden kann, um das Produkt dann auf einem größeren Bildschirm zu nutzen. So sind Sie trotzdem auf mobilen Geräten präsent, ohne den Nutzern eine schlechte User Experience zuzumuten.

Wann Mobile First die richtige Strategie ist

Sie sind zu dem Schluss gekommen, dass Ihre Nutzer das Produkt auf mobilen Geräten verwenden möchten und können?  Super! In diesem Fall ist die logische Frage tatsächlich: Wie kann ich mein Produkt auf dem kleinstmöglichsten Gerät mit dem größtmöglichen Nutzen darstellen und somit die beste User Experience bieten.

Aber auch hier gilt: Fragen Sie Ihre Nutzer. Finden Sie heraus, wie Ihr Produkt auf welchem Gerät genutzt wird und in welcher Situation. Denn auf dem Smartphone können ganz andere Funktionen sinnvoll sein als auf einem Desktop-Computer. Und unterwegs nutzen wir mobile Geräte anders als zu Hause.

Denn: Mobile First ist Mittel zum Zweck, nie aber der Zweck selbst.

Ein Beispiel: Die wenigstens Menschen werden die Download-Funktion in einem App-Store nutzen, wenn sie unterwegs nach neuen Apps stöbern. Schon gar nicht, wenn die jeweilige App mehrere MB groß ist und die Gefahr besteht, mobile Daten aufzufressen. In dieser Situation wäre eine „Speichern“-Funktion für die Nutzer viel interessanter. Oder eine Erinnerungsfunktion. Oder eine Funktion, die den Download automatisch startet, sobald man sich im heimischen WLAN befindet. Oder … Ihnen fallen sicherlich noch andere sinnvolle Funktionen ein.

Wann Mobile First die richtige Strategie ist

„Mobile First“ ist die richtige Strategie, wenn das Produkt häufig auf mobilen Geräten eingesetzt wird, zum Beispiel weil die Nutzer es unterwegs verwenden.

Fazit – Auswirkungen auf die Produktentwicklung

Was heißt das nun für die Produktentwicklung? Wir müssen weg von Trendbegriffen und hin zu den Menschen, für die wir Produkte entwickeln. Die Fragen, die wir stellen müssen: Für wen baue ich das Produkt? In welchen Situationen wird mein Produkt genutzt? Und vor allem: Welches Problem löst mein Produkt?

Um diesen Fragen auf den Grund zu gehen, lohnen sich User Research Methoden, aus denen gezielt Use Cases, Personas und Szenarien abgeleitet werden und den langfristigen Erfolg eines Produktes sicherstellen. Was Personas sind, erklären wir auf unserem Agentur-Blog.

Stimmen Sie mir zu oder sind Sie vielleicht völlig anderer Meinung? Dann schreiben Sie gerne einen Kommentar, was Sie von dem Mobile-First-Ansatz halten!