Kategorie: User Experience

share

UX im Checkout: Probleme und Lösungen

Im vergangenen November hatte ich die Ehre, an einem Workshop des Smashing Magazine unter der Leitung von Vitaly Friedman teilzunehmen. Neben anderen stellte das Thema „UX im E-Commerce-Checkout“ einen der Hauptblöcke des Workshops dar. Dies war für mich aus dem Grund besonders interessant, da wir erst kurze Zeit vorher mit dem responsiven Relaunch des Checkouts eines unserer Kunden live gegangen sind und vieles daher noch sehr frisch in Erinnerung war. Mit dem dort präsentierten  Wissen und etwas Abstand kann ich mittlerweile sagen, dass wir einige Aspekte damals schon sehr gut umgesetzt haben, aber an anderen Stellen durchaus noch Optimierungspotenzial bestanden hätte.

Aktuellen Studien zufolge liegt die Abbruchrate im Bereich der E-Commerce-Shops bei durchschnittlich 69,23% [1]. Wird diese Zahl bereinigt um den Anteil der Nutzer, welche lediglich durch den Shop browsen, ohne den Checkout-Prozess überhaupt zu initiieren, ergibt sich ein Bild aus verschiedensten Faktoren, die zum Abbruch durch den Kunden führen können. Dazu gehören auch Faktoren, auf die wir als Entwickler wenig bis gar keinen Einfluss haben, beispielsweise die Retouren-Politik (10%) des Shops oder unzureichende Payment-Möglichkeiten (8%). Auf der anderen Seite sind für die Mehrheit der Abbrüche aber Punkte aus dem Bereich User Experience verantwortlich, die wir selbst aktiv mitgestalten können und sollten. Im Folgenden möchte ich deshalb 3 Problemstellungen, die wesentlich größere Auswirkungen auf die Abbruchrate haben, vorstellen und entsprechende Lösungsansätze beschreiben:

Versteckte Kosten

Überraschungen auf der Abrechnung stellen mit 61% den meist genannten Grund für den Abbruch einer Bestellung dar. Diese Problematik beginnt bereits auf den Produktseiten. Werden beispielsweise verschiedene Waren in unterschiedlichen Quantitäten verkauft, sollte darauf geachtet werden, dass sowohl der Einzelpreis als auch der Gesamtpreis der derzeitigen Auswahl für den Kunden sichtbar ist. Um zusätzliche Verwirrung zu vermeiden und den Vergleich von Produkten und Preisen zu erleichtern, bietet es sich insbesondere für Shops an, die eine Vielzahl von Ländern bedienen, den Kunden beim erstmaligen Besuch der Webseite nach seinem Herkunftsland und/oder seiner bevorzugten Währung zu fragen.

Dem Kunden sollten gleichzeitig möglichst früh und detailliert sämtliche Kostenpunkte (Produkte, Versand, Zölle, …) präsentiert werden. Er sollte sich nicht erst durch einen mehrstufigen Checkout-Prozess klicken müssen, um diese Informationen zu erhalten, denn auch dies verursacht einen erheblichen Teil von Bestellabbrüchen (24%). Sind einige dieser Variablen nicht bekannt, so sollten diese dennoch mit einem geschätzten Wert gelistet und die Tatsache, dass es sich dabei um eine Schätzung handelt, erkenntlich gemacht werden. Dadurch ist der Kunde zumindest über den Kostenpunkt informiert.

Um diesem Problem zu begegnen, eignet sich zum Beispiel der Einsatz eines Drop-Down-Carts. Dies ermöglicht eine frühzeitige und schnell erreichbare Vorschau der Kosten und erleichtert damit seine weitere Entscheidungsfindung.

Beispiel: Drop-Down-Basket

Ein weiterer häufiger Fehler ist das Nichtvorhandensein von Versandzeit oder -kosten im Rahmen der Auswahl der verschiedenen Versandoptionen. Beide sollten immer ersichtlich sein, um dem Nutzer eine informierte Entscheidung frei von jeglichen Zweifeln und Unklarheiten zu ermöglichen:

Das Vorhandensein sämtlicher Informationen erleichtert die Entscheidungsfindung

Erzwungene Account-Erstellung

Schon deutlich abgeschlagen aber mit 35% immer noch einer der Hauptfaktoren für den Abbruch eines Bestellvorgangs ist die forcierte Erstellung eines Accounts. Dies wird von vielen Kunden als unnötiger Aufwand ohne ersichtlichen Mehrwert wahrgenommen. Getreu dem Motto „nur ein weiterer Account in meiner eh schon viel zu langen Liste“. Und da wir hier unter uns sind: Zumindest mir passiert es oft genug, dass ich für einen solchen aus Zwang erstellten Account Monate oder Jahre später sowieso die Passwort-Recovery benutzen muss, um mich überhaupt wieder einloggen zu können.

Um dieser Gefahr entgegenzuwirken sollte der Checkout als Gast als Standardvariante gesetzt sein. Der geeignete Zeitpunkt zur Account-Erstellung befindet sich stattdessen ganz am anderen Ende der Bestellung. So kann beispielsweise dem Kunden nach Bestellabschluss eine Zusammenfassung seiner Bestellung sowie ein freundlicher Hinweis im Stile von „Möchten Sie noch einen Account erstellen? Tragen Sie einfach hier ihr Passwort ein.“ angeboten werden. Idealerweise wird diese Aufforderungen noch mit einem Anreiz oder Bonus (Incentive) unterstrichen. Dies ermöglicht dem Kunden eine schmerzfreie Bestellung und bietet ihm gleichzeitig die Option, mit einem Klick im Anschluss einen Account anzulegen.

Ein damit zusammenhängender Punkt ist die E-Mail-Verifizierung. Auch hier möchte ich wieder ehrlich sein: Ich copy-paste, doh! Aber Studien zeigen, ich bin in guter Gesellschaft, denn 60% aller Nutzer eines Shops tuen selbiges im Verlauf des Checkout-Prozesses. Dies trifft vor allem für mobile Geräte zu, auf denen die Eingabe von E-Mail-Adressen traditionell schwerer fällt. Die erzwungene Verifikation stellt somit nur eine weitere Fehlerquelle und damit potenziellen Frust dar. Ein besserer Ansatz wäre die Verifizierung zu entfernen, die E-Mail-Adresse inline zu validieren und abschließend im Zuge der Bestellzusammenfassung den Nutzer noch einmal seine E-Mail-Adresse visuell verifizieren zu lassen und ihm dort die Möglichkeit zur Korrektur zu geben.

Komplizierter und langer Checkout-Prozess

Einer aktuellen Studie von Baymard [2] zufolge umfasst der durchschnittliche Checkout-Prozess eines E-Commerce-Shops 5,42 Steps bis zum Bestellabschluss. Des Weiteren enthält der durchschnittliche Checkout 23,48 Formular-Elemente und 14,88 Formular-(Text)Felder. Diese Zahlen sind dahingehend von Bedeutung, dass 27% der Nutzer einen Bestellvorgang abbrechen, weil der Checkout zu lang und/oder kompliziert gestaltet ist.

Die durchschnittliche Zahl der Schritte im Checkout-Prozess ist in den letzten Jahren konstant gestiegen [2]

Die Studie zeigt gleichzeitig, dass die Anzahl der Formularelemente für die allgemeine User Experience während des Checkout-Prozesses wichtiger ist als die Gesamtzahl der Checkout-Steps. Dies liegt darin begründet, dass eine hohe Anzahl von (initial sichtbaren) Formular-Elementen den Kunden eingeschüchtert oder gar überwältigt zurücklassen kann. Gleichzeitig zeigen aber Usability-Tests, dass eine Vielzahl der Seiten diese Anzahl problemlos um 20-60% reduzieren könnte.

Die drei folgenden Techniken eignen sich zur Reduzierung der Form-Elemente ohne dabei die Usability negativ zu beeinflussen:

  1. Ausblenden optionaler Felder:
    Die Angabe zusätzlicher Adressinformationen oder eines Firmennamens ist nur für einen geringen Teil der Kunden relevant. In diesem Fall bietet sich die Darstellung innerhalb eines zusammengeklappten Elements an, das bei Bedarf ausgeklappt werden kann.

    Optionale Felder sollten initial ausgeblendet werden [2]

  2. Felder für „vollständige Namen“ 
    Das omnipräsente Muster, den eigenen Namen in separate Felder für Vor- und Nachname aufteilen zu müssen, stellt Usability-Tests zufolge eine häufige Fehlerquelle dar, die zwar nicht direkt zum Abbruch des Bestellvorgangs, aber sehr wohl zur Unterbrechung des Eingabeprozesses führt. Die Einführung eines Feldes für den vollständigen Namen geht jedoch mit dem natürlichen Verständnis des eigenen Namens einher. Des Weiteren ist diese Variante flexibler in Hinsicht auf eventuelle zweite Vornamen oder Titel und bietet daher Potenzial für weitere Feldeinsparungen.

    Amazon verzichtet auf getrennte Felder für Vor- und Nachname

  3. Rechnungsadresse als Lieferadresse:
    Für durchschnittlichen Customer-to-Business-Kunden entspricht die Lieferadresse meist der Rechnungsadresse. In diesem Fall sollte dies auch initial so gesetzt sein, wodurch ein kompletter Satz von Adressfeldern ausgeblendet werden kann. Dies entspricht in einem durchschnittlichen Checkout 37% der Gesamtzahl aller Formular-Felder. Mit dem Entfernen dieser Option können diese wieder eingeblendet und dem Kunden zur Bearbeitung bereitgestellt werden.

    Die Rechnungsadresse sollte standardmäßig als Lieferadresse gesetzt sein, weitere Felder werden erst bei Bedarf angezeigt

Für mobile Geräte sollte zudem darauf geachtet werden, dass der Kontext der Eingabefelder (z.B. Registrierung vs. Gast) sowie zugehörige Label immer vollständig sichtbar sind und die Inputs eine adäquate Länge (z.B. 30 Zeichen für E-Mail- und Adress-Felder) haben. Mit dem Setzen korrekter Input-Types kann die Eingabe für mobile Nutzer zusätzlich vereinfacht werden.

Das sind sie also, die drei größten Pain-Points im Bereich des E-Commerce-Checkouts. Natürlich gibt es noch weitere und auch zu den oben genannten lässt sich noch viel mehr schreiben. Aber das soll es soweit erst einmal gewesen sein.

Offensichtlich ist es nicht immer möglich, alle Punkte adäquat umzusetzen. Sei es bedingt durch die jeweilige Technologie hinter dem Shop oder weil Abteilung XYZ mal wieder mehr Daten vom Kunden haben will. Doch auch in diesen Fälle sollte man, im Interesse der UX der Nutzer und damit auch des langfristigen Erfolgs unserer Kunden, „um jedes einzelne Feld kämpfen“ (Zitat: Vitaly Friedman).

Nichtsdestotrotz hoffe ich, dass jeder, der es bis hierhin geschafft hat, etwas mitnehmen konnte und vielleicht bei der Umsetzung des nächsten Checkouts die Bedeutung dieser Punkte für die Usability und User Experience des Kunden, und damit zwangsweise auch für den Erfolg des Shops, im Hinterkopf hat.

[1] https://baymard.com/lists/cart-abandonment-rate

[2] https://baymard.com/blog/checkout-flow-average-form-fields