Du stellst immer wieder fest, dass User ihre Einkäufe in Deinem Online Shop kurz vor Abschluss abbrechen? Das liegt sicher nicht nur daran, dass sie es sich kurzfristig anders überlegt haben.
Vielmehr könnte Dein Checkout-Prozess Ursache für eine erhöhte Abbruchrate sein. Es lohnt sich also einen Blick auf diesen zu werfen, um langfristig dafür zu sorgen, dass Deine potenziellen Käufer:innen gern bei Dir einkaufen.
Was ist ein Checkout-Prozess?
Der Checkout-Prozess im E-Commerce beschreibt die Schritte, die in einer App oder auf einer Website nötig sind, um eine Bestellung abzuschließen und die Zahlung abzuwickeln. Das Ziel ist es, die Abbruchrate innerhalb des Bestellvorgangs zu verringern und Kunden durch den Kaufprozess bis zum Abschluss der Conversion zu leiten.
Warum ist die Optimierung des Checkouts so wichtig? Im Checkout entscheidet sich, ob Nutzer:innen zu Kunden werden! Oft wird der Checkout- und Payment-Prozess einer Website bei der Optimierung vernachlässigt und genauso häufig ist dieser nicht intuitiv, nicht benutzerfreundlich und ist der Grund für viele Absprünge – folglich potenzielle Kunden, die an den Wettbewerb verloren werden! Umso wichtiger ist hier von Beginn an Vertrauen bei Nutzer:innen innerhalb der Customer Journey aufzubauen und mit einem transparenten Checkout Prozess die Warenkorbabbrüche möglichst gering zu halten.
Wir geben Dir wertvolle Tipps, wie Du Deinen Checkout optimieren kannst und was Du bei der Formulargestaltung und den angebotenen Zahlungsmitteln beachten solltest. Bevor wir mit den einzelnen Schritten starten, möchten wir Dir ein paar generelle Empfehlungen und Hinweise zum Checkout-Prozess geben:
Übergreifende Empfehlungen zum Checkout Prozess
Bevor wir starten: Welche Schritte gibt es gewöhnlicherweise in einem Checkout und in welcher Reihenfolge?
Warenkorb
Registrierung/Gastbestellung
Rechnungsanschrift
Lieferanschrift
Zahlungsart
Lieferart/Versandmethoden
Zusammenfassung
Bestellbestätigung
Du siehst, der Aufbau ist logisch und intuitiv. Damit Nutzer:innen jederzeit wissen, wo sie sich befinden, ist es ratsam eine Breadcrumb mit Fortschrittsanzeige anzubieten. Diese kann gleichzeitig zur Navigation innerhalb der einzelnen Schritte, neben der Navigation über die Buttons, genutzt werden.
Sind die Nutzer:innen bereit, auf Deiner Website ein Produkt zu kaufen, solltest Du es vor allem Neukund:innen so einfach wie möglich machen. Biete neben der Bestellung über ein bereits angelegtes Kundenkonto und einer Registrierung für dieses unbedingt auch eine Gastbestellung an.
Zudem erleichtert ein Merkzettel das Einkaufen bereits vor dem eigentlichen Kaufprozess. Ist ein Merkzettel vorhanden, sollten die gewählten Produkte von hier direkt in den Warenkorb gelegt werden können.
Liegen Produkte im Warenkorb und die Bestellung wurde begonnen, sollte sichergestellt sein, dass diese für eine gewisse Zeit reserviert sind und Nutzer:innen nicht kurz vor Bestellung feststellen müssen, dass Ihre Bestellung unvollständig ist.
Optimierung des Warenkorbs
Der Warenkorb ist der erste Schritt zu einer erfolgreichen Bestellung. Hier finden Nutzer:innen alles, was sie im Shop ausgewählt haben und bestellen möchten und erwarten eine Übersicht über alle Produktinformationen, Kosten mit Versandkosten, Lieferzeit und Versand und die Option Gutscheincodes einzugeben.
Welche Produktinformationen sollten abgebildet werden?
- die Produkte sollten ein Vorschaubild haben,
- die Anzahl im Warenkorb (die anpassbar ist)
- die Größe
- die Farbe
- andere Produkteigenschaften
Lasse Änderungen zu! Diese Änderungen und Optionen solltest du im Warenkorb anbieten
Ergänzend sollte die Anzahl aus dem Warenkorb heraus geändert werden können. Die Lieferzeiten und die angebotenen Versanddienstleister sollten prominent abgebildet sein, um die Erwartungshaltung bei Nutzer:innen zu erfüllen und damit sie einschätzen zu können, wann sie mit der Ware rechnen können.
Idealerweise werden hier bereits alle Kosten in den Endpreis integriert, sodass es im Verlauf des Checkouts zu keiner Kostensteigerung kommt. In jedem Fall sollte deutlich werden, ob der angegebene Preis mit oder ohne Versandkosten ist und auch, ob die MwSt enthalten ist.
Vertrauensbildend können zudem Logos der Versanddienstleister, der Zahlungsdienstleister sowie gezielte Trust Elemente wie Zertifikate oder Einschätzungen von Bewertungsplattformen sein. Womit kann ich zahlen? Womit wird meine Ware geliefert? Nutzer:innen haben verschiedene Einstellungen und Erfahrungen mit verschiedenen Anbietern gemacht, daher sollten immer verschiedene Optionen zur Auswahl stehen.
Wenn über die angegebenen Informationen hinaus Fragen bei Käufer:innen auftauchen, die sie von einer Conversion abhalten, sollten Websites diesem durch die Angabe von Service Kontakten in Form einer Telefonnummer oder sogar über einen Chat entgegenwirken.
Eine Navigation ohne Komplikationen im Warenkorb
Um eine reibungslose Navigation zu ermöglichen sind gängige Navigationselemente ratsam – Produktbilder sind klickbar und führen zurück zur PDP falls Änderungen vorgenommen werden sollen, bei Hover (Desktop) über den Produktnamen ist ersichtlich, dass sich auch hier der Link zur PDP verbirgt. Die Breadcrumb wird ausgeblendet und die CTAs, die in den Checkout führen, sind farblich deutlich hervorgehoben und eindeutig benannt wie “Zur Kasse” oder “Weiter shoppen” als sekundärer CTA.
Diese Punkte solltest Du zusammenfassend im Checkout prüfen:
- Sind alle Produktinformationen vorhanden?
- Kann eine Produktmodifikation stattfinden?
- Sind die Versandkosten deutlich kommuniziert (inkludiert oder nicht?)
- Wie sind die Lieferzeiten?
- Zahlungsdienstleister-Logos eingebunden?
- Versanddienstleister-Logos eingebunden?
- Service Kontakt eingebunden?
- Gibt es ein Feld für Gutscheincodes?
- Sind die CTAs farblich hervorgehoben und eindeutig benannt?
- Wurden Trust Symbole eingebunden?
- Breadcrumbs im gesamten Checkout-Prozess ausgeblendet?
Fortschrittsanzeige und Navigation im Checkout - worauf du achten solltest
Ähnlich wie auf der Website sollte auch im Checkout die Navigation innerhalb einzelner Schritte genauer betrachtet werden. Zunächst gilt es aber, den Checkout vom restlichen Shop/Website zu isolieren, indem alle Elemente entfernt werden, die vom Ziel ablenken, also die reguläre Navigation, die Suchfunktion und die Seitennavigation. Somit werden die Navigationselemente auf ein Minimum reduziert und es bleiben nur die Fortschrittsanzeige und Buttons zur Navigation innerhalb der Prozessschritte.
Zudem sollten alle störenden Links entfernt werden, wie z.B. der Header und Footer, Links zu Newsletter, Apps und anderen Produkten. Ergänzende Informationen wie Infos zu Versandkosten kannst Du innerhalb einer Lightbox öffnen.
Damit Nutzer:innen keinen Stilbruch innerhalb des Kaufprozesses wahrnehmen, sollte der Checkout dem Corporate Design entsprechen. Die Navigation kann nur über die eindeutig benannte Fortschrittsanzeige und die Vor- und Zurück-Buttons geschehen, daher sollten diese Erwartungskonform funktionieren.
Zur Orientierung sollen graphische und textuelle Elemente in der Fortschrittsanzeige beachtet werden:
- Hebe die aktuelle Position hervor
- Wähle aussagekräftige Schritt-Bezeichnungen aus
- Die Icons passen zum Prozessschritt und erfordern keinen Kognitionsaufwand, da bekannte Icons verwendet werden
- Positive Signale zeigen den erfolgreichen Abschluss eines Prozessschrittes an
- Die Anzahl der Prozessschritte liegt zwischen 3 und 5 Schritten
Formulare innerhalb des Checkouts ohne Hürden gestalten
Nachdem wir uns den ersten Schritt des Checkouts mit dem Warenkorb und die Navigation innerhalb dessen genauer angesehen haben, sollte nachfolgend einer der elementarsten Bereiche des Checkouts folgen – die Formularfelder.
Kommt es hier zu Unstimmigkeiten, Unklarheiten oder Missverständnissen führt dies im schlimmsten Fall zum Absprung Deines potenziellen Kunden!
Hier findest du eine kurze, knappe Checkliste zum Thema Formulare innerhalb des Checkouts. Lesetipp: Weitere Hinweise zum Thema Formulare optimieren findest Du im Fachartikel “Formular Design – Bessere Formulare für mehr Conversions”.
- Logische Reihenfolge der Felder
- Die Felder sind eindeutig und in einfacher Sprache beschriftet (nah am jeweiligen Feld)
- Pflichtfelder solltest du als solche eindeutig kennzeichnen
- Potenziell unverständliche Felder erklären (kleine Informationsboxen)
- Aktive Felder werden optisch hervorgehoben
- Gruppierung zusammenhängender Informationen (z.B. Name, Adresse und E-Mail sowie Zahlung und Versand)
- Fasse zusammenhängende Informationen in einem Feld zusammen (z.B. Straße und Hausnummer)
- Frag dich, ob alle Pflichtfelder zwingend nötig sind (nicht nötige Informationen erst später abfragen und bei sensiblen Abfragen erwähnen wieso die Informationen benötigt werden)
- Die Eingaben sollten bereits nach der Eingabe validiert werden
- Es gibt eine Fehlermeldung bei Falscheingabe oder fehlenden Informationen
- Fehlermeldungen sind farblich hervorgehoben und verständlich formuliert
- Je Feld ist definiert, welche Zeichen eingegeben werden können (Buchstaben und/oder Zahlen, z.B. Buchstaben bei Postleitzahl nicht möglich)
- Autocomplete wird ermöglicht, vorausgefüllte Felder aber vermieden
- Die Art der Eingabefelder ist abhängig von der Anzahl der Auswahlmöglichkeiten
a) bis 4 Möglichkeiten = Checkbox
b) ab 5 Möglichkeiten = Dropdown
c) Date Picker für Datumsangaben
- Mobile werden die passenden Tastaturen angezeigt.
Zahlungsmethoden & Versandoptionen
Fast geschafft! Kurz vor Kaufabschluss findet die Auswahl der Zahlungsmethode statt und es werden Infos zum Versand gegeben. Je nach Optionen können User:Innen auch hier noch einmal ihre Präferenz wählen.
Die Auswahl der Zahlungsmittel im Checkout sollte zur gewohnten Auswahl Deiner Nutzer:innen passen. Gängige Zahlungsmittel sind u.a.:
- Paypal (Direkt, Ratenzahlung, in 30 Tagen bezahlen etc)
- Kreditkarte
- Kauf auf Rechnung
- Lastschrift
- Optional: Amazon Pay, Google Pay, Apple Pay, Klarna
In jedem Fall sollte hier deutlich werden, welches Zahlungsmittel gewählt wurde und ob zusätzliche Kosten berücksichtigt werden.
Ebenfalls beim Versand (und Rückversand) fallen häufig zusätzliche Kosten an. Diese sollten Nutzer:innen idealerweise bereits im Warenkorb angezeigt bekommen, damit nicht kurz vor Ende des Checkouts zusätzliche Kosten hinzukommen. Die Kosten müssen erstlich und eindeutig sein und nicht. versteckt werden. Informiere Deine Nutzer:innen also darüber, ob der Rückversand / Retoure kostenfrei ist.
Je nachdem welche Optionen bestehen, findet im Checkout die Auswahl eines Versanddienstleisters statt. Fallen hier unterschiedliche Kosten an oder die Versanddauer unterscheidet sich grundsätzlich, solltest Du auch diese Informationen direkt kommunizieren (insbesondere wenn es die Option des Express-Versands gibt).
Nach dem klassischen Checkout finden Nutzer:innen eine Bestellübersichtsseite wieder und können den Kauf abschließen.
Fazit: Darauf kommt es beim UX des Checkouts wirklich an
Zusammenfassend kommt es beim Checkout vor allem auf eine logische Reihenfolge, klar definierte Auswahloptionen und eine möglichst einfache und intuitive Bestelloption an. Zeige alle relevanten Informationen an und informiere von Beginn an über die anfallenden Kosten, sodass es am Ende des Checkouts zu keinen Überraschungen kommt und dadurch zu weniger Kaufabbrüchen und damit zu einem höheren Umsatz für Dich und Dein Unternehmen.
Versuche die Gründe für Kaufabbrüche innerhalb der gesamten Customer Journey zu evaluieren und betrachte die User Experience ganzheitlich – also die Erfahrungen mit der Brand von der Evaluation bis zum Kauf und darüber hinaus. Gibt es bereits vor dem Checkout Prozess Hürden, die das Vertrauen der Kunden schmälern? Wichtig ist es hier, die Benutzerfreundlichkeit ganzheitlich und neutral zu bewerten und Deine Zielgruppe und Ihre Besonderheiten mit einfließen zu lassen.
Du benötigst Unterstützung bei der Identifikation von Deinen Optimierungspotenzialen im Bereich Usability? Wir unterstützen Dich gerne bei der Evaluierung, Bewertung und Priorisierung möglicher Maßnahmen!
Noch kein Kommentar, Füge deine Stimme unten hinzu!