Best Practices für hohe Konversionsraten auf Checkout-Seiten

Wenn der Kunde die Kasse erreicht, kann man sich fast freuen, denn man ist nur noch einen Schritt von der Konversion entfernt. Um die Nutzer zu diesem Punkt zu führen, sind jedoch zahlreiche Schritte erforderlich. Produktdetailseiten (PDPs), Produktlistenseiten (PLPs) und das Design Ihrer entscheidenden Aufforderung zum Handeln, auch bekannt als "Add-to-cart"-Button, verdienen alle grosse Aufmerksamkeit.

Wenn Sie bereit sind, die CRO Ihrer Website zu meistern, haben wir hier alles, was Sie wissen müssen, zusammengefasst:

• Geben Sie Ihrem E-Commerce einen CRO-Schub
• Checkliste der UX- und A11Y-Funktionen für PDPs
• Wesentliche Merkmale für PLPs
• Erweiterte UX- und A11Y-Funktionen für Ihre PLPs
• Hacking der Add-to-Cart-Rate
• Optimierung der CRO auf Checkout-Seiten (dieser Artikel)

Zur Kasse gehen oder gehen lassen

Wenn Ihre Kunden die richtigen Produkte für sich gefunden haben und sich entschliessen, sie in den Warenkorb zu legen, ist es noch zu früh, um von einem Gewinn zu sprechen. Ein weiterer kritischer Entscheidungspunkt liegt noch vor ihnen. Die Nutzer Ihrer E-Commerce-Website überlegen jetzt, ob sie zur Kasse gehen oder Ihre Website verlassen.

Erwarten Sie nicht, dass Sie eine 100 %ige Konversionsrate auf Ihrer Checkout-Seite oder Checkout-Abschlussrate, wie sie oft genannt wird, erreichen. Laut dem Benchmark von Littledata wird alles zwischen 20 % und 60 % als durchschnittlich angesehen.

"Ihr Hauptziel ist es, alle Hindernisse auf dem Weg vom Schaufensterbummel zur tatsächlichen Bestellung zu beseitigen. User Experience (UX) und Accessibility (A11Y) sollten während des gesamten Checkout-Prozesses reibungslos und unkompliziert sein," erklärt Ondrej Pohl, UX & A11Y Lead bei ACTUM Digital.

Es empfiehlt sich, sich in die Lage des Kunden zu versetzen und alle Schritte des Checkout-Prozesses zu überprüfen:

• Start: Einkaufswagen
• Seite 1: Lieferoptionen
• Seite 2: Bezahlung
• Seite 3: Log-in / Kundendaten
• Seite 4: Bestellbestätigung
• Seite 5: Dankeschön-Seite

Checkout-Seiten mit hoher Konversionsrate

Ein intuitiver Aufbau und ein nahtloses Einkaufserlebnis sind ein Muss für moderne E-Commerce-Anbieter. Der B2C-Online-Verkauf ist hart umkämpft, da ist kein Platz für faule, schlampige oder fehlerhafte Designmerkmale.

Andererseits waren B2B-E-Commerce-Websites früher sehr technisch und schwer zu verstehen, aber der Trend hat sich geändert. B2B-E-Commerce-Unternehmen müssen sich höhere Ziele setzen als B2C, um im Spiel zu bleiben. Es gibt keine Ausreden; auch die B2B-Verkäufer feilen aktiv an ihrem CRO, um eine hervorragende Leistung beim Checkout zu erzielen.

Es ist ein absolutes Muss für alle, eine "Mobile-First"-Haltung einzunehmen, da die meisten Online-Konversionen von mobilen Geräten ausgehen. "Der heilige Gral der Kaufabwicklung war früher ein einseitiges Design, aber es ist fast unmöglich, alles in einen Bildschirm zu quetschen. Diese Empfehlung verblasste schnell, und jetzt bevorzugen wir unterschiedliche Seiten für jede Phase, da dies besser für UX und A11Y funktioniert," fügt Ondrej hinzu.

"Der heilige Gral der Kaufabwicklung war früher ein einseitiges Design, aber es ist fast unmöglich, alles in einen Bildschirm zu quetschen. Diese Empfehlung verblasste schnell, und jetzt bevorzugen wir unterschiedliche Seiten für jede Phase, da dies besser für UX und A11Y funktioniert", fügt Ondrej hinzu.

Beste UX- und A11Y-Praktiken für Checkout-Seiten

Die Verbesserung von UX und A11Y auf Checkout-Seiten ist der letzte Schliff für das CRO-Bild. Bei unseren Projekten nutzen wir stets unsere jahrelange Erfahrung in verschiedenen Branchen und unsere gründliche Untersuchung von Trends im Nutzerverhalten.

Die B2C-Plattform Yachting.com ist ein Beispiel für ein hochmodernes Buchungssystem, das die besten CRO-Praktiken zeigt. Gleichzeitig haben wir in der B2B-Welt die optimierte E-Commerce-Lösung für Dormer Pramet, den führenden Anbieter von Metallschneidewerkzeugen mit globaler Bedeutung, entwickelt.

"Bei jedem Projekt respektieren wir die spezifischen Bedürfnisse unserer Kunden und entwickeln eine auf ihre Zielgruppe zugeschnittene Benutzererfahrung. Auch wenn sich B2B und B2C in vielerlei Hinsicht unterscheiden, basiert die E-Commerce-Entwicklung immer auf rigoroser Forschung und A/B-Tests," erklärt Ondrej.

Sehen wir uns nun die Funktionen und Optimierungen an, mit denen Sie die Abschlussrate beim Checkout verbessern können.

Einseitige Checkouts sind Geschichte

Einzelne Checkout-Seiten sind im Allgemeinen nicht zu empfehlen. Besser ist es, die einzelnen Schritte des Bezahlvorgangs auf einzelne Seiten aufzuteilen. Kunden, die mobile Geräte benutzen, werden die bessere Übersichtlichkeit besonders zu schätzen wissen! Vergessen Sie aber nicht, die Nutzer visuell durch den Prozess zu führen, damit sie immer wissen, wo sie sich befinden und welche Schritte als nächstes anstehen.

Jeder Standard-Checkout-Prozess enthält diese Phasen, auch wenn ihre Reihenfolge Sie überraschen mag:

Warenkorb

Diese Seite ist der Beginn des Bestellvorgangs. Sie sollte den Nutzern alles sagen, was sie wissen müssen - die Artikel im Warenkorb anzeigen, einen Fortschrittsbalken für die kostenlose Lieferung anzeigen, eine einfache Option zum Einlösen von Gutscheincodes bieten und einen klaren Überblick darüber geben, welche bestellten Produkte auf Lager oder nicht auf Lager sind, mit einem voraussichtlichen Lieferdatum.

Lieferoptionen

Die zweite Seite enthält eine Liste der Lieferoptionen. Verwenden Sie Listen mit Optionsschaltflächen und illustrierten Symbolen für eine schnelle Erkennung. Verzichten Sie darauf, eine Vorauswahl zu treffen, da dies verwirrend sein kann. Geben Sie ausserdem die zusätzlichen Preise an, die Sie für jede Lieferart berechnen.

Zahlung

Als Nächstes müssen Sie eine Zahlungsmethode auswählen. Denken Sie daran zu erklären, was nach der Auswahl der jeweiligen Methode geschieht (z. B. dass Sie nach der Bestätigung der Bestellung zum Zahlungsportal PayNow weitergeleitet werden, oder dass alle Zahlungsdaten in Ihrem Postfach eingehen). Verwenden Sie Icons für eine einfache Navigation und weisen Sie stets transparent auf die zusätzlichen Preise hin, die Sie für die Zahlungsarten berechnen.

Kontaktinformationen

Überraschung, Überraschung, die Angabe der Kontaktdaten ist das Letzte, was ein potenzieller Kunde tun möchte. Fragen Sie danach erst, wenn der Kunde alles über den Kauf, die Lieferung und die Bezahlung weiss.

• Benutzeranmeldung. Ihre wiederkehrenden Kunden haben vielleicht schon ihre Konten, also machen Sie es ihnen leicht, sich einzuloggen. Das heisst aber nicht, dass es keine Möglichkeit geben sollte, ohne Registrierung als Gast einzukaufen.
• Einmaliges Einkaufen. Wenn Sie Ihren Kunden die Möglichkeit bieten, den Bestellvorgang fortzusetzen, ohne sich anzumelden, sollten Sie beiden Optionen die gleiche Bedeutung beimessen; ist dies nicht der Fall, kann dies als schlechtes Designmuster angesehen werden. Verärgern Sie Ihre Kunden auch nicht, indem Sie nach Informationen fragen, die Sie nicht benötigen. Und wenn Sie dies tun, geben Sie ihnen eine ehrliche Begründung (Funktion für personalisierte Inhalte, etc.).

Zusammenfassung

Dies ist die letzte Seite, auf der die Nutzer noch die Möglichkeit haben, Ihre Website ohne Umstellung zu verlassen. Zeigen Sie alle vom Nutzer ausgewählten Informationen, die bestellten Artikel, die Lieferung und die Zahlung an, und fügen Sie Details zu Gutscheinen oder Rabattcodes hinzu. Machen Sie das Bearbeiten oder Korrigieren von Details einfach und leiten Sie die Nutzer nach einem Klick auf die Schaltfläche "Bearbeiten" zum entsprechenden Prozessschritt weiter.

Dankeschön-Seite

Der am meisten unterschätzte Teil des Bestellvorgangs. Glauben Sie nicht, dass die Kunden mit dem Klicken auf die Schaltfläche "Bestellung bestätigen" die Customer Journey abgeschlossen haben. Sie haben einen Kauf getätigt; jetzt ist es an der Zeit, Beziehungen aufzubauen und die Kundenzufriedenheit zu erhöhen, um die Chancen für weitere Bestellungen zu erhöhen. Nutzen Sie diesen Bereich, um alle relevanten Informationen anzuzeigen (Bestellnummer, Kontaktdaten, E-Mail-Adresse, an die die Bestätigung gesendet wurde, usw.) und ermöglichen Sie es den Kunden, schnelle Änderungen vorzunehmen, wie z. B. vergessene Artikel zu Bestellungen hinzuzufügen, falls möglich.

Nachdem der Checkout-Prozess im Grossen und Ganzen abgeschlossen ist, gibt es noch ein paar zusätzliche Tipps, um die Benutzererfahrung von OK zu fantastisch zu machen:

Gesamtpreis

Die Kunden möchten während des gesamten Bestellvorgangs einen aktuellen Gesamtpreis sehen. Zeigen Sie den Endpreis dort an, wo Kunden ihn immer sehen, einschliesslich der Liefer- und Zahlungsgebühren und der angewandten Rabatte.

Barrierefreiheit im Web

• Eine reibungslose Benutzererfahrung ist nur ein Teil der Erhöhung der Abschlussrate beim Bezahlvorgang. E-Commerce-Websites müssen sich auf die Barrierefreiheit konzentrieren, damit alle Benutzer unabhängig von ihrem Gesundheitszustand mit ihren Websites interagieren können.
• Seien Sie so klar und spezifisch wie möglich, insbesondere bei der Beschreibung des Fortschrittsbalkens und der gesamten Kaufabwicklungsnavigation. Verwenden Sie z. B. die Schaltfläche "Zur Zahlung gehen" und nicht die Schaltfläche "Nächster Schritt".
• Helfen Sie Benutzern mit Bildschirmlesegeräten. Wenn z. B. ein Fehler auftritt, ändern Sie dessen aria:label programmatisch oder setzen Sie den Fokus auf die ursprüngliche Stelle, wenn die Seite neu geladen wurde, typischerweise nach einer Mengenänderung.
• Öffnen Sie nicht automatisch eine Liste von Abholorten im Pop-up-Fenster; zeigen Sie stattdessen die Schaltfläche "Abholort auswählen" an, nachdem Sie die Liefermethode für die Abholung festgelegt haben und lassen Sie die Nutzer den Ort nach eigenem Ermessen auswählen.
• Prüfen Sie, ob Drittanbieter von Plugins und Tools ein barrierefreies Design für ihre Schnittstellen verwenden, z. B. Zahlungs-Gateways.
• Platzieren Sie nie zu viele Eingabefelder auf einer Seite, sondern teilen Sie sie in Abschnitte auf. Sorgen Sie ausserdem dafür, dass sie mit Autofill-Funktionen kompatibel sind, indem Sie die richtigen Feldtypen und Namen verwenden.

Optimiertes mobiles Checkout-Erlebnis

Mobile Geräte ermöglichen eine erweiterte Personalisierung des Einkaufserlebnisses. Nutzen Sie den Standort des Nutzers, um Lieferkosten, Steuern und das Lieferdatum zu schätzen, bevor Sie die genaue Adresse kennen. Das mobile Design sollte einen klaren Weg zu häufig genutzten Aktionen bieten - Besuchen Sie den Warenkorb, ändern Sie die Menge und entfernen Sie Produkte aus der Bestellung. Achten Sie auf die Einhaltung der Best Practices für die mobile Entwicklung, z. B. die Verwendung der richtigen Tastaturen für die Eingabearten, in Echtzeit aktualisierte Preise, Unterstützung des Einkaufserlebnisses auf mehreren Geräten usw.

Zahlungskarten

Zwingen Sie die Nutzer niemals dazu, Kartennummern manuell einzugeben. Ermöglichen Sie die Eingabe von Kartendaten aus Fotos per OCR oder unterstützen Sie die Integration mit digitalen Geldbörsen wie Google Pay oder Apple Pay, was den Zahlungsvorgang schneller und sicherer macht als die manuelle Eingabe von Kartendaten. Verwenden Sie nur Optionen, die Ihre Kunden nutzen; überfordern Sie sie nicht mit exotischen Funktionen.

Maximale Konversionen auf Checkout-Seiten erzielen

Lassen Sie sich von unseren Tipps inspirieren, denn wir freuen uns, wenn wir dazu beitragen können, das Online-Einkaufserlebnis für alle zu verbessern. "Es sind die kleinen Dinge, die einen Unterschied machen. Nicht nur durch die Beschleunigung des Kaufprozesses, sondern auch durch die Barrierefreiheit im Web und die Einbeziehung aller Nutzer in das Erlebnis," unterstreicht Ondrej die Bedeutung von A11Y im Online-E-Commerce.

"Es sind die kleinen Dinge, die einen Unterschied machen. Nicht nur durch die Beschleunigung des Kaufprozesses, sondern auch durch die Barrierefreiheit im Web und die Einbeziehung aller Nutzer in das Erlebnis", unterstreicht Ondrej die Bedeutung von A11Y im Online-E-Commerce.

Mit der Optimierung des Checkout-Prozesses ist die CRO für Sie nicht vorbei. Sie ist für niemanden vorbei. Messen Sie jetzt die Leistung, sammeln Sie Daten und kehren Sie an den Anfang der Customer Journey zurück. In der Ära der dynamischen E-Commerce-Entwicklung reicht mindestens eine Optimierungsschleife pro Jahr aus.

Unter jedem Stein, den Sie umdrehen, werden Sie spannende Erkenntnisse finden.

_________

Wenn Sie Hilfe bei der Implementierung neuer Funktionen in Ihre E-Commerce-Lösungen benötigen, sind wir für Sie da, um Sie in der sich ständig verändernden E-Commerce-Landschaft wieder auf Kurs zu bringen. Abonnieren Sie unseren Newsletter für weitere praktische Tipps und Einblicke in die Welt von UX und Barrierefreiheit.