PAGE online

Transparente Check-outs: Dos & Don’ts im E-Commerce

Vor der Conversion droht der Warenkorbabbruch? Vergesst endlich Amazon als Vorbild für gelungenes Shopdesign. Es geht um Kundenvertrauen und Designelemente, mit denen man es stärkt oder zerstört.

Check-out-Prozesse, Beispiel Clinique

Klar gehört der Einkaufskorb im Onlineshop in die Ecke oben rechts – ein längst gelerntes, nachahmenswertes UX-Detail.

Geht es aber um transparente Abomodelle oder nutzer:innenfreundliche Bestellprozesse, kann man hier höchstens an schlechten Beispielen lernen: Etliche Dark Patterns, inkonsi­s­tente Gestaltung und unübersichtliche Interfaces können Amazon-Stammkund:innen vielleicht nicht abschrecken – doch neue Käufer:innen gewinnt man auf diese Weise nicht.

Die wichtigsten Infos zum Thema »Kunden gewinnen mit transparenten und innovativen Check-out-Prozessen«

Es fängt auf der Landingpage an und zieht sich durch die Produktseiten bis zum Warenkorb. Die wichtigste und sensibelste Stelle bleibt immer noch die Kasse, das wissen wir aus dem echten Leben und dem Neuromarketing: Liegen alle unsere Artikel im Wagen, ist die anstrengende Entscheidungsarbeit für unser Gehirn getan – und es zählt nur noch eins:

Wo können wir möglichst schnell und stressfrei bezahlen? Wo ist die kürzeste Schlange? Und wer fragt nicht nach Bonuspunkten, Geburtsdaten oder einer Telefonnummer, sondern drückt uns noch einen Rabatt oder ein Pröbchen in die Hand?

Check-out-Prozesse, Beispiel Clinique, Detail

Metaverse mit Warenkorb

Clinique bietet mit der 3D-Experience »Clinique Lab« zwar keinen neuen Check-out-Prozess, zeigt aber, wie man die neuen Technologien geschickt in ein Shop-Interface einbindet. Während des Markenerlebnisses bleibt das Menü immer sichtbar, sodass man jederzeit in den Shop zurückkehren oder den Warenkorb einsehen kann. Im »Clinique Lab« lässt sich eine Menge über die französische Kosmetikmarke erfahren, und man erhält einen Code für zusätzliche Proben beim Check-out. Die verteilt Clinique dort ohnehin großzügig.

 

Check-out-Prozesse, Beispiel Grundschulkönig

Gastzugang – ganz elegant

Wer außer Amazon heute noch verlangt, dass Kund:innen im Shop ein Konto anlegen, verschenkt Potenzial und Speicherplatz. Hieß es hier lange, man solle einen Gast­zugang anbieten, zeigen Shops wie Grundschulkönig.de eine elegante Variante, wie man Stammkund:innen mit Transparenz gewinnt: Gefällt uns die Kaufabwicklung, können wir uns während der Bezahlung für ein Kundenkonto entscheiden. Das ermöglicht dann unter anderem eine gezieltere Follow-up- beziehungsweise Afterbuy-Experience. Tatsächlich bleiben abgebrochene Warenkörbe in deutschen Shops einfach liegen. Dabei können Follow-up-Mails mit Rabattcode für Artikel im verwaisten Warenkorb zögernde Käufer:innen in den Shop zurückholen! Wer kein Kundenkonto eröffnet, kann in diesem Check-out-Prozess das Paket-Tracking mit einem Extra-Häckchen dennoch aktivieren.

Check-out-Prozesse, Beispiel Coupang

Check-out-Prozesse, Beispiel Coupang, Detail

Warenkorb weglassen

Ihren eigenen One-Click-Ansatz haben die UX-Designer:innen der koreanischen Plattform Coupang jüngst gefunden. Mit eingebundenem Check-out-Prozess direkt auf den Produktseiten umgehen sie den Warenkorb und wollen so vor allem eine bessere Experience für ältere Kund:innen bieten. Anders als die ähnlichfarbigen »1-Click«- und »Kaufen«-Buttons bei Amazon unterscheiden sich die beiden Coupang-Buttons deutlich. Blau sagt: »Jetzt kaufen«. Ein Kundenkonto ist Voraussetzung.

Check-out-Prozesse, Beispiel Zalando

Lieferdatum versus Lieferzeitraum

Für einen möglichst transparenten Check-out-Prozess spielt der vermeintlich kleine Unterschied zwischen Lieferzeitraum und Lieferdatum eine große Rolle. Während die Angabe, ob und wann ein Produkt verfügbar ist, auf den Produktseiten sicherlich hilfreich ist, vermittelt während des Check-out-Prozesses nur ein eindeutiges voraussichtliches Lieferdatum Sicherheit und Planbarkeit.

Check-out-Prozesse, Beispiel Spectacles

Tempo und Vertrauen

Was bedeutet schnell? Die Spectacles bei Snapchat könnten wir dank Express-Check-out via PayPal, Apple oder Google Pay in weniger als 30 Sekunden bestellen – die gängigsten Zahlungsschnittstellen zu integrieren bedeutet auch, den Shop in Sachen Accessibility zu verbessern. Aber lassen wir diese in deutschen Shops viel zu selten verlegten Abkürzungen mal außen vor: Hierzulande bricht die Hälfte aller Käufer und Käuferinnen den Check-out-Prozess ab, wenn er länger als drei Minuten dauert. Wie leiten wir also unsere Kund:innen möglichst reibungslos zum Kaufabschluss? By Designselbstverständlich, denn in der Formulargestaltung besteht enormes Opti­mierungspotenzial. Es sind die simplen, aber entscheidenden Dinge, an denen Händler:innen schrauben können: Autofill für Adressdaten, Lokalisierung oder Echtzeit­fehler­meldungen.

Check-out-Prozesse, Beispiel Macy’s

Versandkosten und Zölle nicht verstecken

Hier kann man von internationalen Shops lernen, die sich durch Lokalisierung auszeichnen und dadurch auch schon lange vor
dem Check-out-Prozess auf die spezifischen Versandkosten hinweisen können. Auch auf anfallende Zollgebühren lassen sich Kund:innen lieber früher als später hinweisen. Macy’s macht das nach wie vor sehr gut, und auch von Nike oder Etsy kann man in Sachen transparente Zusatzkosten lernen.

Check-out-Prozesse, Beispiel Shein

Warenkorb als Merkzettel

Ganz anders als im Supermarkt legen wir im Onlineshop manchmal Artikel in den Warenkorb, um sie zu vergleichen oder für später zurückzulegen. Der Online-Warenkorb ist »eine Art externer Speicher«, wie die Nielsen Norman Group 2018 in einer Studie feststellte (www.nngroup.com/reports/ecommerce-user-experience). Wer also den Warenkorb um eine Funktion zum Merken der Artikel erweitert, kann Kund:innen zurückholen und langfristig binden. Der Powerseller Shein bietet beide Varianten. Artikel, die man hier abwählt, bleiben für den nächsten Besuch im Warenkorb zurück.

Formulardesign: Tipps für transparente Check-outs

Scheuen Sie keine Anstrengungen, um die Eingabe von Adress- und Bezahldaten so einfach wie möglich zu gestalten!

1. Nur das Nötigste abfragen

Halten Sie Ihr Check-out-Interface so minimalistisch wie möglich. Alle wichtigen Informationen wie Versandkosten und Liefertermin sollten den Kund:innen bereits zu Beginn des Prozesses bewusst und in der Warenkorbansicht übersichtlich zusammengefasst sein. Je weniger Interaktionsmöglichkeiten den Userinnen und Usern jetzt zur Verfügung stehen, desto reibungsloser gelangen sie zum Ziel. Fragen Sie nur die unbedingt notwendigen Daten – also Name, Adresse und Bezahlvariante – ab und verzichten Sie in allen Check-out-Formularen auf freiwillige Angaben, das erspart auch die Kennzeichnung von obligatorischen Feldern.

2. Formularabfrage

Erleichtern Sie die Dateneingabe an allen Stellen Ihrer Formulare! Das bedeutet automatische Adressvervollständigung, aber auch Tastaturelemente und Auswahl­me­nüs für verschiedene Interaktionen. Für die Eingabe von Kreditkartenziffern und Telefonnummern (falls etwa durch die Versandart notwendig) bieten Sie eine Wähltastatur. Für die Adresseingabe nutzen Sie automatische Lokalisierung und Adressvervollständigung sowie eine Texttastatur. Vermeiden Sie Drop-down-Menüs, wo immer möglich – sie sind große Zeitfresser und meist absolut entbehrlich.

3. Eingaben unmittelbar checken

Lassen Sie jede Zeile in Echtzeit automatisch überprüfen und kennzeichnen Sie fehlerhafte Eingaben visuell. Vollständig und richtig ausgefüllte Formularfelder sollten aus dem Sichtfeld verschwinden und unausgefüllte Felder automatisch nachrutschen, damit auf ihnen der Fokus liegt.

4. Liefer- und Rechnungsadresse editierbar halten

In den meisten Fällen entspricht die Versand­adresse der Rechnungsadresse. Vermeiden Sie eine separate Abfrage und bieten Sie eine Funktion an, die die Versand- als Rechnungsadresse übernimmt. Die Lieferadresse sollte sich bis zum abschließenden Bezahlschritt ändern lassen.

5. Bestellübersicht klar und interaktiv gestalten

Die Bestellzusammenfassung sollte vor allen Dingen übersichtlich gestaltet sein und sich von den User:innen jederzeit verändern lassen. Die Zahl der Artikel im Warenkorb und die Produkte sollten hier auf einen Blick zu erkennen und zu bearbeiten sein. Felder für Gutscheine und Rabatte nicht verstecken, sondern an dieser Stelle hervorheben.

Dieser Beitrag ist zuerst in PAGE 7.2023 erschienen.

PAGE 07.2023

Packaging für junge D2C-Marken ++ Designlehre an der Hochschule ++ Type und UI Design fürs IoT ++ B2B Branding ++ ENGLISH SPECIAL House of Gül ++ New Work: Tools & Workflows ++ Making-of: iOS-App Heavy Mental ++ VR-Produktion bei BECC Agency ++ E-Commerce: Transparente Check-outs ++ Start in die Designlehre

9,90 €
11,90 €
Lieferzeit: 2-3 Werktage
AGB

Schreibe einen Kommentar

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

Das könnte dich auch interessieren