Konversion zuerst: Die perfekte mobile Checkout-UI

Die Architektur setzt die Obergrenze; die mobile Oberfläche entscheidet, ob Ihre Gäste sie überhaupt erreichen. Auf einem kleinen Display ist der Checkout kein verkleinertes Desktop-Formular — sondern eine einhändige Verhandlung zwischen Hunger, Ungeduld und jeder Benachrichtigung, die gerade oben hereinrutscht. Derselbe Ablauf, der einen verlässlichen Warenkorb braucht, muss um 22 Uhr im Bus, mit einer Hand und bei schwankendem Empfang, selbsterklärend bleiben.

Konversion zuerst bedeutet: Jeder Tipp verdient den nächsten. Wenige Felder auf einmal, ein klarer Wechsel zwischen Abholung und Lieferung ohne Sackgassen, und eine Bezahlung, die Apple Pay und Google Pay vor die Karteneingabe stellt. Das Ziel ist nicht das minimalistischste Design, sondern die geringste Unsicherheit zwischen Warenkorb und Bestätigung.

Der mobile Checkout ist kein verkleinerter Desktop

Der häufigste Fehler entsteht am Reißbrett: Ein Formular, das am großen Bildschirm mit der Maus entworfen wurde, wird für das Handy einfach zusammengeschoben. Was am Desktop bequem wirkt — viele Felder nebeneinander, Karteneingabe als Standard, Fehler erst nach dem Absenden — wird auf dem Smartphone zur Hürde. Und auf dem Smartphone passiert Ihr Umsatz.

Ein mobil-first gedachter Ablauf beginnt bei der Frage, wie ein Gast das Gerät tatsächlich hält, nicht bei der Frage, wie das Layout am Desktop aussah:

In der Daumenzone

Die wichtigsten Aktionen — Zeit bestätigen, Trinkgeld wählen, bestellen — gehören dorthin, wo der Daumen sie ohne Verrenkung erreicht: in das untere Drittel des Bildschirms. Sekundäres wie Gutscheincode oder Belegoptionen darf hinter einem klaren „Mehr" verschwinden, damit es den Bestellablauf nicht überlagert.

Die visuelle Reihenfolge sollte dem folgen, was den Gast wirklich interessiert: was wird gekauft, wann ist es fertig oder geliefert, was kostet es — bevor Fragen zur Person wie eine Pflichtaufgabe wirken. Und der Übergang von der Menüseite in den Checkout sollte ohne Layout-Bruch geschehen: Markenkontinuität ist selbst ein Konversionsfaktor, weil sie Vertrauen erhält.

Progressives Offenlegen: eine Entscheidung pro Schritt

Restaurant-Warenkörbe sind selten aufgeräumt: Extras, Allergene, Besteck, Verpackungsgebühr. Alles auf eine einzige Seite zu kippen, erhöht die Abbruchrate. Besser sind kurze, beschriftete Schritte mit einer dauerhaft sichtbaren Bestellübersicht — nicht „mehr Seiten", sondern eine Entscheidung pro Schritt, mit einem Zurück-Knopf, der nichts vergisst.

Genauso wichtig: Prüfen Sie Eingaben sofort, nicht erst nach dem Absenden. Telefonnummer-Format, Adresse gegen die Lieferzone, „dann haben wir leider geschlossen" — all das gehört an das Feld selbst, bevor ein Gast sich auf ein Zeitfenster freut, das Sie nicht halten können. Die Oberfläche muss dieselbe Logik nutzen wie die Küche, nicht eine zweite Annahme im Template treffen.

Wallets zuerst, Tastatur später

Jede erzwungene Tastatureingabe ist Reibung — und Reibung kostet Bestellungen. Stellen Sie Apple Pay und Google Pay sowie gespeicherte Zahlungsarten nach vorne; die manuelle Karteneingabe kommt danach. Und dann sollte sie so wenig Tippen wie möglich verlangen: Felder, die das automatische Ausfüllen von Browser, Adress- und Zahlungsdaten unterstützen, und eine klare Erklärung, falls eine zusätzliche Sicherheitsprüfung (3-D Secure) nötig ist. Trinkgeld gehört als antippbare Auswahl mit sinnvoller Voreinstellung dazu — ein Freibetrag ja, aber nicht als erste Hürde.

Nach der Zahlung muss die Bestätigung abgeschlossen wirken: Bestellnummer, Abholtheke oder voraussichtliche Lieferzeit, ein Weg zum Nachbestellen. Erst danach ist Platz für alles Weitere — nicht ein Marketing-Pop-up, bevor der Gast überhaupt weiß, wie sein Essen zu ihm kommt.

Barrierefreiheit ist Konversion

Ein Checkout, den jeder bedienen kann, verkauft an jeden. Barrierefreiheit ist deshalb keine Pflichtübung, sondern eine Konversionsmaßnahme — und der mobile Bestellablauf profitiert doppelt davon:

• Kontrast. Text und Knöpfe müssen auch bei Sonne auf dem Display und für Augen jenseits der 50 klar lesbar sein.
• Schriftgröße. Lieber etwas größer als zu klein; niemand sollte zoomen müssen, um den Preis zu sehen.
• Tippziele. Große, gut getrennte Flächen — der Daumen trifft keine 20-Pixel-Ziele im fahrenden Bus.
• Screenreader. Beschriftete Felder und Knöpfe, damit auch die Sprachausgabe durch den Checkout führt.

Alles davon senkt Reibung für alle Gäste, nicht nur für die mit besonderem Bedarf. Zugänglich und konversionsstark sind dasselbe Ziel.

Fehler, die Umsatz retten

Verbindungen brechen ab, Zahlungsanbieter brauchen einen Moment, Gäste tippen zweimal. Ein guter Checkout fängt das mit klaren Rückmeldungen ab — „wird verarbeitet", „Zahlung erhalten, wir schließen ab" — und mit einem Ablauf, bei dem ein doppelter Tipp nicht zur doppelten Abbuchung wird. Wird ein Gericht mitten in der Bestellung ausverkauft, schlagen Sie sofort einen Ersatz vor, statt den Gast zurück ins Menü zu schicken.

Und das Wichtigste in diesem Moment: Zeigen Sie immer, dass etwas passiert. Jeder kennt die drei Punkte nach dem Tippen auf „Bestellen" — und die Unsicherheit, ob gerade abgebucht wurde oder nicht. Ein sichtbarer Ladezustand wie „Zahlung wird verarbeitet …" statt eines eingefrorenen Knopfes verhindert den zweiten, panischen Tipp und die Rückfrage per Telefon. Lassen Sie niemanden im Ungewissen warten.

Genau so verdient First-Party-Bestellung ihre Wirtschaftlichkeit: weniger Verlust zwischen Absicht und bezahlter Bestellung. Jeder gerettete Warenkorb ist eine Bestellung, für die Sie keine neue Sichtbarkeit einkaufen mussten.

Die 7 häufigsten Fehler am mobilen Checkout

1. Das Desktop-Formular nur verkleinern, statt den Ablauf für eine Hand neu zu denken.
2. Zu viele Pflichtfelder und eine erzwungene Kontoerstellung vor der Bestellung.
3. Karteneingabe vor Wallet — statt Apple Pay und Google Pay zuerst anzubieten.
4. Fehler erst nach dem Absenden anzeigen, statt direkt am Feld.
5. Den Warenkorb beim Zurückblättern verlieren, sodass der Gast von vorn beginnt.
6. Die Bestätigung mit Marketing überladen, bevor Bestellnummer und Zeit klar sind.
7. Trinkgeld als erste Hürde statt als beiläufige, antippbare Auswahl.

Die Mobile-Checkout-Checkliste

Weniger Unsicherheit, mehr bezahlte Bestellungen

Ein mobil-first gedachter Checkout gewinnt keine neuen Gäste — er verliert weniger von denen, die schon bestellen wollten. Genau darin liegt der Hebel: Jeder gerettete Warenkorb ist eine Bestellung, für die Sie keine zusätzliche Sichtbarkeit bezahlen mussten. Die Oberfläche ist der Teil, den der Gast tatsächlich erlebt — und sie entscheidet, ob die gute Architektur darunter auch ankommt.