Tipps zur Gestaltung eines mobilen Check-outs

Heutzutage verwenden Konsumenten immer mehr ihre mobilen Geräte wie Smartphone oder Tablet. Ihr Desktop hat (fast) ausgedient. Sie nutzen mobile Geräte unterwegs zum chatten, surfen im Internet aber auch zum Online-Shoppen – wie zum Beispiel beim Kauf eines Tickets für ein Musical, Konzert oder für den Flug zum nächsten Urlaubsziel.
Potentielle Käufer können sich allerdings einigen Herausforderungen gegenüber gestellt sehen, wenn der Online-Shop nicht mobile optimiert gestaltet wurde. Und so kommt es dazu, dass zwar über 60 % der Online-Zeit mobil verbracht wird es aber einige Probleme gibt, weshalb die Nutzer mobil nicht kaufen. Zeit also, dies zu ändern!.
Dies kann daran liegen, dass die Online-Shops für Mobile-Devices schlecht (oder gar nicht) optimiert wurden oder die Nutzerführung verbessert werden sollte. Auch spielt die Zeit eine Rolle. Gerade auf Smartphones wollen Nutzer schnell ihren Kauf abschließen. Ist dies nicht gegeben, können Nutzer dazu geneigt sein, abzubrechen.
Ein wichtiger Bereich für jeden Online-Shop ist der Check-out-Prozess. Einige Optimierungsmaßnahmen, welche hier vollbracht werden können, möchte ich an folgenden Beispielen verdeutlichen:

Nutzern zeigen, wo sie sich befinden

Ein Fortschrittsbalken erleichtert die Navigation

Abb. 1: Auf Airberlin.de wird im oberen Bereich ein Fortschrittsbalken angezeigt.

Eine gut gestaltete Fortschrittsleiste ist eins der wichtigsten Kriterien in einem Check-out. Sie zeigt den Nutzern wie lange es noch dauert bis sie ihr Ziel erreicht haben. Dies ist sogar besonders wichtig im Falle der schnellen Abwicklung, z. B. wenn der Nutzer in Eile ist. Weiß der Nutzer nicht, wie lange der Prozess dauert, kann leicht Frustration entstehen und er kann den Check-out-Prozess frühzeitig verlassen.
Zusätzlich kann der Balken auch zur Navigation im Check-out-Prozess verwendet werden. Hierbei sollte jedoch darauf geachtet werden, dass die eingegebenen Daten beim vor und zurück navigieren erhalten bleiben.

Anzahl der Klicks reduzieren

Eine schöne Funktion, um Klicks bzw. das Hin-und-her-navigieren innerhalb des Check-outs zu verringern, ist die Möglichkeit, die Angaben zu einem Produkt innerhalb des Check-outs ändern zu können. Dies kann Größe und Farbe eines Produktes aber auch die Anzahl oder das Löschen eines Produktes im Warenkorb sein. Beispielsweise im Fall eines Ticketkaufs, kann das Bestellen eines weiteren Tickets, oder das spontane Absagen einer Begleitperson (vor dem Kauf) und der daraus veränderten Ticketanzahl durch eine schnelle Änderung im Warenkorb leicht geändert werden. Die Nutzer müssen so nicht auf die Produktseite zurück navigieren und das Produkt erneut in den Warenkorb lege, um diese Änderungen vorzunehmen.

Sicherheit gewährleisten

Ein Siegel bekräftigt die Kaufentscheidung

Abb. 2: Viagogo.de weist mit dem Siegel
von McAfee auf Sicherheit hin und
garantiert zusätzlich gültige Tickets.

Gerade das Thema „Sicherheit auf Smartphones“ löst bei vielen Nutzern ein Gefühl des Misstrauens aus. Laut einer Studie von Interpartence zögern nur 11 % der PC-Nutzer bei der Eingabe von persönlichen Daten. Im mobilen Umfeld sind es bis zu 37 %.
Klar, dass gerade hier den Nutzern verdeutlicht werden muss, dass die persönlichen Daten in sicheren Händen liegen.
Schon allein durch ein Zeichen/Siegel kann den Nutzer gezeigt werden, dass die Informationen sicher sind. Allerdings kann dieses auch leicht übersehen werden. Platzierung und Größe spielen daher eine Rolle. Ebenso sollte das Zeichen im gesamten Check-out-Prozess zu sehen sein, um die Nutzer daran zu erinnern, dass der Vorgang sicher, seriös und vertrauenswürdig ist. Zusätzlich wirkt diese Erinnerung beruhigend, wenn persönliche Daten wie die Kreditnummer eingetragen werden.
Betrüger versuchen immer wieder ungültige Tickets zu verkaufen, um damit Gewinn zu erzielen. Eine Garantie, wie auf viagogo.de, kann das Vertrauen in diesem Sinne steigern. Vertrauen Kunden einen Shop, so ist die Wahrscheinlichkeit höher, dass sie einen Kauf abschließen und auch wieder zu diesem zurückkehren.

Formulare optimieren

Auch Formulare können bei falscher Darstellung, Länge und gut gemeinten Korrekturen zur Herausforderung werden.
Daher gibt es auch hier einige Ratschläge, die befolgt werden sollten:

Deaktivierung von automatischer Korrektur: Nachnamen, Straßennamen und Ortsnamen können leicht von der automatischen Korrektur erfasst und geändert werden. Dies wiederum sorgt dann für fehlerhafte Eingaben und fordert das erneute Eingeben der Daten auf Seite der Nutzer. Frustration ist so vorprogrammiert.
Allerdings kann das Autocomplete bei der Adresseingabe sehr weiterhelfen. Allerdings muss hier nochmal überprüft werden, ob die Eingaben zu den Feldern passen.

Tastaturanpassungen erleichtern die Eingabe

Abb. 3: Auf weg.de passt sich die Tastatur
des Smartphones an der Art des Eingabefeldes an. Das fokussierte Eingabefeld ist deutlich zu erkennen und groß genug gehalten, um es leicht zu treffen.

Nur die wirklich wichtigen Daten abfragen: Es sollte sichergestellt werden, dass wirklich nur die wichtigsten Informationen von den Nutzern abgefragt werden. Es erspart den Nutzern Zeit und Mühe beim Eintippen der Buchstaben.

Anpassen der Tastatur: Die Tastatur sollte sich, je nach Eingabe so anpassen, dass die Nutzer diese nicht selber wechseln müssen. Bei der Eingabe der Telefonnummer sollte beispielsweise statt Buchstaben die numerischen Tasten angezeigt werden.

Anpassen der Eingabefelder: Eingabefelder sollten groß genug gestaltet werden, damit das Geschriebene gut zu lesen ist. Auch sollte darauf geachtet werden, dass zum Fokussieren eines solchen Feldes nicht genau der innere Bereich getroffen werden muss sondern hier etwas Spielraum gewährleistet wird. Gleichzeitig sollten die Eingabefelder genügend Abstand voneinander haben – damit wird eine falsche Auswahl verhindert. Auch das positionieren von maximal einem Eingabefeld pro Zeile erhöht die Übersichtlichkeit.

Hilfestellung durch Fehlermeldungen: Fehlermeldungen helfen und unterstützen die Nutzer auch in dem mobilen Check-out-Prozess. Was der Fehler ist und wie er behoben werden kann, ist genauso wichtig zu erfahren wie wo er sich befindet.

Wichtige Inhalte sichtbar platzieren

Einer Studie von UX Matters zufolge, interagieren Nutzer mit ihren Smartphones auf drei unterschiedliche Weisen:

      1. Einhändig (49 %)
      2. Zweihändig – z.B. das Tippen mit beiden Daumen (15 %)
      3. oder indem sie das Smartphone mit einer Hand halten und mit der anderen bedienen (36 %)

Da die meisten Menschen ihr Smartphone einhändig nutzen, sollten die wichtigsten Informationen (Verfügbarkeit eines Produkts, Kontaktmöglichkeit bei Fragen, Lieferzeit etc.) aber auch Buttons so platziert werden, dass sie beispielsweise nicht durch den Daumen verdeckt werden.

Check-out – auch ohne Kundenkonto ermöglichen

Ein Gastkonto erleichtert die Bestellung.

Abb. 4: Das Gastkonto auf eventim.de
unterstützt die Nutzer bei einer
schnellen Bestellung.

Wie bereits erwähnt, spielt auch die Zeit beim Abschließen eines Kaufes eine wichtige Rolle. Mit Hilfe eines Gastkontos haben die Nutzer die Möglichkeit, nur die wichtigsten Daten zum Zahlungs- und Versandvorgangs einzugeben und müssen sich nicht zusätzlich registrieren. Allerdings sollte auch immer die Möglichkeit bestehen, sich zu registrieren oder einzuloggen. Nutzer die häufiger in einem bestimmten Online-Shop kaufen, speichern gerne ihre Daten ab – so können sie beim nächsten Kauf den Bestellvorgang schneller abschließen. Die Nutzer sollten jedoch zum Anlegen eines Nutzerkontos nicht gezwungen werden, denn auch dies kann zu einem Abbruch führen.

Ablenkungen vermeiden

Der einzige Nutzen eines Check-outs sollte es sein ein Produkt, beispielsweise ein Konzertticket, zu kaufen. Alles, was ein Abschluss dieser Tätigkeit sabotieren könnte, ist eine Ablenkung und sollte daher vermieden werden. Dies können Links zu einem anderen Bereich oder aber auch eine Navigation sein. Gerade auf einem Smartphone können sich Nutzer schnell in den Seiten verlieren und ggf. nicht wieder zum Check-out-Prozess zurückfinden. Der Inhalt des Check-out Bereichs sollte daher so reduziert sein, dass nur die notwendigsten Inhalte dargestellt werden.

Elektronische Tickets sparen Geld und Zeit

Um nochmal den speziellen Fall eines Online-Ticketkaufs aufzugreifen, ist das Hervorheben von elektronischen Tickets von wichtiger Bedeutung. Viele Nutzer bevorzugen das Ausdrucken von elektronischen Tickets gegenüber dem Ticketversand nach Hause, da sie hier die Gebühren für das Porto sparen können und das Ticket sofort auf ihrem Gerät angezeigt bekommen.

Zufriedenheit bei Nutzern erzeugen

Neben den notwenigen Informationen und Hilfestellungen die einem Nutzer zur Verfügung stehen sollten, geht es also auch darum, die angesprochenen Optimierungsfälle zu berücksichtigen damit die Nutzer jeden Schritt im Prozess verstehen und schnell durchführen können. Je einfacher es den Nutzern fällt, den Check-out-Prozess zu bewältigen, umso zufriedener werden sie sein und umso eher werden sie auch ihren Kauf abschließen.

Welche Erfahrungen haben Sie mit einem Check-out-Prozess gemacht? Oder gibt es Tipps, die Sie ergänzen möchten? Ich freue mich über die Kommentare.

Portraitfoto: Leonie von Lieres und Wilkau

Leonie von Lieres und Wilkau

User Experience Consultant

eresult GmbH

Bisher veröffentlichte Beiträge: 3

2 Kommentare

  • Hallo Leonie

    toller Beitrag, ja der Teufel liegt in Details wie Autokorr. und Tastatur. . Was auch eine Herausforderung darstellt ist die Reduktion und auch die Reihenfolge der Elemente welche die Einspaltigkeit des Checkouts der mobilen Version bedingt – im Gegensatz zur Desktop Version wo mindestens zwei Spalten zur Verfügung stehen und mehr Breite. Das setzt ein komplett anderes Konzept voraus um eine gutes Erlebniss zu gewährleisten

    VG

    David

  • Hallo David,
    danke, für dein Kommentar!
    Du hast Recht, auch die Größe des Displays spielt natürlich auch eine entscheidende Rolle. Kann aber auch beim „Lenken“ des Nutzers sehr unterstützen 🙂
    Liebe Grüße
    Leonie

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.