Strukturierte Bildinformationen: Spielen Sie die Vorteile interaktiver Webseiten richtig aus!

Mixer Produktabbildungen

Die Produktseite ist für Online-Shops und Hersteller der Schlüssel zur Conversion – hier muss es gelingen, den Benutzer vom Kauf zu überzeugen. Besonders wichtig sind dabei die Produktbilder, die dazu dienen, dass sich der Nutzer – ähnlich wie im realen Geschäft – einen guten optischen, möglichst realitätsnahen Eindruck über die Ware verschaffen kann.

Die Produktbilder würde ich in verschiedene Grundtypen einteilen:

  • rein sachliche Produktansichten, die das Produkt genau so zeigen, wie es beispielsweise aus der Verpackung kommt
  • Abbildungen im Verwendungszusammenhang, beispielsweise in einer bestimmten Umgebung oder mit zusätzlichen Personen
  • eine Mischform aus beiden

Bei reinen sachlichen Produktbildern steht der informative Charakter im Vordergrund, während bei den beiden anderen der Nutzer jeweils auch emotional angesprochen werden soll. Beim Anbieten von Sachinformationen ist es von Vorteil, die Informationen zu strukturieren, damit man die Übersicht behält.

Bisherige Ansätze zur Strukturierung der Sachinformationen von Produktbildern, umfassen beispielsweise die Möglichkeit einer Produktbildvergrößerung oder innovative Bedienkonzepte, wie 360-Grad-Ansichten. Ihnen ist gemein, dass der Informationsgehalt nur wenig verbessert wird. Ab einer bestimmten Vergrößerungsstufe wird die Vergrößerung eines Produktbildes grobpixelig, so dass sich nur schwer was erkennen lässt.

Wie ich im Rahmen meiner 9-jährigen Tätigkeit bei eResult feststellen konnte, werden die Benutzer immer anspruchsvoller. Oft sind mehrere Produktbilder und eine Produktvergrößerung nicht mehr ausreichend; wichtig ist vor allem Detailgenauigkeit.

Der Internetanbieter Amazon.de hat dies erkannt und geht zumindest teilweise einen anderen Weg. Er sieht die Möglichkeit vor, bei einem Produktbild Bereiche zu markieren und diesen dann zusätzliche Kerninformationen hinzuzufügen.

Dies wird über einen Mouseover-Effekt realisiert, bei dem die Textinformation als Tooltipp erscheint – wie auf der Abbildung zu sehen ist. Der Informationsgehalt von Detailbildern wird erhöht.

Amazon Detailabbildung

Die Kernaussagen dieses Detailbildes (Unterseite eines Standmixers) beschäftigen sich mit den Saugfüßen und der Kabelaufwicklung. Der Tooltipp erscheint, wenn man die Mouse über die Kabelaufwicklung bewegt.

Durch eine standardmäßige, lineare Anordnung von Thumbnails unter dem Produktbild, ist es dem Benutzer nicht mehr möglich, sich zielgerichtet zu informieren. Vielmehr stehen einzelne Detailaufnahmen mit unterschiedlichem Vergrößerungsgrad gleichberechtigt nebeneinander und im schlechtesten Fall muss der Nutzer eine horizontale Scrollfunktion bedienen, um aus einer Reihe von briefmarkengroßen Abbildungen die herauszufiltern, die sich mit den von ihm gesuchten Details beschäftigen.

Warum nicht die Möglichkeiten interaktiver Websites ausnutzen und den Benutzer „spielend“ und strukturiert durch die Bildinformationen führen, wie bei anderen Navigationselementen auch?

Statt einer Scrollfunktion, die für Produktbilder mit kleinem Detaillierungsgrad durchaus sinnvoll ist, bietet sich hier eine hierarchische Anordnung der Produktabbildungen an. Dies wird durch eine Baumstruktur realisiert, in der jede Ebene einen weiteren Detaillierungsgrad ermöglicht.

Baumstruktur

Baumstruktur: Je weiter man sich von der „Wurzel“ (a) entfernt, desto höher ist der Detaillierungsgrad. Dabei zeigt die Abbildung (b) ein Detail der Abbildung (a) und Abbildung (c) ein Detail von Abbildung (b).

Wie lässt sich eine solche Baumstruktur in der Praxis realisieren?
Hier komme ich wieder zurück auf das Beispiel von Amazon.de.

Mixer von vorn

Abbildung (a)

Glasbehälter des Mixers

Abbildung (b)

Deckel des Mixers

Abbildung (c)

Der Benutzer kann sich, wie im Laden, einzelne Details von einem Produkt genauer ansehen. a.) Wie sieht der Mixer überhaupt aus? Intuitiv per Mouseover und –klick kann der Benutzer eine Detailaufnahme auswählen, z. B. die Kanne. b.) Wie sieht die Kanne konkret aus? Per Mouseover und -klick kann er dann weitere Detailbilder auswählen, um noch detailliertere Informationen, über z. B. den Deckel, zu bekommen. c.) Ein erneuter Mouseover liefert dann wiederum weitere Information, z. B. „Der Messbecher ist mittig im Deckel platziert“.

Jeder Betreiber eines Online-Shops sollte verinnerlichen: Der Online-Käufer von heute will ein gewisses „Shopping-Erlebnis“ in der virtuellen Welt geboten bekommen und genauso gut beraten werden, wie in der Realität.

Wichtig ist auch, dass Sie Ihre Zielgruppe und deren Ansprüche und Erwartungen genau kennen. Eine Onsite-Befragung liefert beispielsweise auch Antworten darauf, in welchen Produktbereichen der Nutzer besonders viel Wert auf eine Detailgenauigkeit von Produktbildern legt.

Ich freue mich auf Ihre Erfahrungsberichte, Meinungen und Ideen.

4 Gedanken zu „Strukturierte Bildinformationen: Spielen Sie die Vorteile interaktiver Webseiten richtig aus!

  1. Pingback: Spielen Sie die Vorteile interaktiver Webseiten richtig aus! » Produktbilder, Nutzer, Mischform, Produktbildern, Umgebung, Abbildungen » PM trendletter | für Profis im Marketing

  2. Jens-Otto Schreiner

    Vernetzte Sachabbildungen – Genial! Das erinnert ein wenig an Google Maps, wo ja auch der Detaillierungsgrad mit jedem Klick auf die Zoom-Funktion zunimmt, bis man Häuser und sogar Autos erkennen kann. Nur dass in ihrem Vorschlag auch noch gezielt Zusatzinformationen eingestreut werden können.

    Sehr gut würden sich Ihre Vorschläge meiner Meinung nach auch bei interaktiven Bedienungsanleitungen machen. Ihre Idee ist jedenfalls technisch ziemlich einfach realisierbar – z.B. über Image Maps. Nur den Content zur Verfügung zu stellen dürfte sich als nicht immer leicht erweisen.

    Wie würden Sie denn eine Navigation über Thumbnails realisieren? Die übliche lineare Navigation unter der Abbildung ist in diesem Fall wie sie selber schreiben wenig sinnvoll. Wird der Benutzer nicht abgelenkt, wenn sie einen ganzen Baum zur Steurung zeichnen?

    Antworten
  3. Bärbel Jüngel

    Hallo Herr Schreiner,
    vielen Dank für Ihr positives Feedback. Ihre Idee mit interaktiven Bedienanleitungen gefällt mir sehr gut! Oft sind in solchen Schriftstücken die Produktabbildungen reinste Suchbilder. Allerdings sollten trotzdem noch alle Details in dem Anfangsbild enthalten sein; es wäre ungünstig, wenn man z.B. den Einschaltknopf einer Kaffeemaschine erst in der 3. Detaillierungsebene findet. Denn bei einer Bedienungsanleitung kommt es vor allem darauf an, dass man die mitgelieferten Textinformationen nachvollziehen kann.

    Für die Navigation stelle ich mir am ehesten eine Steuerung vor, die horizontal den gerade gewählten Surfpfad in Form von Thumbnails einblendet. Wenn beispielsweise gerade Bild (c) ausgewählt ist, sieht man in Form von Thumbnails die Bilder (a) und (b) und alle anderen Bilder die in der obersten Hierarchieebene sind. Eine solche Datenreduktion hat sich bereits in der normalen Shopnavigation (z. B. reduzierte linke Navigation) bewährt. Dies hat den Vorteil, dass sie für den Benutzer erwartungskonform und deswegen intuitiv bedienbar ist.

    Antworten
  4. Pingback: Produktbilder strukturieren « Blog – Andreas Oettinger

Schreibe einen Kommentar

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