Nutzerfreundlichkeit vs. Conversion-Optimierung: Booking.com im Usability-Check

Nutzerfreundlichkeit vs. Conversion-Optimierung: Booking.com im Usability-Check

Mareike Mechler in User-Experience-Tipps
Lesezeit: 5 Minuten · 18. Mai 2018
von | 18. Mai 2018 | User-Experience-Tipps

Konversion steigern, aber das Nutzerlebnis gleichzeitig maximal positiv gestalten: Nicht immer einfach. Anhand des Reisebuchungs-Riesen booking.com erklären wir, wo Business- und Nutzeranforderungen aufeinandertreffen und wie sie zusammenfinden können.

 

Wer verkauft, hat Recht.

… oder?

 

Die Definition des Trade-Offs zwischen guter Usability und hohen Konversionsraten führt auch innerhalb des Userlutions-Teams immer wieder zu regen Diskussionen. Der Auslöser: die Reisebuchungsseite booking.com.

Ein Blick und ein paar Klicks auf der Seite und schnell hören wir uns Begriffe nutzen wie „schlechte User Experience“, die wir im häufigen Einsatz aggressiver Persuasivtechniken auf den Angebotsseiten begründet sehen. UX-Plädoyer um jeden Preis, weil Usability-Expertise unsere Profession ist? Weit gefehlt, denn auch in unseren Reihen finden sich Fürsprecher der konversionsstarken Seite, die nicht umsonst Marktführer für Hotelbuchungen ist.

Was ist nun aber empfehlenswert? Was stellt sowohl den Nutzer als auch den Unternehmer zufrieden?

Usability-Tests ergeben gemischtes Stimmungsbild

Um die Diskussion über Usability und Conversion-Optimierung fachlich fundiert, statt subjektiv geladen führen zu können, haben wir die mobile sowie die Desktop-Seite des Reise-Bookers einem User-Test unterzogen. Unsere UX-Spezialisten haben die gewonnenen Nutzerstimmungen analysiert und in folgende Kategorien geclustert:

 

Interface-Erscheinungsbild:

  • die Seite verfügt über viele hochwertige und aussagekräftige Bilder, Kundenbewertungen auf den ersten Blick und ein farbenfrohes Design
  •  mehrere Schriftarten und –größen sorgen subjektiv für Überladenheit, viele Informationen werden auf einmal präsentiert („Echt ein wenig erschlagend, muss ich sagen!“ – RapidUsertester, 20 Jahre) , eine unübersichtliche Organisation der Fakten erschwert Angebotsvergleiche

Psychisches Erlebnis:

  • Persuasivtechniken wie suggerierter Zeitdruck („Tolles Schnäppchen heute) oder Knappheit („Nur noch 1 Zimmer auf unserer Seite verfügbar“) bewirken bei manchen Nutzern den Ehrgeiz, das Angebot rechtzeitig zu ergattern.
  • häufige Verwendung derselben Techniken sorgt dafür, dass sich Nutzer manipuliert fühlen und mit Abwehrreaktionen reagieren („Das sind doch alles Dinge, die mich gar nicht interessieren!“ – RapidUsertester, 20 Jahre)

Weitere Stärken:

  • Navigation der Seite fasst die Angebote gut zusammen
  • Rezensionen geben Gefühl von Sicherheit
  • initiale Buchungsmaske wird als positiv und intuitiv bewertet und ermöglicht sofortigen Einstieg in das Sucherlebnis
  • Checkout inklusive Registrierung durch voreingegebene Daten unkompliziert
  • Mouse-Over-Effekte erklären Icons oder Kriterien und tragen zu verbesserter Navigation bei (Desktop-Tests)

Weitere Kritikpunkte:

  • Filtermöglichkeiten wirken überladen (insbes. mobil) und Kriterien werden als willkürlich und unvollständig wahrgenommen (z. B. kann nach „Privater Strand“, aber nicht nach nah gelegenen „Einkaufsmöglichkeiten“ gefiltert werden)
  • einige Suchmöglichkeiten bleiben teils gänzlich unentdeckt (integrierte Google Maps-Suche mit Ergebnisanzeige)
  • bei Eingabe der Suchbegriffe in die Buchungsmaske „versorgt“ (tatsächlich: verwirrt) diese teils live mit Vorschlägen konkreter Hotels, die dem Suchenden unbekannt sind
  • Angaben wie „Gerade verpasst. Unser letztes Zimmer wurde heute ausgebucht.“ evozieren Gefühle wie Enttäuschung und Frustration
  • Live-Aktualisierung der Filter verhindert reibungslose Orientierung auf der Seite:

Live-Aktualisierung der Filter: Was unsere RapidUsertesterin (28) sagt: „Ich find es nicht so toll, dass da immer gleich der Suchlauf losgeht, aber gut…“

 

Zusätzlich konnten wir in unserem Desktop-Test einen kritischen Conversion-Knackpunkt identifizieren: Nutzer, die im Checkout das Pop-Up-Fenster „Diese Unterkunft wurde gebucht: Gerade eben!“ sehen, interpretieren diese Meldung fehl: Sie glauben die Unterkunft sei ausgebucht und brechen den Vorgang ab.

 

Abb.: Conversion-Knackpunkt: Tester brechen den Buchungsvorgang nach dieser Meldung ab

 

Und trotzdem: Als marktführender Reise-Booker scheint sich die Conversion-Rate von booking.com auf einem beachtlich hohem Level zu halten. Aber wieso?

Finding the sweet spot

Stellen wir uns Usability und die Conversion-Rate einmal als Vier-Felder-Tafel vor: Der Quadrant links unten (3) vereint hierbei den Negativpol beider Konstrukte, das Feld rechts oben (1) repräsentiert einen User, der aufgrund seines positiven Nutzererlebens zum Kunden wird – und gern wiederkommt:

Abb.: Vier-Felder-Tafel: Das Zusammenspiel von Usability und Conversion-Rate

 

Und obwohl wir als UX-Agentur den Nutzer und sein Erleben jeden Tag in den Fokus unserer Arbeit rücken, kennen wir auch die wirtschaftlichen Herausforderungen eines Unternehmens. Unsere Auswertung und Beratung fokussiert sich demnach nicht starr auf den High-Usability-Quadranten (2), in dem eine integrierte Kündigungsmöglichkeit während des Registrierungsvorgangs eine typische Konzeptionsempfehlung sein könnte.

Wir wissen, dass Nutzer- und Businessanforderungen ständig gegeneinander abgewogen, sowie mögliche Gestaltungsvarianten A/B-getestet werden müssen.

Booking.com scheint diese zwei Interessen erfolgreich auszutarieren, indem sie zwar viele Maßnahmen zur Conversion-Rate-Steigerung einsetzen, aber an verschiedensten Stellen auch die Kundenzufriedenheit messen und so das Ausmaß an eingesetzten Persuasivtechniken maximal ausreizen können. Einfache, vom Kunden ausgefüllte Smiley-Skalen – oder, ganz klassisch, der NPS – liefern regelmäßiges Feedback zur Zufriedenheit und schützen davor, in den rechten unteren Quadranten (Manipulation) zu rutschen.

Ableitungen für dein Trade-Off-Dilemma

Rufen wir uns noch einmal Unterschiede und Gemeinsamkeiten ins Gedächtnis: Während es das geteilte Ziel von Usability und Conversion-Optimierung ist, Besucher zu Kunden zu machen, bedienen sie sich doch unterschiedlicher Strategien.

Optimierte Usability  erhöht die Geschwindigkeit und subjektive Qualität des Nutzererlebnisses, indem Verhaltenstendenzen vorhergesagt werden (Kundenanforderungen). Angenehme Erfahrungen führen zu erhöhter Autorität sowie Kundenbindung, wodurch Markenbildung  und kompetetive Aufstellung positiv beeinflusst werden.

Conversion-Optimierung zielt darauf ab, Nutzerverhalten so zu beeinflussen, dass möglichst jeder Besucher zum Kunden konvertiert (Businessanforderungen). Sie liefern hier also die richtige Lösung für ein bestehendes Zielgruppenproblem – und zwar zur richtigen Zeit.

 

Experten-Tipp:

Definieren Sie sowohl Ihren individuellen IST-Zustand als auch Ihre Prioritäten und tasten Sie sich so an das Ausbalancieren der Kunden- und Businessanforderungen.

 

Überprüfen Sie regelmäßig Ihre Entscheidungen – oder lassen Sie sich durch geschulte Fachkräfte beraten. UX-Spezialisten sind in der Lage, verschiedenste Faktoren in Ihre Lösungsgleichung einfließen zu lassen. Potentiale und Risiken können beispielsweise in Abhängigkeit der Bekanntheit eines Unternehmens eingeschätzt werden:

  • Kleine Unternehmen können mit hohen Konversionsraten zunächst einen gewissen Umsatz generieren.
  • Die (teilweise) Missachtung von Usability-Prinzipien kann sich jedoch negativ auf die Markenbildung auswirken.

Darüber hinaus können spezialisierte Usability-Berater Einblick darüber geben, wie der Nutzer-Funnel aussieht und an welcher Stelle was (UX vs. CR) aufgrund welcher menschlicher Verhaltenstendenzen wichtiger ist:

  • Ist die Usability zu Beginn des Booking-Vorgangs gut, kann es trotz späterer schlechterer UX oder aufdringlichen Persuasivtechniken zur Konversion kommen. Warum? Der Mensch unterliegt seiner natürlichen Tendenz zur Vervollständigung unfertiger Handlungen (engl.: completion tendency). 

Die Infos im Überblick:

Was bei der Abwägung von Usability und Conversion-Optimierung zu beachten ist

  • Definiere sowohl deine Ziele als auch Prioritäten. Ruf dir dabei sowohl Markenwerte als auch Kommunikationsprinzipien ins Gedächtnis.
  • Setze sämtliche Business- und Nutzeranforderungen ins Verhältnis und teste deine Lösungsansätze iterativ, um dem Sweet Spot näher zu kommen. Unterscheide hierbei zwischen Neu- und Bestandskunden-Konversion: Während gute Usability tendenziell die Kundenbindung und damit die Bestandskunden-Konversion erhöht, verhilft Conversion-Optimierung eher kurzfristig dazu, einen Nutzer A zu einem bestimmten Zeitpunkt x in einer bestimmten Situation y in einen Kunden zu verwandeln.
  • Für das tatsächliche Erlebnis des Nutzers ist beides wichtig: Sowohl Usability- als auch Conversion-Optimierungs-Techniken. Erfolgsfaktoren individueller Lösungen sind jedoch noch andere, wie z. B. die Bekanntheit des Unternehmens: booking.com z. B. gilt allgemein als großes und vor allem weitläufig bekanntes Portal.
  • Die bestmögliche Balance (denn: die perfekte gibt es nicht) zeichnet sich durch den Einbezug etwaiger Faktoren sowie eine positive Kosten-Nutzen-Gleichung deiner Umsetzungen aus. Bei Bedarf sollten professionelle Beratungsangebote in Anspruch genommen werden, um keine Einflussfaktoren ungeachtet zu lassen.

 

Du möchtest persönliche Erfahrungen mit dem Reise-Booker mit uns teilen oder hast Fragen zum Artikel? Hinterlasse uns dein Anliegen gern als Kommentar! 

Multi-Device-Testing: Die drei Faktoren der Multi-Device-Experience

Multi-Device-Testing: Die drei Faktoren der Multi-Device-Experience

Maria Müller in User-Experience-Tipps
Lesezeit: 4 Minuten · 15. November 2016
von | 15. November 2016 | User-Experience-Tipps

Wir leben in einer digitalisierten Welt: 90% unserer Aktivitäten finden auf Bildschirmen statt. Dabei beschränken wir uns schon lange nicht mehr auf ein einziges Gerät. Ganz selbstverständlich wechseln wir vom Laptop zum Smartphone, von dort zum Tablet und wieder zurück. Einen Film am Smart-TV  beginnen und im Zug mit Laptop oder Tablet zu Ende schauen; eine Chat-Unterhaltung unterwegs auf dem Smartphone anfangen und zu Hause am Desktop-PC fortsetzen – ständig haben wir Multi-Device-Experiences, nutzen also den gleichen Dienst auf mehreren Geräten. Aber was macht eine GUTE Multi-Device-Experience aus? Welche Faktoren müssen Sie berücksichtigen, um Ihren Nutzern ein gutes Nutzungserlebnis zu bereiten?

Bei der Optimierung der Multi-Device-Experience müssen drei wichtige Faktoren berücksichtigt werden: Komposition, Kontinuität und Konsistenz. Im Folgenden stelle ich diese drei Faktoren vor und gebe Tipps, wie sie erfolgreich umgesetzt werden können. Beginnen wir also mit dem ersten Faktor – der Komposition.

1. Die Komposition – Welche Funktionen auf welchem Gerät?

Viele Anwendungen, wie beispielsweise Facebook, bieten ihren Nutzern nicht alle Funktionen auf allen Geräten an. Den vollen Funktionsumfang gibt es oft nur in der Desktopansicht. Gibt es auf einem Gerät Features, die es auf anderen nicht gibt, bezeichnet man das als die Komposition. Diese Funktionsverteilung kann ein Segen sein, wenn sie die App verschlankt und auf die sinnvollen Use-Cases reduziert; sobald der Nutzer aber Features vermisst, die er auf anderen Geräten kennt, schmälert das die User Experience. Um letzteres zu vermeiden, sollten Sie herausfinden, welche Funktionen die Nutzer auf allen Geräten brauchen und welche zu entbehren sind. Wie wird die Anwendung im Alltag genutzt, was fehlt den Nutzern, welche Features lassen sie mobil links liegen?

Ein extremes Beispiel der Feature-Komposition zeigt sich bei der Adobe-App Capture: Sie dient als Ergänzung zu diversen Adobe-Desktop-Anwendungen und nutzt die Smartphone-Kamera, um Farbschemas aus der Umgebung zu erfassen. Diese können dann mit einem Klick in die Desktop-Programme importiert werden. Die App ergänzt also die Desktop-Programm mit einem Feature, das sie selbst nicht haben – ideal auf den Nutzungskontext angepasst.

Multi-Device-Experience Faktor Komposition

Komposition: Ihnen muss klar sein, was die Nutzer auf welchem Gerät machen, um zu entscheiden, welche Funktionen wo gebraucht werden.

2. Die Kontinuität – Ein fließender Übergang von Device zu Device

Sie haben zu Hause auf der Couch eine Folge Ihrer Lieblingsserie angefangen, müssen zu einem Termin, aber wollen unbedingt wissen, wie es weitergeht? Kein Problem, schauen Sie einfach auf dem Handy weiter. Diese Synchronisierung zwischen den Geräten wird auch als Kontinuität bezeichnet und ist ein essentieller Bestandteil der Multi-Device-Experience. Viele Streaming-Dienste funktionieren auf diese Weise, zum Beispiel Netflix; aber auch Cloud-Speicherdienste, wie Dropbox, nutzen diese Methode. Einzige Voraussetzung dafür ist, dass der Nutzer auf allen Geräten mit demselben Account eingeloggt ist.

Die Synchronisierung muss allerdings für den Nutzer so flüssig wie möglich ablaufen. Finden Sie heraus, wie Ihre Nutzer von Gerät zu Gerät wechseln, überlegen Sie welche Probleme auftreten könnten und wie Sie darauf reagieren. Beispiel: Dropbox sendet eine Warnung, sobald zwei Personen gleichzeitig dieselbe Datei öffnen und bearbeiten.

Multi-Device-Experience Faktor Kontinuität

Kontinuität: Sie müssen wissen, wie Ihre Nutzer von Gerät zu Gerät wechseln, um ein ideale Synchronisierung zu gewährleisten.

3. Die Konsistenz – Das gleiche „Look and Feel“ auf allen Devices

Wer bis vor kurzem die App Meetup verwendet hat, wird sie nicht unbedingt mit der dazugehörigen Website in Verbindung gebracht haben. In der App fehlte das Logo und es wurde ein anderer Rotton verwendet als in der Desktop-Version.  Dieses Vorgehen verstößt gegen das dritte Prinzip der Multi-Device-Experience: die Konsistenz. Hierbei geht es darum, dass der Dienst sofort wiedererkannt wird – egal auf welchem Gerät er geöffnet wird. Das trägt zum Branding bei und schmälert gleichzeitig den Lernaufwand für die Nutzer. Farbgebung, Buttonbeschriftungen, Gestaltung der Elemente… das alles sollte einheitlich gestaltet sein, damit sich die Nutzer auf allen Geräten sofort zurechtfinden. Wer beispielsweise die Facebook-App öffnet, erkennt sofort den typischen blauen Header von der Desktopversion wieder.

Auch Meetup hat in einem Redesign App und Desktopversion aneinander angeglichen: Das Logo wird nun in verkürzter Version auch in der App dargestellt, die Farbgebung ist einheitlich und außerdem verwendet die Navigation auf allen Geräten die gleichen Icons, die auch überall einheitlich benannt sind.

Multi-Device-Experience Faktor Konsistenz

Konsistenz: Ihre Nutzer müssen die Anwendung auf allen Geräten wiedererkennen und sich ohne vergrößerten Lernaufwand zurechtfinden können.

Mit User Research die geeignete Multi-Device-Strategie finden

Vor allem für die Prinzipien Komposition und Kontinuität sollten Sie durch User Research herausfinden, welche Geräte die Nutzer für welche Aktionen verwenden und wie sie zwischen den Geräten hin und her wechseln. In welcher Situation befinden sie sich? Sind sie konzentriert oder unkonzentriert? Sitzen sie gemütlich auf der Couch oder stehen sie gedrängt in einer vollen U-Bahn? Um diese Multi-Device-Experience eindeutig zu evaluieren, ist ein realistischer Nutzungskontext wichtig. Usability-Tests im Labor können daher eigentlich ausgeschlossen werden. Im Idealfall finden die Tests im Alltag der Nutzer statt, mit ihren eigenen Geräten und in ihrer natürlichen Umgebung.

Für die Evaluation der Multi-Device-Experience gibt es verschiedene Möglichkeiten:

  • Häufig wird die Multi-Device-Experience anhand von reiner Datenanalyse untersucht, beispielsweise mit Google-Analytics und anderen Tools. So lässt sich herausfinden, was wann auf welchem Gerät passiert. Die Gründe und Probleme der Probanden bleiben dabei jedoch unergründet.
  • Mit einem einmaligen Remote-Usability-Test können bereits einige dieser Probleme aufgedeckt werden. Vor allem die Kontinuität und die Konsistenz lassen sich mit dieser Methodik überprüfen.
  • Um auch die Multi-Device-Experience der Funktionsverteilung, sprich die Komposition, zu testen, empfehlen wir Langzeit-Studien. Die Nutzer werden dazu aufgefordert eine Anwendung auf ihren verschiedenen Geräten über einen längeren Zeitraum zu nutzen und ihre Gedanken festzuhalten. Hier zu eignen sich Tagebuchstudien oder Langzeit-Crowd-Usability-Tests.
  • Tipp: Befindet sich die Anwendung noch in der Entwicklung, geben Wettbewerber-Tests Einblicke, wie Nutzer Konkurrenz-Dienste verwenden und was ihnen auf bestimmten Geräten fehlt.

Fazit: Eine gute Multi-Device-Experience setzt Kenntnisse der Nutzerbedürfnisse voraus

Um eine gute Multi-Device-Experience zu bieten müssen Sie Ihre Nutzer auf drei Ebenen kennen: Ihnen muss klar sein, was die Nutzer auf welchem Gerät machen, um zu entscheiden, welche Funktionen wo gebraucht werden (Komposition). Sie müssen wissen, wie Ihre Nutzer von Gerät zu Gerät wechseln, um eine ideale Synchronisierung zu gewährleisten (Kontinuität). Und Ihre Nutzer müssen die Anwendung auf allen Geräten wiedererkennen und sich ohne vergrößerten Lernaufwand zurechtfinden können (Konsistenz). Mit diesem Vorgehen garantieren Sie Ihren Nutzern eine positive User Experience mit Ihrem Produkt in allen verschiedenen Nutzungskontexten.

Wie optimieren Sie die Multi-Device-Experience für Ihre Kunden?

Quellen:

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?

Horizontales Scrollen – Wunderwaffe oder No-Go?

Horizontales Scrollen – Wunderwaffe oder No-Go?

Sophie Krüger in User-Experience-Tipps
Lesezeit: 2 Minuten · 4. Oktober 2016
von | 4. Oktober 2016 | User-Experience-Tipps

In Design-Fachkreisen erhält das horizontale Scrollen aktuell viel Aufmerksamkeit. So konnte Deutsche See (http://www.deutschesee.de/) mit ihrer Website einen Design-Award gewinnen. Die Website setzt auf den meisten Seiten vollständig auf die Scroll-Bewegung von links nach rechts.

Stärken des horizontalen Scrollens

Auf mobilen Geräten mit Touchfunktion spielt horizontales Scrollen seine große Stärke aus. Im Gegensatz zur Mouse-Navigation ist das horizontale Wischen mit dem Finger eine effiziente und intuitive Geste, mit der schnell und gefühlvoll im Content navigiert werden kann.

Weitere Vorteile des horizontalen Scrollens

  • So lange das Interaktionsprinzip nicht weit verbreitet ist, kann es Markenwebsites zu Einzigartigkeit und Charakter verhelfen.
  • Es ermöglicht eine bildgewaltige Wirkung und ist stark darin, Inhalte visuell und großflächig zu inszenieren.
  • Es ist intuitiv auf Touch-Screens bedienbar.
  • Es erleichtert einfaches Stöbern und fördert Inspiration.

Schwächen des horizontalen Scrollens

Horizontales Scrollen fällt Nutzern in Usability-Tests eher negativ auf. Sie sind es gewohnt, im Web von oben nach unten zu scrollen. So testete kürzlich eine Internetbank eine Aktien-Übersichtstabelle, die horizontales Scrolling einsetzte. 3 von 7 Testern bemerkten den horizontalen Scroll-Balken erst gegen Ende des Tests. Bis dahin hatten sie einen Großteil der Informationen gar nicht beachtet.

Weitere Nachteile des horizontalen Scrollens

  • Es ist ungewohnt für viele Nutzer und wird oft übersehen.
  • Es kann Orientierungslosigkeit verursachen, weil den Nutzern wechselnde Navigationspunkte fehlen.
  • Die Kombination von vertikalem und horizontalem Scrollen kann verwirren, da es mehr als eine Bewegungsrichtung gibt.
  • Websites wirken überladen.
  • Der Content ist weniger effizient zu erschließen, da mehrfach geklickt werden muss und nicht mit dem Maus-Rad gescrollt werden kann (dabei ist diese Umsetzung auch möglich).
  • Es ist aufgrund des begrenzten Platzes nicht für die Darstellung umfangreicher Textmengen geeignet.

Positive und negative Beispiele von horizontalem Scrollen

Auf der Website von Metadesign wird das bereits angesprochene Problem des Orientierungsverlusts bei der Kombination von horizontaler und vertikaler Scroll-Richtung deutlich. Als Nutzer ist es schwer zu erkennen, wann horizontal gescrollt werden kann. Die Seite wirkt außerdem durch die verschiedenen Scroll-Abschnitte überladen und unübersichtlich.

Horizontales Scrollen Screenshot metadesign

Bildgewaltig, aber unübersichtlich. Informationen gehen verloren und der Nutzer wird von den Reizen erdrückt.

Die bildgewaltige, fast schon magazin- und galerieartige Wirkung wird vor allem auf Portfolio-Seiten deutlich. Die Künstlerin Stephanie Tartelin inszeniert Ihre Werke auf diese Weise. Sie nutzt außerdem keine Navigationspfeile, sondern das Scrolling funktioniert auch über das Mausrad. Der Nutzer kann sich dadurch viel leichter durch die Galerie bewegen.

horizontales scrollen Screenshot Stephanie Tartelin

Mehrere Bilder können gleichzeitig großformatig dargestellt werden – ein Vorteil von horizontalem Scrollen

Fazit – Mehrwert hängt vom Use-Case ab

Die Verwendung horizontalen Scrollens hängt ganz vom Use-Case ab. Für Portfolios, Brand-Seiten und auf mobilen Geräten kann es sinnvoll sein, doch den meisten Websites raten wir vom Einsatz ab, da es bei den Nutzern zu Verwirrung und Orientierungslosigkeit führen kann.

Wie ist Ihre Meinung:
Kennen Sie positive oder negative Beispiele horizontalen Scrollens? Würden Sie den Einsatz auf Ihrer Website in Erwägung ziehen?

Schadet die AGB-Checkbox der Usability?

Schadet die AGB-Checkbox der Usability?

Benjamin Uebel in User-Experience-Tipps
Lesezeit: 2 Minuten · 29. September 2016
von | 29. September 2016 | User-Experience-Tipps

Viele Online-Shops nutzen bei der Kaufbestätigung eine Checkbox zur Bestätigung der AGB. Doch vor allem die größeren Shops wie Amazon, Zalando und Asos verzichten inzwischen darauf. Aus rechtlicher Sicht ist die Checkbox auch gar nicht notwendig. Ein klarer, unmissverständlicher und verlinkter Hinweis auf die Allgemeinen Geschäftsbedingungen ist per Gesetz ausreichend.

So kann der Text beispielsweise lauten: „Bitte beachten Sie unsere AGB [Link!] sowie unsere Widerrufsbelehrung [Link!]“. Weitere Informationen über die Rechtslage bei AGB-Bestätigungstexten und Häkchen-Setzen finden Sie z.B. bei der IT-Kanzlei München.

Und aus Usability-Sicht? Sollten Sie die Checkbox zur Bestätigung der AGBs weglassen, um den Buchungsprozess nutzerfreundlicher zu machen?

Vor- und Nachteile der AGB-Checkbox aus Usability-Sicht

Für die Abschaffung der Bestätigungs-Checkbox spricht:

  • Es sind weniger Klicks notwendig, um die Bestellung abzuschließen. Im Checkout gilt das Grundprinzip, die Nutzer so wenige Eingaben machen zu lassen wie möglich. Vor allem bei traffic-starken Shops könnte dies einen leichten Einfluss auf die Conversion haben.
  • Die Frustrationsquellen werden reduziert. Wie oft passiert es, dass man vergisst, die AGBs zu bestätigen und die Buchung deshalb länger dauert? In solchen Fällen wird die User-Experience also erhöht.
  • Diese bessere User-Experience könnte sich in einer höheren Loyalität niederschlagen. „Ach, das war der Shop, wo der Checkout nicht so anstrengend war. Da kauf ich schnell mal wieder ein.“

AGB Bestätigung ohne Checkbox bei Amazon

Amazon hat eine sehr hohe Kundenbindung und verzichtet seit Jahren auf eine AGB-Checkbox beim Bestellen.

Warum die Checkbox zur AGB-Bestätigung sinnvoll sein kann:

  • In Usability-Tests sehen wir immer wieder, dass einzelne Nutzer skeptisch werden, wenn die Checkbox fehlt. Die gefühlte Seriosität des Shops nimmt ab. Bei eher misstrauischen Online-Shoppern könnte dies zu einem Abbruch führen, besonders wenn sie von vornherein unsicher über die Kaufentscheidung waren.
  • Der oben beschriebene positive Effekt auf die Conversion könnte dadurch aufgehoben werden.

AGB Bestätigung mit Checkbox bei mymuesli.com

Die Checkbox gibt den Nutzern ein Gefühl von Transparenz und Seriosität (hier bei mymuesli.com)

Fazit – Checkbox Ja oder Nein?

Aus Usability- und Conversion-Sicht kann es durchaus sinnvoll sein, auf die Checkbox zur AGB-Bestätigung zu verzichten. Und je mehr Shops darauf verzichten, desto alltäglicher wird es für die Nutzer – das Seriositätsproblem könnte daher bald Vergangenheit sein.

Wir sehen hier für Produktmanager interessantes Potenzial für einen A/B-Test, um herauszufinden, ob der Checkout mit oder ohne AGB-Checkbox besser konvertiert.

Welche Erfahrungen haben Sie in Ihrem Shop mit der Bestätigung der AGBs gemacht? Haben Sie vielleicht sogar schon einen A/B-Test zu diesem Thema durchgeführt?

Seite 1 von 612345...Letzte »