Eine Produktseite ist der Teil einer Website, auf dem ein bestimmtes Produkt oder ein bestimmter Service angeboten und verkauft werden. Im Gegensatz zu anderen Webseiten wie Homepages (die hauptsächlich zur Information dienen) soll eine Produktseite sowohl informieren als auch überzeugen. Sie bringt also die Menschen im Idealfall dazu, etwas zum Warenkorb hinzuzufügen. Das macht das Designen einer Produktseite auch so schwierig, denn ein schickes Design führt nicht immer dazu, dass das auch wirklich passiert.

Stilistische Entscheidungen müssen noch gezielter getroffen werden, um die Kundschaft vom Kauf zu überzeugen. Um dir dabei zu helfen, haben wir diesen ultimativen Guide zusammengestellt, wie man eine Produktseite designt.

Ultimativer Leitfaden zum Design von Produktseiten: So gestaltest du eine Produktseite
Design von OrangeCrush

Wie man eine Produktseite designt

Die Ziele einer Produktseite

Vereinfacht gesagt soll eine Produktseite zu einem Kauf führen. Um dieses Ziel zu erreichen, gibt es diverse Dinge, die eine Produktseite erfüllen muss.

  • Sie sollte erklären, was verkauft wird. Eine Produktseite muss den Leuten zeigen, wie das Produkt aussieht, wie es funktioniert und wie viel es kostet.
  • Sie sollte Vertrauen aufbauen. Der allererste Kauf ist ein Vertrauensbeweis, besonders wenn man ein Produkt online kauft, daher muss die Produktseite auf die Zweifel der Leute eingehen und diese beseitigen.
  • Sie sollte ein Erlebnis kreieren. Eine Produktseite nutzt überzeugende Medien und Text, damit sich etwas Digitales real anfühlt.
  • Sie sollte intuitiv sein. Eine Produktseite muss alle oben genannten Ziele erfüllen, ohne die Menschen mit Informationen zu bombardieren.
Produktseite für eine Kerzenmarke
Design von Rekhchand

Ziele der Produktseite und Ziele der Kundschaft

Die Ziele der Produktseite sollten mit denen der Kundschaft übereinstimmen. Die Leute sind auf dieser Seite, weil sie ein Bedürfnis befriedigen wollen.

Angenommen das Produkt ist die Lösung, dann ist es Aufgabe der Produktseite, die Kundschaft davon zu überzeugen, dass dem so ist. Wenn das Produkt nicht die Lösung ist, sollte dies ebenfalls sofort klargestellt werden.

All dies setzt natürlich voraus, dass du die Bedürfnisse der Kundschaft kennst. Du musst zuerst verstehen, bei welcher Zielgruppe das Produkt beworben wird und mit welcher Art Produkte und Webseiten sie es in der Regel zu tun hat.

Umfassende demografische Daten, Umfragen, Interviews und psychografische Profile sind Standardmethoden der Zielgruppenforschung. Designer und Designerinnen müssen dann ihre Kenntnisse über die Kundschaft in psychologische Prinzipien innerhalb des Designs umsetzen.

Der Inhalt einer Produktseite

Der grundlegende Inhalt einer Produktseite ist um die „Fold“ herum gestaltet. Das ist der Bereich, an dem der Bildschirm den Rest der Seite abschneidet.

Da die User scrollen müssen, um zu sehen, was sich unterhalb der Fold befindet – sie müssen also die aktive Entscheidung treffen, sich weiter auf der Seite umzusehen – ist der Bereich oberhalb der Fold der Bereich, in dem sich die wichtigsten Informationen befinden. Beginnen wir also hier:

  • Header: Hier befindet sich das Markenlogo und Navigationsmenü. Dies ist auf den meisten Webseiten Standard, muss also nicht besonders groß sein. Viele Marken entscheiden sich selbst auf dem Desktop für eine verkleinerte Navigation, zum Beispiel in Form eines Hamburger-Icons.
  • Produktbeschreibung: Diese enthält den Produktnamen, Preis, Value Proposition und manchmal einen Ausschnitt aus einer Bewertung (z. B. eine Sternebewertung). Hier wird das Produkt im Grunde gezeigt und erklärt, weshalb man es kaufen sollte.
  • Produktbilder und Medien: Diese enthalten die wichtigsten Produktbilder, meist in einem Karussell, das die Besucher durchblättern können, um das Produkt aus verschiedenen Perspektiven zu sehen. Dazu gehören auch verschiedene Anzeigeoptionen für unterschiedliche Farben oder Modelle.
  • Call-to-Action-Button (CTA). Das ist der Button, der zur Bestellseite führt. In der Nähe des CTA befinden sich Kaufoptionen wie Menge oder Größe.
Produktseitengestaltung für einen Fahrradfahrer-Airbag
Design von MercClass

Die verbleibenden Inhalte, die wir hier auflisten, müssen sich nicht unbedingt unterhalb der Fold befinden, sind aber weniger dringlich als die obigen.

  • Zusatzinformationen: Dazu gehören detailliertere Informationen über das Produkt, beispielsweise Gewicht und Maße, häufig gestellte Fragen und auch Erläuterungen bestimmter Teile eines Produkts.
  • Empfehlungen: Dazu gehören Testimonials, Bewertungen und Aufzählungen von nennenswerten Marken oder Menschen, die das Produkt in der Vergangenheit genutzt haben.
  • Unterstützende Grafiken: Hierbei handelt es sich um weniger wichtige Bilder, die das Scrollen unterstützen, zum Beispiel Illustrationen/Animationen, die dabei helfen, dass sich die Seite interaktiver und lebendiger anfühlt. Sie orientieren sich in der Regel am allgemeinen Branding der Seite.
  • Produktempfehlungen: Hier werden andere Produkte angezeigt, die für Besucher und Besucherinnen infrage kommen. Sollten sie letztendlich kein Interesse am eigentlichen Produkt haben, können Produktempfehlungen die Möglichkeit bieten, sich auf anderen Produktseiten umzuschauen, statt einfach die Website zu verlassen.

Welchen Einfluss verschiedene Produktarten auf den Inhalt der Produktseite haben

Der Inhalt einer Produktseite kann abhängig von der Art des Produkts oder der Dienstleistung variieren. Der häufigste Unterschied tritt zwischen physischen und digitalen Produkten (oder sichtbaren und nicht sichtbaren) auf.

Produktseitengestaltung für kaffeemarke
Eine Produktseite mit einem physischen Produkt nutzt verstärkt Bilder. Design von Satbir S

Physische Produkte haben in einer digitalen Umgebung von Natur aus einen Nachteil und der Inhalt ihrer Seite hat zum Ziel, ein Ladengeschäft zu ersetzen. Dies kann erreicht werden, indem man sich mehr auf Medien und detaillierte Produkteigenschaften konzentriert oder die Versand- und Rückgabeoptionen hervorhebt.

Gleichzeitig ähnelt die Strategie für Produktseiten physischer Produkte wie Kerzen oder Wein, die auf nicht-visuelle Sinne setzen, der Strategie für digitale Produkte – nämlich, dass überzeugende Beschreibungen im Mittelpunkt stehen. Da sie aber vom persönlichen Geschmack abhängig sind, ist es in diesem Bereich mittlerweile zum Trend geworden, vor dem Anzeigen der Produktseite eine kleine Befragung durchzuführen.

Dabei werden den Leuten (witzige aber gezielte) Fragen zu ihren Vorlieben gestellt, um ihnen das Gefühl zu geben, die gleich angezeigte Produktseite wäre extra für sie zusammengestellt worden.

Produktseite für eine E-Learning-Textermarke
Bei einer Produktseite für ein digitales Produkt stehen Beschreibungen und/oder Bilder der Menschen hinter dem Service im Mittelpunkt. Design von Daniella via Dribbble

Für digitale Produkte oder Dienstleistungen lassen sich eventuell keine Bilder anzeigen, da sie nicht fotografiert werden können. Ein Service kann auch häufig neu oder unbekannt sein, wodurch mehr Zeit erforderlich ist, um zu erklären, wer die Marke ist und was sie zu bieten hat. Aus diesem Grund kommt der Preis oft als Letztes. Ein Preis zu sehen, ohne das Angebot vollends zu verstehen, könnte die Menschen abschrecken.

Physische Produkte dagegen können es sich erlauben, diesbezüglich direkter zu sein – ein T-Shirt ist ein T-Shirt und entweder findest du es gut genug, um es zu kaufen, oder nicht.

Bewährte Praktiken beim Designen einer Produktseite

Da wir uns nun angesehen haben, wie eine Produktseite grundlegend funktioniert, werden wir dir ein paar Designtipps geben und uns ein paar Beispiele ansehen.

1. Nutze das richtige Designprogramm für deine Produktseite

Der Designprozess beginnt in der Regel mit einem Briefing oder einer Liste notwendiger Funktionen. Die meisten Designer und Designerinnen erstellen dann Skizzen mit Stift und Papier, um Ideen zu entwicklen, wie diese am besten zusammenpassen. Dies nennt man Wireframe – eine vereinfachte, rudimentäre Darstellung der Seitenstruktur. Sobald du dieses hast, musst du zum Designprogramm übergehen.

Mit Prototyping-Apps wie Sketch und Figma lassen sich ausgefeiltere Mockups erstellen und zeigen dir genauer, wie deine Seite aussehen wird. InvisionApp dagegen erstellt interaktive Prototypen, was das Testen beschleunigt.

Produktbild von der Homepage von Invision
via Invision

Der Vorteil von Prototyping-Apps ist, dass sie Designern und Designerinnen die Möglichkeit geben, sich schon früh auf das Nutzererlebnis zu konzentrieren. Sie führen auch zu weniger originellen Designs. Während dies häufig wünschenswert sein kann – das Ziel ist schließlich ein nahtloses Shopping-Erlebnis – benötigst du Programme wie Photoshop oder After Effects, wenn du kreativere Designs, Texturen oder Animationen erstellen möchtest.

Schau dir unseren kompletten Guide zu Webdesign-Software an >>

2. Nutze Vorlagen für dein Layout

Angesichts der Tatsache, dass eine E-Commerce-Seite mehrere Produkte enthalten wird (wenn nicht gar Hunderte), ist es nicht praktikabel, für jedes Produkt eine eigene Produktseite zu erstellen. Meistens nutzen Designer und Designerinnen daher Vorlagen für Layouts, wodurch sich neue Produktseiten einfach durch Kopieren erstellen lassen. Eine Vorgehensweise besteht darin, eine einzelne Vorlage für alle Produktseiten oder leicht verschiedene Vorlagen für verschiedene Produktkategorien zu nutzen.

Ein auf Vorlagen basierendes Design erfordert Planung: Vermarkter und Copywriter müssen sich für jedes Produkt an eine bestimmte Anzahl an Bilder, Funktionslisten, Q&As, Testimonials etc. halten. Gleichzeitig müssen die Vorlagen nicht immer 100 % identisch sein. Wenn die Produkte beispielsweise unterschiedliche Farben haben, kann das Farbschema der Produktseite variieren, um sich dem anzupassen.

Dieses Design nutzt dasselbe Layout, aber mit einem anderen Hintergrundbild und Farbschema für jedes Produkt. Design von Francesco Zagami via Dribbble

Heutzutage haben viele Produktseiten verschiedener Firmen so ziemlich die gleichen Layouts. E-Commerce-Seiten zeigen beispielsweise in der Regel Bilder auf der linken Seite und Produktbeschreibungen, verschiedene Varianten und CTAs auf der rechten Seite. Darunter kommt eine Liste mit Eigenschaften und Vorteilen, gefolgt von den FAQs sowie Reviews/Testimonials.

Produktseitendesign für eine Hautpflege
Dieses elegante Design von Olga D. verwendet ein ziemlich gewöhnliches Layout.

Die Stärke eines allgegenwärtigen Layouts wie diesem liegt in seiner Vertrautheit: Die meisten Menschen werden intuitiv wissen, wo sie die gesuchten Informationen finden. Durch seine Einfachheit eignet es sich besonders gut für Käufer/Verkäufer-Plattformen (wie eBay), bei denen die Marke keine Kontrolle über die Produktbilder und den Text hat.

Es gibt aber Möglichkeiten dafür zu sorgen, dass das Layout nicht langweilig wirkt. Im hier gezeigten Monstera-Design ist die Platzierung der Elemente der Produktseite nicht ungewöhnlich, aber die Größe des Bildes und der einfarbige Hintergrund sind überraschend.

Produktseitendesign für Pflanzenshop
Design von tubik via Dribbble

3. Denke beim Designen an den Rest der Seite

Natürlich werden Produktseiten nicht für sich allein designt: Sie müssen sich in den Rest der Website einfügen. Diese Einheitlichkeit ist nicht nur fürs Branding wichtig, sondern auch weil eine unpassende Produktseite unbewusst weniger vertrauenswürdig auf potenzielle Käufer und Käuferinnen wirken kann.

Produktseiten an das bestehende Branding anzupassen kann auch eine Herausforderung für Designer und Designerinnen sein. Nehmen wir mal an, ein Branding-Team hat sich aus unersichtlichen Gründen dafür entschieden, für alle Bilder einen Schwarz-Weiß-Filter zu verwenden. Die Produktseite wird nun markenfremd wirken, wenn sie die Farbe eines Produkts hervorhebt. Deshalb sollten E-Commerce-Unternehmen, bei denen Online-Shopping im Vordergrund steht, ihren Webdesign-Prozess mit dem Design der Produktseiten beginnen.

Produktseitendesign für Modemarke
Design von AR Shakir via Dribbble

Gleichzeitig kann es zu kreativen Freiheiten führen, die Markenpersönlichkeit auf der Produktseite zum Vorschein kommen zu lassen. Das Design von „hoodie“ vermittelt ein klares Bild von der Attitüde der Marke. Es ist aber auch nie zu spät, die Seite komplett umzugestalten, wenn dies dabei hilft, die Produktseite zu optimieren.

Gleichermaßen ist die Checkout-Seite oftmals eine extrem vereinfachte Version der Produktseite, auf der das wichtigste Produktbild in klein abgebildet ist, sowie der Preis und die Menge mit der Möglichkeit, Änderungen vorzunehmen.

Angesichts der Tatsache, dass beinahe 70 % aller Warenkörbe abgebrochen werden, ist der Checkout die ideale Gelegenheit, um die auf der Produktseite aufgelisteten Vorteile wie Versanddauer und geringen Kosten zu zeigen. Die Checkout-Seite über die Produktseite zu legen erleichtert es den Usern auch zurückzugehen, statt wohlmöglich die Website zu verlassen.

4. Ordne Informationen nach Wichtigkeit

Produktseiten müssen die potenzielle Kundschaft informieren, ohne sie mit zu vielen Informationen zu überfordern. Das bedeutet, dass Designer und Designerinnen entscheiden müssen, was die User wann sehen sollten.

Dies hat zum Teil damit zu tun, welcher Inhalt im Verhältnis zur Fold platziert wird. Die speziellen Designtechniken (z. B. Größe, Farbe und Schriftstil), die über Priorität entscheiden, sind in den Prinzipien der visuellen Hierarchie zusammengefasst.

Welche Information Priorität hat, kann davon abhängen, was du verkaufst. Für ästhetische Produkte wie Kleidung, Möbel, Kunstwerke etc. wird das Produktbild das wichtigste Verkaufsargument sein. Für Dienstleistungen und Produkte ohne visuelles Element hat die Beschreibung des Produkts Priorität.

Produktseite für Schuhmarke
Die ausgewählte Farbgebung in diesem Design von Axantz(Harmono) leitet den Blick über die Seite.

Du kannst immer darauf vertrauen, dass der CTA in jedem Fall eine hohe Priorität hat, aber das bedeutet nicht, dass du es mit knalligen Farben oder einem übergroßen Button übertreiben musst. Eine der wichtigsten Techniken zum Designen des CTA besteht darin, einen Kontrast zu den anderen Seitenelementen zu erzeugen.

Und schließlich kann Eye Tracking mit einem Tool wie Crazy Egg dabei helfen, genauer herauszufinden, welche Teile der Seite die Aufmerksamkeit der User erregen (dies ist besonders hilfreich, wenn ihre Aufmerksamkeit auf Dingen liegt, auf denen sie nicht liegen soll).

Produktseitendesign für ein Wasserflaschendesign
In diesem Design findet sich die Produktbeschreibung in einem eingeklappten Menü auf der rechten Seite, um mehr Aufmerksamkeit auf die Grafiken zu lenken. Design von Tran Mau Tri Tam via Dribbble

Eine wichtige Technik, um die Informationen der Priorität nach zu ordnen, ist, den sekundären Inhalt zusammenzufassen. Dies gilt besonders für häufig gestellte Fragen (FAQs), bei denen eine Liste mit Fragen angezeigt wird und die User einen Button anklicken müssen (oftmals ein Plus oder Dreieck), um die Antwort zu sehen.

Auf ähnliche Weise können Karussells genutzt werden, um ausgewählte Inhalte (z. B. Bilder oder Kundenbewertungen) innerhalb eines schmalen, horizontalen Bereichs anzuzeigen. Diese können die User durchblättern, um mehr zu sehen.

Diese Vorgehensweisen verhindern nicht nur, dass die Seite sich zu chaotisch anfühlt, sondern laden auch zu Interaktionen ein, wodurch die User aktiv bleiben, statt nur passiv zu lesen.

5. Erzähle mit Bildern eine Geschichte

Bilder sind unweigerlich der auffälligste Teil einer Produktseite, aus dem einfachen Grund, dass sie sich schneller überfliegen lassen als Text. Es ist wohl wenig überraschend, dass laut einer Studie von Salsify Online-Shopper heutzutage durchschnittlich 6 Bilder und 3 Videos auf einer Produktseite erwarten.

Gleichzeitig müssen Bilder auf Produktseiten nicht nur Aufmerksamkeit erregen: Sie müssen dafür sorgen, dass sich ein digitales Produkt real anfühlt. Das bedeutet, dass die Bilder das Gefühl erzeugen sollten, das Produkt zu erleben, und eine Geschichte ohne Worte erzählen.

Produktseitendesign für eine Technologiemarke
Das Produktbild in diesem Design von MercClass nutzt eine Hand, um ein Gefühl für die Größe zu vermitteln.

Wie Bilder dies erreichen, ist abhängig vom Produkt. Für physische Produkte sind die Dimensionen oftmals von Bedeutung und dazu gehört mehr als nur die Maße darzustellen. Bei Möbeln liefert ein Bild, in dem das Produkt in einem eingerichteten Raum zu sehen ist, der Kundschaft nicht nur Einrichtungsideen, sondern kann ihr auch helfen, die Möbel mit anderen Objekten in der Nähe zu vergleichen, um ein besseres Gefühl für die Größe zu bekommen.

Bekleidungsmarken nutzen häufig Models, um den Sitz der Kleidung zu veranschaulichen, aber sie können auch noch einen Schritt weiter gehen und Models in bestimmten Umgebungen zeigen und so auf eine mögliche Zukunft deuten, die mit dem Kauf einhergeht. In Situationen, in denen Zutaten (oder mechanische Teile) das wichtigste Verkaufsargument sind, können diese auf kunstvolle Weise gezeigt werden, so wie bei den hier gezeigten animierten Teeblättern im Design von Bennett Tea.

Design von tubik via Dribbble

Für Produkte oder Dienstleistungen ohne visuelle Komponente müssen Designer und Designerinnen kreativer sein und Bilder nutzen, die das Erlebnis der Nutzung des Produkts vermitteln.

Für visuell Lernende können Symbole oder einfache Illustrationen leicht zusammenfassen, wie ein Produkt funktioniert. Für diesen Ansatz kannst du dich von Infografik-Designs inspirieren lassen, um eine Vorstellung davon zu bekommen, wie sich komplexe Daten mithilfe von Bildern zusammenfassen lassen.

Infografik-Design zur Videoproduktion
Infografik-Design von Pinch Studio

6. Unterschätze nutzergenerierte Inhalte nicht

Auch wenn du vielleicht erst einmal denkst, dich um jedes Element auf der Seite selbst kümmern zu müssen, lohnt es sich, trotz des möglichen Chaos Platz für nutzergenerierte Inhalte zu schaffen. Dies bedeutet in der Regel, den Usern die Möglichkeit zu geben, ihre eignen öffentlichen Bewertungen, Fragen und Produktfotos einzureichen.

Dies mag wie der Albtraum aller Designschaffenden klingen: Die Bilder werden sehr wahrscheinlich eine schlechte Qualität haben und die gelegentlich wütenden Bewertungen sind unausweichlich.

Auf der anderen Seite vertrauen User anderen Usern weitaus mehr als kuratierten Bildern und Testimonials, die von einer Marke ausgesucht wurden. Solches Vertrauen kann darüber entscheiden, ob jemand etwas kauft oder nicht. Deshalb werden nutzergenerierte Inhalte in der Regel am unteren Ende der Seite angezeigt, nachdem man sich bereits alle offiziellen Informationen angesehen hat und kurz vor einer Entscheidung steht.

Produktseitengestaltung mit Kundenrezensionen
Design von Yeasin Arafat via Dribbble

Letzten Endes werden durchschnittlich positive Bewertungen für die meisten Menschen größere Bedeutung haben als ein paar negative. Darüber hinaus kann sich für Marken die Gelegenheit bieten, auf Fragen und negative Kommentare zu antworten und so zu zeigen, wie wichtig ihnen persönliche Betreuung und Kundenservice ist.

Im Gegenzug kann die Vernachlässigung solcher Inhalte als mangelndes Selbstvertrauen wahrgenommen werden oder den Eindruck erwecken, der Verkäufer hätte etwas zu verbergen. Um einen Verkauf abzuschließen, kann Authentizität wichtiger sein als eine perfekte Produktseite.

7. Teste, analysiere und überarbeite

Wir können dir Tipps für ein tolles Design geben, aber wir können dir nicht sagen, ob deine fertige Produktseite ein Erfolg sein wird. Aber wir wissen, wer das kann: deine Zielgruppe. Mit anderen Worten: Der Erfolg deiner Produktseite hängt davon ab, ob Analyse-Tools wie Glew oder Google Analytics‘ Enhanced E-Commerce zeigen, dass die Leute dein Produkt kaufen.

Wissenschaftler Hase Illustration
Wenn du deine Produktseite testest, ist ein Laborkittel nicht nötig, sieht aber stylish aus. Design von Rechronicle

Einige wichtige Daten, auf die du achten solltest, sind Traffic und woher er kommt, Sitzungsdaten und natürlich Conversion Rates. Das Schwierige an diesem Prozess ist, an die Wurzel etwaiger Probleme zu kommen, da der Fehler nicht immer im Design liegt.

Eine hohe Absprungrate oder mangelnde Interaktion (einschließlich Scrollen) können ein Hinweis darauf sein, dass die Seite auf den ersten Blick uninteressant ist.

Unterdessen könnte eine hohe Anzahl an Warenkorbabbrüchen bedeuten, dass der Checkout-Prozess mühsam ist (oder es unerwartete Kosten gibt). Wenn die Leute nach einer langen Sitzung überhaupt nicht zum Warenkorb kommen, könnte dies darauf hindeuten, dass der Text nicht überzeugt. Und wenn eine Seite wenig Traffic hat, solltest du noch einmal einen Blick auf deine SEO-Strategie werfen.

Zu guter Letzt solltest du auf die Anzahl und den Inhalt negativer Bewertungen achten (sowohl auf deiner Seite als auch auf Bewertungsseiten wie TrustPilot), da dies auf ein Problem mit der Lieferung oder dem Produkt selbst hindeuten kann.

Angenommen du kommst zu dem Schluss, dass das Design tatsächlich das Problem ist, musst du den Mut haben, Änderungen vorzunehmen – selbst wenn es sich um ein Design handelt, das dich viel Mühe gekostet hat und deiner Meinung nach gut aussieht. A/B-Tests sind ein toller Weg, um schnell alternative Versionen eines Designs zu testen und anhand von Daten zu entscheiden, welche Version besser performt.

Eine gute Produktseite erfordert gute Designer und Designerinnen

Das Design einer Produktseite ist teils Wissenschaft, teils Stil und vor allem Business. Am Ende des Tages wird eine Produktseite designt, um die Kundschaft vom Kauf eines Produkts zu überzeugen. Wir hoffen, dieser Guide bietet dir einen guten Ausgangspunkt dafür. Aber wenn du bereit für eine Produktseite bist, die den Deal perfekt macht, achte darauf, mit talentierten Designern oder Designerinnen zu arbeiten.

Du möchtest perfekte Produktseiten?
Dann arbeite mit unserer wunderbaren Design-Community!