Zum Inhalt springen
Zurück
Checkout Conversion-Optimierung Ladezeit

Mobile Checkout optimieren: Gestaltung für den Daumen

von E-shop Guru ·
Mobile Checkout optimieren: Gestaltung für den Daumen
Foto: V H / Unsplash

Werfen Sie einen Blick in Ihre Analytics und sehen Sie sich die Verteilung nach Geräten an. In den meisten griechischen Online-Shops, mit denen wir arbeiten, kommt der Großteil des Traffics klar vom Smartphone. Trotzdem liegt die mobile Conversion-Rate oft spürbar unter der am Desktop. Ein Teil dieser Lücke ist ganz normal – viele stöbern unterwegs und kaufen später am Laptop. Ein anderer Teil geht aber schlicht auf das Konto eines schwachen mobilen Checkouts.

Das Problem: Die meisten Shopbetreiber prüfen ihre Website am Computer. Das ändern wir jetzt.

Der Fünf-Minuten-Test

Bevor Sie irgendetwas anderes tun: Nehmen Sie Ihr Smartphone, schalten Sie das WLAN aus und geben Sie in Ihrem Shop eine echte Bestellung auf – mit einer Hand. Bitten Sie danach jemanden, der die Seite noch nie gesehen hat, dasselbe auf einem anderen Gerät zu tun. Wenn Sie ein iPhone haben, testen Sie unbedingt auch Android.

Notieren Sie ehrlich und ohne Ausreden für die eigene Seite jede Stelle, an der:

  • Sie zoomen mussten,
  • Sie danebengetippt haben,
  • die falsche Tastatur erschien,
  • Sie gewartet haben, ohne zu wissen, ob überhaupt etwas passiert,
  • bereits eingegebene Daten verschwunden sind.

Diese Liste ist Ihr Arbeitsplan.

Formularfelder, die helfen statt bremsen

Die passende Tastatur für jedes Feld

Ein kleines Detail mit großer Wirkung:

  • Telefon: type="tel", damit sich der Ziffernblock öffnet.
  • E-Mail: type="email", damit das @ sofort griffbereit ist.
  • Postleitzahl: inputmode="numeric", denn griechische Postleitzahlen haben fünf Ziffern.
  • Kartennummer (falls das Formular von Ihnen stammt): Ziffernblock.

Autofill, das wirklich funktioniert

Browser können Name, Adresse, Telefonnummer und E-Mail mit einem einzigen Tippen ausfüllen – vorausgesetzt, die Felder tragen die richtigen autocomplete-Attribute (name, email, tel, street-address, postal-code, address-level2 für den Ort). Viele Themes entfernen diese Attribute oder setzen sie falsch. Prüfen Sie Ihres.

Schriftgröße

Ist der Text in einem Eingabefeld kleiner als 16px, zoomt Safari auf dem iPhone automatisch hinein, sobald der Kunde das Feld antippt – und die Seite verrutscht seitlich. Die Lösung: mindestens 16px in allen Eingabefeldern.

Beschriftungen, die nicht verschwinden

Ein Platzhalter anstelle einer Beschriftung sieht aufgeräumt aus. Sobald der Kunde aber zu tippen beginnt, weiß er nicht mehr, wofür das Feld gedacht war. Setzen Sie echte Labels über die Felder.

Weniger tippen

  • Aus der Postleitzahl lassen sich Ort und Region automatisch ergänzen.
  • Stellen Sie Griechenland als Standardland ein.
  • Blenden Sie die Felder für eine Rechnung nur ein, wenn der Kunde tatsächlich eine Rechnung wünscht.
  • Eine Adress-Autovervollständigung kann helfen – testen Sie sie aber vor dem Livegang mit griechischen Adressen.

Wallets: der größte Hebel

Apple Pay und Google Pay ersparen dem Kunden fast das gesamte Formular: Name, Adresse und Karte kommen aus der Wallet, die Freigabe erfolgt per Face ID oder Fingerabdruck. Schneller geht ein Checkout auf dem Smartphone nicht.

  • Platzieren Sie sie als Express-Buttons ganz oben im Checkout oder sogar schon im Warenkorb.
  • Stellen Sie sicher, dass die Versandkosten korrekt berechnet werden, wenn die Adresse aus der Wallet stammt.
  • Testen Sie auf echten Geräten, nicht nur im Emulator.

Welche weiteren Zahlungsarten griechische Kunden erwarten, lesen Sie in unserem Leitfaden zu Zahlungsarten in Griechenland.

Gestaltung für den Daumen

  • Ausreichend große Buttons: mindestens etwa 44–48px hoch, mit Abstand zueinander.
  • Hauptbutton immer erreichbar: Ein fixierter Button „Bestellung absenden“ oder „Weiter“ am unteren Rand hilft auf langen Seiten.
  • Eine einzige Spalte. Zwei Felder nebeneinander schaden auf dem Smartphone fast immer.
  • Eine einklappbare Bestellübersicht oben, bei der die Gesamtsumme stets sichtbar bleibt.
  • Große Radio-Buttons statt Dropdowns für Versand- und Zahlungsoptionen.

Ladezeit im echten Mobilfunknetz

Der Checkout ist oft die langsamste Seite des gesamten Shops, denn hier wird alles geladen: Zahlungsanbieter, Tracking, Chat, Bewertungen und Plugins, die dort nichts zu suchen haben. Im durchschnittlichen 4G-Netz macht sich das deutlich bemerkbar.

  • Entfernen Sie aus dem Checkout alles, was nicht gebraucht wird (Chat-Widgets, Slider, Pop-ups).
  • Behalten Sie den INP im Blick: Jedes Tippen sollte sofort eine Reaktion auslösen. Google wertet Werte unter 200ms als „gut“.
  • Zeigen Sie einen Ladezustand an, während die Versandkosten berechnet werden oder nachdem der Bezahlbutton gedrückt wurde – und deaktivieren Sie den Button, um doppelte Bestellungen zu verhindern.

Der Rückweg von der Bank

Auf dem Smartphone öffnet die Freigabe per 3D Secure oder IRIS – dem griechischen Echtzeit-Zahlungssystem der Banken – häufig die Banking-App. Der Kunde bestätigt die Zahlung und muss anschließend zurück in den Browser und auf die Bestätigungsseite finden. Genau hier gehen Bestellungen „verloren“:

  • Testen Sie den Ablauf mit den großen griechischen Banken, sowohl auf dem iPhone als auch unter Android.
  • Sorgen Sie dafür, dass die Bestellung über den Callback des Zahlungsanbieters aktualisiert wird – auch dann, wenn der Kunde nie auf die Seite zurückkehrt.
  • Versenden Sie die Bestätigungs-E-Mail sofort, damit der Kunde beruhigt ist.

Fehlermeldungen, die auf dem Smartphone funktionieren

Am Desktop wird eine Fehlermeldung oben auf der Seite gesehen. Auf dem Smartphone ist der Kunde längst drei Bildschirme weiter unten und bemerkt sie gar nicht. Platzieren Sie die Meldung direkt am betroffenen Feld, scrollen Sie automatisch dorthin und sagen Sie klar, was zu tun ist: „Die Postleitzahl muss 5 Ziffern haben“.

Checkliste

  • Testbestellung mit einer Hand im 4G-Netz, auf iPhone und Android
  • Richtige Tastaturen und Autocomplete-Attribute in jedem Feld
  • Eingabefelder mit mindestens 16px Schriftgröße
  • Labels über den Feldern
  • Apple Pay und Google Pay als Express-Optionen
  • Eine Spalte, große Buttons, fixierter Hauptbutton
  • Ein schlanker Checkout ohne überflüssige Skripte
  • Reibungslose Rückkehr aus der Banking-App
  • Fehlermeldungen direkt am Feld

Fazit

Der mobile Checkout ist keine verkleinerte Version Ihres Desktop-Checkouts. Er ist Ihr eigentlicher Checkout. Jede Sekunde und jedes Feld, das Sie dort einsparen, schlägt sich im Umsatz nieder. Wenn Sie Ladezeit und Bedienbarkeit Ihres Shops prüfen lassen möchten, werfen Sie einen Blick auf unsere Leistung für Ladezeit und Core Web Vitals oder nehmen Sie Kontakt mit uns auf.

Ähnliche Artikel

Soll Ihr Online-Shop mehr verkaufen?

Erzählen Sie uns, wo Sie heute stehen – wir schlagen Ihnen unverbindlich die ersten Schritte vor.

Wir verwenden Cookies, um Ihnen ein besseres Nutzungserlebnis zu bieten. Mehr dazu in unserer Cookie-Richtlinie.