Die perfekte mobile E-Commerce-Checkout-Seite

25.02.2019 von Jens Martin Baumgartner

Verbessern Sie Ihre mobile E-Commerce-Checkout-Seite

Wie der optimale Nutzerfluss beim E-Commerce-Checkout-Prozess aussehen sollte, wurde bis heute ausführlich in der UX-Community durch Tests, Fachartikel und Forschungsergebnisse belegt. Umfangreiche Tests haben dabei gezeigt, dass sowohl Checkout-Seiten mit einseitigen als auch mit mehrseitigem Checkout unter verschiedenen Umständen funktionieren. Erstkäufer erwarten allerdings im Allgemeinen, dass Gäste-Checkouts unproblematisch, schnell und einfach zu vollziehen sind. Zusätzlich helfen folgende Faktoren, den Checkout-Prozess für Käufer maßgeblich zu verbessern:

  • Sicherheitskennzeichen helfen, die Angst vor dem Kauf beim ersten Kontakt mit einem Online-Shop zu reduzieren.
  • Die Gutschein- oder Gutscheincode-Einträge sollten als erweiterbare Links oder Schaltflächen und nicht als Textfelder angezeigt werden. So wandern Käufer nicht zu Couponseiten ab.
  • Als Faustregel gilt, Eingabefelder während des gesamten Checkout-Prozesses auf ein absolutes Minimum zu beschränken.

Trotz dieser guten Hinweise sind all diese beschriebenen Checkout-Seiten so nur für Desktops wirklich praktikabel und optimale mobile Checkout-Seiten sind derzeit nur in begrenztem Umfang anzutreffen. Da mobile Geräte mittlerweile mehr als 50 Prozent des E-Commerce-Verkehrs ausmachen, möchten wir mit diesem Blogbeitrag bewährte Methoden in Bezug auf den optimalen Checkout-Prozess für Mobiltelefone einiger der mobilsten E-Commerce-Marken vorstellen. Natürlich gibt es keine Garantie dafür, dass sich dadurch automatisch die Conversion-Raten Ihres Mobile-E-Commerce verbessern. Bilden Sie daher Hypothesen für Ihre Unternehmen und beginnen Sie mit spezifischen Tests.

Die Inhalte dieses Beitrags

Webdesign für den Nutzer-Daumen und nicht für die Desktop-Maus

Laut den von UX Matters durchgeführten Untersuchungen „How do Users really hold mobile devices?“ halten Nutzer ihre mobilen Geräte auf drei verschiedene, aber doch grundlegende Arten, wenn sie mit einer Webseite interagieren und den Bildschirm berühren:

  • 49 % einhändig
  • 36 % in einer Hand liegend – mit der anderen Hand interagierend
  • 15 % beidhändig

Smartphonebedienung

In allen Fällen spielt der Daumen dabei eine sehr aktive Rolle bei der Interaktion mit dem Bildschirm. In der nachfolgenden Abbildung zeigt sich, wie einfach, gut oder schwer die unterschiedlichen Bereiche eines großen mobilen Telefonbildschirms für einen Daumen erreichbar sind. Im Zusammenhang mit einem mobilen E-Commerce-Checkout ist es daher ratsam, die wichtigsten Elemente in der Bildschirmansicht so zu platzieren, dass sie in optimaler Reichweite des Daumens liegen.

Smartphonebedienung Felder

Ein Beispiel: Schauen Sie sich einmal die Checkout-Seiten von Amazon an. Sie sehen, dass sich das Logo, die Zwischensumme und ein Hinweisfeld im schwer zu erreichenden Bildschirmbereich befinden und der Call-To-Action Button „Jetzt kaufen“ sowie die einzelnen Produkte im Einkaufswagen für einen einhändigen Daumen gut erreichbar sind. Erwähnenswert ist, dass durch Scrollen schwer erreichbare Bereiche für Nutzer besser zugänglich gemacht werden können. Mit der Bildlauf-Funktion kommen diese Bereiche dann in Daumenreichweite.

Vermeiden Sie lange einseitige mobile E-Commerce-Checkout-Seiten – teilen Sie den Checkout auf mehrere Seiten auf

Das Tippen und die Texteingabe auf mobilen Geräten sind eine absolute UX-Herausforderung. Typischerweise ist das Tippen auf mobilen Touchscreens im Vergleich zu Desktops, bei denen das Tippen natürlich über Tastaturen erfolgt, normalerweise langsamer. Touchscreens erfordern auch die Verwendung von Bildschirmtastaturen, die bei Benutzung einen großen Teil des sichtbaren Bildschirmbereichs einnehmen. Aus diesem Grund sollten Sie die Texteingabe für Kunden und Käufer auf Ihrer Checkout-Seite auf ein Minimum beschränken. Denken Sie daran, dass die Käufer vor dem Aufrufen Ihrer Checkout-Seite nur Produkte gesucht, Optionen ausgewählt und Schaltflächen wie die den Button „In den Einkaufswagen“ gedrückt haben. Der Checkout ist wahrscheinlich die einzige Seite im Trichter, die eine Tastatureingabe erfordert. Daher empfehlen wir Formularen der Checkout-Seite auf mehrere Seiten aufzuteilen, damit diese nur die Hälfte des Bildschirms einnehmen. Nutzen Sie eindeutige Schaltflächen wie  „Weiter“ und einen Fortschrittsindikator. So stellen Sie sicher, dass Besucher nicht durch die Tastatureingaben eines einschüchternden langen Formulars vom Kauf abgehalten werden.

So teilen Sie Ihren Checkout mit Fortschrittsanzeigen auf

Wenn Sie die Mindestanzahl an erforderlichen Feldern an jedem Schritt im Checkout-Prozess – idealerweise 3 Schritte – angeben, können Sie die Erwartungen Ihrer Kunden und Käufer am besten erfüllen, indem Sie eine Fortschrittsanzeige einblenden. Diese zeigt an, wie lange der Checkout-Prozess in Anspruch nimmt. Verwenden Sie auch verschiedene Farben in Ihrer Fortschrittsanzeige, um aktive und inaktive Schritte anzuzeigen. Grauen Sie die noch auszuführenden Schritte einfach aus und färben Sie aktive oder ausgeführte Schritte ein.

Fortschrittsanzeige mobile Checkout

Als Alternative zu Fortschrittsanzeigen können Sie auch Akkordeons (aufklappbare Elemente) verwenden, um nicht nur Platz auf Ihrer Checkout-Seite zu sparen, indem Sie jeden Schritt reduzieren, sondern auch, um den Käufern den Fortschritt im Checkout-Prozess anzuzeigen. Akkordeons sind dabei ein hervorragendes Werkzeug für Ihr mobiles Webdesign, da sie lange Formulare vereinfachen und somit Benutzern die Möglichkeit geben, den gesamten Prozess bequem und leicht zu betrachten.

Schneller und reibungsloser Übergang bei jedem Checkout-Schritt

Ein grundlegendes Prinzip zur Steigerung und Optimierung Ihrer Conversions beim mobilen Checkout besteht darin, die Käufer so einfach und schnell wie möglich durch den Einkaufsprozess zu bringen. Um dies zu ermöglichen, sollten die Geschwindigkeit Ihrer Seite und der Seitenübergang im Kaufprozess durch jedes Element und bei jedem Schritt optimal sein.

Check-Out-Geschwindigkeit

In Bezug auf die Geschwindigkeit erwarten rund 85 % der mobilen Benutzer, dass Seiten genauso schnell oder schneller geladen werden, als auf einem Desktop (etwa 2 Sekunden). Dies gilt natürlich auch für Latenzprobleme bei 3G- und 4G-Internetzugangsverbindungen. Bei einem mobilen Checkout ist es daher noch wichtiger, die Ladezeiten Ihrer Seite auf unter 3 Sekunden festzusetzen, da sonst mehr als die Hälfte der Besucher ihren Einkauf abbrechen. In Bezug auf die Beschleunigung Ihrer mobilen Checkout-Seite:

  • Nutzen Sie keine grafischen Objekte wie Carousels.
  • Entfernen Sie Social-Media-Skripts oder andere Skripte von Drittanbietern, die auf Ihrer Checkout-Seite nicht unbedingt benötigt werden.
  • Obligatorische Grafiken wie Ihr Logo oder Ihre Icons sollten über ein CDN (Content Delivery Network) gehostet werden.
  • Verwenden Sie Google PageSpeed Insights, um mit den vorliegenden Informationen Ihre Ladezeiten verbessern zu können.
  • Testen Sie Ihre Checkout-Seite mit einer Simulation der Spitzenzeiten des mobilen Datenverkehrs.

Seitenübergang im Kaufprozess

Stellen Sie im Hinblick auf einen reibungslosen Seitenübergang im Kaufprozess sicher, dass Ihre mobile Checkout-Seite folgende Aspekte enthält:

  • Tab-Index: weiter / zurück – Platzieren Sie ein HTML-Tab-Indexattribut, um die Reihenfolge der Formularfelder nacheinander von oben nach unten auf Ihrer Checkout-Seite genau festzulegen. Auf diese Weise können Käufer schnell zwischen den Eingabefeldern wechseln.
  • Platzieren Sie jedes Texteingabefeld vertikal in einer einzelnen Zeile mit Beschriftungen über jedem Eingabefeld in Ihrem Design. Verwenden Sie nicht zwei oder mehr Felder in einer Zeile. So gewährleisten Sie einen reibungslosen sequenziellen Übergang durch Ihr Checkout-Formular.

Weitere Elemente zur Erleichterung des Seitenübergangs im Kaufprozess

  • Nutzen Sie die Unterstützung für automatische Erkennung beziehungsweise automatisches Ausfüllen der Formularzeilen.
  • Reduzierung der Eingabefelder auf das erforderliche Minimum. Fordern Sie Käufer, die ein neues Konto bei Ihnen registrieren, nicht zweimal zur Bestätigung oder zur Eingabe der E-Mail-Adresse und des Kennwortes auf.
  • Offenlegung von Passwörtern in Browsern zum Zeitpunkt der Eingabe oder automatische Generierung von Passwörtern und E-Mail-Passwörtern für neue Registrierungen.
  • Verwendung von Adressfindern und größeren Buttons sowie Schaltflächen.
  • Einblendung von numerischen Tastaturen für die Eingabe von Telefonnummern und Kreditkarten.
  • Bieten Sie Käufern die Möglichkeit den Kauf als Gast abzuwickeln.

Buttons (CTAs) mit hellen Farbverläufen – keine Links

Buttons wie Call-To-Actions (CTA) sind enorm wichtige Handlungsaufforderungen im Kaufprozess. Stellen Sie als Grundregel sicher, dass auf jeder einzelnen Checkout-Seite nur ein farbiger Button für die wichtigste Aktion vorhanden ist. Eine graue oder hellere Farbe kann für andere Buttons mit niedrigerer Priorität verwendet werden, beispielsweise die Schaltflächen „zurück“ oder „weiter einkaufen“. Wenn Sie Ihre CTA-Buttons noch mit einem leichten Farbverlauf versehen, verlocken Sie Käufer mehr, den Button anzutippen. Ebenso macht eine Änderung der Verlaufsfarbe durch die Berührung des Buttons das Benutzererlebnis etwas realistischer.

Breite Buttons und Schaltflächen – Daumen sind lange nicht so präzise wie Desktop-Mäuse

Ein grundlegendes Prinzip für das Webdesign von mobilen Seiten besteht darin, dass Buttons groß und leicht bedienbar sein müssen, damit Benutzer diese mit ihren Fingern und Daumen optimal berühren können (was ganz im Gegensatz zu den Klick-Gewohnheiten der Desktop-Maus zu sehen ist). Laut einer von MIT Touch Lab durchgeführten Studie zur Mechanik des Tastsinns durch menschliche Fingerabdrücke beträgt die durchschnittliche Breite eines Daumens eines Erwachsenen 2,5 cm. Das entspricht 72 Pixel. Für den Zeigefinger sind es 1,6 bis 2 cm, was umgerechnet 45 – 57 Pixel entspricht. Da der Checkout, der Gäste-Checkout oder „Weiter“-Buttons im Checkout-Prozess die wichtigsten Call-To-Action-Elemente darstellen, müssen Sie sicherstellen, dass diese Buttons die gesamte Breite der Zeile abdecken und mindestens 44 Pixel in der Höhe haben.

Textfelder und Beschriftungen – je größer, desto besser

Verhindern Sie, dass Benutzer zoomen müssen, indem Sie sicherstellen, dass der von Benutzern in Eingabefeldern einzutragende Text lesbar ist. Wir empfehlen eine Schriftgröße von 16 px.

Der Anruf-Call-to-Action

Eine große Anzahl von Online-Händlern haben ihre Telefonnummer mit einem Button auf den Checkout-Seiten abgebildet. Die Absicht dahinter ist, Kundenbedenken zu lindern, Last-Minute-Fragen zu beantworten und Bestellungen von Käufern anzunehmen, die nicht unbedingt online bestellen möchten. Wenn Sie also sicherstellen, dass Ihre Telefonnummer leserlich zusammen mit einem aussagekräftigen Handlungsaufruf angezeigt wird, können mobile Käufer umgeleitet werden, die auf Ihren Checkout-Seiten mit Ihrem Kundendienst oder dem Verkaufsteam sprechen möchten.

Checkout als Gast

Ein großes Verkaufshindernis beim Checkout ist die vorherige Registrierung, um vor dem Kauf ein Konto erstellen zu müssen. Präsentieren Sie daher den „als Gast bestellen“-Button als erste Option noch vor oder über der Anmelde-Schaltfläche für bestehende Kunden. Reduzieren Sie die Eingabefelder in Gast-Formularen auf das absolut erforderliche Minimum. Vermeiden Sie es auch hier, Gäste zu bitten, ihre E-Mail-Adressen zu bestätigen, indem sie diese zweimal eingeben müssen. Verwenden Sie außerdem Funktionen wie einen Adressfinder, um die Eingabe von Adressen zu erleichtern.

Sessions aufrechterhalten mit bleibenden Einkaufswagen

Online-Käufer sind geräteunabhängig – sie könnten bei der Arbeit oder zu Hause an einem Desktop-PC nach Produkten stöbern und sich schließlich dazu entscheiden, entweder auf ihrem Smartphone oder Tablet auf dem Weg nach Hause oder zu Hause einzukaufen. Im Wesentlichen verwenden die meisten Käufer zwei oder mehr Besuche auf verschiedenen Geräten, bevor sie einen Kauf abschließen. Bleibende Einkaufswagen beheben dieses Problem insbesondere für bestehende Kunden. Magento bietet beispielsweise eine dauerhafte Einkaufswagen-Option an, die in Kombination mit zeitgesteuert ausgelösten Messaging-Funktionen den Abbruch von Einkaufswagen erheblich reduzieren kann. Wenn also die mobilen Einkaufswagen Ihrer Gäste 30 Tage oder länger bestehen bleiben, helfen Sie Ihren Käufern den Einkauf wiederzuerlangen und beenden zu können.

SSL-Zertifikate mit erweiterter Gültigkeit – Green Bar Assurance

Basic SSL ist nicht so überzeugend wie das Extended Validation Certificate (EV), wenn es darum geht, die Sicherheit Ihrer Kunden zu erhöhen. Dies liegt daran, dass das Extended Validation Certificate (EV) nicht nur eine umfassendere Identitätsüberprüfung erfordert, sondern auch eine grüne Sicherheitsleiste mit dem Namen Ihres Unternehmens und nicht nur Ihrer URL anzeigt.

Verwenden Sie erweiterbare Menüs für den Versand und FAQs – keine Links (halten Sie Käufer im Kaufprozess)

Durch die Minimierung der Verwendung von Links im Checkout-Prozess können Ablenkungen reduziert werden. Wichtige Informationen wie beispielsweise der Versand, häufig gestellte Fragen (FAQs) oder Ihre Rückgaberichtlinien können in erweiterbaren Akkordeon-Dropdown-Listen gespeichert werden. Akkordeons komprimieren diese Informationen auf Ihrer Checkout-Seite, sodass Sie keine Links zu speziellen Informationsseiten verwenden müssen.

Einblendung numerischer Tastaturen (HTML5) für Kreditkarten- und Telefonnummerneinträge

Es ist sehr wichtig sicherzustellen, dass genau die passende Tastatur entsprechend dem erforderlichen Eingabetyp eingeblendet wird. Der Eingabetyp sollte nicht immer als Text festgelegt werden, da sich die Felder beim Checkout von numerisch zu E-Mail, zu Datumsangaben und Telefonnummern unterscheiden. Da das Tippen auf Smartphones eine Herausforderung für Nutzer darstellen kann, erleichtert das Einblenden der richtigen Tastatur diesen Schritt der Käufer im Kaufprozess.

Texteingabe und E-Mail-Adressfelder

Während Texteingabetastaturen für Felder wie Vorname, Nachname und Adresse verwendet werden, sollten E-Mail-Adressen die E-Mail-Eingabetastatur verwenden, um Zeichen wie das @ und den . anzuzeigen.

Felder für Nummern, Telefonnummern und Monatsangaben

Wenn Sie die Eingabe auf „Nummer“ setzen, wenn Käufer ihre Kreditkarte, CVV-Nummern oder Adressnummern eingeben, spart dies Ihren Käufern Zeit, nicht erst von der Standardtext-Tastatur zur numerischen Tastatur wechseln zu müssen. Wenn Sie den Eingabetyp auf „tel“ setzen, erhalten die Käufer die Telefontastatur, die der Benutzeroberfläche nachempfunden ist, mit der sie beim Telefonieren vertraut sind. Das Eingabefeld für den Monat hilft bei der Eingabe von Verfalls- und Startdaten.

Automatische Erkennung und automatische Vervollständigung

Das automatische Ausfüllen von Kontaktinformationen in Formularen wie Vorname, Nachname, Adresse, Telefonnummer und Kreditkarte wird von den beiden wichtigsten mobilen Webbrowsern unterstützt: Safari Mobile und Chrome.

Chrome verwendet das HTML-Attribut „Autocomplete“ für Formularfelder, das Eingabefelder mit gebräuchlichen Datentypen wie „Name“ oder „Telefonnummer“ kennzeichnet. Das Markieren eines E-Mail-Adressfelds in einem Formular zur Ermöglichung der automatischen Vervollständigung sieht folgendermaßen aus: <input type=“email“ name=“customerEmail“ autocomplete=“email“/>

Beachten Sie, dass Safari Mobile nicht automatisch angewendet wird. Es sei denn, Autofill ist in den iPhone Safari-Einstellungen des Benutzers aktiviert.

Adressfinder

Durch das Hinzufügen eines Adressfinders auf einer mobilen Checkout-Seite wird ein erheblicher Zeitaufwand für die Eingabe einer vollständigen Adresse verringert, die möglicherweise 3 oder 4 Eingabefelder umfasst. Es ist auch weniger fehleranfällig. Made.com führt beispielsweise den Adressensucher auf der mobilen Gast-Checkout-Seite recht ordentlich aus: Die Überschrift „Beginnen Sie mit der Eingabe …“ im Adresseingabefeld veranlasst die Käufer, ihre Adresse über ein einzelnes Eingabefeld oder als Postleitzahl einzugeben.

Angebot von Express-Zahlungsoptionen mit nur einem Klick

Es gibt Käufergruppen, die zögern, ihre E-Commerce-Geschäfte beim ersten Einkauf mit Kreditkartendaten zu tätigen. Sie verwenden zum Beispiel lieber den von PayPal gebotenen Schutz, nicht eine direkte Eingabe ihrer Zahlungsdetails vornehmen zu müssen. Andere nutzen einfach die bequeme Eingabe ihres PayPal-Benutzernamens und ihres Passworts, um den Bestellvorgang kurz zu halten. Durch das Angebot anderer Express-Zahlungsoptionen wie Google Wallet und Amazon Pay wird die für die Eingabe von Zahlungsdetails erforderliche Zeit erheblich verkürzt.

Fazit: Der Heilige Gral des mobilen Checkouts ist Geschwindigkeit und Leichtigkeit

Zusammenfassend stellen wir fest, dass alle Tests und Verbesserungen, die die Implementierung Ihres mobilen Checkouts vorantreiben, auf zwei Prinzipien beruhen sollten:

  • Wie schnell können wir Kunden durch unsere mobilen Checkout-Seiten im E-Commerce bewegen?
  • Wie können wir ihre Nutzererfahrung verbessern?

Bei der ersten Frage ist die Antwort Geschwindigkeit. Ladezeiten, Eingabefelder und automatische Vervollständigung spielen jeweils eine wichtige Rolle. Bei der zweiten Frage ist die Antwort die Benutzerfreundlichkeit der mobilen Kaufabwicklung. Die Wahrnehmung der Kaufabwicklung durch die Käufer ist der Schlüssel zum Erfolg. Verwenden Sie also Gast-Checkouts, Fortschrittsanzeigen und Akkordeons, um Klarheit über die Zeitdauer zu vermitteln. Den Kunden ein Gefühl der Sicherheit zu geben, ist auch ein wichtiger Aspekt, um ihre Erfahrungen zu verbessern. Beachten Sie jedoch, dass jeder einzelne Punkt des mobilen Checkout-Prozesses in diesem Artikel ausführlich getestet werden sollte, da Design in der Regel von Vorurteilen bestimmt wird. Das Testen bietet ein objektives Mittel, um diese Vorurteile abzulegen und die tatsächlichen Benutzerdaten des Käufers zu berücksichtigen.

Quellenangabe: https://www.crazyegg.com/blog/perfect-mobile-ecommerce-checkout/ (25.02.2019)

Über den/die Autor/in:
Jens Martin Baumgartner