UX-Design im Checkout-Prozess

Alles rechtlich korrekt - und trotzdem Abbruch

Freitag, 13:30 Uhr. Dein Teamleiter Nikos projiziert das Analytics-Dashboard an die Wand im Besprechungsraum. Eine Zahl sticht heraus: 71 Prozent der mobilen Nutzenden brechen im Checkout ab. Vor dem Relaunch waren es 48 Prozent.

Nikos scrollt durch den Checkout. Der Button trägt korrekt die Beschriftung "zahlungspflichtig bestellen", Gesamtpreis und Versandkosten stehen sichtbar darüber. Die Pflichtangaben nach § 312j BGB sind erfüllt. Rechtlich ist alles sauber. Trotzdem gehen bei 300 mobilen Checkouts pro Tag und 52 Euro durchschnittlichem Warenkorbwert über 11.000 Euro täglich verloren.

Einzige Änderungen beim Relaunch: Der Desktop-Checkout wurde 1:1 auf Mobile übertragen, und eine Pflicht zur Kontoerstellung kam dazu. Welche Elemente treiben mobile Nutzende zum Abbruch?

Drei Stellen, an denen der Funnel reißt

Der Funnel-Report zeigt drei kritische Stellen:

1. 38 Prozent steigen aus, sobald die Registrierung verlangt wird. Wer nur schnell ein T-Shirt bestellen will, empfindet ein Pflicht-Konto als unverhältnismäßige Hürde.
2. Die Adresseingabe kostet weitere 21 Prozent. Das Desktop-Formular mit breiten Feldern und Dropdown-Menüs passt nicht auf ein 5-Zoll-Display. Nutzende müssen zoomen, scrollen und zwischen Feldern hin- und herwechseln.
3. Bei der Zahlungsauswahl fehlen mobile Optionen wie Apple Pay oder Google Pay. 6 Prozent brechen hier ab, weil sie ihre Kreditkartennummer nicht eintippen wollen.

🎬 Vorstellung: Stell dir vor, du willst unterwegs auf dem Smartphone ein Geburtstagsgeschenk bestellen. Du tippst auf "Zur Kasse" - und ein Registrierungsformular mit 8 Pflichtfeldern erscheint. Wie reagierst du?

One-Page vs. Multi-Step im Vergleich

Um die Abbruchrate zu senken, muss Nikos' Team eine Grundsatzentscheidung treffen: Alle Eingaben auf einer Seite bündeln oder in mehrere Schritte aufteilen?

Welcher Typ passt zu welcher Zielgruppe?

Shops mit wenigen Formularfeldern und wiederkehrender Kundschaft profitieren vom One-Page-Checkout. Die Stammkundschaft kennt den Ablauf und will schnell durch. Typisches Beispiel: Abo-Boxen oder Nachbestellungen.

Shops mit vielen Erstbestellenden oder komplexer Adresslogik (z.B. Geschenk an andere Adresse) fahren besser mit dem Multi-Step-Checkout. Eine Fortschrittsanzeige ("Schritt 2 von 4") reduziert die gefühlte Komplexität und motiviert zum Weitermachen.

🔮 Bevor du weiterliest: Nikos' Shop verkauft Modeartikel an eine junge, überwiegend mobile Zielgruppe. Viele bestellen zum ersten Mal. Welchen Checkout-Typ würdest du empfehlen?

Vom Desktop-Formular zum mobilen Erlebnis

Für Nikos' junge, mobile Zielgruppe ist der Multi-Step-Checkout die bessere Wahl. Aber der Checkout-Typ allein reicht nicht. Fünf Anpassungen machen den Unterschied auf dem Smartphone:

1. Die Pflichtregistrierung war der größte Abbruch-Treiber. Ein Gast-Checkout lässt Nutzende erst bestellen - Konto anlegen bleibt optional nach dem Kauf.
2. Adressfelder so benennen, dass Browser gespeicherte Daten per Autofill einfügen. Das spart bis zu 80 Prozent der Tipparbeit.
3. Den richtigen Tastaturtyp auslösen: bei E-Mail das @-Keyboard, bei Telefon den Ziffernblock. Reduziert Tippfehler und Frust.
4. Buttons in die untere Bildschirmhälfte setzen - die sogenannte Daumenzone. Erreichbar ohne Umgreifen, auch bei großen Displays.
5. Eine Fortschrittsanzeige wie "Schritt 2 von 3" einbauen. Besonders auf Mobile fehlt sonst der Überblick.

Was sich nicht 1:1 übertragen lässt

Zurück zu Nikos' Dashboard: Die 71-Prozent-Abbruchrate hatte drei Ursachen. Mit dem Gast-Checkout fällt die größte Hürde. Der Multi-Step-Checkout mit Autofill und Daumenzone löst das Formular-Problem. Apple Pay und Google Pay decken die mobile Zahlungserwartung ab.

Aber nicht jede Desktop-Lösung funktioniert auf Mobile. Dropdown-Menüs, die am Desktop übersichtlich wirken, sind auf dem Touchscreen zu klein zum Tippen. Hover-Tooltips existieren ohne Maus gar nicht. Mobile UX braucht eigene Lösungen, nicht nur kleinere Bildschirme.

🤔 Frage dich: Was passiert mit der Conversion-Rate, wenn Nikos den Gast-Checkout einführt, aber die Adresseingabe weiterhin das alte Desktop-Formular mit 12 Feldern auf einer Seite zeigt?