Viele Infos, wenig Platz: Integration von Informationen und Funktionen in die Galerieansicht

Viele Online-Shops möchten Ihren Nutzern bereits auf der Produktliste möglichst viele Informationen zu einem Produkt bieten. So können sich Nutzer schon auf der Produktliste einen Überblick über zentrale Merkmale der Artikel verschaffen, ohne dafür die Detailseite anklicken zu müssen. Um die Ansicht aber auf den ersten Blick nicht zu überfrachten, arbeiten viele Shops mit Layern, in denen bei Mouse-Over weitere Informationen und Funktionen angezeigt werden. Ich habe einige Shops und deren Kachelansichten unter die Lupe genommen und mir angeschaut, wie diese Layer dort umgesetzt sind und welche Möglichkeiten die Nutzer dort haben.

Blättern im Layer bei Ikea

Bei ikea.de werden zusätzliche Infos zum Produkt bei Mouse-Over eingeblendet. Dabei klappt die Ansicht nach unten auf und überblendet das darunterliegende Produkt zum Teil. Schön finde ich hier, dass es eine Blätterfunktion gibt, mit der man sich das Produkt in verschiedenen Farbausführungen anschauen kann. Zudem besteht die Möglichkeit, es auf dem Merkzettel zu speichern. Dies erleichtert es den Nutzern, erst einmal zu sammeln und dann später konkret zu vergleichen. Schade finde ich, dass man in der Standardansicht gar nicht sieht, dass das Produkt auch in anderen Farben verfügbar ist. Und selbst bei Mouse-Over gibt es nur den Hinweis, dass das Produkt „in weiteren Farben“ vorhanden ist. Dabei werden in der Blätterfunktion andere Farben angezeigt. Hätte man hier mit Farbkacheln gearbeitet, wäre es perfekt.


Ikea

Produktliste von ikea.de


Zoomfunktion bei Rossman

Bei rossman.de öffnet sich bei Mouse-Over über ein Produkt auf der Produktliste ein halbtransparenter Layer mit zusätzlichen Informationen. Die Nutzer können das Produkt direkt von dieser Ansicht aus auch in den Warenkorb legen (eignet sich gut, da Kosmetikprodukte i.d.R. nicht „konfiguriert“ werden müssen).

Ein besonderes Highlight ist hier die Zoom-Funktion für das Produkt. Hier öffnet sich bei Klick ein Layer, in dem das Produkt in einer vergrößerten Ansicht dargestellt ist. Leider kann man dann in dieser Ansicht nicht mehr weiter hineinzoomen, sondern erhält nur eine vergrößerte Abbildung.


Rossmann

Produktliste von rossmann.de


Die Idee, einen Zoom zu integrieren fände ich aber grundsätzlich auch für Mode-Shops sehr interessant. Die folgenden zwei Beispiele verdeutlichen, wie dies umgesetzt werden kann.

Materialdetails und verfügbare Größen bei Esprit und Tom Tailor

Bei esprit.de erscheinen zusätzliche Informationen zum Produkt bei Mouse-Over. Sobald die Nutzer mit der Maus über den Artikel fahren, öffnet sich rechts (bzw. links) eine weitere Ansicht des Artikels. Bei dieser Ansicht handelt es sich immer um eine Vergrößerung des aktuell gewählten Produktes. Dies ist sehr schön, da man hier dann z. B. auch schon das Material erkennen kann. Über die Farbkacheln unten kann man außerdem die Produktabbildung in der entsprechenden Farbe anzeigen lassen.

Der Pfeil verdeutlicht zudem, zu welchem Produkt das Bild gehört (das kompensiert die Tatsache, dass die Zusatzinfos mal rechts und mal links von der eigentlichen Artikelabbildung eingeblendet werden). Neben der vergrößerten Ansicht ist zudem zu sehen, in welchen Größen das Produkt noch verfügbar ist.


Esprit

Produktliste von esprit.de


Eine ähnliche Darstellung findet sich bei Tom Tailor – per Mouse-Over erscheinen auch hier eine Detailansicht des Materials sowie die Verfügbarkeit. Im Gegensatz zur Darstellung von Esprit werden dabei keine anderen Produktbilder, sondern das eigentliche Bild überlagert.


Tom Tailor

Produktliste von tomtailor.de


„Mini-Detailseite“ bei Cyberport

Bei cyberport.de sind in den Produktkacheln nur sehr wenige Informationen enthalten. Dafür öffnet sich ein großer Layer mit weiteren Informationen bei Mouse-Over. Im Grunde genommen werden hier schon fast alle Infos der Produktdetailseite abgebildet – es ist dem Nutzer also möglich, hier recht schnell Informationen zu verschiedenen Produkten einzuholen.

Die Größe des Layers ist allerdings ein wenig „überdimensioniert“ (man denke an die Nutzer von Netbooks und Co.). Schon mit einer Standardauflösung nimmt der Layer fast die ganze Höhe des Bildschirms ein.

Dennoch finde ich dieses Beispiel vor dem Hintergrund des Sortiments Technik sehr interessant – besonders gelungen finde ich die Funktionen „merken“ und „vergleichen“ (für Technik-Produkte ja meistens sehr wichtig). Die Nutzer können so zunächst Produkte sammeln, bevor sie sie im Detail miteinander vergleichen und eines auswählen. Aber auch eine direkte Ablage im Warenkorb ist hier möglich.


Cyberport

Produktliste von cyberport.de


Galerieansichten – dies gilt es zu beachten

Die Darstellung von Zusatzinformationen per Layer erleichtert den Nutzern das Stöbern im Online-Shop ungemein. Dadurch, dass viele Informationen bzw. Funktionen direkt auf der Produktliste untergebracht werden können, spart sich der Nutzer das Öffnen vieler einzelner Detailseiten (nicht nur bei langsamer Internetverbindung sehr vorteilhaft). Da sich Informationen nur bei Mouse-Over öffnen, wird der Nutzer dennoch nicht mit zu vielen Informationen auf einmal überfordert.

Folgende Learnings möchte ich Ihnen am Ende für die Gestaltung solcher Layer noch mit auf den Weg geben:

  • Verschiedene Ansichten anbieten und Verfügbarkeit anzeigen: Im Bereich Mode sind vor allem verschiedene Ansichten des Produktes interessant – ideal ist hier, wenn man verschiedene Ansichten durchblättern kann wie bei Ikea und auch eine Zoom-Ansicht des Produktes wie bei Esprit oder Tom Tailor geboten wird. So können Nutzer sich bereits auf der Produktübersicht ein gutes Bild vom Produkt machen. Auch die Verfügbarkeit von Größen und Farben sollte in den Layer integriert werden, damit die Nutzer nicht jede Detailseite einzeln aufrufen müssen, um zu prüfen, ob das Produkt noch in ihrer Größe erhältlich ist.
  • Merkfunktion integrieren: Wichtig ist auch eine einfach zu bedienende Merkfunktion (für die Nutzer, die die Produktliste erst für einen groben Überblick nutzen und später ins Detail gehen). Diese sollte auch für Kleidung, Möbel etc. angeboten werden. Zwar kann der Nutzer auf der Detailseite meistens noch keine Größe oder Farbe auswählen, um das Produkt direkt fertig konfiguriert abzulegen. Dennoch erleichtert eine solche Funktion die Vorauswahl ungemein.
  • Zielgruppe einbeziehen: Welche Infos schon auf der Produktliste besonders interessant oder wichtig sind und daher in der Galerieansicht zugänglich sein sollten, hängt natürlich von den Produkten (Mode, Technik, Kosmetik) und der Zielgruppe ab. Daher sollte immer (z. B. mittels Onsite-Befragung) ermittelt werden, welche Informationen für die Zielgruppe an dieser Stelle besonders relevant sind und daher in den Layer eingeblendet werden sollten.
  • Dennoch – „Tücken“ von Layern beachten: Die Handhabung von Layern ist oft schwierig – es sollte darauf geachtet werden, die Layer erst mit einer gewissen Verzögerung wieder auszublenden. Gerade, wenn der Nutzer im Layer die Möglichkeit hat, Buttons zu klicken oder Ansichten durchzublättern, sollte sich der Layer nicht gleich schließen, wenn der Nutzer versehentlich mit der Mouse den entsprechenden Bereich verlässt.

Kennen Sie weitere Beispiele für gelungene Gestaltung von Layern in der Galerieansicht? Vielleicht kennen Sie auch Shops (oder andere Anbieter), die Ihre Information nicht via Layer unterbringen, sondern eine andere innovative Lösung gefunden haben? Ich freue mich auf Ihre Kommentare und Beispiele!

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.

2 Gedanken zu „Viele Infos, wenig Platz: Integration von Informationen und Funktionen in die Galerieansicht

  1. Pingback: 10 Lesetipps der Woche für Shopbetreiber » shopbetreiber-blog.de

  2. Johannes Schubert

    Da unser Shop eine recht spezifische Nische (sprachenbezogene Soft- und Hardware) bedient, sehen wir weniger Notwendigkeit in einer großen Bilddarstellung (Software-Boxen sind ja meist nicht sehr repräsentativ für die Funktionsweise des Produkts). Stattdessen haben wir unsere Suchergebnisse mit einer aufklappbaren Kurzbeschreibung versehen. Dadurch kann man einen kleinen Eindruck von der Funktionsweise des entsprechenden Programms gewinnen und gleichzeitig bereits in den Ergebnissen verschiedene Artikel miteinander vergleichen (da es kein Mouseover- sondern ein Klick-Event ist, bleiben die Beschreibungen offen, solange sie nicht manuell geschlossen werden).

    Antworten

Schreibe einen Kommentar

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