10 Tipps - Wie du deinen Mobile Checkout optimierst

Grundlagen: Analysieren & Testen

Damit ihr herausfinden könnt, was für eure Kunden wichtig ist, solltet ihr erst einmal wissen, welche Kunden ihr eigentlich habt. Dazu sind E-Commerce Analytics (hier gehts zu unserem kostenlosen Kurs) ein unerlässliches Instrument. Google, Piwik & Co. verraten euch, wie viele eurer Nutzer mobil auf euren Shop kommen, welche Betriebssysteme und Browser sie dabei verwenden, wie lange sie bleiben und auf welcher Seite sie wieder abspringen. Das sind wertvolle Informationen, die ihr nicht nur sammeln, sondern auch auswerten solltet, um eure individuelle Mobile-Strategie daraus ableiten zu können.

Wenn es um die Beurteilung eures Checkouts geht, solltet ihr nie vergessen, andere, unbeteiligte Nutzer zu fragen. Achtet dabei darauf, dass ihr unter möglichst realen Bedingungen testen lasst: Also mit dem (nach Möglichkeit eigenen) Smartphone in der Hand (also mit nur einer freien Hand zur Bedienung) und vor allem auch in Mobilfunk-Geschwindigkeit, nicht im schnelleren WLAN.

Die wichtigsten Baustellen

Viele Wege führen nach Rom. Und so gibt es nicht nur den einen goldenen Königsweg für den perfekten Checkout, sondern durchaus mehrere Möglichkeiten, einen benutzerfreundlichen mobilen Bestellprozess zu schaffen. Dennoch sind die wichtigsten Baustellen, auf die ihr achten und an denen ihr arbeiten solltet, relativ klar zu definieren:

• Dateneingabe
• Fehlerbehandlung
• Übersichtlichkeit

10 Tipps für die Optimierung eures Mobile Checkout

1. So wenig wie möglich

Das Eingeben von Daten auf der Smartphone-Tastatur nervt. Deshalb gilt die Devise: So wenig Daten wie möglich abfragen. Alles, was für die Bestellung nicht zwangsläufig nötig ist, lässt sich wunderbar auf die Bestätigungsseite verschieben. Nach erfolgreicher Bestellung ist der Kunde deutlich entspannter und wenn er jetzt noch Lust hat, den Newsletter zu bestellen oder euch seine Handynummer zu verraten, damit ihr ihm Push-Nachrichten schicken könnt – umso besser.

Dabei ist Übersichtlichkeit ist das A und O. Packt deshalb nicht zu viele Felder auf eine Seite und verzichtet auf unnötige Informationen. Optionale oder alternative Abfragen können mit Aufklappmechanismen ein- und ausgeblendet werden.

2. Abkürzungen anbieten

Je kürzer, desto besser. Wenn ihr eine Abkürzungsmöglichkeit anzubieten habt, etwa über einen Zahlungsanbieter, der sämtliche Adress- und Zahlungsdaten des Kunden bereits vorliegen hat, tut das so früh wie möglich: Thomann beispielsweise bietet den Link zum PayPal-Expresskauf bereits auf der Produktseite an, als Alternative zum Warenkorb – schneller geht's kaum.

Produkt gefunden? Ab zu PayPal. Schneller kann man kaum einkaufen. (Screenshot: m.thomann.de)

3. Größer ist besser

Mobile Bildschirme sind immer kleiner als der Monitor auf dem Schreibtisch. Besonders wichtig ist deshalb eine gute Lesbarkeit. Gestaltet Schrift und Eingabefelder besser etwas größer und nutzt kleine Tricks, um die Lesbarkeit zu steigern. Zum Beispiel könnt ihr bei der Eingabe von Telefon, Kreditkarten- oder IBAN-Nummern die Ziffern automatisch in 2er- oder 3er-Gruppen aufteilen lassen.

Übrigens: Am iPhone lassen sich Kreditkarten inzwischen auch einscannen, so dass man sich die Eintipperei der Zahlenkolonnen sparen kann. Und wer möchte, kann die Daten auch für den nächsten Shop direkt im iPhone speichern.

4. Smarte Keyboard-Layouts nutzen

Damit das Eingeben möglichst schnell geht, könnt ihr das Keyboard-Layout mitdenken lassen. Anhand der type-Attribute „tel“ oder „number“ für das input-Element lässt sich zum Beispiel beim Klick in das Telefonnummern-Feld direkt die Zahlen-Tastatur aufrufen. Und dafür, dass man nach dem @-Zeichen nicht lange suchen muss, eignet sich das Attribut „email“.

5. Auf Kontraste setzen

Auch Kontraste sorgen für bessere Übersichtlichkeit und Lesbarkeit. Setzt die Eingabefelder deshalb farblich vom Hintergrund ab, damit man sie auf den ersten Blick von Textinformationen unterscheiden kann.

Sorgen für Übersichtlichkeit: Farblich abgesetzte Eingabefelder - und Bezeichnungen über dem Feld. (Screenshot: hm.com)

6. Deutliche Feldbezeichnungen

Wenn Smartphones hochkant gehalten werden, bleibt in der Bildschirmbreite nicht viel Platz. Deshalb solltet ihr Feldbezeichnungen über die Eingabefelder setzen und nicht davor. Das zugegebenermaßen platzsparende Verlagern der Bezeichnungen in das Eingabefeld selbst ist mit Vorsicht zu genießen – zu schnell verliert man nach dem Hineinklicken den Überblick. Da eure Nutzer gerade beim mobilen Bestellen unterwegs deutlich häufiger abgelenkt werden als vor dem Rechner, kann das zum Problem werden. Ergänzend lässt sich anhand von Icons noch eingängiger verdeutlichen, wofür die jeweiligen Felder gedacht sind.

7. Sichtbare Buttons

Damit der Kunde immer weiß, wo es langgeht, und auch bei weniger konzentriertem Tippen die richtige Stelle erwischt, sollten Buttons groß und gut sichtbar gestaltet werden. Eine klare, kontraststarke Signalfarbe hilft. Verzichtet möglichst auf einfache Textlinks. Wenn ihr Radiobuttons oder Checkboxen einsetzt, vergrößert nach Möglichkeit den aktiven Klickbereich, so dass nicht nur das kleine Kästchen, sondern der gesamte Textbereich zum Aktivieren führt.

8. Klare Zuordnung von Fehlermeldungen

An Smartphone und Tablet passieren bei der Eingabe mehr Fehler als am Desktop. Platziert deshalb eine möglichst intuitive und unmissverständliche Fehlerbehandlung direkt an den entsprechenden Feldern, die möglichst kurz formuliert werden. Dass sie außerdem in einer Signalfarbe gehalten sein sollten, versteht sich.

Beim Klick in das Telefon-Feld direkt die Zahlentastatur aufrufen zu lassen, erleichtert die Eingabe. Und natürlich wird hier die fehlende E-Mail-Adresse auffällig und direkt am E-Mail-Eingabefeld angemerkt. (Screenshot: m.thomann.de)

9. Felder vorausfüllen

Wenn ihr schon Daten habt, nutzt sie auch, indem ihr die entsprechenden Felder vorausfüllt. Und alle Daten, die sich aus anderen ableiten lassen, könnt und solltet ihr ebenfalls vorausfüllen. Zum Beispiel den Ort und das Bundesland (wenn ihr das denn überhaupt braucht) nach Eingabe der Postleitzahl.

10. Ablenkungen vermeiden

Wie immer gilt natürlich auch für den mobilen Checkout: Der Kunde sollte so wenig wie möglich abgelenkt werden und darf auf keinen Fall den Checkout verlassen. Deshalb solltet ihr darauf verzichten, ihm Optionen anzubieten, für die er zum Beispiel in die Geräteeinstellungen wechseln muss (etwa für die Aktivierung von Geolokalisierung).

Fazit

Übersichtlich, kurz und knapp und möglichst intuitiv. Wenn ihr diese Kriterien anlegt und eurem Kunden die Arbeit abnehmt, wo immer es möglich ist, wird’s auch mit dem Bestellen klappen. Die gute Nachricht ist: Habt ihr den Kunden einmal erfolgreich durch den Checkout gelotst und ihm dabei möglichst wenig Frusterlebnis geboten, steigt die Chance, dass er wiederkommt. Und beim zweiten Mal noch schneller ans Ziel gelangt, weil alle Daten ja gespeichert sind und nur noch bestätigt werden müssen. Versteht sich.

Schau dir noch schnell in deinem Testshop an, wie die Mobile Checkout Optimierung bei VersaCommerce funktioniert!

Der Testshop ist für 14 Tage kostenlos. Kosten kommen erst auf dich zu, wenn du einen kostenpflichtigen Tarif buchst.