Ein Blick genügt. Und schon hat man eigentlich keine Lust mehr, in diesem Onlineshop zu bestellen. Ein unübersichtliches Formular hat sich auf unserem Bildschirm breit gemacht, das uns mit seiner hässlichen Fratze dazu auffordert, all unsere persönlichen Daten preiszugeben.
Okay, okay – vielleicht etwas zu theatralisch. Die Wahrheit dahinter aber ist, dass entsprechend lange Formulare tatsächlich eine abschreckende Wirkung auf viele Menschen haben. So werden 26 Prozent aller abgebrochenen Zahlungsprozesse nicht etwa aufgrund von Fehlern oder einer zu langsamen Lieferung abgebrochen, sondern aufgrund eines zu langen und zu komplexen Zahlungsprozesses – an dritter Stelle direkt nach zu hohen Lieferkosten und dem Zwang, einen Account zu erstellen. Letzterer ist für 34 Prozent der abgebrochenen Zahlungsvorgänge verantwortlich (Baymard Institute 2019).
Darum sehen wir uns in diesem Unterkapitel an, wie wir einen Zahlungsprozess gestalten können, der nicht abschreckt, sondern ganz im Gegenteil freundlich dazu einlädt, ihn abzuschließen. Und wie wir dies in einen benutzerfreundlichen Prozess verpacken können, der mit einer Prise Visual-Storytelling sogar Spaß machen kann.
Ein letztes Mal werden wir mit dem Prinzip der Progressive-Disclosure in Berührung kommen und damit wird auch das uns schon bekannte Phänomen des eskalierenden Commitments abermals eine Rolle spielen. Tatsächlich können erste Maßnahmen sogar schon vor dem Zahlungsprozess gesetzt werden, indem mit subtilen aber wirkungsvollen Methoden das Vertrauen ein letztes Mal gestärkt wird, bevor es zum kritischsten aller Momente in einem Onlineshop kommt. Let’s do this!
Ist der Warenkorb geprüft und in Ordnung, ist der nächste Schritt der Zahlungsprozess. Dieser wird meist mit einem Klick auf den »Zur Kasse«-Button eingeleitet. Für diesen Button gilt, was auch für den CTA-Button auf der Startseite gilt: Möglichst sichtbar und möglichst prominent platziert sollte er sein. Kein Besucher sollte je nach diesem Button Ausschau halten müssen.
Wir Menschen lieben Sicherheit. So sehr, dass auch nur die geringsten Gedanken an mögliche Risiken ein Hindernis darstellen können, den Button zu klicken, um fortzufahren. Dieses Phänomen nennt sich Null-Risiko-Verzerrung beziehungsweise Zero-Risk-Bias. Es gilt also, alle in jenem Moment möglicherweise aufkommende Bedenken zu eliminieren. Tatsächlich können dabei ein Schloss-Icon im Button sowie eine kurze Nennung von Sicherheit gebenden Features schon genügen (Morys u. Mayer 2019).
Werden alternative Zahlungsmethoden wie PayPal angeboten, die den Zahlungsprozess komplett überspringen, sollten die entsprechenden Buttons ebenso an dieser Stelle platziert werden.
Wurde der Button geklickt, wird der Zahlungsprozess gestartet. Meist ist der erste Schritt die Aufforderung, sich anzumelden oder zu registrieren. Dies ist sinnvoll, da im weiteren Verlauf oder bei zukünftigen Bestellungen keine persönlichen Daten mehr eingegeben werden müssen. Hierbei ist allerdings wichtig, dass zusätzlich die Option geboten wird, als Gast zu bestellen, ohne sich registrieren zu müssen. Wie in der Einleitung schon kurz erwähnt, ist der Zwang, einen Account zu erstellen, für 34 Prozent aller abgebrochenen Zahlungsprozesse verantwortlich. Aus diesem Grund sollte die Gast-Funktion an erster Stelle oberhalb aller anderen Funktionen prominent platziert werden (Kaley 2018).
Wurde die Gast-Option gewählt, sind die nächsten Schritte die Eingabe der Versand- und Rechnungsadresse, die Wahl der Versandoption und schließlich die Zahlungsart. Hierbei sollte nach dem schon häufiger erwähnten Prinzip der Progressive-Disclosure vorgegangen werden. Die nötigen Schritte bis zum Abschluss der Bestellung sowie der aktuelle Schritt sollten auf einen Blick ersichtlich sein. Mit einem Klick auf einen beliebigen – schon erledigten – Schritt in der Übersicht sollte zum entsprechenden gewechselt werden können.
Die Zahlungsart mit den Zahlungsdaten als sensibelste Informationen an letzter Stelle zu positionieren macht Sinn, da wir damit das Phänomen des Eskalierenden Commitments hervorrufen. Im Klartext: Der entstandene Aufwand vor den Zahlungsinformationen veranlasst Besucher dazu, den Zahlungsprozess schlussendlich auch komplett abzuschließen.
Der letzte Schritt ist die Bestellübersicht. An dieser Stelle ist es wichtig, neben den Produkten auch weiterhin die Produktbilder anzuzeigen – letztlich sind es ja die schönen Produkte, die unsere Besucher dazu veranlasst haben, überhaupt bei uns zu bestellen. Zusätzlich geben die Produktbilder ein letztes Mal die Sicherheit, dass es sich bei den im Warenkorb befindlichen Produkten auch wirklich um die gewünschten Produkte handelt.
Für Eingabefelder gibt es einfache Patterns, an denen man sich orientieren kann, um eine herausragende User-Experience zu schaffen. Der erste Pattern ist, dass Eingabefelder untereinander in einer relativ schmalen Spalte dargestellt werden sollten. Damit ist die Leserichtung nur von oben nach unten und nicht eine Kombination aus von oben nach unten und von links nach rechts. Jedes Eingabefeld muss entsprechend seiner Funktion mit sogenannten Labels beschriftet sein. Leider werden Labels häufig immer noch links neben das jeweilige Eingabefeld gesetzt – deutlich nutzerfreundlicher agieren wir, wenn wir es oberhalb platzieren. Mit Platzhaltertexten in den einzelnen Feldern kann zudem direkt ein wichtiger Hinweis gegeben werden, in welchem Format die Eingabe erwartet wird, beispielsweise beim Geburtsdatum.
Man sollte aus Gründen der Ästhetik niemals ausschließlich auf Platzhalter setzen, denn ist das Feld ausgefüllt, ist der Platzhalter nicht mehr sichtbar und man kann nicht mehr nachvollziehen, wofür das jeweilige Eingabefeld vorgesehen ist. Allerdings gibt es hierfür eine Lösung, die sich Floating-Labels nennt. Dabei handelt es sich um eine Kombination aus Platzhaltertexten und den klassischen Labels. Zuerst in nur der Platzhaltertext zu sehen. Wird das Textfeld ausgefüllt, wird der Platzhaltertext innerhalb des Textfelds zu einem Label. Da dies etwas mehr Platz braucht als klassische Eingabefelder zur Verfügung stellen, müssen diese etwas höher ausfallen. Höhere Textfelder mit entsprechend größerem Text darin empfehlen sich aber ohnehin, um die Leserlichkeit zu erhöhen.
Das Floating-Label im ausgefüllten Zustand innerhalb des Eingabefeldes zu platzieren macht Sinn, da es dadurch scheinbar weniger Elemente auf der Seite gibt und so die kognitive Last nicht unnötig weiter erhöht wird (CanvasFlip 2017).
Oftmals werden Pflichtfelder mit einem Stern oder einem Punkt markiert. Da meist mehr Pflichtfelder als optionale Felder vorhanden sind, ist es ratsam, die Logik umzukehren und lediglich die optionalen Felder entsprechend zu markieren. Da Sterne in unseren Köpfen schon so sehr mit Pflichtfeldern verknüpft sind, sollten diese allerdings nicht für optionale Eingabefelder verwendet werden – stattdessen lieber »(optional)« in dieser Form hinter dem Label ausschreiben (Kapoor 2018).
Die Validierung der Daten sollte direkt während oder nach der Eingabe erfolgen. Ist die Eingabe korrekt, kann dies beispielsweise mit Hilfe eines Häkchens angezeigt werden. Ist die Eingabe hingegen falsch, sollte neben dem allgemeinen Hinweis, dass ein Fehler vorliegt auch möglichst genau beschrieben werden, was den Fehler hervorgerufen hat. Kryptische Fehlercodes haben an dieser Stelle genauso wenig verloren wie allgemeine Beschreibung wie etwa »Es ist ein Fehler aufgetreten!«.
Die Fehlerquote kann verringert werden, indem die Eingabefelder unterstützend zur Seite stehen. Eingabefelder für Geburtsdaten können beispielsweise nur Ziffern zulassen, während die Punkte dazwischen automatisch gesetzt werden. Einer der nervenaufreibendsten Schritte ist das Ausfüllen der Wohn- beziehungsweise Rechnungsadresse. Hier können Adressdatenbanken helfen, die meisten Felder automatisch auszufüllen, indem beim Eintippen der Straße und Hausnummer Vorschläge der gesamten Adresse gemacht werden, die angeklickt werden können. Wird ein Vorschlag ausgewählt, füllen sich die übrigen Textfelder wie Postleitzahl, Ort oder Land automatisch aus. Der aktuelle Standort des Nutzers kann dabei helfen, die Genauigkeit der Vorschläge zu erhöhen.
Wurde die Option gewählt, sich vor dem Zahlungsprozess zu registrieren, benötigen wir neben den üblichen Angaben zusätzlich ein Passwort.
Nach wie vor finden sich für die Wahl eines Passworts auf vielen Seiten zwei Eingabefelder, das zweite meist mit dem Label »Passwort wiederholen« versehen. Eine Studie hat herausgefunden, dass über ein Viertel aller in diesem Prozess abgebrochenen Vorgänge genau darauf zurückzuführen sind (New 2014).
Stattdessen empfiehlt es sich deshalb, eine Option anzubieten, das ursprünglich versteckte Passwort im Textfeld sichtbar zu machen. Entweder mittels einer Checkbox unterhalb des Eingabefeldes oder mittels eines Icons – häufig ein Auge – direkt im Feld (Tseng 2015).
Um den eigenen Onlineshop möglichst sicher zu gestalten, empfiehlt es sich, für Passwörter bestimmte Regeln aufzustellen. Solche Regeln können eine Mindestlänge des Passworts sein oder die Pflicht, ein Sonderzeichen zu verwenden. Hierbei ist darauf zu achten, dass es mit den Regeln nicht übertrieben wird und die Nutzer dadurch nicht gezwungen werden, Passwörter zu wählen, die sie sofort wieder vergessen, weil sie zu stark von dem abweichen, was sie sonst verwenden. Eine Länge von mindestens acht Zeichen und das Vorhandensein mindestens eines Sonderzeichens erhöhen die Passwortstärke meist schon signifikant (Metivier 2016). Die Passwortvorgaben sollten gut ersichtlich platziert sein und können – geschickt gestaltet – auch zur Emotionalisierung beitragen, indem diese beispielsweise in einem kleinen Anhänger platziert sind und animiert durchgestrichen werden, nachdem sie erfüllt wurden.
Nutzer, die sich schon registriert haben und damit über Anmeldedaten verfügen, können sich direkt einloggen. Den Login-Prozess kann man – wie auch schon das Erstellen eines Passworts – mit Visual-Storytelling auf unterschiedlichste Art unterstützen. Für unseren Hochzeitspapeterie-Shop habe ich mich für eine sympathisch-humorvolle Variante entschieden. Unsere Brieftaube wacht über die Eingabefelder. Und während das Passwort eingegeben wird, hält sie sich – wie es sich gehört – die Augen zu.
Probier es aus: Einfach ins Passwort-Feld klicken und tippen. Die Illustration ist von Nina Hintner
An dieser Stelle möchte ich eine kleine Anekdote aus dem Jahr 2016 erzählen. Lange habe ich an meinem ersten, eigenen Onlineshop gearbeitet. Und endlich war er fertig. Alles hat perfekt funktioniert, Usability-Tests haben gezeigt, dass er für die Zielgruppe ohne Probleme bedienbar ist und auch die Performance ließ nichts zu wünschen übrig. Und dennoch: Irgendwas hat den Bestellprozess für Testnutzer und auch für mich nicht hundertprozentig zufriedenstellend gemacht. Nach langer Recherche, weiteren Usability-Tests und einigen Experimenten wusste ich, wo das Problem lag. Mein Shopsystem funktionierte zu gut.
Wie bitte? Ja, tatsächlich. Und die Antwort ist gar nicht so kompliziert. Wenn eine durch eine Maschine durchgeführte Aufgabe schneller als erwartet ausgeführt wird oder wurde, glaubt man der Maschine entweder nicht, dass die Aufgabe ordnungsgemäß durchgeführt wurde, oder man hat das Gefühl, dass gar nichts passiert ist.
Und das war eben auch das Problem meines Shopsystems. Ein Klick auf den »Jetzt bestellen«-Button hat direkt zur Bestellbestätigung geführt. Keine Verzögerung. Kein kurzer Ladebalken. Nichts. So, als wäre ein Schritt übersprungen worden. Warum bekommen wir dieses Gefühl? Es scheint doch ziemlich unlogisch, dass wir Dinge, die eigentlich schnell erledigt sein könnten, lieber langsam erledigt haben. Oder?
Eine mögliche Antwort könnte mit unserem in uns innewohnenden Verständnis zu tun haben, wie Dinge in der »realen Welt« ablaufen – in unserem Fall ein Einkauf: Wir gehen zur Kasse, stellen uns an, legen die Waren auf den Tisch, bezahlen, bedanken uns und verlassen das Geschäft. All das wird uns in der schnellen digitalen Welt genommen. Und das spüren wir.
Das hat noch größere Auswirkungen auf uns, wenn es um mehr geht als nur eine Bestellung bei einem kleinen Onlineshop. Beispielsweise, wenn es um unser Vertrauen geht. So verlangsamt zum Beispiel Facebook das Interface, um mehr Vertrauen zu schaffen, etwa beim Privatsphärecheck.
Ein freundlicher Roboter, der als Arzt verkleidet in Erscheinung tritt, macht für uns auf Facebook eben diesen Check. Schritt für Schritt wird uns gezeigt, welche Elemente unseres Profils gerade überprüft werden, während ein Ladebalken von links nach rechts läuft. Man bekommt das Gefühl, dass sich Facebook im Moment wirklich ernsthaft um uns kümmert. Wir sollen damit ein Gefühl dafür bekommen, welch aufwendige Arbeit hinter dem Schutz unserer Privatsphäre steckt. Und dies vermittelt uns Facebook mit Hilfe der Zeit, die wir warten, während scheinbar viel im Hintergrund gerechnet und geprüft wird.
Die Realität ist natürlich eine ganz andere: Die Server von Facebook sind selbstverständlich schnell genug, all das im Bruchteil einer Sekunde zu überprüfen. Dies würde Facebook aber nicht die Möglichkeit geben, seinen Nutzern zu zeigen, was im Hintergrund für sie getan wird, und ebenso wenig kann glaubwürdig vermittelt werden, dass sich Facebook um die Privatsphäre jedes einzelnen Nutzers kümmert (Wilson 2016).
Eine 2011 von der Harvard Business School durchgeführte Studie mit zwei Gruppen bestätigt dies. Für die Studie wurde eine Website zur Buchung von Reisen erstellt. Die erste Gruppe der Testteilnehmer bekam einen Shop, in dem es keine Verzögerungen gab und alles sofort funktionierte. Die zweite Gruppe hatte Verzögerungen von bis zu unglaublichen 50 Sekunden – dabei wurde allerdings laufend von der Seite mitgeteilt, was gerade im Hintergrund vermeintlich passiert. Das Ergebnis: Der Onlineshop mit den Verzögerungen genoss deutlich mehr Vertrauen. Dieses Phänomen wird als Labor-Illusion bezeichnet. (Buell u. Norton 2011, S. 1564–1579)
Wie in vielen anderen Bereichen der User-Experience reicht es eben nicht, vom Offensichtlichen – in diesem Fall den Nutzern schnellstmöglich alles zu geben, wonach sie gefragt haben – auszugehen. Es gilt, sich viele Gedanken darüber zu machen, wie man Nutzer durch seinen Shop führt. Und vor allem wie schnell. Denn manchmal kann auch scheinbar bessere Effizienz dem Gesamterlebnis schaden (Anderson 2013).
Die Lösung für mein Shopsystem war also eine künstliche Verzögerung mit einem zufälligen Wert zwischen zwei und drei Sekunden einzubauen. Zusätzlich mit einer kleinen, netten Ladeanimation versehen und abschließend einer Übergangsanimation zur Bestellbestätigung. Danach war auch das letzte Problem meines ersten kleinen Shops gelöst.
Kunden wollen nicht Produkte kaufen. Kunden wollen Produkte haben – und die Emotionen, die sie mit ihnen in Verbindung bringen oder sich davon erwarten. Genau jene Emotionalität sollten wir auch nach der Bestellung auf der Bestellbestätigungsseite nutzen, um unsere Kunden weiter zu binden – und damit in Folge möglicherweise dazu veranlassen, abermals bei uns zu bestellen oder uns gar Freunden zu empfehlen. Ein Code für beispielsweise 10 Prozent Rabatt auf den nächsten Einkauf kann dies bestärken.
Das erste jedoch sollte sein, sich für die Bestellung zu bedanken – die Kunden sollen sich schließlich gut und in ihrer Entscheidung bestärkt fühlen. Auch hier lässt es sich wunderbar mit Visual-Storytelling arbeiten, zum Beispiel könnte es in unserem Shop eine kleine Animation geben, die unsere Brieftaube zeigt, wie sie die Bestelldaten zu uns fliegt.
Wir wissen ja: Vorfreude ist die schönste Freude. Deshalb sollte die Gelegenheit auf dieser Seite genutzt werden, über die nächste Schritte sowie die dafür benötigte Zeit zu informieren. Wird der Auftrag direkt einem unserer Mitarbeiter zugeteilt, könnte man dessen Vornamen mit einem Bild von ihm zeigen. Solch persönliche Noten lassen uns – egal wie groß das Unternehmen ist – klein, sympathisch und zugänglich erscheinen.
Abschließend könnte es für jene Kunden, die als Gast bestellt haben, an dieser Stelle die Möglichkeit geben, mit nur einem Klick und der Wahl eines Passwortes – wie schon beschrieben – einen Account zu erstellen. Die Schwelle, dies zu tun, ist in diesem Moment deutlich geringer. Die Nennung von Vorteilen wie zum Beispiel der Möglichkeit einer Sendungsverfolgung oder der Zusendung von Angeboten kann die Hemmschwelle weiter senken. So werden aus gewöhnlichen Kunden wahre Markenbotschafter mit unschätzbarem Wert. Ziel erreicht.