Eine effektive Produktdetailseite designen.

Design an effective product detail page

Eine Produktdetailseite (Product Detail Page, PDP) ist eine E-Commerce-Web-Seite mit allen Informationen, die Online-Kundschaft über ein Produkt wissen muss. Sie ist eine wesentliche Komponente für bessere Conversion. Umfassende und anwenderfreundliche Produktseiten können Kaufentscheidungen wesentlich beeinflussen, ganz unabhängig davon, wo in der Customer Journey sich eure Zielkundschaft gerade befindet. Laut Google Consumer Insights verwenden 55 % der Käuferinnen und Käufer ihre Mobilgeräte, um während des Einkaufs in einem Geschäft nach Angeboten zu suchen.

Viele E-Commerce-Marken tun sich schwer, große Mengen an Produktdaten in anwenderfreundliche und überzeugende E-Commerce-Erlebnisse zu verwandeln. Doch mit ein paar wenigen strategischen Schachzügen ist es möglich.

Einige Best Practices für die Optimierung eurer PDPs:

Warum ist eine PDP so wichtig?


Online-Käuferinnen und -Käufer lernen ein Produkt anhand der Informationen kennen, die ihr in der Produktdetailseite bereitstellt. Sie ist somit der logische Ort, an dem der Großteil eurer Verkäufe stattfindet. Da online keine physische Interaktion mit Produkten möglich ist, ist es Aufgabe der Produktdetailseite, durch spezifische Angaben ein „greifbares“ Erlebnis bereitzustellen.


Die Qualität einer Produktdetailseite bestimmt, ob eine Besucherin oder ein Besucher zu einer zufriedenen Kundin bzw. einem zufriedenen Kunden wird oder den Bestellvorgang abbricht. Die Entwicklung informativer und angenehmer Kundenerlebnisse auf euren Produktseiten ist der Schlüssel zu mehr Absatz und niedrigeren Absprungraten.

Best Practices für PDPs.


Es gibt kein Patentrezept für die Gestaltung der perfekten Produktdetailseite, da jede Nische und jede Zielgruppe anders ist. Zwar gibt es einige Best Practices für den Anfang. Denkt aber immer daran, Split-Tests für Merkmale wie CTAs, Platzierung und Texte durchzuführen, um herauszufinden, wie ihr eure Zielgruppe am besten erreicht.

Hochwertige Bilder.

E-Commerce gewinnt nach wie vor an Beliebtheit. Ein großes Manko, das immer bleiben wird, ist jedoch, dass Käuferinnen und Käufer Produkte vor dem Kauf nicht anfassen oder anprobieren können. Professionelle Produktfotos können in gewisser Weise Abhilfe schaffen und der Kundschaft vor dem Kauf Sicherheit geben.

Wir haben einige Strategien für Produktbilder zusammengestellt.

Lovesac geht bei den Fotos auf seinen PDPs noch einen Schritt weiter. Der virtuelle Showroom trägt dazu bei, die Lücke zwischen Online-Shopping-Erlebnis und dem Einkauf im Geschäft zu schließen.

Lovesace product detail page

Diese interaktive Visualisierungsfunktion ermöglicht es, ein Produkt virtuell in den Räumlichkeiten der Kundschaft zu betrachten, indem sie Boden- und Wandmaterial anpasst. Das gibt Interessierten mehr Sicherheit und erleichtert ihnen die Kaufentscheidung.

Eine überzeugende Produktbeschreibung.

Die Produktbeschreibung sollte kurz und präzise die Merkmale und Vorteile des Produkts beschreiben. Jede Zeile muss die Kundschaft einerseits informieren und ihr andererseits verdeutlichen, wie das Produkt ihr das Leben erleichtert.

Hierzu gibt es u. a. folgende Möglichkeiten:

Idealerweise sollte die Produktbeschreibung alle häufigen Fragen zu eurem Produkt vorweg beantworten, damit die Kundschaft sie nicht erst stellen muss.

Denkt daran, den Fokus darauf zu legen, was für eure Zielgruppe am wichtigsten ist. Bei Missguided liegt der Fokus der Produktbeschreibungen beispielsweise auf Nachhaltigkeit, nicht auf einzelnen Merkmalen. Die Global Sustainability Study 2021 ergab, dass Nachhaltigkeit ein wichtiges Kaufkriterium für 60 % der Verbraucherinnen und Verbraucher ist. Missguided betont in seinen Produktbeschreibungen die Themen Abfallvermeidung und Upcycling, weil die Marke ihre Zielgruppe kennt.

Ein beschreibender Produkttitel.

Der Produkttitel ist eines der ersten Elemente, die einer Kundin oder einem Kunden auf der Seite ins Auge springen. Der Titel ist oft sogar das, was jemanden auf einer anderen Web-Seite dazu bringt, auf einen Link zu klicken. Aus dem Produkttitel sollte klar hervorgehen, um was für ein Produkt es sich handelt. Außerdem sollte er das Interesse an dem Produkt wecken.

Produkttitel sind in der Regel der größte bzw. erste Text auf einer Seite. Sie sollten daher kurz und prägnant sein. Seid klar, unterstreicht nach Möglichkeit die Vorteile des Produkts, und haltet es einfach. Ihr möchtet zwar die Neugier von Interessierten wecken, sie aber auch nicht verwirren.

JCrew product detail page

Ein Beispiel für einen sehr gut gelungenen Produkttitel kommt von J Crew. Der kurze, aber prägnante Titel „Broken-in organic cotton oxford shirt“ (zu Deutsch in etwa „Oxford-Hemd aus Bio-Baumwolle in Used-Optik“) weckt das Interesse der Besucherinnen und Besucher. Der Titel weckt den Eindruck von Komfort und Klasse, noch bevor man das Hemd gesehen hat.

Klare CTAs an prominenter Stelle.

Der CTA (Call to action bzw. Handlungsaufruf) ist das wichtigste Element jeder E-Commerce-Seite und muss leicht zu finden sein. Wirkungsvolle CTAs minimieren Reibungsverluste im Einkaufserlebnis und sind in erster Linie klar und deutlich.

Wirkungsvolle CTAs weisen die folgenden Merkmale auf:

Eine anspruchsvollere Strategie besteht darin, CTAs am Bildschirm zu fixieren, sodass sie auch beim Scrollen sichtbar bleiben.

Bite product detail page


Ein hervorragendes Beispiel für fixierte CTAs ist auf den Produktdetailseiten von Bite zu sehen. Produktoptionen und der Button „In den Warenkorb“ befinden sich auf einer Leiste ganz unten am Bildschirm und folgen Nutzerinnen und Nutzern beim Scrollen.

Da CTAs für die Conversion so wichtig sind, ist ein Split-Test empfehlenswert. Selbst wenn ein CTA scheinbar gut funktioniert, schadet es nicht, Variablen wie Text und Farben einige Wochen lang regelmäßig zu testen, um zu sehen, ob sich die Klickraten verbessern.

Social Proof zur Überzeugung der Kundschaft.


Selbst wenn ihr von der Qualität eurer Produkte überzeugt seid, vertrauen Käuferinnen und Käufer eurer eigenen Empfehlung möglicherweise nicht. Die Menschen wissen, dass eine PDP ein Verkaufswerkzeug ist.

Allerdings gaben 79 % der Verbraucherinnen und Verbraucher gegenüber BrightLocal an, dass sie Online-Rezensionen genauso vertrauen wie einer persönlichen Empfehlung. Nutzt die Stärken von Social Proof auf euren PDPs. Dazu habt ihr folgende Möglichkeiten:


Glossier nutzt Social Proof auf PDPs in einem eigenen Abschnitt für Review-Highlights. Statt langer Texte übernimmt hier die Kundschaft den Verkauf. Die Kosmetikmarke ohne Tierversuche zeigt unter dem Produkttitel anstelle einer Sternebewertung die Anzahl der Rezensionen an, um zu zeigen, wie populär ein Produkt ist.

Leicht erreichbarer Kunden-Service.

Selbst wenn ihr euch noch so sehr bemüht, auf der PDP Informationen und Details bereitzustellen, werden manche Kundinnen und Kunden noch Fragen haben. Wenn sie nicht sofort Antworten erhalten, besteht die Wahrscheinlichkeit, dass sie zur Konkurrenz abwandern.

Wir haben euch einige Möglichkeiten aufgeführt, wie ihr Besucherinnen und Besuchern die Antworten oder die Hilfe bieten könnt, die sie brauchen.

Natural Textiles product detail page


Ein hervorragendes Beispiel für diese Best Practice ist der Chatbot von Coast New Zealand, der die IP-Adresse der Anwenderinnen und Anwender erkennt und ihnen standortbezogene Nachrichten schicken kann. Besucherinnen und Besucher sehen außerdem, welche Kundendienstmitarbeitenden derzeit für Fragen zur Verfügung stehen. Dieses menschliche Element hilft, den Frust abzubauen, der manchmal bei Verwendung von automatisierten Antwortsystemen entsteht.

Klare Retouren- und Versandrichtlinien.

Angenehme Retourenrichtlinien und kostenloser Versand bzw. günstige Versandkosten können die Conversion Rates steigern, da sie das Risiko für Käuferinnen und Käufer senken und sie zum Kauf ermutigen.

Eine unkomplizierte Retourenrichtlinie zeigt, dass ihr Vertrauen in die Qualität eures Produkts habt. Außerdem erhält die Kundschaft die Sicherheit, dass sie es einfach zurückschicken kann, wenn es doch nicht ihren Erwartungen entspricht.

Klare Versandkosten reduzieren Reibungen im E-Commerce-Erlebnis und legen klare Erwartungen fest. Die Versanddetails sollten daher auf eurer PDP einfach zu finden sein. Aus einem Report von Barilliance geht hervor, dass der Hauptgrund für den Kaufabbruch unerwartete Versandkosten oder Zuschläge sind.

Erfolgreiche PDPs enthalten klare Angaben zu folgenden Elementen:

Der beste Platz für Versand- und Garantieinformationen ist in der Nähe des CTA. Weitere Einzelheiten zu euren Versand- und Retourenrichtlinien könnt ihr in einem eigenen Abschnitt der häufig gestellten Fragen unten auf der Seite oder in einem Popup-Fenster in der Nähe des CTA anzeigen.



Element product detail page

Die Versandinformationen bei Casper sind gut positioniert: Sie sind leicht zu finden und umfassen großzügige Retourenrichtlinien, um potenzielle Kundschaft zu beruhigen. Kundinnen und Kunden können auf das Fragezeichen-Symbol zeigen, um sich über Versandzeiten und die Lieferung in nicht angrenzende Staaten zu informieren. So erhalten sie alle benötigten Informationen, ohne dass die Seite unübersichtlich wird.

Überprüfung der Seitenladegeschwindigkeit.

Wie gut organisiert eure PDP auch ist, lange Ladezeiten können zum Absprung führen, noch bevor Besucherinnen und Besucher die Seite überhaupt gesehen haben. Laut einem Report von Akamai verlassen 40 % der Nutzerinnen und Nutzer eine Website, wenn sie länger als drei Sekunden zum Laden braucht.

Kürzere Ladezeiten können auch das Such-Ranking eurer Web-Seiten verbessern. Die Seitengeschwindigkeit ist also von entscheidender Bedeutung. Hier sind ein paar einfache Schritte für den Einstieg:

Die Verbesserung der Ladezeiten bezieht sich nicht nur auf Desktop-Computer. Laut einem Report von Google Consumer Insights wirkt sich die Möglichkeit, Käufe auf einem Mobilgerät zu tätigen, bei 59 % der Verbraucherinnen und Verbraucher auf die Kaufentscheidung aus. Durch die Optimierung der Seitenladezeiten werden eure PDPs benutzerfreundlicher für Mobilgeräte.

Bereitstellung von Produktempfehlungen.

Zusätzliche Produktempfehlungen bieten ein besonderes Erlebnis, das Käuferinnen und Käufer zu zusätzlichen Käufen bewegen kann. Personalisierte Produktempfehlungen können die individuellen Einkaufs-Trends der Kundschaft ansprechen und Produkte präsentieren, die sie anderenfalls nicht gefunden hätte.

Empfehlungen können sich überall auf der PDP befinden, je nachdem, ob ihr Zusatzoptionen oder Upselling fördern möchtet. Häufig werden sie in der Seitenleiste oder unten auf der Seite platziert.

Hier sind einige der effektivsten Strategien für Produktempfehlungen:

Poly & Bark hat Produktempfehlungen mit einem einzigartigen Zusatzerlebnis auf manchen PDPs zur Kunstform erhoben. Wenn Besucherinnen und Besucher auf einer Produktseite nach unten scrollen, werden in einem Widget weitere Möbelstücke und Dekoartikel angezeigt, die „Den Look vervollständigen“. Interessenten können ein anderes Farbschema wählen oder einzelne Teile austauschen. Anschließend können sie das gesamte Ensemble mit nur einem Klick zum Warenkorb hinzufügen.




Poly & Bark product detail page

Einfacher Vergleich und einfache Anpassung.

Wenn eure E-Commerce-Site ähnliche Produkte verkauft, könnt ihr Reibungen im Einkaufserlebnis vermeiden, indem ihr auf jeder PDP einfache Anpassungsfunktionen und Gegenüberstellungen bereitstellt.

GoPro verwendet ein gängiges, aber äußerst effektives Vergleichsformat, um die Unterschiede zwischen ähnlichen Produkten auf einen Blick erkennbar zu machen. In dem Abschnitt ist in Tabellenform mit Häkchen und Einschüben übersichtlich alles aufgeführt, was Kundinnen und Kunden wissen müssen.

Hervorhebung von Rabatten und Promotions.

Verbraucherinnen und Verbraucher sollten erkennen, dass sie ein tolles Angebot bekommen. Das ist eine effektive Conversion-Strategie, da die meisten Menschen auf den günstigsten Preis achten. Wir haben einige hervorragende Methoden zusammengestellt, eure Kundschaft auf der PDP wissen zu lassen, dass eine Rabattaktion oder eine Promotion läuft:

Bookshop.org hebt Rabatte auf Produktdetailseiten hervor, indem es den Originalpreis durchstreicht und rot unterlegt. Dadurch wird das Auge der Käuferinnen und Käufer auf die Änderung gelenkt und sie wissen, dass es sich um ein Angebot handelt. Weiter unten auf der Seite, wo die Produktdetails aufgeführt sind, wird diese Strategie im Seiten-Design wieder aufgegriffen.

Beispiele für PDPs.

Es ist nicht einfach, all Best Practices auf einer prägnanten Produktdetailseite zu kombinieren. Prüft daher eine Liste von Best Practices, beginnt mit den Strategien, die für eure Zielgruppe am besten funktionieren, und führt regelmäßig Split-Tests durch. Diese drei Beispiele für wirklich gute Produktdetailseiten könnten euch als Inspiration dienen.

Nike.

Nike optimiert seine PDPs durch Straffung des sichtbaren Bereichs. Das hervorgehobene Produktbild ist tatsächlich ein Video, das automatisch wiedergegeben wird und das Produkt in Aktion zeigt.

Nike product detail page

Produkttitel und -beschreibungen heben kurz und knapp die Vorteile hervor. Anpassungsmöglichkeiten, CTAs und Versandinformationen sind leicht zu finden, ohne die Seite unübersichtlich zu machen. Beim Scrollen nach unten werden direkt unterhalb des sichtbaren Bereichs personalisierte Empfehlungen angezeigt. Ein Banner oben auf der Seite informiert Site-Besucher über aktuelle Promotions.

Love Hair.

Als Haarpflegemarke, die Wert auf natürliche Inhaltsstoffe legt, verwendet Love Hair auf seinen PDPs hochwertige Produktbilder und -videos, die eine Verbindung mit Verbraucherinnen und Verbrauchern herstellen. Die PDPs enthalten fixierte CTAs, über die Käuferinnen und Käufer überall auf der Seite einfach eine Menge auswählen und dem Warenkorb hinzufügen können.

Love Hair product detail page

Wie bei Bite zeigt dies der Kundschaft, dass sie im Mittelpunkt steht. In Verbindung mit leicht zugänglichen Informationen fallen Kaufentscheidungen deutlich leichter und erfolgen interaktiver.

Bang & Olufsen.

Die PDPs von Bang & Olufsen unterscheiden sich durch den Produkttitel und die Produktbeschreibung. Die Produkttitel heben kurz und knapp hervor, dass es sich zum Beispiel um Over-Ear-Kopfhörer handelt, während die ausführliche Beschreibung die Fantasie anregt, einfache Produktfunktionen hervorhebt und die Vorteile für Nutzerinnen und Nutzer unterstreicht.

Bang & Olufsen product detail page


Mithilfe von Häkchen werden Merkmale wie kostenloser Versand und Geschenkverpackung gekennzeichnet. Über einen sekundären CTA können Kundinnen und Kunden, die lieber im Geschäft einkaufen, nach dem nächstgelegenen B&O-Händler suchen.

Eigene PDPs entwickeln.

Produktdetailseiten können sich enorm auf die Conversion Rates auswirken, weil sie eure beste Chance sind, Verbraucherinnen und Verbraucher von einem Kauf zu überzeugen. Daher müssen sie fantastisch aussehen, umfassende Informationen bieten und Fragen beantworten, noch ehe die Kundschaft auch nur daran denkt, sie zu stellen.

Der erste Schritt bei der Entwicklung effektiver PDPs ist die Verwendung einer personalisierten E-Commerce-Lösung, die eure individuellen Ziele unterstützt. Sobald diese Lösung vorhanden ist, könnt ihr euch ganz auf sorgfältige A/B- und multivariate Tests konzentrieren, um eure Seiten für Spitzenleistung zu optimieren.

Sobald ihr bereit seid, euren B2B- und B2C-E-Commerce effizienter und effektiver zu gestalten, profitiert ihr mit Adobe Commerce von uneingeschränkter Skalierbarkeit für die Verwaltung all eurer Kanäle, Marken und Sites über eine einzige, nutzungsfreundliche Plattform. In unserer kostenlosen Produkttour oder im Einführungsvideo erfahrt ihr mehr.