Mobile Online-Shops: Tipps und Guidelines Teil 2/2 – Produktdetailseite, Warenkorb und Bestellprozess

Immer häufiger wird darüber berichtet, die Nachfrage nach mobilen Online-Shops wachse stetig, insbesondere in der jüngeren Zielgruppe, den Digital Natives. Deshalb möchte ich die Gelegenheit nutzen, um weitere Tipps, Good Practices und Guidelines zur Konzeption von mobilen Online-Shops mit Ihnen zu teilen, die wir in unserer Grundlagenstudie zum Thema Mobile Shopping entwickelten – von der Startseite bis zum Bestellprozess.

Im zweiten Teil gehe ich darauf ein, worauf bei der Konzeption der Produktdetailseite, des Warenkorbs und dem Bestellprozess zu achten ist, damit das geweckte Interesse an einem Artikel in einen Kauf verwandelt wird.

Produktdetailseite – der Teufel steckt im Detail

Die erste Etappe ist gemeistert: In dem teilweise recht engen Zeitfenster, in dem ein Smartphone-Nutzer in einem mobilen Online-Shop verweilt, konnten Sie seine Aufmerksamkeit gewinnen und für ein Produkt interessieren. Doch was nun?

Alles auf einen Blick: Produktabbildung, Preis, Lieferstatus, Artikelname, Bewertungen, Warenkorb-Link… nur die Info zu den Versandkosten fehlt (Weltbild)

Alles auf einen Blick: Produktabbildung, Preis, Lieferstatus, Artikelname, Bewertungen, Warenkorb-Link… nur die Info zu den Versandkosten fehlt (Weltbild)

Zunächst sollten Beschreibung und Darstellung des Artikels für die mobile Version optimiert sein: Sind die wesentlichen Artikelmerkmale im sofort sichtbaren Bereich? Sind alle Informationen zu dem Artikel, die es beim „großen Bruder“ – der Desktop-Version – gibt, auch in der mobilen Version verfügbar? Ist der Bestellbutton gut sichtbar und schnell zu erreichen? Wenn ja, ist dies schon mal ein großer Pluspunkt.

Guideline: Im sofort sichtbaren Bereich sollten die wichtigsten Artikelinformationen dargestellt werden. Diese können je nach Produkt schwanken. Generell wichtige Artikelmerkmale sind: Preis(!), Produktabbildung, Artikelname, Verfügbarkeit, Versandkosten, Bewertungen und sonstige wichtige Unterscheidungsmerkmale.

Es ist jedoch auch wichtig, auf die kleinen Details zu achten, die schnell übersehen werden können. Wie z. B. Lieferstatus und Versandinformationen. Sie sollten in der Nähe des Bestellbuttons platziert werden, damit potentielle Käufer diese Informationen direkt abrufen können.

Ein weiteres Detail ist die Vollbild-Darstellung bei großen Produktabbildungen. Auch in der mobilen Version ist sie ein wichtiges Instrument, um den Nutzer von einem Produkt zu überzeugen – vor allem bei Kleidung. Gerne wird jedoch übersehen, dass der Weg zurück zur Produktdetailseite klar gekennzeichnet werden sollte, damit die Nutzer mühelos wieder zurück finden.

Guideline: Bei Vollbild-Darstellungen (z. B. Zoom-Funktion) immer deutlich machen, wie der Nutzer wieder zurückgelangen kann.

„Der Artikel wurde in den Warenkorn gelegt“ immer anzeigen

Auch im Warenkorb kommt es neben einer guten Funktionalität und einer übersichtlichen Aufteilung auf Details an: In unserer Studie fiel auf, dass einige der mobilen Online-Shops dem Nutzer keine klare Rückmeldung gaben, wenn sie einen Artikel in den Warenkorb legten.

In einem der getesteten Online-Shops aktualisierte sich zwar die Warenkorbanzeige oben auf der Seite – doch dies war für den Nutzer nicht sichtbar, da er sich weiter unten auf der Produktdetailseite befand. Dies führte schnell zu Frustration, da die Teilnehmer dachten, der Online-Shop funktioniere nicht richtig. Eine deutliche und unübersehbare Rückmeldung über das Hinzufügen eines Artikels in den Warenkorb ist für einen mobilen Online-Shop unerlässlich.
Guideline: Der Nutzer sollte immer eine deutliche Rückmeldung erhalten, wenn ein Artikel dem Warenkorb hinzugefügt wurde.

Bestellprozess – unnötige Eingaben sind Gift

Ich hatte bereits in einem vorherigen Beitrag darauf hingewiesen, wie wichtig es ist, dass der mobile Bestellprozess so einfach und unkompliziert wie möglich sein sollte – vor allem aber schnell! (Das wollen Smartphone-Nutzer: 18 Guidelines für Ihren mobilen Onlineshop (Teil 2) )

Wie kann ein Bestellprozess besonders zügig abgeschlossen werden? Indem Sie den Nutzer schnell zu dem Produkt führen, das ihn interessiert und ihm dann beim Bestellvorgang so viel Arbeit bei der Eingabe abnehmen wie möglich.

Einige Tipps, wie Sie den Bestellprozess beschleunigen können:

  • Ladezeiten: Halten Sie die Ladezeiten möglichst kurz.
  • Automatisches Ausfüllen: Information, die aus anderen Angaben hervorgehen, sollten automatisch ausgefüllt werden (z. B. die Stadt, wenn PLZ vorher eingegeben wurde).
  • Formulartyp: Für jedes Formularfeld kann der Eingabetyp festgelegt werden (Email, Telefon, URL,…), so dass alle benötigten Zeichen auf der virtuellen Tastatur eingeblendet werden.
  • Ortungsdienste: Nutzen Sie die Möglichkeiten moderner Endgeräte, um z. B. den aktuellen Standort automatisch ermitteln zu lassen.
  • Payment-Provider: Der Bestellvorgang reduziert sich erheblich, wenn ein Nutzer dort bereits registriert ist und dies als Bezahloption wählt. Einige Nutzer sind sogar bereit eine kleine Gebühr für diesen Service zu zahlen, wie unsere Studie zeigt.

Ein gutes Beispiel für einen schnellen Bestellvorgang bietet Joey’s (Abb. 5+6): Stellen Sie sich vor, sie sitzen gemütlich in Ihrer Skatrunde und wollen nun zügig 3 Pizzen bestellen für die Runde. Hier zeigt sich, wie ein guter mobiler Online-Shop der Desktop-Version überlegen sein kann: Weil es schneller und unkomplizierter ist.

Es gibt viel zu tun, doch es lohnt sich

Die Konzeption und Pflege eines mobilen Online-Shops erfordert viel Arbeit und Liebe zum Detail. Getreu dem Motto: Es gibt immer was zu tun. Doch es lohnt sich. Das Endprodukt ist ein schneller, intuitiver und attraktiver mobiler Online-Shop – Ihre Nutzer werden es Ihnen danken.

Welche Erfahrungen haben Sie mit der Entwicklung von mobilen Online-Shops gemacht? Welche Erkenntnisse konnten Sie gewinnen? Ich freue mich über Ihre Kommentare!

Kompaktes Know-How für die professionelle Konzeption von mobilen Websites, Online-Shops und responsive Websites

Gerne möchte ich Sie in diesem Zusammenhang auch noch auf den Workshop Mobile-Clinic @ eResult auf der diesjährigen Informationsarchitektur Konferenz in Berlin (22.-24. Mai) aufmerksam machen. Gemeinsam mit meiner Kollegin Anja Weitemeyer (Managing Partner und Senior UX-Consultant bei eResult) stellen wir spannende Erkenntnisse der User Experience Forschung – eingesetzt zur Optimierung mobiler Anwendungen und von Responsive Webdesigns – vor. Ich würde mich freuen, wenn auch Sie dabei wären! Als spezielles Angebot haben wir noch 50€-Rabatt-Codes für den Workshop zu vergeben, bitte schreiben Sie mich bei Interesse einfach an.

…und falls Sie neugierig auf weitere Ergebnisse der Grundlagenstudie geworden sind: Den vollständigen Studienband mit allen Guidelines, Erkenntnissen sowie vielen Good Practice-Beispielen können Sie kostenlos in der eResult Download-Area herunterladen: Studienband: Shoppen mit dem Smartphone – Erkenntnisse, Guidelines und Good Practices für mobile Onlineshops

Portraitfoto: Ole Kleinert

Ole Kleinert

User Experience Consultant

Alumni-eresult GmbH

Bisher veröffentlichte Beiträge: 10

Schreibe einen Kommentar

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