Die optimale Gestaltung von Produktdetailseiten: Tipps und To Dos

Laptop, der eine Zeichnung einer Jacke zeigt, steht auf einem Tisch.

Die Produktdetailseite ist die Seite auf der sich Nutzer in der Regel am längsten aufhalten und auf dessen Grundlage die Kaufentscheidung gefällt wird. Doch wie regt man Nutzer zum Stöbern an und bewegt sie zum Wiederkehren?
Ohne das Logo eines entsprechenden Shops sehen Produktdetailseiten fast alle gleich aus. Für welche sollte sich ein Nutzer also entscheiden? Mit was kann sich ein Online-Shop bei einer Produktdetailseite abheben?

Viele Shops konzentrieren sich besonders auf eine ansprechende und inspirierende Startseite, dabei landen viele Nutzer im Zeitalter von Suchmaschinen direkt auf der entsprechenden Produktdetailseite und bekommen die Startseite gar nicht zu Gesicht. Im folgenden Beitrag habe ich Ihnen die wichtigsten Punkte zusammengefasst, wie eine Produktdetailseite optimal gestaltet ist.

Was ist wichtig auf einer ansprechenden Produktdetailseite?

1. Die Bildsprache

Die Bilder – ein Muss für jede Produktdetailseite. Das Produkt muss visuell optimal für den Nutzer dargestellt werden. Gerade in Online-Mode-Shops ist es wichtig, das Produkt von allen Seiten und sowohl angezogen an einem Model als auch alleinstehend zu präsentieren. Der Hintergrund sollte neutral gehalten werden und nicht vom eigentlichen Produkt ablenken. Die Bildqualität sollte natürlich auch das Heranzoomen ermöglichen, sodass einzelne Details eines Produktes nochmal näher angeschaut werden können. Das Produktbild muss nicht zwangsläufig statisch bleiben. Eine 360°-Ansicht kann dem Nutzer das Produkt von jeder Seite zeigen oder ein Video dem Nutzer die Funktionen des Produktes näherbringen.

Abb. 1: Ein Produkt bei Zalando, das von allen Seiten abgebildet wird. Quelle: Zalando.de

2. Preis- & Versandinformationen

Ist das Produkt auf den Bildern ansprechend, guckt der Nutzer als nächstes auf die Preis- und Versandinformationen. Neben der Frage was das Produkt kostet und ob Versandkosten berechnet werden, spielt bei der Entscheidungsfindung auch die Lieferzeit eine wichtige Rolle. Eine versandkostenfreie Lieferung ist mittlerweile gang und gäbe und wird vom Nutzer erwartet. Rabatte sollten entsprechend gekennzeichnet sein und Informationen zum (niedrigen) Lagerbestand angezeigt werden.

Abb. 2: Preis- & Versandinformation bei Douglas mithilfe eines Tooltipps (Quelle: Douglas.de)

3. Produktinformationen

Um Nutzer überzeugen zu können, die beim Kauf noch unentschlossen sind, müssen die nötigen Informationen bestmöglich dargestellt werden. Ziel ist es, den Nutzer möglichst schnell und ohne Ablenkung zum Anklicken des „in den Warenkorb“-Buttons zu bewegen. Aus diesem Grund sollte der Button entsprechend auffällig sein und sich von der restlichen Umgebung abgrenzen. Die Elemente drum herum sollten eher schlicht gehalten sein. Wichtige Elemente, die der Nutzer vor Klick auf den Button benötigt, sind die Auswahl der Menge, die Größe, die Farbe, die direkt per Dropdown-Menü ausgewählt werden können. Bei der Farbauswahl ist es besonders wichtig, diese nicht als Wort oder Farbcode darzustellen, sondern optimalerweise als Bild in der jeweiligen Farbe oder sogar als kleines Produktbild mit dem entsprechenden Farbton. Bei der Detailbeschreibung dürfen dann auch gerne mehr gestalterische und inhaltliche Elemente genutzt werden. In der oberen Detailansicht sollte zuerst eine Übersicht des Produktes mit den wichtigsten Vorteilen und Produkteigenschaften in einfacher Listenform dargestellt werden. Hier empfehlen sich graphische Elemente, um die Vorteile des Produktes zu verdeutlichen.

Abb. 3 und 4: Aufgelistete Produktinformationen (links) und Detailbeschreibung (rechts) bei Tchibo (Quelle: Tchibo.de)

4. Produktbewertungen

Bewertungen sollten stets prominent und gut sichtbar dargestellt werden, da diese die Kaufbereitschaft der Nutzer erhöhen und auch bereits Vertrauen in das Produkt und den Shop schaffen.

Abb. 5: Kundenrezensionen bei Amazon (Quelle: Amazon.de)

5. Vertrauen schaffen

Der Nutzer muss Vertrauen aufbauen, um sich für einen Kauf zu entscheiden und um in den Shop wiederzukehren. Für die Vertrauensbildung ist nicht nur der gut strukturierte Aufbau einer Seite oder Bewertungen ausschlaggebend, sondern auch bekannte Siegel, wie z. B. von Trusted Shops (Trust-Elemente) oder erhaltene Awards sind hier von Bedeutung. Zusätzlich kann Vertrauen durch gut sichtbare Kontaktmöglichkeiten gesteigert werden. Hier gibt es mittlerweile viele Möglichkeiten: telefonische Hotline, E-Mail-Anfragen oder auch Live-Chat-Funktionen. Alle Optionen sollten nicht erst gesucht werden müssen, sondern direkt sichtbar sein.

Abb. 6: Auszeichnungen bei Douglas (Quelle: Douglas.de)

6. Cross-Selling

Des Weiteren empfiehlt sich das Anzeigen von weiteren Produkten bzw. Produktvorschlägen. Hier können mögliche Alternativvorschläge aus derselben Produktkategorie, aber auch dazu passende Produktvorschläge aus anderen Kategorien gezeigt werden. Cross-Selling ist ein wichtiges Marketinginstrument, welches oft jedoch falsch eingesetzt wird. Der Nutzer sollte nicht vom Produkt auf andere Produktseiten weggezogen werden, bevor er sich über das eigentliche Produkt informieren kann.

Abb. 7: Cross-Selling bei Sephora (Quelle: Sephora.com)

7. Alleinstellungsmerkmale herausstellen

Die Konkurrenz ist nur einen Klick entfernt, weshalb es sich anbietet, seine Alleinstellungsmerkmale zu kennen und gut sichtbar zu kommunizieren. Vorteile wie besondere Service-Leistungen, kostenloser Versand oder umweltfreundliche Produktionsbedingungen können hier als Überzeugungsmerkmal dienen.

Abb. 8: Die Vorteile bei Douglas (Quelle: Douglas.de)

8. Navigation und Breadcrumb

Eine strukturierte Navigation und eine deutliche Breadcrumb sind gute Hilfsfaktoren, um die Suche des Nutzers in den Shop zu verlagern. Denn der Nutzer hat bereits den Weg in Ihren Shop gefunden und soll nun hier gehalten werden.

Fazit

Legen Sie den absoluten Fokus auf Produktfoto, Produkttitel mit Markenlogo, Bewertung und Warenkorb-Button. Weisen Sie auf Zahlungs- und Versandinformationen, Verfügbarkeit und Retoure im Kaufbereich mit Kurzbeschreibung hin; führen Sie diese jedoch möglichst unauffällig und nur als Verlinkung zu einer Unterseite beispielsweise für die verschiedenen Zahlungsarten auf.

Unterstützen Sie die Darstellung der Produkte optimal mit Slidern und einer ansprechenden Zoom-Funktion und unterstützen Sie durch optische Highlights bei den wichtigsten Bereichen.

Haben Sie immer das Ziel vor Augen – das Ziel ist der „in den Warenkorb“-Button. Ein guter Überblick, die Beseitigung von Unsicherheiten und die Überzeugung vom eigenen Portal sind hier ausschlaggebend.

Sie sehen es steckt viel Potenzial in Produktdetailseiten, welches genutzt werden sollte – denn Nutzer, die direkt von der Suchmaschine auf Ihrer Seite landen, sind nur noch einen Klick vom Kauf entfernt. Beachten Sie dennoch, dass auf die Eigenheiten von Produkten unterschiedlich eingegangen werden muss. Der Nutzerfluss sollte in keinem Fall unterbrochen werden, sondern vielmehr unterstützt werden und dem Nutzer alle notwendigen Informationen an die Hand gegeben werden, die er für seine Kaufentscheidung benötigt.

Portraitfoto: Stefanie Peters

Stefanie Peters

Personalmarketing & Senior UX Consultant

eresult GmbH

Bisher veröffentlichte Beiträge: 7

4 Kommentare

  • Tom

    Vielen Dank für den tollen Beitrag.

    In Bezug auf das Hervorheben des Buttons für Warenkauf etc. finde ich eine Ergänzung zum Restorff-Effekt oder isolation effect, das sehr gut beschreibt weshalb man die Call to Action Elemente so machen sollte.

    Siehe: https://lawsofux.com/von-restorff-effect.html und https://www.nowblitz.com/blog/interpreting-the-psychology-behind-colors-in-web-conversions/

    • Stefanie Hädicke

      Hallo Tom,
      vielen Dank für Ihren Kommentar und Ihren Input. Der Restorff-Effect ist eine tolle Ergänzung bezüglich des Themas zum Hervorheben der Call to Action Elemente und bestimmt auch nochmal einen eigenen Blogbeitrag wert.
      Grüße

  • Maikel

    Beim Punkt „Produktinformationen“ fehlen mir, in diesem Beitrag und auch auf vielen Produkt-Detailseiten, Details zum Produkt.

    Bei Jacken sollte es z.B. das Gewicht sein, bei Hosen die genauen Abmessungen (Schrittlänge, Gesamtlänge, Fußweite etc.).

    Solche Angaben mögen zwar hinderlich sein beim formulierten Ziel, „den Nutzer möglichst schnell und ohne Ablenkung zum Anklicken des in den Warenkorb-Buttons zu bewegen.“

    Sie können aber die Rücksendequote merklich verringern; und daran sollten die Händler auch ein Interesse haben.

    • Stefanie Hädicke

      Hallo Maikel,
      vielen Dank für Ihren Kommentar. Ich gebe Ihnen Recht, dass auch Details zum Produkt eine überaus wichtige Rolle spielen. Je nach Artikel sindhier natürlich unterschiedliche Merkmale von Bedeutung.
      Ich denke nicht, dass solche Angaben hinderlich sind beim formulierten Ziel „den Nutzer möglichst schnell und ohne Ablenkung zum Anklicken des in den Warenkorb-Buttons zu bewegen.“ Die Deatils sollten gut sichtbar positioniert werden, sodass das formulierte Ziel unterstützt wird. Denn diese Angaben sind ebenso von großer Bedeutung für die Kaufentscheidung und – wie Sie bereits angemerkt haben – können diese natürlich die Rücksendequote deutlich verringern.
      Viele Grüße

Schreibe einen Kommentar

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