4 Must Haves für mobile Produktdetailseiten

Online-Shopping ist seit geraumer Zeit auch von unterwegs mit einem Smartphone möglich und wird immer häufiger betrieben. Während die Verbreitung der mobilen Endgeräte von Jahr zu Jahr steigt, hinkt die Optimierung der Websites dafür noch deutlich nach. Laut einer Studie von Google finden 96 % der Nutzer keine optimierten Seiten vor und 48 % empfinden dann Frustration und Ärger. Das Potenzial ist groß:

  • 74 % der Nutzer würden wiederkehren, wenn sie eine gute mobile Website vorfinden.
  • 67 % würden auf einer solchen Website sogar eher ein Produkt kaufen.

Also statt die Nutzer zu ärgern, lieber die Chancen ergreifen! Was zeichnet aber eine gute mobile Website aus? Ich habe mich auf mobile Produktdetailseiten von Online-Shops für Mode konzentriert und möchte Ihnen folgende 4 Must Haves wärmstens empfehlen.

1. Navigationsflow statt Sackgasse

Viele Online-Shops priorisieren bei der Konzeption des mobile Shops vorbildlich, so dass der geringe Platz für die wichtigsten Inhalte genutzt wird. Was allerdings nicht so vorbildlich ist: es werden dabei häufig Navigationselemente (Navigationsmenü, Querlinks usw.) eingespart. Das hat weitreichende Folgen: Die Navigationswege werden auf diese Weise zu sternartig auslaufenden Einweg-Straßen: die Nutzer müssen immer wieder zurück zum Ausgangspunkt (meist Startseite) und einen neuen Weg gehen (außer wenn sie kaufen). Abgesehen davon, dass diese Art des Shoppings nicht die angenehmste ist, können bei jeder Interaktion lange Ladezeiten entstehen und dafür ist die Gleichung ganz einfach: Lange Ladezeit = Abbruch.

Damit Produktdetailseiten keine Sackgassen und damit Abbruchstätten sind, sollten weiterführende Navigationsvorschläge realisiert werden. Dies ist auch sehr gut möglich, ohne die Seiten zu überladen.

Beim Mobile Shop von Zappos z. B. wird am Ende einer jeden Produktdetailseite die Möglichkeit angeboten, in eine neue Kategorie zu wechseln oder eine neue Suche zu starten.

Bei Esprit gelangen die Nutzer ganz einfach zurück zum gesamten Navigationsbaum, um in eine andere Kategorie zu wechseln, indem sie nur nach oben scrollen (das Menü befindet sich quasi immer oberhalb der Produktdetailseite außerhalb des sichtbaren Bereichs).


 

Auch asos führt seine Nutzer bequem von der Produktdetailseite weiter: mit Querlinks zu passenden Oberkategorien. Die Schaltflächen sind ausreichend groß gestaltet und daher gut mit dem Finger zu bedienen.

Zumindest sollten die Nutzer von einer Produktseite aber bequem zu der Übersicht gelangen können. Das macht ModCloth ganz gut mit einem ausreichend großen Back-Button auf jeder Produktdetailseite.

2. Uneingeschränkte, intuitiv bedienbare Produktansichten

Es ist ein Trugschluss, dass Nutzer sich mit kleinen Produktansichten begnügen, nur weil der Bildschirm des Smartphones klein ist. Sie sind in dieser Hinsicht genauso gnadenlos, wie am Desktop: von allen Seiten, jedes Detail, je größer und schärfer desto besser und am besten noch in Bewegung.

Bezüglich der Bedienung haben die Nutzer ebenfalls ganz konkrete Anforderungen: Pinch to zoom & swipe for more views. Wer seine Nutzer also zufriedenstellen will, sollte diesen Erwartungen lieber gerecht werden.

Sorgen Sie daher für ausreichend Produktansichten inklusive mindestens einer Detail-Ansicht. Bieten Sie wie asos auch im Mobile Shop ein Produktvideo an. Dies hat auch noch den Vorteil, dass durch das Video die mobile Website mehr wie eine App anmutet. Diese wird von Nutzern tendenziell als hochwertiger eingeschätzt. Natürlich sollten auf mobile Endgeräte abgestimmte Videogrößen verwendet werden und das Video darf die Performance nicht belasten.


 

Die Zoom-Funktion sollte wie beim Mobile Shop von Frankonia mit der intuitiven Geste „Pinch“ bedient werden.

Für das Blättern zwischen den Ansichten sollte die Geste „Swipe“ wie im Mobile Shop von Shopbop realisiert werden. Die Geste ist für die Nutzer ebenfalls intuitiv. Nichtsdestotrotz sollten aber wie bei Shopbop die umliegenden Ansichten angeschnitten werden, damit die Nutzer auf sie aufmerksam werden.

3. Kompensation für „mobile“ Umstände

Die Nutzer rufen Websites mit dem Smartphone oft auf, wenn sie unterwegs sind. Dies bringt zwei Anforderungen mit sich:

  1. Es muss schnell gehen und
  2. Die Nutzung kann jederzeit abgebrochen werden.

Beschleunigte Funktionen wie z. B. die „Quick Buy“-Funktion im Mobile Shop von LuckyBrand, führt die Nutzer von der Produktseite direkt in den Checkout. Selbst wenn die Umgehung der Einkaufstasche nicht wesentlich Zeit einspart, vermittelt sie den Nutzern doch das Gefühl sie können eine Abkürzung nehmen, wenn es mal schneller gehen soll.

Damit die Nutzer das Shopping nur unterbrechen und nicht abbrechen, sollten Merkfunktionen angeboten werden. Eine Vielzahl amerikanischer Mobile Shops macht dies bereits, so wie z. B. ModCoth. Wichtig dabei ist, dass die Anmeldung schnell geht und die Nutzer geräteunabhängig wieder auf die gemerkten Artikel zugreifen können.

4. Cross-Selling

Bei der Nutzung des Online-Shops mit dem Smartphone haben die Nutzer prinzipiell nicht weniger Anforderungen. Wie bei der Nutzung am Desktop, möchten sie z. B. Kombinationsartikel als Vorschläge bekommen. Nur wenige Mobile Shops bieten aber Cross-Selling Artikel auf den Produktdetailseiten an. Und wenn sie sie anbieten, dann ganz unten auf der Seite. Das widerspricht jedoch dem Kombinationsgedanken, denn das, was kombiniert wird, sollte zusammen betrachtet werden können.

Ein gutes Beispiel für die Einbindung von Cross-Selling habe ich nur bei asos gefunden. Hier gibt es auf einzelnen Produktdetailseiten die Funktion „Buy the look“. Der Artikel kann dann zusammen mit den Kombinationsartikeln betrachtet werden.

Inspirierend fand ich eine Kampagnenseite im Mobile Shop von DIESEL. Es ist zwar keine Produktseite aber so könnte doch Cross-Selling am Smartphone aussehen: Kombinationsartikel von unten aufklappen, so dass sie sich leicht über den betrachteten Artikel legen. So sind wir das Kombinieren von Kleidung doch auch aus dem realen Leben gewöhnt. Auch vorstellbar: von der Seite weitere Kombinationsartikel einzuschieben.

Zusammengefasst zeichnet eine gute mobile Produktdetailseite also aus:

    1. Sie ist keine Sackgasse, weil

a. weiterführende Verlinkungen vorhanden sind und
b. der Rücksprung über eine gut bedienbare Zurück-Funktion möglich ist.

 

  • Sie bietet umfangreiche Produktansichten, im Idealfall Produktvideos und unterstützt gelernte Gesten:

 

a. Pinch to Zoom
b. Swipe for more views + angeschnittene Ansichten, um auf den Mechanismus aufmerksam zu machen.

 

  • Sie kompensiert für mobile Umstände mit einer

 

a. Merkfunktion, falls die Nutzung unterbrochen werden soll und
b. Abkürzungen (z. B. „Quick Buy“), falls es schnell gehen soll.

 

  • Last but not Least: sie bietet Kombinationsartikel an, die in der Nähe der Produktabbildung betrachtet werden können.

 

Haben Sie Interesse an weiteren “Good Pratices”? Auch zu anderen Themen und Anwendungen? Mit den eResult Themenjournalen und Trendnewslettern bekommen Sie jeden Monat Inspiration für Ihre eigene Arbeit.

Schreibe einen Kommentar

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