Bestellprozesse mobiler Online-Shops: Fundstücke zu Warenkörben und Anmeldeseiten

Die Zahl von Websites, die für die Nutzung auf mobilen Endgeräten optimiert sind, steigt stetig. Gerade Online-Shops sehen hier großes Potenzial und zeigen eine veränderte Oberfläche an, wenn der Nutzer mit einem Smartphone o.ä. zugreift. Oft präsentieren sich die Sites mit deutlich reduziertem Funktionsumfang. Aber wie wird die Herausforderung des kleinen Bildschirms im Bestellprozess gelöst?
Auch hier wird versucht, die wahrgenommene Komplexität zu verringern. Es gibt zum Beispiel weniger Prozessschritte als auf den entsprechenden Websites für Laptops/PCs. Daneben werden Hilfe und Service-Funktionen sehr eingeschränkt angeboten. Wie sehen die Beobachtungen an konkreten Beispielen aus?

Warenkorb sheego: 3 Prozessschritte sind typisch für mobile Checkouts

Warenkorb Krämer: Zweizeilige Darstellung des Prozesses und Speicherfunktion

Bei Zalando gibt es keine Vorschau auf den Prozess, dafür werden hier und auf den folgenden Seiten Gütesiegel angezeigt.

Im Görtz-Warenkorb findet sich ebenfalls kein Prozessdarstellung, dafür jedoch ein Hinweis auf Datensicherheit und eine Hotline.

Die Warenkörbe in mobilen Bestellprozessen sind bezüglich der Produktdarstellung recht ähnlich. Es werden Abbildungen, Größe, Farbe und Preis angezeigt. Daneben kann man die Produkte auch wieder löschen und findet zur Fortsetzung des Prozesses den bekannten „zur Kasse“-Button. Die Unterschiede bestehen in der Anzeige des Prozesses (Fortschrittsanzeige) und Zusatzinformationen. Interessant ist hier im mobilen Shop von Krämer, dass es deutliche Hinweise auf die Einlösung des Gutscheins gibt – der dritte Prozessschritt ist ausdrücklich „Zahlung & Gutschein“ benannt. In diesem Warenkorb ist auch interessant, dass die Auswahl gespeichert werden kann und der Kunde die Bestellung dadurch zu einem anderen Zeitpunkt fortsetzen kann (oder ggf. am Laptop statt auf dem Smartphone). Zalando hebt auch im mobilen Kontext die Gütesiegel hervor, während Görtz auf eine sichere Datenübermittlung hinweist. Hier ist auch ein eher unübliches Element für mobile Bestellprozesse zu finden: Die kostenfreie Hotline ist sonst eher „versteckt“. Dabei ist es doch gerade im mobilen Kontext naheliegend, den Anbieter mit einem Klick anrufen zu können.

Auf der Anmeldeseite von neckermann werden zuerst die Bestandskunden angesprochen.

Bei bonprix sind alle Optionen recht gleichberechtigt dargestellt.

Nicht verschont bleiben mobile Nutzer vom Anmeldeprozess. Die „Weichenseite“, wo also entschieden wird, ob der Nutzer Neukunde oder Bestandskunde ist und wie er sich authentifizieren möchte, ist ja oft schon auf normalen Bildschirmen eine kleine Herausforderung. Auch mobil müssen alle Handlungsoptionen sofort ersichtlich sein. Viele Shops stellen die Login-Felder für Bestandskunden prominenter dar, als die übrigen Optionen – so z. B. bei neckermann.de. Hier ist auch erkennbar, dass eine Bestellung auch ohne Registrierung möglich ist, der Button aber unauffälliger gestaltet ist. Shops, die die Seite so oder so ähnlich gestalten, scheinen also davon auszugehen, dass im mobilen Kontext weniger Neukunden auf die Website zugreifen.
Bei bonprix dagegen sind zunächst die Neukunden genannt. Die Reihenfolge ist im Vergleich eher unüblich, aber dafür sind hier die einzelnen Optionen gut von einander abgegrenzt und sehr übersichtlich dargestellt.

Zusammenfassend lässt sich festhalten, dass es inzwischen recht komfortable mobile Bestellprozesse gibt. Wichtig ist auch hier eine gute Navigation: Der Nutzer muss stets erkennen können, wo er sich befindet und wie er vorwärts oder zurück gelangt. Da die Dateneingabe wohl der eher unangenehme Teil des Checkouts ist, sollten gerade Bestandskunden schnell auf ihr Kundenkonto zugreifen können: Einloggen, Daten überprüfen und ggf. ändern – fertig.

Wie auch Neukunden im mobilen Checkout optimal unterstützt werden können, ist Gegenstand eines folgenden Beitrags zur Formulargestaltung.

Ein Gedanke zu „Bestellprozesse mobiler Online-Shops: Fundstücke zu Warenkörben und Anmeldeseiten

  1. Pingback: Usability von M-Shops

Schreibe einen Kommentar

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