So entwerfen Sie einen E-Commerce-Checkout-Flow, der konvertiert

Ihr E-Commerce-Checkout-Flow ist der Ort, an dem das Geld ist. Denk darüber nach. Zufällige Besucher verlassen die Website, bevor sie den Checkout-Trichter betreten. Motivierte Käufer kommen hierher, um ihre Bestellung abzuschließen.

Jede kleine Designverbesserung in Ihrer Checkout-UX hat normalerweise einen direkten Einfluss darauf, wie viel Geld Ihre Website verdient.

Eine von mir analysierte E-Commerce-Site hatte kürzlich eine Zahlungsseite, auf der 84,7% des Traffics gekauft wurden. Ich habe berechnet, dass, wenn wir das auf 90 % erhöhen könnten, dies zu 461 zusätzlichen Bestellungen und zusätzlichen 87.175 USD pro Monat führen würde – ein Umsatzwachstum von 23,9%. „Kleine“ Gewinne können enorm sein.

Die Frage lautet also: „Wie bringen wir mehr Leute dazu, unseren Checkout-Flow zu durchlaufen und Käufe abzuschließen? Spezifische Taktiken hängen von Ihrer Website ab, aber die Prinzipien, um die Antwort zu finden, sind universell.

Ein Rahmen, um über E-Commerce-Checkouts nachzudenken: Das Fogg-Verhaltensmodell

Die Quintessenz lautet: Verhalten = Motivation x Fähigkeit x Trigger.

Hier ist das Modell:

Sie möchten die obere rechte Ecke der Grafik anvisieren – hohe Motivation, einfach zu machen, ein Auslöser vorhanden. Wenn Sie eine hohe Motivation und geringe Fähigkeiten haben (schwierig), werden Sie frustriert. Wenn es wenig motiviert, aber einfach ist (zB den Müll rausbringen), ärgert man sich.

Wie Amazon das Fogg-Verhaltensmodell verwendet

Wenn Amazon Ihnen eine E-Mail mit einer Produktwerbung schickt, ist das Motivation und Auslöser. Die Leute klicken auf den Link und gelangen auf die Produktseite. Sie lesen die Texte und Rezensionen und sehen sich das Bild an, was die Motivation steigert. „In den Warenkorb“ ist der Auslöser, um den Bestellvorgang einzuleiten.

Was ist mit der Fähigkeit? Wie einfach ist es, den Checkout-Prozess abzuschließen? Hier tritt Amazon in den Hintern. Sie müssen nur Ihr Passwort eingeben und ein paar Mal klicken. Der Kassenablauf ist reibungsfrei.

Hier ist der tatsächliche Workflow in der Mobile-Commerce-Anwendung von Amazon:

Gemacht und gemacht. Lassen Sie uns den gesamten Checkout-Flow Schritt für Schritt durchgehen, um zu sehen, was einen guten Checkout ausmacht.

Hinweis: In unserem umfassenden Bericht zu E-Commerce-Richtlinien (247 Richtlinien speziell für E-Commerce) finden Sie zahlreiche weitere Tipps für den E-Commerce.

So gestalten Sie Ihre „In den Warenkorb“-Funktion und Ihre Warenkorbseite

Alles beginnt damit, dass die Leute etwas in den Warenkorb legen. In dem Moment, in dem ein Besucher den ersten Artikel in seinen Warenkorb legt, stöbert er nicht, sondern kauft.

Wie sollte "In den Warenkorb" aussehen?

Was sollte passieren, wenn Leute auf Ihren Produktseiten etwas in den Warenkorb legen?

Es sollte dummerweise offensichtlich sein, dass sie etwas in den Warenkorb gelegt haben. Klare Bestätigung. Es ist lächerlich, wie viele Websites dies vermasseln, indem sie entweder keine ordnungsgemäße Bestätigung anzeigen oder eine winzige Animation oder einen kleinen Bestätigungstext anzeigen, der schwer zu erkennen ist.

Sie können kein Warenkorb hinzufügen in Bonobos verpassen. Nachdem Sie auf „In den Warenkorb“ geklickt haben, erscheint der Warenkorb mit einer kleinen Animation, was gut ist, da das menschliche Auge auf Bewegungen reagiert. Es ist ein subtiler visueller Hinweis, der den Wechsel vom Besucher zum Käufer anzeigt.

Auch der Warenkorbinhalt sowie der Button „Zur Kasse“ bleiben so lange sichtbar, bis der Nutzer woanders klickt. Das ist gut. Ich würde die Farbe der Schaltfläche "Zur Kasse" in etwas anderes als Blau ändern - sie sticht nicht genug hervor. Die Hauptsache in der visuellen Hierarchie ist die Schaltfläche „In den Warenkorb“, aber das Produkt befindet sich bereits im Warenkorb.

ASOS zeigt auch eine kleine Animation. Sie öffnen den Warenkorbinhalt und klappen ihn nach wenigen Sekunden wieder ein. Die Schaltfläche „In die Tasche“ ändert sich auch in „Hinzugefügt“, was eine schöne Bestätigung für Käufer ist:

Ich würde den Inhalt des Warenkorbs geöffnet lassen, bis der Benutzer eine Auswahl trifft, indem er irgendwo klickt. Auf diese Weise starrt ihnen die Schaltfläche „Zur Kasse“ immer wieder ins Gesicht.

Obwohl wir immer möchten, dass sie mehr Dinge kaufen, kann die Verbesserung des Prozesses zum Kauf auch nur eines einzelnen Artikels zu großen Verbesserungen führen. Es ist immer eine gute Idee, sie zur Kasse zu schubsen.

Sobald das Produkt im Warenkorb ist, was dann?

Es gibt zwei Hauptansätze:

1. Zeigen Sie die Bestätigung "Warenkorb hinzufügen" an und halten Sie die Benutzer auf derselben Seite. Positiv: Die Leute haben nicht darum gebeten, zu einer anderen Seite zu wechseln, daher gibt es keine Überraschungen. Sie könnten auch erwägen, weitere Artikel in den Warenkorb zu legen, bevor sie zur Kasse gehen. Nachteile: Sie haben das Produkt, das sie gerade anstarren, bereits im Warenkorb. Es wäre nützlicher für Sie, wenn sie sich etwas anderes ansehen würden, das sie vielleicht kaufen möchten.
2. Übertragen Sie den Benutzer auf die Warenkorbseite. Vorteile: Sie bringen sie der Zahlung einen Schritt näher. Dies ist auch eine großartige Gelegenheit, Upselling-Angebote zu machen. Nachteile: Sie könnten bei der Maximierung von "Artikeln pro Einkaufswagen" verlieren.

Amazon führt Sie zu einer Warenkorbseite, bestätigt, dass Sie ein Produkt in den Warenkorb gelegt haben, und zeigt Ihnen Upsells an. Was Amazon gut macht, ist, den Warenkorbinhalt zu verkleinern, sodass Upsells auffallen:

Die richtige Balance potenzieller Strategien hängt von Ihrer Branche und Ihren Zielen ab, und Sie möchten dies auf jeden Fall testen.

Zu beachtende Kennzahlen:

• Durchschnittlicher Transaktionswert;
• Durchschnittliche Menge pro Transaktion.

Wir möchten nicht nur die Anzahl der Transaktionen erhöhen, sondern auch den für jede Transaktion ausgegebenen Betrag.

Warenkorbinhalt gut anzeigen

Die wichtigsten Prinzipien für die effektive Darstellung von Warenkorbinhalten sind Übersichtlichkeit und Kontrolle.

• Klarheit. Es ist einfach und offensichtlich, den Inhalt des Warenkorbs und die endgültigen Kosten, einschließlich Versand und Steuern, zu verstehen. Überraschende Kosten auf der ganzen Linie führen dazu, dass die Leute Karren verlassen.
• Kontrolle: Sie können ganz einfach Änderungen vornehmen, z. B. die Menge aktualisieren oder Produkte entfernen.

ASOS hat eine gute Sicht auf die Warenkorbseite:

Was sie richtig machen:

• Produktfotos;
• Produktname und Preis;
• Möglichkeit, Details wie die Größe zu entfernen, für später zu speichern oder zu ändern;
• Zeigen Sie die Art der Zahlungen an, die sie akzeptieren;
• Zeigen Sie den Gesamtpreis an und bestätigen Sie die kostenlose Lieferung;
• Klarer Call-to-Action zum „Checkout“;
• Reduzieren Sie die Unsicherheit, indem Sie „Einfache Renditen“ hervorheben.

Indochino hat einen ansprechenden, minimalistischen Ansatz bei der Präsentation des Warenkorbinhalts. Allerdings weist die Seite noch ein paar Probleme auf, wie eine prominente Gutscheinbox und die Unfähigkeit, die Mengen zu ändern:

Richten Sie die visuelle Hierarchie richtig ein

Die Nummer eins in der visuellen Hierarchie sollte sein, zur Kasse zu gehen. (Testen Sie verschiedene CTAs.). Es sollte zwei Handlungsaufforderungen geben: einen über und einen unter dem Warenkorb.

Etwa so – die beiden Checkout-Buttons stechen deutlich hervor:

Modcloth hat diese Seite seit unserer letzten Überprüfung verbessert. Zuvor erforderte die Aktualisierung der Menge die Eingabe. Jetzt können Sie Stepper verwenden, um die Menge zu erhöhen oder zu verringern.

Beachten Sie, dass Modcloth auch eine PayPal-Option bietet. Während die meisten Leute es vorziehen, mit Kreditkarte zu bezahlen, ist das Anbieten von 1-2 alternativen Zahlungsmethoden (z. B. PayPal, Amazon) eine gute Idee und hilft nachweislich bei der Conversion. Zu viele Entscheidungen sind jedoch schädlich.

Modcloth erinnert Sie auch daran, dass sie bei Bestellungen über 75 US-Dollar kostenlose Rücksendungen und kostenlosen Versand anbieten.

Machen Sie Coupons nicht prominent

Wenn die Leute das Feld „Gutscheincode hier eingeben“ sehen, fühlen sie sich weniger besonders. "Wie kommt es, dass ich keine habe?" Viele gehen zu Google, um einen Gutschein zu finden; viele kehren nie zurück. Das Verlassen der Website auf der Suche nach Coupons ist ein häufiger Grund für das Abbrechen des Einkaufswagens.

Das ist also keine gute Idee:

Verwenden Sie stattdessen einen Textlink mit der Aufschrift "Haben Sie einen Gutschein?" oder etwas ähnliches. Wenn jemand auf den Link klickt, lassen Sie ein Eingabefeld – wie das obige – erscheinen. Textlinks sind weniger prominent, sodass weniger Leute darauf achten.

Kunden, die bereits einen Gutscheincode besitzen, suchen nach einer Möglichkeit, diesen einzugeben. Wenn Sie es nicht wirklich gut verbergen, werden sie es finden und ihren Gutscheincode anwenden können.

Erinnern Sie Käufer an die guten Dinge: Versand, Rücksendungen und Sicherheit

Wann bekommen sie ihre Ware? Was kostet der Versand. Ist es frei? Wird die Transaktion sicher sein? Erinnere die Leute daran.

Hier ist ein Beispiel, das diese drei Schlüsselbotschaften unter der Checkout-Schaltfläche zeigt, auf der auch "Jetzt sicher bezahlen" steht:

Persistente Warenkörbe FTW

Wenn Leute etwas in den Warenkorb legen, lassen Sie den Inhalt des Warenkorbs nicht verfallen. Verwenden Sie E-Mails zum Abbruch von Einkaufswagen und Retargeting-Anzeigen, um die Leute nächste Woche oder nächsten Monat zurückzubringen, damit sie dort weitermachen können, wo sie aufgehört haben.

Anmeldeprozess: Um ein Konto zu erstellen oder nicht?

Viele E-Commerce-Sites möchten, dass sich Käufer vor dem Kauf anmelden. Einige erzwingen sogar eine Registrierung (dh kein Kauf ohne Registrierung möglich). Lange Rede kurzer Sinn: Tu es nicht. Es schadet Conversions. Viel.

Jeder Vierte bricht Online-Käufe aufgrund einer Zwangsregistrierung ab. Die Zwangsregistrierung ist Teil des „Greedy Marketer Syndroms“. Es ist leicht zu verstehen, warum E-Commerce-Vermarkter dies tun wollen – sie hoffen, dass der Benutzer „eingesperrt“ wird und mehr einkaufen wird, weil er ein Konto hat.

Ist das wirklich so ? Oh bitte. Auf wie vielen Websites haben Sie ein registriertes Konto? Fühlen Sie sich ihnen deshalb jetzt treu? Ich wette, Sie haben sich bei den meisten nicht mehr als einmal angemeldet.

Hier ist eine gute Geschichte über die Zwangsregistrierung, erzählt von Usability-Guru Jared Spool:

Ein einfacheres Formular ist kaum vorstellbar: zwei Felder, zwei Schaltflächen und ein Link. Es stellte sich jedoch heraus, dass diese Form Kunden daran hinderte, Produkte von einer großen E-Commerce-Site im Wert von 300.000.000 USD pro Jahr zu kaufen. Was noch schlimmer war: Die Designer der Site hatten keine Ahnung, dass es überhaupt ein Problem gab.

Das Formular war einfach. Die Felder waren E-Mail-Adresse und Passwort. Die Schaltflächen waren Anmelden und Registrieren. Der Link lautete Passwort vergessen. Es war das Login-Formular für die Site. Es ist ein Formular, dem Benutzer die ganze Zeit begegnen. Wie könnten sie damit Probleme haben?

Das Problem lag nicht so sehr am Layout des Formulars, sondern daran, wo das Formular lebte. Benutzer stießen darauf, nachdem sie ihren Warenkorb mit Produkten gefüllt hatten, die sie kaufen wollten, und auf die Schaltfläche zur Kasse klicken. Es kam, bevor sie tatsächlich die Informationen eingeben konnten, um das Produkt zu bezahlen.

Das Team sah das Formular als Möglichkeit für Stammkunden, schneller einzukaufen. Erstkäufern würde der zusätzliche Aufwand der Registrierung nichts ausmachen, denn schließlich kommen sie für mehr zurück und wissen die Zweckmäßigkeit bei Folgekäufen zu schätzen. Jeder gewinnt, oder?

Wir haben Usability-Tests mit Personen durchgeführt, die Produkte von der Website kaufen mussten. Wir baten sie, ihre Einkaufslisten mitzubringen, und gaben ihnen das Geld, um die Einkäufe zu tätigen. Sie mussten nur den Kauf abschließen.

Bei den Erstkäufern lagen wir falsch. Es machte ihnen nichts aus sich zu registrieren. Sie ärgerten sich darüber, dass sie sich registrieren mussten, als sie auf die Seite stießen. Ein Käufer sagte uns: „Ich bin nicht hier, um eine Beziehung einzugehen. Ich möchte nur etwas kaufen."

Durch die Abschaffung der Zwangsregistrierung steigerten sie den Umsatz um 300 Millionen US-Dollar.

Das Team von Spool fand auch heraus, dass die meisten Leute mehrere Konten im System hatten. Die Leute hatten vergessen, dass sie bereits Konten hatten. Sie erhielten Fehlermeldungen, als sie versuchten, eine mit ihrer Standard-E-Mail zu erstellen, sodass sie eine alternative E-Mail verwenden mussten, um weitere Konten zu erstellen.

Was sollten Sie stattdessen tun? Bieten Sie immer eine Gastkasse an. Sie können nach dem Verkauf an der Registrierung arbeiten:

• Erwähnen Sie nicht einmal das Wort „Registrieren“. Sagen Sie „Neukunde“ oder einen ähnlichen Begriff.
• Bieten Sie nach dem Check-out die Kontoerstellung auf der Seite "Danke" an. Sie haben bereits ihren Namen, ihre E-Mail-Adresse und ihre Adresse an der Kasse, daher sollte es nicht mehr als ein paar Klicks dauern, um ein Konto zu erstellen. Fragen Sie nach dem gewünschten Passwort (oder bieten Sie eine Option zur automatischen Generierung an) und bestätigen Sie die Berechtigung zum Erstellen ihres Kontos.

Meiner Erfahrung nach ist der gängigste Ansatz auf E-Commerce-Sites immer noch suboptimal. Insgesamt ist es zu beschäftigt und fordert neue Kunden auf, eine Wahl zu treffen, was zu Zögern führt:

Es gibt mehrere, weitaus günstigere Optionen.

Checkout-Registrierungsoption 1

Geben Sie Benutzern zwei Möglichkeiten, neu oder zurückkehrend:

Asos hatte diesen Ansatz nicht immer. Dies war ihre vorherige Anmeldeseite, die drei Möglichkeiten hatte:

Das Abbrechen dieses Ansatzes und der Wechsel zu einer optimierten Version reduzierten die Warenkorbabbrüche um 50 %!

Es ist immer noch (im Wesentlichen) eine Zwangsregistrierung, aber es ist anders verpackt. Es ist auch einfacher mit Social-Login-Optionen. Ein typisches Usability-Problem wird auf wenige Klicks reduziert.

Checkout- Registrierungsoption 2

Warenkorbabbrüche sind ein großes Problem. Wenn Sie im Voraus nach Ihrer E-Mail fragen, können Sie ganz einfach einen Wiederherstellungsprozess für abgebrochene Warenkörbe starten. Außerdem gibt es zwei einfache Möglichkeiten – keine Reizüberflutung:

Checkout- Registrierungsoption 3

Eine andere gute Möglichkeit besteht darin, den Anmeldebildschirm ganz zu überspringen. Stattdessen gehen Sie einfach standardmäßig zur Gastkasse. Personen mit einem bestehenden Konto können sich über den Link einloggen und neue Kunden können nach der Zahlung ein Konto erstellen:

Was Diamond Candles gut macht, ist nicht einmal sichtbar. Sie erstellen automatisch ein Konto für Sie, erwähnen es jedoch nicht. Nehmen wir an, Sie gehen vier Gast-Checkouts mit derselben E-Mail-Adresse durch und entscheiden sich dann schließlich, ein Konto zu erstellen (im Wesentlichen ein Passwort eingeben).

Alle Ihre vorherigen Bestellungen mit dieser E-Mail-Adresse werden für dieses Konto zusammengeführt, sodass Ihr neu erstelltes Konto eine ordnungsgemäße Bestellhistorie enthält.

Checkout- Registrierungsoption 4

Bei dieser Option wird die Kontoregistrierung zusammen mit einem Incentive nach Abschluss des Kaufs angeboten. Hier ist ein Beispiel von Speedo:

Die Leute werden sich nicht um eine Kontoregistrierung kümmern, bis sie Ihnen Geld zahlen. Wenn Sie sich entscheiden müssten, was ist Ihnen wichtiger: Kontoregistrierungen oder Käufe?

Normalerweise sind „Dankeschön“-Seiten nicht sehr nützlich, aber hier nicht. Sie geben Ihnen ein einfaches Angebot: Geben Sie ein Passwort ein und erhalten Sie einen Coupon (plus Bestellverfolgung, schnellerer Einkauf usw.). Der Prozentsatz der Kontoerstellung für neue Benutzer liegt hier oft über 75 %.

Die E-Commerce-Checkout-Seite

Dies ist die Geldseite. Jede Erhöhung auf Ihrer letzten Checkout-Seite wird Ihrem Bankkonto gut tun. Hier sind ein paar Prinzipien, die Ihnen helfen, einen besseren letzten Schritt in Ihrem Checkout-Flow zu schaffen.

Zuletzt nach Kreditkarteninformationen fragen

Bitten Sie die Leute, die Versandinformationen auszufüllen, bevor sie mit der Abrechnung beginnen. Damit werden Cialdinis Prinzipien des Engagements und der Beständigkeit in die Tat umgesetzt. Wenn die Leute anfangen, etwas zu tun, haben sie das Gefühl, dass sie es beenden sollten.

Sie wurden bereits aufgefordert, ihren Namen, ihre E-Mail-Adresse und ihre Versandinformationen einzugeben, die im Idealfall mit der Rechnungsadresse übereinstimmen, sodass sie sie nicht erneut eingeben müssen.

Das gleiche Prinzip, das manchmal auch als Fuß-in-der-Tür-Technik bezeichnet wird, gilt für Formularfelder. Beginnen Sie zuerst mit den einfacheren Feldern wie Name. Das Feld für die Kreditkartennummer ist das „schwerste“, also sollte es zuletzt kommen.

Das sollten Sie nicht tun:

Das ist besser. (Sie gelangen hier von der Versandseite.)

Das Gute: Es hat einen klaren 1–2–3-stufigen Ablauf. Das Namensfeld steht vor den Kartendetails und die Rechnungsadresse (sofern diese mit der Versandadresse identisch ist) muss nicht erneut eingegeben werden.

Das Schlechte: Der Haupt-CTA ist „Speichern & fortfahren“. Weiter wo ? Es sollte spezifisch sein, wie "Weiter zur Überprüfung" oder was auch immer die nächste Aktion ist.

Verwenden Sie ein Zahlungsformular, das wie eine echte Kreditkarte aussieht

Fügen Sie einen echten Touch hinzu, indem Sie das Zahlungsformular auf diese skeuomorphe Weise gestalten:

Sie können eine Schnittstelle dafür namens Skeuocard kostenlos(!) erhalten, um sie auf Ihrem System zu implementieren. Probieren Sie hier eine Demo aus.

Lassen Sie den Zahlungsprozess sicher aussehen

Sicherheit ist ein ernstes Anliegen. Informieren Sie die Leute nicht nur darüber, wie Sie Zahlungen mit SSL tatsächlich sicher machen. Dies ist ein Beispiel für ein Formular, das so gestaltet ist, dass es sicher aussieht:

Einige Gründe, warum es funktioniert:

• Unterschiedliche Hintergrundfarbe für das Kreditkartennummernfeld.
• SSL-Logo.
• Schriftliche Erklärung: „Sichere Kreditkartenzahlung. Dies ist eine sichere 128-Bit-SSL-verschlüsselte Zahlung.“
• Erläuterungen zu Ablauf und Sicherheitscode.

Beachten Sie, dass Ihr Publikum, wenn es nicht technisch versiert ist, möglicherweise nicht weiß, was SSL oder HTTPS sind, also im Klartext.

Kreditkarten in Ihrem System speichern

Sicher, Sie müssen sich mit der PCI-Compliance befassen, und es besteht die Gefahr, dass Sie gehackt werden, aber Sie werden mit wiederkehrenden Benutzern viel mehr Geld verdienen. Wenn Kunden ihre Zahlungsinformationen nicht eingeben müssen, wird der Kauf zu einem Ein-Klick-Prozess.

Amazon tötet es größtenteils, weil die Reibung für wiederkehrende Käufer fast vollständig beseitigt wurde! Der Checkout-Flow ist kaum ein Flow – es ist ein Ein-Klick-Ereignis.

Wiederkehrende Besucher kaufen viel eher als neue Besucher, aber das ist nichts im Vergleich zu wiederkehrenden Käufern. Machen Sie es ihnen leicht.

Fazit

Beginnen Sie Ihre E-Commerce-Optimierung an der Kasse. Relative Gewinne ergeben hier sehr schöne absolute Summen.

So verbessern Sie die UX Ihres Checkout-Prozesses:

• Machen Sie die Funktion „In den Warenkorb“ übersichtlich.
• Machen Sie es Besuchern leicht, Artikel im Warenkorb zu ändern oder zu entfernen.
• Optimieren Sie den Registrierungsprozess – lassen Sie neue Käufer sich nach dem Kauf registrieren.
• Fragen Sie auf der Checkout-Seite zuerst nach den einfachsten Informationen.