Ansicht eines Pc mit Shop-Seite, Icon und Artikeltitel

Design und Layout eines Online-Shops sind entscheidende Faktoren bei der Kundengewinnung. Ganz nach dem Motto „Der erste Eindruck zählt“ entscheidet auch der Kunde beim Online-Einkauf innerhalb von Sekunden, ob er in Ihrem Online-Shop bleibt und sich mit Ihrem Angebot beschäftigt.

Hat sich ein Kunde aufgrund des ersten Eindrucks entschieden, in Ihrem Online-Shop zu bleiben, gibt neben anderen Faktoren letztlich der Produktdetailseiten-Aufbau einen wesentlichen Impuls zum Kauf des Produktes. Mit diesen nützlichen Tipps und Hinweisen können Sie bei der Gestaltung Ihrer Produktdetailseiten bei Ihren Kunden punkten.

Layout und Anordnung der wichtigen Elemente

Die Funktion von Produktdetailseiten ist die übersichtliche und umfassende Information der Kunden über alle produkt- und kaufrelevanten Daten. Damit die Kunden also in der Lage sind, mit einem Blick die für sie wichtigen Daten sofort zu erfassen, hat sich eine thematische Gruppierung der Produktseiten-Inhalte etabliert. Der Aufbau von Produktdetailseiten lässt sich demnach in vier Bereiche unterteilen, die in der Anordnung und der Größe variabel sind. Zu diesen gehören:

schmatische Darstellung einer Produktdetailseite
  • Produktfotos
  • Für die Bestellung relevante Infos (Preis, Verfügbarkeit, Lieferzeit, Seriennummer, Größen- und Mengenauswahl sowie „Jetzt kaufen/bestellen“-Button)
  • wichtige Produktinformationen (häufig in Bullet-Points)
  • Ausführliche Produktbeschreibung mit weiteren technischen Hinweisen bzw. Anwendungstipps

Ergänzt wird diese Produktübersicht häufig von zwei weiteren Bereichen, die abhängig von der Größe des Online-Shops weitere Inhalte liefern:

  • Produktbewertungen oder -tests
  • Produktempfehlungen („Kunden kauften auch“) und/oder Bundle-Angebote

Gewichtung der Inhaltsbereiche

Geht man von den eben beschriebenen Bereichen aus, ist die Gewichtung der Darstellung abhängig von Faktoren wie der Bekanntheit des Produktes und dem Wissensstand der Kunden. Anders ausgedrückt: kennt der Kunde das Produkt bereits oder nutzt er die Produktdetailseite, um sich konkretere Informationen zur Ware einzuholen? Für beide Nutzertypen sollte die Produktdetailseite direkt im ersten sichtbaren Bereich den Produktnamen, wichtige Produktinfos und die bestellrelevanten Daten enthalten. Auf diese Weise können beispielsweise wiederkehrende Nutzer direkt eine Bestellung auslösen. Damit Kunden sich darüber hinaus eine konkrete Vorstellung von der Ware machen können, ist an dieser Stelle auch das Produktbild wichtig. Anschließend folgen spezifische Informationen wie ausführlichere Produktbeschreibungen, die weniger prominent darunter – und in gut leserlicher Schriftgröße – als Fließtext präsentiert werden.

Ansicht einer Produktdetailseite von Bungalow

Teilansicht der Produktdetailseite von Bungalow

Farbliche Gestaltung

Beim Produktdetailseiten-Aufbau empfiehlt es sich ein ausgewogenes Farbverhältnis zu nehmen und möglichst nur an wichtigen Elementen wie Preisen, Buttons und Bestandsstatus Farbhervorhebungen zu machen. Verfügen Sie bereits über ein eigenes Corporate Design oder eine bestimmte Marke, für die der Shop konzipiert wurde, können Sie die Farbgebung des Online-Shops daran anpassen. Dies hilft Ihren Kunden, die Produkte besser Ihrem Unternehmen/Ihrer Marke zuordnen zu können. Mit dem Einsatz von sogenannten „Ampelfarben“ (grün, gelb, rot) lassen sich beispielsweise Verfügbarkeiten hervorragend optisch unterstützen und helfen den Kunden bei der Orientierung. Nicht zu vergessen sind ebenfalls Preisnachlässe und Bestell-Buttons, die als Blickfang auf die Kaufoption hinweisen und eine stärkere Hervorhebung in kräftigeren Signalfarben erlauben. Gerne werden hierfür Farben aus dem orange/gelben oder grünen Farbspektrum verwendet. Grelle Neonfarben eignen sich hingegen nicht für Buttons, wenn man ihre Texte noch problemlos lesen will.

Ansicht einer Produktdetailseite von Dr. Schaette

Aufbau der Produktdetailseite im Online-Shop für Pferde von Saluvet

Produktfotografien und -videos

Um die Produkte richtig in „Szene zu setzen“ und um dem Online-Shop mehr Seriosität zu verleihen, empfehlen wir die Verwendung von professionellen Produktfotos oder – sofern es sich anbietet ¬– ergänzend auch Produktvideos oder 360°-Ansichten. Gerade mit dem Verlust der Haptik – also der Möglichkeit, Produkte persönlich in die Hand zu nehmen beziehungsweise von allen Seiten zu begutachten – benötigen die potentiellen Käufer einen guten Eindruck vom Produkt. Hier ist es ratsam, mehrere gut ausbeleuchtete Fotos zu nutzen, die den Artikel im besten Fall auch im Einsatz beziehungsweise im Alltagsgebrauch zeigen. Gerade bei Kleidung oder Produkten, die man am Körper trägt, ist es sinnvoll, nach Möglichkeit mit Models zu arbeiten. Dadurch bekommen die Kunden sofort einen Eindruck von den Größenverhältnissen und wie die Produkte in Kombination mit anderen Kleidungsstücken wirken.

Ansicht einer Produktdetailseite von IDEAL

Aufbau der Produktfotos im IDEAL-Online-Shop von Krug & Priester

Produktinformationen und Produktbeschreibung

Im Laden liest sich vermutlich nicht jeder die komplette Beschreibung auf der Produktverpackung durch, doch diese Hinweise können für viele Online-Shopper umso wichtiger sein. Da die Ware sich vor der Bestellung nicht persönlich in Augenschein nehmen lässt, sind alle zusätzlichen Informationen wichtig für die Entscheidung zum Kauf. Man sollte an dieser Stelle daher nicht am Arbeitsaufwand bei der Aufbereitung der Produktdetails sparen und alle relevanten Informationen gut sichtbar präsentieren. Die kurze Produktübersicht beinhaltet dabei abhängig von der Ware möglichst: Größe, Farbe, Material, Marke, Gewicht, Funktionen und eventuell Gütesiegel. Alle weiterführenden Informationen, die konkreter auf die Formen, Funktionsweise und Eigenschaften eingehen oder Inhalte zusammenfassen (etwa Inhaltsangaben bei Büchern) sind hingegen in der ausführlicheren Produktbeschreibung unterzubringen und eignen sich am besten als Darstellung im Fließtext.
Ansicht einer Produktdetailseite von Zwereghuus

Aufbau der Produktbeschreibung im Online-Shop von Zwergehuus

Textformatierung entsprechend des Informationsgehaltes

Wie bereits oben schon angedeutet, richtet sich die Gestaltung des Textes nach der Wichtigkeit des Inhaltes. Größere Schriftgrößen, Fettungen und kurze Bulletpoints (Anstriche, mit maximal bis zu sieben Wörtern je Anstrich) eignen sich hervorragend für knappe Infos wie der Name, der Preis oder die Übersicht der Produkteigenschaften. Passt es zudem zum Stil des Unternehmens ist hier auch die Verwendung einer markanten Schriftart denkbar. Für Fließtexte eignet sich eine leicht leserliche Schriftart ohne Serifen, die auf Displays gut zu erkennen ist, wie etwa Arial oder Roboto. Eine Schriftgestalt mit Serifen, also mit Schnörkeln an den Buchstabenenden wie bei Times New Roman, kann zum Unternehmensdesign passen, sollte jedoch auf überwiegend informativen Seiten, wie der Produktdetailseite beziehungsweise in Fließtexten, möglichst vermieden werden. Hier ist es wichtiger, dass Kunden alle Informationen möglichst auf einen Blick erfassen können.
Ansicht einer Produktdetailseite des frechverlags

Teilansicht der Produktdetailseite beim frechverlag

Gestaltung und Positionierung von Buttons

Die Signalfarben und deren psychologische Wirkung ist weitreichend bekannt, weshalb sie sich natürlich ausgezeichnet für die Gestaltung von Buttons in Online-Shops eignen. Als Element mit der größten Priorität ist der Bestellbutton der Blickfang auf der Produktdetailseite. Werden für Buttons gerne kontrastreiche oder komplementäre Farben zur restlichen Seitengestaltung verwendet, sollte auf folgendes geachtet werden:

  • Der Button sollte bei der kurzen Produktinfo beziehungsweise nahe der Preisangabe im oberen Seitenbereich zu finden sein, ohne dass gescrollt werden muss.
  • Die Größe des Buttons sollte in einem ausgewogenen Verhältnis zum Text sein.
  • Der Text im Button muss gut leserlich sein und sollte nicht zu lang sein (keine grüne Schrift auf rotem Hintergrund!).
  • Der Text muss aus rechtlichen Gründen ganz klar die Absicht wiedergeben, mit der der Button gedrückt wird und was er mit der Aktivierung auslöst: „In den Warenkorb“ oder „in den Warenkorb legen“.
Ansicht einer Produktdetailseite von IDEAL

Teilansicht der Produktdetailseite bei IDEAL

Produktbewertungen

Sie können eine sehr gute Ergänzung sein, um etwa die Qualität des Produktes von unabhängigen Kunden bestätigen zu lassen. Hier gibt eine Sterne-Bewertung optisch schnell einen Überblick und Kommentare können die Praxistauglichkeit bestätigen. Das Bewertungs-Datum kann ebenso wichtig sein wie die Angabe, auf welches Produkt sich die Bewertung bezieht, wenn es etwa mehrere Varianten des bewerteten Produkts gibt. Bei der Abgabe der Bewertungen sollten Sie jedoch dringend darauf achten, dass es sich um keine gekauften oder „Fake“-Bewertungen handelt und der Kommentierende die Ware wirklich von Ihnen erhalten hat. Mit gezielten Fragen für die Kommentierenden können Sie bestimmte Aspekte wie Funktionsumfang bewerten lassen. Hinweis: Achten Sie darauf, dass für die Moderation der Kommentare Kapazitäten verfügbar sein sollten und Ihr Kundenservice konkrete Rückfragen gegebenenfalls beantwortet.

Weitere Produktempfehlungen auf der Produktdetailseite

Eine Produktdetailseite bietet neben der Vorstellung eines Ihrer Artikel auch das Potential, Ihr weiteres Sortiment und die Breite passender oder ähnlicher Produkte zu präsentieren. So können Zubehörteile genauso wie hochwertigere Alternativen oder Topseller in einer eigenen Sektion am Ende der Produktdetailseite vorgestellt werden. In den Rubriken „Kunden kauften auch“ oder „unsere Empfehlungen“ bieten sich Ihnen so Cross-Selling-Potentiale. Auch haben Sie die Möglichkeit – etwa im Fall von nicht lieferbarer Ware – gleichwertige Alternativen anzubieten, um den Kunden die Produktsuche zu erleichtern. Achten Sie hier besonders darauf, dass die empfohlenen Produkte wirkliche Relevanz haben und Mehrwerte bieten.
Ansicht einer Produktdetailseite von Schaette

Produktdetailseiten-Aufbau kann Kaufentscheidungen beeinflussen

Fassen wir die Aufbautipps zusammen, sollten Sie insgesamt bei der Gestaltung also auf schnell erfassbare Informationen, eine übersichtliche Struktur sowie auf eine der Information angemessenen Farbgebung achten. Kaufentscheidende Details sollten per Fettungen, auffälliger Farbgebung und einer entsprechenden Schriftformatierung hervorgehoben werden. Qualitativ hochwertige Bilder und die „hard facts“ sind zu Beginn der Seite zu nennen und weiterführende Details wie Beschreibungen, Produktbewertungen und Produktempfehlungen können daran anschließend präsentiert werden. Behalten Sie dabei immer im Hinterkopf, dass die Produktdetailseite für viele Online-Shopper meist der erste Eindruck vom Produkt ist und die Kaufentscheidung mithilfe des Informationsgehalts positiv beeinflusst werden kann. Versetzen Sie sich also auch in Ihre Kunden und überlegen Sie, welche Mehrwerte Sie überzeugend finden.