Mobile Commerce Patterns: Der Bauplan für Conversion im mobilen Webshop (3/3)

Was treibt den Smartphone Shopper an, über ein mobiles Gerät einzukaufen? In Teil 1 habe ich grundlegende Motive für das mobile Shopping erläutert. Die konkreten Anforderungen wurden an Beispielen in Teil 2 besprochen. Aus diesen Erkenntnissen bauen wir im letzten Teil das lang erwartete Mobile Commerce Pattern zusammen und legen es unter den Weihnachtsbaum!

  • Wie vermittelt der mobile Shop Vertrauen und Stimulanz auf den ersten Blick?
  • Gelingt ein leichter Einstieg nur über den Suchschlitz?
  • Welches Kriterium gibt Kontrolle über die Produktauswahl?
  • Warum landet das Produkt garantiert im Warenkorb?

Der Einstieg: Eine Stimulanz-Hürde

Mobiles Shopping verlangt einen extrem hohen Grad an Effizienz. Darum muss der Suchschlitz auf der Startseite vorhanden sein um maximale Kontrolle und Schnelligkeit zu bieten. Der Kunde weiss wonach er sucht und möchte sofort zum Produkt geführt werden. Es gibt aber auch die Situation des „lean-back“ surfen, bei dem man sich gemütlich in den Sessel fallen lässt und mit seinem Smartphone stöbern möchte. Bei einem Einstieg dieser Art muss die Kauflust geweckt werden. Wir haben die Teilnehmer nach ihrer favorisierten Methode gefragt und diese in einem Wireframe-Modell umgesetzt. Dabei geben die prozentualen Werte an, welches Element auf der Startseite gewünscht ist. Einigkeit herrscht im Bereich des Headers als auch des Footers. Sowohl das Logo des Anbieters zur Identifizierung  als auch die Möglichkeit zu suchen sind essentiell und dürfen nicht fehlen. Der Footer hält die nötigen Informationen zum Shop bereit und kann dabei übersichtlich und simpel gehalten werden.

Es haben sich zwei Varianten behaupten können und stellen den optimalen Einstieg in Ihren Shop dar.

Einstieg über Kategorien: Puristisch und Effizient

Mobile Commerce - Kategorieeinstieg

Effizienz heisst im mobilen Bereich, schnell in die gewünschte Kategorie zu kommen. 53% der Teilnehmer ist dieser Fakt wichtig und bevorzugen deshalb einen „Klick“ auf den Kategorie Button. Dabei muss das komplette Feld auf die Eingabe des Nutzers reagieren. Es ist nicht trivial, nur auf den Text Link zu klicken. Im schlimmsten Fall reagiert die Seite nicht wie erwartet und der Kunde springt ab! Eine weitere Stolperfalle ist der Seitenwechsel. Effizienz wird suggeriert, indem so wenig Klicks wie nötig gebraucht werden. Dabei ist das Wechseln der Seite und die damit verbundene Ladezeit ein Konversionkiller. Ein Drop-Down Menü erhöht die Kontrolle und täuscht die best mögliche Effizienz vor.

Für einen visuellen Anreiz können Sie bspw. in Ihrem Shop vertretene Marken präsentiert werden. Dies schafft zusätzliches Vertrauen und lockert die vermeindliche Bleiwüste grafisch auf.

Einstieg über Kategorie-Teaser: Stimulanz auf hohem Niveau

Mobile Commerce - Einstieg über Teaser

Sie möchten ihre Besucher zum shoppen regelrecht einladen und Ihnen ein Schaufenster bieten? Dann ist diese Variante der perfekte Einstieg für den Webshop. Der Kunde wird in die Hauptkategorien geführt (z.B. Damenmode, Herrenmode, Schuhe, usw) und bekommt zeitgleich ein stimulienrendes Bild geliefert. Der kognitive Aufwand sinkt enorm, da das Lesen der Kategorietitel entfällt und er sich mit dem Bild im besten Fall selbst identifizieren kann. Einstieg erfolgreich!

In der stimulierenden Version darf auch ein kleiner Angebots-Teaser eingetzt werden und zur Geltung kommen. Saisonale Angebote und Rabatte sind auch im m-Commerce nicht verboten.

Zeigen Sie auf jeden Fall, dass Ihr Shop mehr zu bieten hat als vier Kategorien. Die Möglichkeit direkt mehr Kategorien aufzurufen, lässt auf eine große Produktvielfalt schließen. Es ist dem Käufer überlassen, ob er sich für den effizienten oder den stimulierenden Weg entscheidet. Darum ist diese Variante unser Favorit!

Die Kategorieseite: Schnell weiter zum Produkt

Mobile Commerce Pattern - Kategorieübersicht

Landet der Kunde auf dieser Seite, hat er sich für den stimulierenden Weg entschieden. Der Suchschlitz darf ausgeblendet werden. Bei Bedarf muss die Suchfunktion aber wieder abrufbar sein. Das ist wichtig um keinen Kontrollverlust im Shop zu erleiden. Aufgrund des geringen Platzes muss man sich auf wenige Navigationsmöglichkeiten beschränken. Der Tap auf das Logo führt zurück zur Startseite, um sich neu orientieren zu können. Wie in einem Browser bietet es sich an, schon im Shop selbst die Möglichkeit einzuräumen, ebenfalls einen Zurück-Button einzuführen.

Welche Kategorie auf der Startseite gewählt wurde, zeigt ein schmales Kategoriebild. Dies erfüllt den Zweck der Orientierung und zeigt klar auf, ob man sich für die richtige Sparte entschieden hat. Auch hier lassen sich die entsprechenden Unterkategorien via Drop-Down auswählen. So kommt der Nutzer mit möglichst wenig Taps zum gewünschten Ziel. Icons können eine zusätzliche Hilfe sein, indem sie den zugehörigen Kategorienamen bebildern.

Die Produktübersicht: Schaufenster des Smartphones

Mobile Commerce Pattern - Mini View

Die signifikantesten Unterschiede zwischen den Wireframes offenbaren sich in der Produktübersicht. Hier muss die Bilderwelt überzeugen, um ein Produkt auszuwählen und näher zu betrachten. Eine Angabe von Details, wie der Marke oder des Preises, ist nicht zwingend notwenig. Aus dieser Erkenntnis wurde ein Mini-View entwickelt, welcher die Produkte nur als Bild anzeigt. Wahlweise kann zur üblichen Listenansicht mit Minimalinformationen gewechselt werden.

Die Anzahl der Produkte auf dieser Seite anzuzeigen ist hilfreich, um die Größe der Kategorie abschätzen zu können. Bei Bedarf wird diese durch Filter minimiert. Eine Reihenfolge, in welcher Produkte auf der Seite sortiert werden, sollte klar ersichtlich sein. Das zugehörige Angebot an Filtermöglichkeiten bietet dem Verbraucher die nötige Freiheit, sich sein individuelles Angebot selbst zusammen zu stellen sowie möglichst schnell zum Ziel zu kommen. Wichtigste Facettierung ist der Preis als auch die Farbe bei einem Mode-Shop.

Wichtig: Es kann zwischen beiden Ansichten gewechselt werden! Der Nutzer hat die Kontrolle, ob er den Mini View oder die ihm vertraute Listenansicht wählen möchte.

Tipp: Sie entscheiden sich für die Listenansicht? Trotz des kleinen Displays sollten die Produkte eine perfekte Präsenz finden. Die Größe von 100 x 100 Pixeln hat sich als optimale Größe für das Produktbild erwiesen.

Die Produktdetailseite: Kaufen oder nicht?

Mobile Commerce Pattern - Produktdetail

Auf der Produktdetailseite entscheidet sich der Kunde, ob er das gewählte Produkt kauft. Es sollen die wichtigsten Informationen angezeigt werden. Hierzu gehört das Produktbild. Bei Bekleidung ist es der ausschlaggebende Faktor für den Kauf, da der gewählte Artikel nicht angefasst oder anprobiert werden kann. Eine Vielfalt an Bildern aus unterschiedlichen Blickwinkeln hilft zu bewerten, ob der Warenkorb damit gefüllt wird. Die Zoom-Funktion ist essentiell für die Beurteilung. Dabei darf nicht die Ladezeit der Seite vergessen werden. Vorschaubilder sind möglichst klein zu halten, im Gegensatz zu der vergrößerten Version. Da diese nur bei Bedarf geladen wird, kann auch das Bild in höherer Auflösung kurze Zeit benötigen, bis es auf dem Display erscheint. Weiterer Vorteil einer besseren Bildqualität ist, dass per Pinch-Geste (mit zwei Fingern vergrößern) das Bild weiter vergrößert und somit mehr Details wahrgenommen werden können. Befindet sich das Bild im Zoom-Modus, sollte gegeben sein, dass weitere Ansichten ebenfalls via Flick-Geste zu erreichen sind.

Die Personalisierung eines Produktes, also die Auswahl der zu kaufenden Anzahl, der Größe und Farbe kann mit Drop-Down-Listen geschehen. Eine andere Möglichkeit besteht darin, klickbare Felder der entsprechenden Farbe und Größe zu verwenden. Diese sollten nicht zu klein sein, um eine problemlose Auswahl zu gewähren. Eventuell ausverkaufte Größen sind in beiden Varianten zu kennzeichnen.

Auf eine Produktbeschreibung wollten die wenigsten Kunden verzichten. Eine ausführliche Beschreibung ist aufgrund des geringen Platzes nicht möglich und auch nicht nötig. Es ist vorteilhaft, eine Aufzählungsliste der wichtigsten Eigenschaften unter dem Produktbild oder der Call-to-Action zu platzieren. Eine detaillierte Beschreibung sollte durch einen Link im gleichen Fenster aufzurufen sein.

 

Der Warenkorb: Klar und übersichtlich

Mobile Commerce Pattern - Warenkorb

Im letzten Schritt, vor dem eigentlichen Bestellen, prüft der Kunde seinen Warenkorb. An dieser Stelle sollte es ihm erlaubt sein, die Anzahl eines jeden Artikels zu ändern, diesen wiederholt zu konfigurieren (z.B. ändern der Größe) oder aus dem Warenkorb zu entfernen.

Um abschließend kein negatives Erlebnis bei der Gesamtsumme zu haben, ist der Warenkorb die geeignete Position, um anfallende Versandkosten anzugeben. Klar kommuniziert muss sich der Kunde keine Gedanken über versteckte Zusatzkosten, welche im weiteren Bestellvorgang auftreten könnten, machen.

Der Checkout: Schnell und sicher

Mobile Commerce Pattern - CheckoutZunächst wird abgefragt, ob der Kunde bereits registriert ist oder sich neu anmelden möchte. Beide Optionen sind klar zu kommunizieren. Außerdem sind die benötigten Schritte anzuzeigen. So weiss der Verbraucher, an welcher Stelle er sich befindet und kann abschätzen, wie lange der Vorgang dauern wird.Ein einfaches Handling des Formulars für die einzugebenden Daten erleichtern den Checkout.  Teilnehmer der Studie benötigten im Schnitt 2,63 Minuten, um die geforderten Felder über die virtuelle Tastatur auszufüllen. Die Funktion des automatischen Ausfüllen auf dem iPhones ist keinem der Teilnehmer geläufig und kann daher nicht als zeitverkürzende Option genannt werden. Deshalb ist bei der Wahl der abgefragten Daten darauf zu achten, nur die nötigsten zu wählen und doppelte Eingaben (bspw. E-Mail Adresse) zu vermeiden. Die wenigsten Probanden waren davon begeistert, dass sie Geburtstag und Telefonnummer angeben mussten.

Während des kompletten Checkout zeigt im Header eine Status-Anzeige, in welchem Schritt sich der Kunde befindet. Dies sorgt für maximale Orientierung.

Vorgegebene User Interface Elemente des iPhone können bei der Bedienbarkeit unterstützen, indem die zur Eingabe zugehörigen Tastatur-Layouts eingeblendet werden. So ist es möglich, zwischen Text, Nummern und E-Mail Tastatur zu wechseln. Die Wahl des Geburtstags ist eindeutig zu gestalten. Hier kann entweder die Nummern-Tastatur helfen oder aber Drop-Down-Listen für Tag, Monat und Jahr. Diese werden dann komfortabel mit dem Spinning-Picker wählbar.

Ich freue mich über Feedback, Ergänzungen, Kommentare und Anregungen!