Mobiles Checkout: Absprünge am Smartphone vermeiden
Am Smartphone kostet jede Eingabe Zeit — und manche Käufer. Die typischen Absprungursachen im mobilen Kaufprozess und die Maßnahmen, die das Tippen auf ein Minimum reduzieren.
$ cat mobiles-checkout-dfm.md | headMobile Checkout-Probleme sind fast nie Designprobleme, sondern Eingabeprobleme: Am Smartphone kostet jedes Feld, jeder Tap und jeder Ladevorgang ein Vielfaches dessen, was er am Desktop kostet. Branchenweit liegt die mobile Kaufabschlussrate unter der Desktop-Rate, obwohl der Großteil des Shoppings längst auf dem Handy stattfindet. Die wirksamsten Hebel sind deshalb keine Farben und keine Bilder, sondern weniger Pflichtfelder, native Autovervollständigung, große Tap-Ziele, Zahlarten ohne Tipperei und Tests auf echten Geräten — gemessen an der Abschlussrate pro Geräteklasse.
Warum konvertiert Mobile schwächer als Desktop?
Weil jede Eingabe auf dem Handy teurer ist. Eine Adresse am Desktop zu tippen dauert Sekunden; auf dem Touchscreen, ohne Tab-Taste und mit Autokorrektur, ein Vielfaches. Die Bildschirmtastatur verdeckt rund ein Drittel des Displays, Feldfehler passieren häufiger, und jede neue Seite muss erneut laden, gescrollt und geortet werden. Nicht die Kaufabsicht fehlt, sondern die Geduld — und die ist auf dem Handy knapp. Hinzu kommt der Nutzungskontext: Mobile wird nebenbei genutzt, in Warteschlangen und Bahnabteilen, mit ständigen Unterbrechungen. Jeder Bruch im Flow ist eine Einladung, den Warenkorb liegen zu lassen.
Wo verliert ein mobiler Checkout die Käufer?
Fast nie beim Ansehen der Artikel — die Absprünge ballen sich an vier Stellen: bei der erzwungenen Kontoregistrierung, bei der Adresseingabe, bei der Eingabe der Zahlungsdaten und bei unklaren Fehlern nach dem Absenden. Das Muster ist regelmäßig: Der Kunde will kaufen, aber der Shop verlangt Arbeit, die das Gerät mühsam macht. Eine Auswertung der Trichterdaten zeigt, auf welcher Stufe die Anteile sinken; ohne diese Messung bleibt jede Optimierung Raterei. Besonders teuer sind Fehler, die erst nach dem Absenden sichtbar werden: Der Kunde hat alle Felder ausgefüllt, erhält aber nur ein generisches „Fehler aufgetreten“ und weiß nicht, welches Feld gemeint ist. Nach zwei solchen Versuchen ist der Kauf in der Regel verloren — und der Kunde beim Wettbewerber.
Welche Maßnahmen senken die Eingabekosten?
Der Kern ist immer derselbe: Das Formular muss dem Gerät die Arbeit abnehmen, nicht dem Kunden. Die HTML-Autocomplete-Attribute sind dafür die billigste Maßnahme — der Browser füllt Adresse, Name und Karte aus seinen eigenen Daten, ohne dass ein einziger zusätzlicher Dienst eingebaut werden muss. Beides zusammen — weniger Felder und schlauere Felder — reduziert nicht nur die Zeit, sondern auch die Fehlerquote: Jedes verhinderte Tippfehler-Problem im Formular ist ein vermiedener Abbruch im Bezahlfenster.
- ›Gastbestellung ohne Zwangskonto; die Registrierung nach dem Kauf anbieten, nicht davor.
- ›Einspaltige Formulare: ein Feld pro Zeile, sichtbare Labels, keine Platzhalter als Label-Ersatz.
- ›Tap-Ziele von mindestens 48 Pixeln Höhe und Breite, mit Abstand dazwischen.
- ›Nur zahlungspflichtige Felder anzeigen; optionale Angaben ausblenden oder streichen.
- ›Fehlervalidierung inline am jeweiligen Feld, nicht erst als Zusammenfassung nach dem Absenden.
- ›Tastaturlayout pro Feld setzen: Zahlentastatur für Kartennummern, E-Mail-Tastatur für E-Mail.
<input name="postal-code" autocomplete="shipping postal-code" inputmode="numeric">
<input name="email" type="email" autocomplete="email">
<input name="cc-number" inputmode="numeric" autocomplete="cc-number">Verstecken Sie den Bezahlbutton nicht hinter einem Scroll. Auf dem Handy muss der primäre Call-to-Action ohne Suchen erreichbar sein; ein Layout, das den Button beim Öffnen der Tastatur nach unten drückt, kostet genau den Moment, in dem der Kunde zahlen will.
Viele Schritte oder eine Bildschirmseite?
Beide Muster funktionieren, wenn zwei Bedingungen stimmen: Der Fortschritt bleibt sichtbar, und nichts geht verloren. Ein mehrstufiger Flow braucht eine klare Schrittanzeige und merkt sich jede Eingabe — auch beim Drehen des Geräts oder beim Wechsel in eine Zahlungs-App und zurück. Ein Ein-Seiten-Flow spart Ladevorgänge, wird aber schnell lang; hier zählen Abschnitte und eine Zusammenfassung vor der Zahlung. Die entscheidende Größe ist nicht das Layout, sondern die Eingabelast: Was der Zahlungsanbieter tokenisiert, muss der Kunde nie wieder tippen — beim nächsten Kauf genügt die Bestätigung eines gespeicherten Verfahrens.
Wie testet man einen mobilen Checkout?
Auf einem echten Gerät, nicht im Simulator des Browsers. Der Simulator zeigt die Größe, aber nicht die Tastatur, die ein Drittel des Bildschirms verdeckt, und nicht das Autofill-Verhalten des Betriebssystems. Nehmen Sie ein Mittelklasse-Gerät mit mobilem Netz, nicht das Flaggschiff im WLAN — die Mehrheit Ihrer Kunden sitzt nicht am schnellsten Anschluss. Testen Sie dazu den kompletten Umweg: aus der App in den Browser und zurück, die Karte gewechselt, das Gerät gedreht, ein Feld absichtlich falsch ausgefüllt.
Der erste Schritt ist keine Designentscheidung, sondern eine Messung: Abschlussrate pro Geräteklasse, Absprungstufe im Checkout und Ladezeit auf realen Geräten. Liegt die mobile Rate deutlich unter der Desktop-Rate, kennen Sie zumindest die Stelle, an der die Arbeit beginnt.
Wie wirkt sich die Ladezeit auf mobile Käufe aus?
Stärker als am Desktop, weil mobile Verbindungen schwächer und die Geräte langsamer sind. Ein Checkout, der am Desktop in einer Sekunde lädt, braucht auf einem Mittelklasse-Gerät im Mobilfunknetz ein Vielfaches. Die Core Web Vitals beschreiben genau diese Erfahrung: LCP für die Ladezeit des Hauptinhalts, INP für die Reaktionsfähigkeit nach einem Tippen, CLS für das Springen des Layouts. Ein springender Bezahlbutton führt zu Fehlklicks und damit zu Abbrüchen — die Stabilität des Bezahlfensters gehört deshalb zur Checkout-Qualität, nicht nur zur Performance-Bilanz.
Welche Zahlarten ersparen mobile am meisten Tipparbeit?
Diejenigen, die das Tippen ersparen. Apple Pay und Google Pay bestätigen die Zahlung per Fingerabdruck oder Gesichtserkennung, ohne Kartennummer und Ablaufdatum — auf dem Touchscreen ist das der größte einzelne Zeitgewinn. Danach folgen gespeicherte Verfahren wie PayPal, bei denen die Anmeldung entfällt. Rechnung und Lastschrift bleiben in Deutschland wichtig, kosten aber eine vollständige Adresseingabe und sollten deshalb mit Autovervollständigung kombiniert werden. Wichtig ist der Rückweg: Wer in eine Zahlungs-App wechselt, muss nach der Bestätigung genau dort wieder landen, wo der Kauf weitergeht.
Für den Daumen bauen, nicht für die Maus
Mobiles Shopping ist längst Normalfall, kein Sonderfall. Wer den Checkout für den Daumen baut statt für die Maus, senkt die Eingabekosten dort, wo die meisten Kunden ohnehin kaufen. Die Reihenfolge bleibt dieselbe, ob Neubau oder Bestandsaufnahme: erst messen, dann Felder streichen, dann Automatisierung und Zahlarten, dann die Technik der Ladezeit. Keiner dieser Schritte braucht ein Redesign — sie brauchen die Disziplin, dem Gerät die Arbeit zu geben, die der Kunde sonst mit dem Daumen erledigen muss.
Wir bauen das für Sie
Vom Artikel zur Implementierung — sprechen Sie mit uns.