Checkout-Design: Regeln und Beispiel
Checkout-Design ist der Aufbau der Schritte, die aus einem Artikel im Warenkorb eine Bestellung machen. Ein guter Checkout erlaubt den Gastkauf und zeigt den Gesamtbetrag samt Versand schon im Warenkorb. Er sagt ehrlich, wie viele Schritte noch kommen, löscht bei einem Fehler keine Eingaben, öffnet auf dem Handy die passende Tastatur und hebt die Kartenfelder vom Rest des Formulars ab.
· Aktualisiert am
Kurz gesagt
Der Checkout ist der Screen, auf dem Sie Geld verdienen. Wer hier ankommt, hat sein Produkt gewählt und in den Warenkorb gelegt. Ein Teil der Menschen, die Sie hier verlieren, hatte sich schon entschieden.
Laut der Liste des Baymard Institute, aktualisiert am 22. September 2025, liegt die durchschnittliche Abbruchrate im Warenkorb bei 70,22 %. Die Zahl ist der Mittelwert aus 50 Studien. Von 10 Menschen, die etwas in den Warenkorb legen, bestellen also 7 nicht.
Einen Teil der Abbrüche kann Design nicht lösen. Laut derselben Seite kann ein großer Onlineshop seine Conversion-Rate aber im Schnitt um 35,26 % steigern, wenn er das Checkout-Design verbessert. Auf dieser Seite beschreibe ich das Muster hinter diesen Verbesserungen.
- Verlangen Sie kein Konto, stellen Sie den Gastkauf nach vorn.
- Zeigen Sie den Gesamtbetrag samt Versand schon im Warenkorb.
- Die Schrittanzeige soll die echten Schritte eins zu eins abbilden.
- Löschen Sie bei einem Fehler keine Eingaben, auch nicht die Kartennummer.
- Heben Sie die Kartenfelder optisch ab und setzen Sie das Vertrauenssignal direkt daneben.
- Öffnen Sie auf dem Handy die passende Tastatur und stören Sie das Autofill des Browsers nicht.
Warum Käufer im Checkout abbrechen
Baymard fragt Onlinekäufer in den USA, warum sie den Kauf abgebrochen haben. Die häufigste Antwort ist „Ich habe mich nur umgesehen“ (42 %). Ohne diese Gruppe sieht die Reihenfolge der übrigen Gründe so aus:
| Grund für den Abbruch | Anteil |
|---|---|
| Zusatzkosten zu hoch (Versand, Steuern, Gebühren) | 40 % |
| Lieferung zu langsam | 20 % |
| Ich habe der Website meine Kartendaten nicht anvertraut | 19 % |
| Die Website wollte, dass ich ein Konto anlege | 18 % |
| Checkout zu lang oder zu kompliziert | 17 % |
| Fehler auf der Website oder Absturz | 17 % |
| Rückgabebedingungen nicht zufriedenstellend | 13 % |
| Gesamtbetrag nicht von Anfang an sichtbar | 12 % |
| Karte abgelehnt | 10 % |
| Zu wenige Zahlungsarten | 9 % |
Quelle: Baymard Institute, Liste zum Warenkorbabbruch, Stand 22. September 2025. Die Anteile ergeben zusammen mehr als 100, weil eine Person mehrere Gründe nennen kann. Die Daten stammen aus den USA; für Deutschland habe ich keine vergleichbare Erhebung geöffnet.
Mit den Augen eines Designers fällt mir an der Tabelle etwas auf. Mehr als die Hälfte der Gründe hat nichts mit dem Produkt zu tun, sondern mit dem Checkout selbst. Kontopflicht, langes Formular, Fehler, unsichtbarer Gesamtbetrag und das Gefühl von Sicherheit sind direkte Entscheidungen der Oberfläche.
Versandkosten und Lieferzeit sind dagegen Geschäftsentscheidungen. Design kann sie nicht billiger machen. Aber Design entscheidet, wann und wie sie gezeigt werden. Und das beeinflusst den Abbruch.
Regeln für das Checkout-Design
1. Machen Sie den Gastkauf zur auffälligsten Option
Die Pflichtregistrierung ist die bekannteste Falle im Checkout. Das berühmteste Beispiel dafür erzähle ich auf der Seite zum 300-Millionen-Dollar-Button. Hier nenne ich nur die Regel von heute.
Laut einem Artikel von Edward Scott bei Baymard aus dem Jahr 2023 machen 47 % der Websites den Gastkauf nicht zur auffälligsten Option. Es reicht nicht, dass die Option auf der Seite steht; sie muss auf den ersten Blick zu sehen sein.
Derselbe Artikel beschreibt, wie das geht:
- Im Label steht das Wort „Gast“, etwa „Als Gast bestellen“. Genau dieses Wort suchen Nutzer. Ein vages Label wie „Weiter“ bremst sie.
- Die Option ist ein Button, kein einfacher Link. In Baymards Tests wurde der Link am Desktop wie auf dem Handy übersehen. Einen Button trifft man auch auf dem Touchscreen leichter.
- Im Schritt zur Kontoauswahl steht sie ganz oben, über den Feldern für Anmeldung und Registrierung.
- Auch wer ein Konto hat, kann als Gast weitermachen. Laut Scott können vergessene Passwörter und Unterbrechungen beim Zurücksetzen zum Abbruch führen.
Wenn Sie Konten wollen, verschieben Sie das ans Ende. Laut Scotts Artikel vom September 2023 unterbrechen 42 % der Websites den Nutzer vor oder während der Zahlung mit einem Kontoangebot.
Scott schlägt vor, das Konto auf der Bestätigungsseite anzubieten. Die Daten sind dann schon eingegeben, also genügt an dieser Stelle ein Passwort.
Quälen Sie auch Nutzer, die ein Konto anlegen, nicht mit Passwortregeln. Jede Regel, die sie erst nach einer Fehlermeldung erfahren, ist eine weitere Hürde direkt vor dem Kauf.
2. Die Schrittanzeige zeigt die echten Schritte
In einem mehrstufigen Checkout fragt sich der Nutzer als Erstes: „Wie lange noch?“ Die Schrittanzeige beantwortet diese Frage, aber nur, wenn sie stimmt.
Der Baymard-Leitfaden von Carl MacDonald, veröffentlicht im April 2026 und aktualisiert im November 2026, stellt eine klare Regel auf: Die Anzeige ist eine Eins-zu-eins-Karte des Checkouts. Schritte zu verstecken oder zusammenzufassen, bringt den Nutzer aus der Orientierung.
Derselbe Leitfaden empfiehlt, erledigte Schritte anklickbar zu machen. Nutzer versuchen, über die Anzeige zurückzugehen. Lässt sie sich nicht anklicken, landen sie beim Zurück-Button des Browsers.
Deshalb verlangt der Leitfaden auch, dass der Zurück-Button funktioniert und die Formulardaten beim Zurückgehen erhalten bleiben.
Meine eigene Regel dazu: Steht in der Anzeige „Schritt 2 von 4“, folgt nach dem vierten Schritt kein Überraschungsscreen. Gibt es einen Schritt außerhalb Ihrer Kontrolle, etwa die Bestätigung bei der Bank, kündigen Sie ihn im Zahlungsschritt an.
3. Zeigen Sie die Gesamtkosten früh
Der größte Grund in der Tabelle sind Zusatzkosten (40 %). Dazu kommt „Gesamtbetrag nicht von Anfang an sichtbar“ (12 %). Beides läuft auf dasselbe Problem hinaus: Der Nutzer erfährt erst im letzten Schritt, was er zahlt.
MacDonalds Leitfaden empfiehlt, Versand und Gebühren schon im Warenkorb zu zeigen, nicht erst beim letzten Klick. Ist die Adresse noch unbekannt, sind geschätzte Versandkosten oder die Grenze für kostenlosen Versand besser als gar nichts.
Eine Servicegebühr, die erst im letzten Schritt auftaucht, wirkt auf Nutzer wie ein Trick. Wie dieses Verhalten heißt, beschreibe ich im Ratgeber zu Dark Patterns als „versteckte Kosten“. Auch wenn das Team es nicht absichtlich tut, fühlt sich der Nutzer gleich.
Wiederholen Sie den Betrag auch auf dem Zahlungsbutton. Ein Button mit „129,80 € bezahlen“ statt „Bestellung bestätigen“ erleichtert die letzte Kontrolle.
4. Gehen Sie mit Fehlern um, ohne Eingaben zu löschen
Wo und wie eine Fehlermeldung steht, beschreibe ich ausführlich auf der Seite zum Formulardesign. Im Checkout kommen zwei Punkte dazu.
Erstens: das Formular bei einem Fehler leeren. MacDonalds Leitfaden wertet das als kritischen Fehler. Laut einem Artikel von Sonia Sousa vom Februar 2024 löschen 34 % der Websites bei einem Fehler die Kartennummer.
Sousa empfiehlt, die Felder außer der Karte zuerst im Browser zu prüfen. So lädt die Seite wegen einer fehlenden Angabe in der Adresse nicht neu, und die Kartendaten gehen nicht verloren. Tippfehler in der Kartennummer lassen sich mit der Luhn-Prüfung schon beim Ausfüllen erkennen.
Zweitens: wie genau die Meldung ist. Eine Meldung soll sich nach der Art des Fehlers richten. Wer „Ungültige Kartennummer“ liest, muss raten. Wer „Die Kartennummer hat 16 Ziffern, Sie haben 15 eingegeben“ liest, weiß, was zu tun ist.
Auch eine von der Bank abgelehnte Karte ist ein Fehlerfall. Sagen Sie dem Nutzer dann, er soll eine andere Karte oder Zahlungsart probieren, und behalten Sie die Adressdaten.
5. Bauen Sie Vertrauen direkt an den Kartenfeldern auf
19 % der Abbrecher sagen, sie hätten der Website ihre Kartendaten nicht anvertraut. Technisch misst der Nutzer die Sicherheit aber nicht. Laut einem Baymard-Artikel von Jamie Holst aus dem Jahr 2012 entscheidet er aus dem Bauch heraus.
Auf einer Seite mit HTTPS werden alle Felder gleich verschlüsselt. Trotzdem empfiehlt Holst, die Kartenfelder mit einem Rahmen oder einer anderen Hintergrundfarbe vom Rest des Formulars abzuheben. Auch das Sicherheitssiegel gehört direkt neben die Kartenfelder, nicht an den Rand oder ans Ende der Seite.
Vertrauen entsteht nicht nur durch Siegel; auch die Rückgabebedingungen stehen mit 13 % in der Tabelle. Eine kurze Zeile wie „Kostenlose Rücksendung innerhalb von 30 Tagen“ im Checkout hilft mehr als ein Link zur Richtlinie. Schreiben Sie in diese Zeile Ihre eigene Bedingung.
Auch die Telefonnummer hat mit Vertrauen zu tun. Laut Baymards Checkout-Benchmark 2026 erklären 47 % der Websites nicht, warum sie die Telefonnummer verlangen. Im selben Artikel geben 68 % der Befragten einer Baymard-Umfrage an, ihre Nummer nur ungern anzugeben. Schreiben Sie einen Satz unter das Feld: „Der Paketdienst kündigt die Zustellung per SMS an.“
6. Gestalten Sie mobil eigens
Laut demselben Benchmark ist der Checkout auf 59 % der mobilen Websites „mittelmäßig“ oder schlechter. Auf dem Handy kostet jedes zusätzliche Feld und jede falsche Tastatur mehr Mühe als am Desktop.
- Öffnen Sie die Tastatur, die zum Feld passt. Für Postleitzahl und Kartennummer gehört der Ziffernblock.
- Stören Sie das Autofill des Browsers nicht. Baymards Leitfaden verlangt ausdrücklich volle Kompatibilität mit Autofill. Die richtigen
autocomplete-Werte im HTML sorgen dafür. - Öffnen Sie die Tastatur nicht sofort beim Laden der Seite. Baymard schreibt, dass sie sonst den Button für den Gastkauf verdecken kann.
- Gruppieren Sie die Kartennummer mit Leerzeichen. Das Feld auf dem Screen soll der Karte in der Hand ähneln.
- Buttons sind groß genug für den Finger. Das Kriterium 2.5.8 der WCAG 2.2 (Stufe AA) verlangt mit einigen Ausnahmen mindestens 24 × 24 CSS-Pixel für Ziele. Machen Sie den Zahlungsbutton größer; das Fitts’sche Gesetz erklärt, warum ein großes, nahes Ziel schneller getroffen wird.
Und fragen Sie dieselbe Information nicht zweimal ab. Das Kriterium 3.3.7 der WCAG 2.2 (Stufe A) verlangt, dass bereits eingegebene Informationen entweder automatisch ausgefüllt werden oder auswählbar sind. Das Beispiel des W3C stammt direkt aus dem Checkout: das Kästchen „Rechnungsadresse ist gleich Lieferadresse“.
Wenn Sie einen Checkout in einer mobilen App bauen, ist der Ratgeber zum App-Design ein guter Start für den Aufbau der Screens.
Gastkauf und Pflichtregistrierung im Vergleich
Unten sehen Sie zwei Kassenabläufe desselben Shops. Warenkorb, Artikel und Betrag sind gleich. Der einzige Unterschied: Einer verlangt vor dem Bezahlen ein Konto.
Gehen Sie beide bis zum Ende durch. Das funktioniert auch mit der Tastatur: Mit Tab zum Button, dann Enter. Bei jedem Schritt springt der Fokus auf die Überschrift des neuen Schritts, und der Zähler wird aktualisiert.
Zwei Kassenabläufe eines Beispielshops, nicht von einer echten Website. Die Felder sind mit Beispieldaten gefüllt und lassen sich nicht ändern; Sie müssen keine eigenen Kartendaten eingeben. Gehen Sie beide Abläufe bis zum Ende durch. Der Zähler über jedem Ablauf zeigt den Schritt und die Zahl der Felder, die Ihnen bisher begegnet sind.
Im Ablauf mit Pflichtregistrierung kommen zwei Schritte und drei Felder dazu. Die eigentlichen Kosten zeigt der Zähler nicht. Der Nutzer liest erst die Passwortregeln. Dann geht er in sein Postfach, um den Code zu finden, und entfernt sich vom Checkout.
Auch im Gastkauf lässt sich ein Konto anlegen, nur eben am Ende. Auf der Bestätigungsseite gibt es ein einziges Passwortfeld, weil E-Mail, Name und Adresse schon eingegeben sind. Genau diesen Aufbau empfiehlt Scott.
Achten Sie auch auf die Schrittanzeige. In beiden Abläufen zeigt der Balken die echte Zahl der Schritte. Weil der Ablauf mit Pflichtregistrierung den Balken mit sechs Teilen schon auf dem ersten Screen zeigt, sieht der Nutzer gleich zu Beginn, wie lang der Weg ist.
Checkout-Optimierung: wo anfangen
Ich fange bei der Checkout-Optimierung mit den Daten an. In der Analyse schaue ich, wie viele Menschen jeden Schritt betreten und wie viele zum nächsten kommen. Wo der größte Abfall ist, schaue ich zuerst hin.
Gehen Sie den Ablauf selbst auf dem Handy bis zum Ende durch. Mit einer echten Bestellung und einer echten Karte. Notieren Sie jeden Schritt und jede Überraschung.
Schaffen Sie die Kontopflicht ab. In meinen Audits ist das oft der schnellste Gewinn. Gibt es den Gastkauf schon, prüfen Sie, ob er die auffälligste Option ist.
Ziehen Sie den Gesamtbetrag nach vorn. Versand und Gebühren stehen im Warenkorb.
Probieren Sie die Fehlerfälle einzeln aus. Fehlendes Feld, abgelehnte Karte, falscher Gutschein: Schauen Sie, was das Formular tut. Werden Daten gelöscht, beheben Sie das zuerst.
Zählen Sie die Felder und streichen Sie. Fragen Sie bei jedem Feld: „Geht die Bestellung auch ohne raus?“
Messen Sie die Änderung. Schauen Sie nach jeder Änderung erneut auf die Abfallrate desselben Schritts. Ändern Sie mehreres gleichzeitig, wissen Sie nicht, was gewirkt hat.
Wenn Sie Ihren Checkout mit einem Blick von außen prüfen lassen wollen, ist der UX Audit genau dafür da. Ich gehe einen Ablauf, etwa den mobilen Gastkauf, von Anfang bis Ende durch.
Meine Notiz
Das Problem, das ich in Audits im Checkout am häufigsten sehe, sind überraschende Kosten. Ein Artikel, der im Warenkorb 124,90 € kostet, wird auf dem letzten Screen mit Versand und Servicegebühr zu einer anderen Zahl. In diesem Moment sieht der Nutzer die Website als Händler, der feilscht.
Auf Platz zwei kommt der Zurück-Button. Der Nutzer drückt zurück, um seine Adresse zu korrigieren, und das ganze Formular ist leer. Das Team merkt es nicht, weil im Testkonto immer alle Daten gespeichert sind.
Deshalb probiere ich den Checkout immer in einem leeren Browser, als Gast und auf dem Handy. Der Ablauf, den das Team jeden Tag sieht, ist nicht der Ablauf, den der Kunde zum ersten Mal sieht.
Checkliste
- Es gibt einen Gastkauf, im Label steht „Gast“, und er steht als Button ganz oben.
- Das Kontoangebot kommt auf der Bestätigungsseite und verlangt nur ein Passwort.
- Versand und Gebühren sind im Warenkorb sichtbar, auf dem Zahlungsbutton steht der Betrag.
- Die Schrittanzeige bildet die echten Schritte eins zu eins ab, erledigte Schritte sind anklickbar.
- Bei einem Fehler wird nichts gelöscht, auch nicht die Kartennummer.
- Die Fehlermeldung sagt, was falsch ist und wie es sich beheben lässt.
- Die Kartenfelder stehen in einem eigenen Kasten, das Vertrauenssignal direkt daneben.
- Beim Telefonfeld steht, warum es verlangt wird.
- Auf dem Handy öffnet sich die passende Tastatur, Autofill funktioniert.
- Ist die Rechnungsadresse gleich der Lieferadresse, genügt ein Kästchen.
Häufige Fragen
Wie hoch ist die durchschnittliche Abbruchrate im Warenkorb?
Laut der Liste des Baymard Institute, aktualisiert am 22. September 2025, liegt der Mittelwert aus 50 Studien bei 70,22 %. Etwa 7 von 10 Menschen, die etwas in den Warenkorb legen, bestellen also nicht.
Einseitiger oder mehrstufiger Checkout?
Beides kann gut funktionieren. Baymards Checkout-Leitfaden hält seine Grundsätze für einseitige wie mehrseitige Abläufe für gültig. Er empfiehlt, nicht nur die Zahl der Schritte, sondern den gefühlten Aufwand zu senken. In einem mehrstufigen Ablauf muss die Schrittanzeige die echten Schritte eins zu eins zeigen.
Verliere ich Kundenkonten, wenn ich den Gastkauf anbiete?
Nein. Verschieben Sie die Kontoerstellung auf die Bestätigungsseite. Die Daten sind dann schon eingegeben, ein Passwort genügt, und der Kauf wird nicht unterbrochen.
Helfen Vertrauenssiegel im Checkout?
Am richtigen Ort ja. Laut Baymard beurteilen Nutzer die Sicherheit aus dem Bauch heraus. Deshalb empfiehlt Baymard, die Kartenfelder optisch abzuheben und das Sicherheitssignal direkt neben diese Felder zu setzen.
Quellen (9)
- Baymard Institute, Cart Abandonment Rate Statistics. Stand 22. September 2025; 70,22 % im Mittel, Abbruchgründe, 35,26 %
- Edward Scott, Make “Guest Checkout” the Most Prominent Option, Baymard Institute. 17. Januar 2023; 47 %, Label, Button und Platzierung
- Edward Scott, Save Account Creation for the Confirmation Step, Baymard Institute. 19. September 2023; 42 %
- Edward Scott, Checkout UX 2026: 10 Pitfalls and Best Practices, Baymard Institute. 13. November 2024, aktualisiert am 3. November 2026; 59 % mobil mittelmäßig oder schlechter, 47 % ohne Erklärung zum Telefon, 68 % ungern
- Carl MacDonald, The Checkout UX Guide, Baymard Institute. 23. April 2026, aktualisiert 2. November 2026; Schrittanzeige, Zurück-Button, Kosten im Warenkorb, Autofill, mobile Tastatur
- Jamie Holst, Visually Reinforce Your Credit Card Fields, Baymard Institute. 21. August 2012; Vertrauen aus dem Bauch, Kartenfelder abheben, Platz des Siegels
- Sonia Sousa, Retain Data in Sensitive Credit Card Fields after Validation Errors, Baymard Institute. 6. Februar 2024; 34 %, Felder außer der Karte zuerst prüfen, Luhn-Prüfung
- W3C, Understanding Success Criterion 3.3.7: Redundant Entry (WCAG 2.2). Stufe A; Beispiel Rechnungs- und Lieferadresse
- W3C, Understanding Success Criterion 2.5.8: Target Size (Minimum) (WCAG 2.2). Stufe AA; 24 × 24 CSS-Pixel mit Ausnahmen