Julian Kleinknecht - Geschäftsführer & Gründer

1. Anforderungen an den mobilen Checkout

Während der allgemeine mobile Traffic stetig zunimmt, hängt die Checkout-Conversion nach wie vor gegenüber Desktop deutlich hinterher. Nicht selten, wird der Kauf an dieser Stelle noch abgebrochen.

Das liegt zum einen daran, dass Nutzer ihr Smartphone vor allem für die Produktrecherche verwenden und den Kauf später auf PC oder Laptop durchführen. Ein anderer Grund sind immer noch komplexe und komplizierte Eingabemasken und Bezahlvorgängen mit zu vielen Schritten.

Damit Besucher ihren Kauf direkt auf mobilen Endgeräten abschließen, zeigen wir Ihnen im Folgenden, auf welche Punkte bei der Konzeption des Checkouts zu achten ist.

Der mobile Checkout sollte diese Anforderungen erfüllen:

Mobile Besucher müssen schnellstmöglich ans Ziel kommen und den Kauf abschließen können.
Es sollte nur so wenig, wie möglich und so viel, wie nötig angezeigt werden.
Formulare sollten für mobile Geräte optimiert sein.
Vertrauensbildende Elemente, die die Kaufbereitschaft steigern, sollten dennoch gegeben sein.
Es sollten die passenden Zahlungsanbieter/-arten angeboten werden.

In weiteren Praxisguides beschreiben wir diese Elemente mobiler Shops:

2. Mobile Fortschrittsanzeige und Navigation

Auch im mobilen Onlineshop sollte ab dem Checkout die normale Shop Navigation ausgeblendet werden und durch eine Fortschrittsleiste ersetzt werden. Sowie die Besucher den Checkout betreten, gibt es nur noch eine Richtung => Zum Abschluss.

Der Checkout-Prozess sollte dafür aus folgenden Schritten bestehen:

Warenkorb
Anmelden/Adresse
Zahlungsart/Versandart
Bestellung überprüfen

Welche Schritte die Besucher durchlaufen, ist abhängig von ihrem jeweiligen Login-Status (siehe Ausführungen weiter unten).

Für beide Gruppen sollte ersichtlich sein, wie lange es noch dauert, bis die Nutzer ihr Ziel erreichen werden. Insbesondere, wenn Besucher von unterwegs aus kaufen wollen, kann leicht Frustration entstehen, wenn nicht sofort ersichtlich wird, wie lange der Prozess dauert.

Damit der Checkout nicht frühzeitig abgebrochen wird, sollten folgende Anforderungen erfüllt sein:

Die Besucher sehen direkt in welchem Schritt sie sich aktuell befinden (Farblich hervorgehoben) und wie viele Schritte noch zu gehen sind (nicht zwangsweise, was sie dahinter erwartet).
Die bereits absolvierten Schritte sind entsprechend gekennzeichnet (bspw. durch Haken visualisiert).
Mit einem Klick auf die einzelnen Schritte kann zum jeweiligen Schritt zurückgesprungen werden. Hierbei ist darauf zu achten, dass die eingegebenen Daten beim Navigieren erhalten bleiben.

otto.de arbeitet hier mit Zahlen und schreibt für den aktuellen Schritt, was sich darunter verbirgt. Aus Platzgründen ist nicht ersichtlich, was hinter den nachfolgenden Schritten zu erwarten ist.

<pclass=“img_capt“>Bei Zalando wird die Fortschrittsanzeige über die gesamte Breite gestreckt und mit Haken signalisiert, welche Schritte bereits erfolgreich durchlaufen wurden.</pclass=“img_capt“>

Ein One-Page-Checkout empfiehlt sich im ersten Schritt hier nicht, da die Seite so nur unnötig lang und unübersichtlich wird und Ihre Besucher nicht schnell und einfach zu vorherigen Schritten zurückgehen können. Dies sollte zu einem späteren Zeitpunkt mithilfe eines A/B-Tests für die eigene Zielgruppe ausgetestet werden.

3. Vereinfachter Checkout für registrierte Kunden

Auch im mobilen Bereich sollten Besucher nicht zum Login oder dem Anlegen eines Kundenkontos gezwungen werden. Sofern Sie allerdings bereits Kunde sind, sollte der Login so einfach wie möglich gestaltet sein.

3.1 Vereinfachter Login

Bieten Sie Ihren Besuchern dafür nach dem Warenkorb als erstes die Login-Möglichkeit an und füllen Sie E-Mail-Adresse und Passwort – sofern aus dem letzten Besuch vorhanden – schon vor aus.

Lassen Sie bereits eingeloggte Besucher so lange, wie möglich aktiv und loggen Sie diese nur auf eigenen Wunsch hin oder nach einer Inaktivität von 30 Tagen aus.

Bei amazon.de wird dafür beim Login die Möglichkeit „Angemeldet bleiben“ angeboten und im weiterem erklärt, worin die Vorteile liegen.

Eine solche aktive Abfrage der Einwilligung ist aber nur notwendig, wenn es in der Vergangenheit zu erhöhten Missbräuchen von Kundenkonten auf mobilen Endgeräten kam. Da aber kaum jemand sein Mobiltelefon aus der Hand gibt (und wenn dann ist es meistens nochmal durch einen Pin geschützt), ist das Risiko gering und eine aktive Einwilligung nicht notwendig. Erfahrungen zeigen hier, dass sich Besucher eher passiv gegenüber einer solchen Option verhalten (und dieser eher nicht zustimmen), die Vorteile aber gerne nutzen, wenn man sie erst gar nicht vor die Entscheidung stellt.

Weiterbildung per eLearning.

Werde zum Spezialisten für eCommerce-Optimierung

Branchenbekanntes Zertifikat
Zeitlich unlimitierter Zugang zu allen Lerninhalten
Zu jeder Zeit und an jedem Ort lernen

Keine Anmeldung notwendig

3.2 Passwort dechiffrieren

Da man sich auf mobilen Endgeräten schnell mal vertippt, empfiehlt es sich das Passwortfeld über einen „Anzeigen/Verbergen“-Button ein- und ausblenden zu lassen. So können Ihre Besucher nach der Eingabe ihr Passwort kontrollieren, bevor sie sich einloggen. Insbesondere bei Passwörtern mit Großbuchstaben und Sonderzeichen kann dies fehlerhafte Login-Versuche vermeiden.

3.3 Daten aus vorherigen Käufen nutzen

Speichern Sie die letzte verwendete Zahlart und Versandart sowie die letzte verwendete Rechnungs- und Lieferadresse am Kundenkonto und zeigen Sie ihm diese nach dem Login auf der „Bestellung überprüfen“-Seite vorausgewählt an. So braucht der Nutzer auf dem Smartphone die Angaben nur noch überprüfen und bei Bedarf korrigieren.

Bei Zalando werden Besucher nach dem Login direkt auf die Bestellbestätigungsseite geleitet und haben dort die Möglichkeit bei Bedarf Zahlart und Rechnungs- und/oder Lieferanschrift zu ändern. Sie können entweder über die Checkout-Navigation zu den jeweiligen Punkten zurückspringen oder aber bei der Überprüfung die Daten ändern.

Bei Amazon werden die Besucher noch durch die einzelnen Schritte geleitet, wobei die letzte verwendete Einstellung immer vorausgewählt ist.

Auf der „Bestellung überprüfen“-Seite kann der Besucher dann entscheiden, ob die gemachten Angaben als zukünftige Grundeinstellungen übernommen werden sollen.

Eine solche Abfrage ist nur sinnvoll, wenn Sie eine hohe Quote an „falsch“ gelieferten Bestellungen haben (Weil Ihre Besucher bspw. die Angaben nicht ordentlich überprüfen.).

4. Kein Registrierungszwang

Auch wenn es sowohl für Sie als auch für Ihre Kunden Vorteile hat, ein Kundenkonto anzulegen, sollten Sie niemanden zur Registrierung oder dem Login zwingen.

Möchten Besucher ohne eine Registrierung bei Ihnen kaufen, so bieten Sie diesen unterhalb der Login-Maske die Möglichkeit Rechnungs- und Lieferadresse einzugeben. Sprechen Sie hier nicht von Gast-Bestellung oder Registrierung, sondern fragen Sie lediglich, ob die Besucher neu auf Ihrer Seite sind.

5. Formulare

Um neue Daten einzugeben oder vorhandene Daten zu aktualisieren, sollten Besucher ihre Eingaben so komfortabel wie möglich vornehmen können. Ansonsten wird spätestens hier der Besuch abgebrochen.

5.1 Mobile nur notwendige Daten abfragen

Für die Formulareingabe sollten Sie daher darauf achten, dass Sie nur die nötigsten Daten abfragen und auf doppelte Verifizierungen (wie etwa der E-Mail-Adresse) verzichten.

Überlegen Sie, welche Daten Sie tatsächlich benötigen, um die Ware zuzustellen. Benötigen Sie wirklich das Geburtsdatum oder die Telefonnummer? Geht bei der Bestellung häufig was schief, so dass Sie Ihre Kunden per Telefon kontaktieren müssen oder reicht die Benachrichtigung per E-Mail aus? Sofern Sie nicht Möbel verkaufen und die Lieferung telefonisch ankündigen wollen, sollten Sie auf die Abfrage der Telefonnummer verzichten.

Daten, um Lieferung und Rechnung zuzustellen sind:

Vorname und Nachname
Straße und Hausnummer
PLZ und Stadt
E-Mail-Adresse (Für die Bestellbestätigung)

Fragen Sie hier immer als Erstes die Lieferadresse ab und nehmen diese automatisch als Rechnungsadresse an. Auf der „Bestellung überprüfen“-Seite kann diese dann geändert werden.

Verschieben Sie insbesondere auf Mobile alle anderen Informationen auf später. Dies müssen nicht sofort im Checkout abgefragt werden.

Dazu gehören unter anderem diese Daten:

Passwort wählen (vor allem strenge Anforderungen an Passwörter führen oft zu großer Frustration)
Anrede
Geburtsdatum (wenn bspw. für die Zahlart Rechnung notwendig, dann fragen Sie das Geburtsdatum ab, sowie Ihre Besucher mit Rechnung zahlen wollen. Erklären Sie ihm dort auch, warum Sie das Geburtsdatum benötigen)
Interessengebiete für CRM oder Newsletter

Diese Informationen können abgefragt werden, nachdem ein Benutzer den Kauf abgeschlossen hat. Verlegen Sie die Abfrage auf die Vielen-Dank-Seite oder fragen Sie diese später auf dem Desktop ab. Stellen Sie dabei heraus, welche Vorteile dies für den Kunden hat.

Wie man es nicht machen sollte, zeigt otto.de.

Hier müssen mobile Besucher

die E-Mail-Adresse doppelt eingeben
das Passwort wiederholen
Eine Telefonnummer angeben
Ein Geburtsdatum angeben
Angaben machen, wie sie auf otto.de aufmerksam geworden sind

Hier werden zu viele Daten von Nutzer gesammelt, die eigentlich kaum Zeit haben. Und auch wenn einige Angaben davon optional sind, hat der Besucher erstmal den Eindruck, dass er sich sehr lange mit der Eingabe der Daten aufhalten müsste — anstatt hier schnell und einfach seine Bestellung aufgeben zu können.

5.2 Auto-Complete ermöglichen

Alle modernen Browser bieten Nutzern die Möglichkeit, eingegebene Daten zu speichern. Dies ist mittlerweile auch auf mobilen Endgeräten möglich, so dass Daten automatisch in andere Formulare übernommen werden können.

Bei Zalando sehen die Vorschläge beim Klick in das Feld Vorname so aus:

https://lh6.googleusercontent.com/qbmT9Cki9WLkJpMq7VDIqtJCOdseNdgXOlb7Rd7yOUgWfBU4cDtNBsGFKj87CEk-K8OeuH3HG4YbBpZ-eT7xOnL2CiN7DXQqtC3e2DcZqsrO72SAlxUADavu19Yq5LexNDhjogJq

Die automatische Vervollständigung nimmt Besuchern viel Arbeit ab. Stellen Sie also sicher, dass sie funktioniert.

Hierfür müssen zwei Anforderungen erfüllt sein.

Die Funktion darf nicht aktiv deaktiviert worden sein. Dies wäre es, wenn das Feld mit autocomplete=“off“ gekennzeichnet ist

Die Formularfelder müssen richtig markiert sein, damit der Browser erkennt, welche Information dort eingetragen werden soll. Das Attribut „autocomplete“ wird hier mit dem erwarteten Wert befüllt:

Unter whatwg.org finden Sie eine Liste der von den meisten Browsern erkannten Werte für „autocomplete“.

Hier die wichtigsten Werte für den Checkout:

Eingabetyp	Wert für „autocomplete“
Vor- und Nachname	name
Vorname	given-name
Nachname	family-name
Geschlecht	sex
Geburtstag	bday (Format: 1955-06-08)
Firma	organization
E-Mail-Adresse	email
Telefonnummer	tel
Passwort (zum Einloggen)	current-password
Straße und Hausnummer	street-address
Stadt	address-level2
PLZ	postal-code
Land	country

Investieren Sie zudem in Werkzeuge, um Adressen automatisch zu vervollständigen:

Hat Ihr Nutzer bereits Straße, Hausnummer und PLZ eingegeben, dann sollte sich der Ort automatisch erfassen lassen.
Wenn Sie den Namen bereits vorher abgefragt haben, setzen Sie ihn automatisch bei der Adresseingabe

5.3 Passende Tastatur-Layouts anbieten

Bieten Sie, wann immer möglich, die passenden Tastatur-Layouts an:

Bei der Eingabe der E-Mail-Adresse sollte sich das @-Zeichen in der Tastatur befinden.
Bei der Eingabe der PLZ, Telefonnummer (wenn wirklich notwendig) ist die Nummerntastatur hilfreich. (Wenn Sie in andere Länder versenden, kann die Postleitzahl nicht nur aus Ziffern besteht. Besucher sollten jederzeit auf die normale Buchstabentastatur umschalten können).

Ersetzen Sie bei jeder Möglichkeit Texteingabeformulare durch alternative Auswahlmenüs. Falls Sie für eine Zahlart ein Mindestalter voraussetzen, dann sollte die Geburtstagseingabe mit rollbaren Menüs erfolgen. Auch bei der Kreditkartenzahlung sollte das Setzen von Gültigkeitsdaten per Menü erfolgen.

5.4 Validierung von Formularen

Analog zur Desktop-Version sollte die Validierung der Eingabe direkt bei der Eingabe erfolgen. In diesem Fall ist der Nutzer noch bei der Sache. Die „Opportunitätskosten“ für eine Korrektur sind gering, da die Fehlerquelle nicht gesucht werden muss. Welche Information gefordert wird, ist noch bekannt. Lediglich eine Korrektur und eventuell das Lesen der Eingabehinweise sowie das Anpassen der angegebenen Daten sind nötig.

Die Fehlermeldung sollte dann unterhalb des Formularfeldes in Rot erscheinen. Positiv validierte Felder werden mit einem grünen Haken versehen.

5.5 Benötigte Informationen erläutern

Wenn Sie Daten abfragen, die auf den ersten Blick überflüssig erscheinen, erklären Sie Ihren Nutzern warum. Hierfür reicht es, ein Info-Icon anzuzeigen, welches auf Tap-Geste eine kurze Erklärung ausklappt.

6. Vertrauen erweckende Elemente

Arbeiten Sie auch im Checkout mit Trust-Symbolen, um das Vertrauen der Kunden in Ihren Shop weiter aufzubauen. Spätestens mit den Zahldaten gibt der Nutzer sehr sensible Daten an, somit muss er Ihrem Online-Shop das nötige Vertrauen entgegenbringen.

aboutyou.de zeigt bspw. prominent rechts oben das Trusted Shop Siegel mit dem Zusatz „sichere Verbindung“ und gibt den Nutzern, somit ein gutes Gefühl, hier Daten zu hinterlassen.

7. Abwicklung der Zahlung über Drittanbieter

Zusätzlich können auch einfache Bezahlsysteme wie PayPal Express oder Amazon Payments beim Checkout helfen. Anstatt wie im Desktop üblich erst die Versandadresse abzufragen, kann es im mobilen Bereich Sinn machen, mit der Zahlart zu beginnen.

Diese Abfrage sollte idealerweise direkt von der Warenkorb-Seite erfolgen.

Wählt ein Nutzer die Zahlart PayPal Express oder Amazon Payments, können Sie seine Rechnungs- und Versanddaten aus dessen Daten beziehen, so dass dem Nutzer die erneute Eingabe erspart bleibt. Insbesondere bei weniger bekannten Shops, kann dies zu einer höheren Conversion führen, da diesen Anbietern grundsätzlich ein höheres Vertrauen entgegengebracht wird.

8. Login mit sozialen Profilen

Viele Onlineshops bieten den Login auch über soziale Profile wie Facebook, Google oder Twitter an.

Einen echten Mehrwert gibt es für mobile Besucher hier aber kaum, da dort lediglich das Setzen eines Passwortes erspart bleibt. Das Misstrauen bzgl. Datenschutz ist bei deutschen Kunden aktuell zu hoch, als dass sie dort auch Rechnung-, Versand- und Zahldetails speichern würden.