Klein aber fein – wie Artikelbilder auch im mobilen Kontext einen guten Eindruck hinterlassen

„Man kann es nicht anfassen“ ist ein häufig genannter Nachteil von Nutzern, was den Kauf von Mode oder anderen Produkten im Internet betrifft. Umso wichtiger sind aussagekräftige Abbildungen, die möglichst hochwertig sind und die Oberflächen und Farben originalgetreu wiedergeben. In Online-Shops sind daher zunehmend leicht bedienbare Zoomfunktionen oder Vollbildansichten gefragt. Doch was kann man im mobilen Kontext tun? Wie kann der Nutzer auf einem mobilen Endgerät, mit wesentlich kleinerem Bildschirm, einen guten Eindruck von den Produkten gewinnen?

Die wichtigsten Faktoren sind auch hier: Hochwertige Bilder auf neutralem Hintergrund, verschiedene Ansichten des Produktes und Vergrößerungsfunktionen.

Bereits beim Aufruf verschiedener Detailseiten lässt sich feststellen, dass die Abbildungen nicht überall gleich groß sind. Teilweise stehen rechts neben dem Bild Informationen wie Bezeichnung und Preis. Das führt jedoch dazu, dass die Abbildung auf dem ohnehin schon kleinen Bildschirm noch weniger Platz bekommen. Besser ist es, dass Bild über die gesamte Breite des Bildschirms darzustellen. Doch um dem Nutzer einen möglichst umfassenden Eindruck zu vermitteln, werden oft verschiedene Ansichten bereitgestellt. Wie werden diese am besten zugänglich gemacht?

Bei ae.com kann man durch Wischen über den Bildschirm durch verschiedene Ansichten „blättern“ bzw. „sliden“. Dies passiert jedoch manchmal etwas zögerlich. Interessant ist hier, dass oberhalb des Bildes noch Vorschläge für Kombinationsartikel angezeigt werden, die durch einfaches Antippen anzuschauen sind. Im Beispiel von asos.com reagiert der Slider sehr schön weich und gleichmäßig – egal wie stark man wischt, die Bewegung ist immer gleichmäßig. Hier ist das Bild jedoch so groß, dass es kaum auf den Bildschirm passt bzw. die Punkte für den Status im Slider nicht mehr sichtbar sind.

Sliden durch alternative Ansichten(AE)

Sliden durch alternative Ansichten(AE)

Sehr weiche Übergänge zwischen den Bildern (asos)

Sehr weiche Übergänge zwischen den Bildern (asos)

Im mobilen Shop von Bose sind zusätzliche Bilder und Videos über kleine Icons unter dem Bild zugänglich. Tippt man sie an, öffnen sich die alternativen Ansichten als Thumbnails, Hierüber sind sie dann bequem auszuwählen.

Durch tippen auf „Fotos“ öffnen sich Thumbnails für die alternativen Ansichten (Bose).

Durch tippen auf „Fotos“ öffnen sich Thumbnails für die alternativen Ansichten (Bose).

Durch tippen auf „Fotos“ öffnen sich Thumbnails für die alternativen Ansichten (Bose).

Doch wie wird das Zoomen von Bildern gelöst? Kann man sich auf die üblichen Funktionen wie doppeltes Tippen oder Fingerspreizen verlassen oder setzen die Shops auf gelernte Funktionen von „normalen“ Websites? Sehr ansprechend ist die Umsetzung bei rei.com: beim ersten Öffnen der Seite wird ein kleiner Hinweis gegeben, wie das Bild zu vergrößern ist. Der Zoom erfolgt direkt im Bild und ist durch nochmaliges (Doppel-)Tippen wieder rückgängig zu machen. In der Vergrößerung kann man den Ausschnitt durch Verschieben mit dem Finger auch bequem ändern. Auch bei rei klappt das Sliden durch die Ansichten übrigens sehr gut.

Zoom im Bild und Verschieben der Ansicht im Bild (rei)

Zoom im Bild und Verschieben der Ansicht im Bild (rei)

Zoom im Bild und Verschieben der Ansicht im Bild (rei)

Eine andere Variante ist das Öffnen der Vergrößerung auf einer neuen Seite. Ein positives Beispiel hierfür findet sich bei Zappos. Die Vergrößerung öffnet sich durch einmaliges Antippen der Abbildung. Innerhalb der Vergrößerung kann durch Fingerspreizen vergrößert und durch Ziehen der Ausschnitt verschoben werden.

Zoomfunktion auf neuer Seite (Zappos)

Zoomfunktion auf neuer Seite (Zappos)

Zoomfunktion auf neuer Seite (Zappos)

Zusammenfassend…
lässt sich festhalten, dass es recht unterschiedliche Anordnungen der Informationen auf Produktdetailseiten gibt. Oft sind die mobilen Shops jedoch schon sehr ansprechend gestaltet und geben einen guten Eindruck von den Produkten. Für die Produktabbildungen sollte folgendes beachtet werden:

  • Die Bilder sollten über die gesamte Breite reichen, um den vollen (kleinen) Bildschirm auszunutzen.
  • Es sollte gut erkennbar sein, ob es verschiedene Ansichten zum Produkte gibt. Im besten Fall sieht der Nutzer auch, wie viele es gibt.
  • Für verschiedene Produktansichten sollte der Nutzer durch einfaches „Wischen“ über den Bildschirm durch die verschiedene Ansichten sliden können. Die Reaktion (der Wechsel der Bilder) sollte möglichst gleichmäßig und nicht zu schnell sein.
  • Alternativ kann die Vergrößerung auf einer neuen Seite öffnen. Wichtig ist jedoch, dass bekannte Fingerbewegungen auch hier anwendbar sind.

Schreibe einen Kommentar

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