Worauf sollte man bei der Produktseite achten?

Die Produktseite ist eine der wichtigsten Seiten im Onlineshop, denn hier entscheidet sich, ob das Produkt tatsächlich in den Warenkorb gelegt, anschließend gekauft und ob so aus dem/der Besucher*in letztendlich ein*e Käufer*in wird. Insofern solltest Du darauf achten, dass das Produkt gut präsentiert wird und dass alle relevanten Informationen verfügbar sind. 

Wie eine Produktseite aussehen sollte und welche Informationen relevant sind, hängt natürlich stark vom Produkt ab. Beispielsweise hat Kaffee aus fairem Handel und einem bestimmten Herkunftsland eher eine Story zu erzählen, die auf der Produktseite widerspiegelt werden kann, als einfache Strümpfe.

Was sollte Du bei der Produktseite im Allgemeinen beachten?

Auch wenn eine Produktseite letztendlich vom Produkt abhängt und daher variiert, so gibt es einige Aspekte, die allgemeingültig sind. Wichtig ist auch aus rechtlicher Sicht, dass alle relevanten Merkmale, die das Produkt ausmachen, genannt werden bzw. genannt werden müssen. Denn Besucher*innen müssen wissen, was sie eventuell kaufen. 

Visuelle Hierarchie (Visual Hierarchy)

Da eine Produktseite schon aufgrund ihrer Funktion relativ mehr Fülle an Informationen bietet, ist die visuelle Hierarchie (Visual Hierarchy) von großer Bedeutung. Zunächst ist der Above-the-fold-Bereich, also jener Bereich, der im Screen als Erstes angezeigt wird, angesichts der Tatsache, dass der erste Eindruck bekanntlich zählt, von großer Bedeutung. 

So sollten der Preis und der Warenkorb-Button gut sichtbar und prominent platziert sein, damit Interessent*innen das Produkt sofort in den Warenkorb legen können, ohne zu scrollen. Auch Informationen zu den Versandkosten und Lieferzeiten sind wichtige Infos, nach denen Besucher*innen idealerweise nicht erst suchen müssen. Darüber hinaus sind Produktbilder natürlich unerlässlich.

Anhand des Beispiels von P&T (Paper&Tea), einem Onlineshop für moderne Teekultur, zeigen wir Dir, wie das Ganze konkret aussehen kann:

Links sieht man die Produktfotos, von denen es relativ wenige gibt, weil Tee eben mit weniger Produktfotos auskommen kann als beispielsweise Kleidung. Und das ist eben ein Beispiel dafür, wie stark Produktseiten abhängig von den Produkten variieren können. Auf der rechten Seite sehen wir nun die Artikelbezeichnung (Tip Of The Morning), die Produktkategorie (Schwarztee), den Preis und die Lieferzeit und die verschiedenen Produktformate, in denen der Tee verfügbar ist (z.B. Aromabeutel 50g für 25 Tassen). Hier ist der Clou, dass die Produktformate beim Klick auf den entsprechenden Button angezeigt werden, sodass Besucher*innen eine bessere Vorstellung davon haben, falls sie keine regelmäßigen Teetrinker*innen sind und Teekultur erst neu für sich entdecken:

Allerdings gibt es hier auch Optimierungspotenzial: Der Warenkorb-Button ist zwar gut platziert, aber die schwarze Farbe des Buttons sticht von den anderen Elementen nicht besonders hervor. Positiv ist dagegen, dass das Gütesiegel dafür, dass der Tee aus ökologischem Anbau stammt, gut sichtbar ist und sicherlich zur Kaufentscheidung beiträgt. Insgesamt ist die Produktseite von P&T also sehr übersichtlich.

Informationen sollten also der Wichtigkeit entsprechend hierarchisch angeordnet werden: alles Relevante oben und eventuelle Hintergrundinfos eher unten. Allerdings bedeutet das nicht, dass Hintergrundinfos unwichtig sind. Falls Deine Produkte Besonderheiten oder gar Alleinstellungsmerkmale aufweisen, was beispielsweise die Materialien oder den Herstellungsprozess angeht, können sie einen großen Beitrag zur Kaufentscheidung leisten. Da der Platz auf einer Seite jedoch begrenzt ist, sollten die relevanten Informationen eben oben platziert werden und Besucher*innen, die Interesse an weiterführenden Informationen haben, können sich dann im Anschluss die Hintergrundinfos anschauen.

Ein sehr gutes Beispiel liefert dafür Sober Berlin, ein Onlineshop für Männerpflegeprodukte. Die Produktseite ist fülliger und komplexer, folgt aber einer strengen Hierarchie: Zunächst gibt es eine kurze Produktbeschreibung als Zusammenfassung und unterhalb des gut sichtbaren Warenkorb-Buttons gibt es weitere Informationen zum Produkt.

Im Verlauf der weiteren Produktseite gibt es weitere, noch ausführlichere Informationen zum Produkt, was die Wirkung angeht...

... was die Hauptwirkstoffe des Produktes sind:

... und weitere Informationen zur Forschung, auf deren Basis die Produkte hergestellt werden:

Die visuelle Hierarchie ist also streng, aber konsequent: Die kürzeren Produktbeschreibungen als Zusammenfassungen für Interessierte, die schnell nach einem Produkt suchen, sind oben und weiterführende und ausführlichere Informationen für Interessierte, die mehr wissen wollen, befinden sich weiter unten. Und wegen dieser Hierarchie ist die Produktseite dennoch nachvollziehbar, weil ein roter Faden erkennbar ist, obwohl sie eigentlich sehr komplex ist.

Auch hier gibt es jedoch Optimierungspotenzial: Neben den farbigen Fotos geht der schwarze Button leicht unter. Allerdings ist es oft auch so, dass das Branding bzw. der eigene ästhetische Anspruch manchmal mit Conversion Rate Optimierung kollidieren

Dropdowns für mehr Übersichtlichkeit

Nicht nur für die Darstellung auf mobilen Geräten, aber vor allem dafür können Dropdowns sinnvoll sein; dass sich die Informationen also unter einer Überschrift verbergen, die angezeigt werden, indem auf die Überschrift geklickt wird (z.B. Material). Besonders für Produkte mit vielen Informationen sind Dropdowns daher sinnvoll, weil die Produktseite auf diese Weise nicht überladen wirkt und Besucher*innen eventuell überfordert. 

Hier kannst Du sehen, wie Sober Berlin Dropdowns nutzt. Beim Klick auf das Plus-Zeichen erscheinen die entsprechenden ausführlichen  Informationen, sodass das Ganze übersichtlicher ist:

Social Proof

Falls vorhanden, solltest Du Social-Proof-Elemente wie Testimonials bzw. Kundenbewertungen auf der Produktseite einbinden. Denn Social Proof ist kein neumodischer Begriff des Marketings, sondern ein bereits in den 80'er Jahren des letzten Jahrhunderts von dem US-amerikanischen Psychologen Robert Cialdini geprägter Begriff aus der Psychologie, der grob gesagt besagt, dass Menschen dazu neigen, eine Verhaltensweise nachzuahmen, die andere Menschen in einer gewissen Zahl aufweisen. Übertragen auf E-Commerce bedeutet dies also, dass Produkte, die bereits von anderen Menschen gekauft und gut bewertet wurden, die Wahrscheinlichkeit erhöhen, dass auch andere es kaufen. 

Sober Berlin hat dabei zwei Arten von Social Proof in den Onlineshop eingebunden, zum Einen die Logos der Medien, in denen die Brand gefeatured wurde:

... und zum Anderen natürlich die Kundenbewertungen:

Checkliste

Hier eine kurze Zusammenfassung dessen, was für eine Produktseite wichtig ist, in Form einer Checkliste:

1. Above-the-fold-Bereich (mit relevanten Infos und Warenkorb-Button)
2. Visuelle Hierarchie (Visual Hierarchy)
3. Dropdowns (zur Gliederung der Inhalte)
4. Social-Proof-Elemente (falls vorhanden)
5. Hintergrundinfos (optional)

Fazit

Die Produktseite ist jene Seite, die über einen Kauf entscheidet, insofern fällt ihr eine der Schlüsselrollen zu, wenn es darum geht, dass aus Besucher*innen auch Käufer*innen werden. Ist das Produkt gut dargestellt und sind alle relevanten Informationen schnell zu finden, ist die Wahrscheinlichkeit, dass das Produkt im Warenkorb landet, deutlich höher. Dabei sollte auf die visuelle Hierarchie geachtet werden: Relevante (Kurz-)Informationen oben und ausführlichere Informationen weiter unten. Denn auch Besucher*innen haben ihre eigenen Bedürfnisse; einige suchen gezielt nach einem Produkt und wollen schnell einen Kauf tätigen, sodass ihnen eine übersichtliche Darstellung bzw. Zusammenfassung der wichtigsten Informationen ausreicht, andere wiederum benötigen mehr Hintergrundinformationen und nehmen sich auch die Zeit dafür. Mit der visuellen Hierarchie sprichst Du beide Kundengruppen gleichermaßen an. Ob Deine Produktseiten übersichtlich sein sollen (wie am Beispiel von P&T) oder auch komplexer (wie bei Sober Berlin), hängt natürlich von Deiner Produktpalette ab. Aber solange Du die oben genannten wichtigen Aspekte berücksichtigst, machst Du alles richtig.

Du hast Fragen? Melde Dich gerne bei uns!

Falls Du Fragen haben solltest oder Beratung oder Unterstützung benötigst, setze Dich gerne mit uns in Verbindung. Wir von Tante-E sind eine der führenden Shopify-Experten-Agenturen in Deutschland mit Standorten in Berlin und Köln. Wir betreiben nicht nur eigene Onlineshops auf Shopify, sondern haben in den letzten zwei Jahren 200 Projekte wie Shop-Setups oder Shop-Optimierungen realisiert. Insofern verfügen wir über eine hohe Expertise im Bereich E-Commerce im Allgemeinen und Shopify im Besonderen. Daher würden wir uns sehr freuen, wenn wir auch Dir helfen dürfen. Melde Dich einfach bei uns, wir freuen uns auf Dich.