Produktseiten gestalten: 12 Details für mehr Verkauf

01Warum ist die Produktseite so wichtig?

In einem Onlineshop fällt die Kaufentscheidung auf der Produktdetailseite. Startseite und Kategorieseiten führen den Kunden zum Produkt; die Produktseite beantwortet die Frage »Soll ich das kaufen?«. Eine kleine Unklarheit genügt, damit der Kunde den Tab schließt und zur Konkurrenz wechselt.

Der Erfolg des Produktseitendesigns lässt sich an einer einzigen Kennzahl ablesen: der Warenkorbquote. Wie viele der Besucher, die die Seite aufrufen, das Produkt in den Warenkorb legen, zeigt, ob das Design seinen Zweck erfüllt. Die folgenden 12 Details sind die grundlegenden Bereiche, die diese Quote beeinflussen.

Bevor wir zu den Details kommen, ein Grundsatz: Eine Produktseite ist keine Schablone, sondern wird nach der Beschaffenheit Ihres Produkts aufgebaut. Wer Bekleidung, Lebensmittel und Elektronik im selben Layout darstellt, drängt die jeweils wichtigste Information in den Hintergrund.

02Bild- und Informationsbereich

Die ersten vier Details betreffen den Bereich, in dem der Kunde das Produkt kennenlernt. Dieser Bereich gehört an den Seitenanfang, in den Bereich, der ohne Scrollen sichtbar ist.

1. Zoombare Produktgalerie

Die Produktgalerie ersetzt den Moment im Laden, in dem man das Produkt in die Hand nimmt. Nutzen Sie aus verschiedenen Winkeln aufgenommene, zoombare Fotos und wenn möglich ein kurzes Video. Auf dem Smartphone sollte sich die Galerie per Fingerwisch bedienen lassen, und die Vorschaubilder müssen groß genug zum Antippen sein. Details zur Aufnahme finden Sie in unserem Beitrag zu Produktfotos für den Onlineshop.

2. Klarer Produkttitel

Der Titel sollte Marke, Produktart und ein unterscheidendes Merkmal enthalten. Ein Titel wie »Marke Modell X Thermosflasche Edelstahl 500 ml« statt nur »Modell X« sagt sowohl dem Kunden als auch der Suchmaschine, worum es sich handelt.

3. Hervorgehobene Merkmale

Eine kurze Zusammenfassung mit drei bis fünf Stichpunkten direkt unter dem Titel gibt Kunden, die die lange Beschreibung nicht lesen, die wichtigste Information. Jeder Punkt sollte ein Merkmal und seinen Nutzen zusammen erklären.

4. Sichtbare Variantenauswahl

Farb- und Größenoptionen sollten nicht in einem Dropdown versteckt sein, sondern als Buttons oder Farbfelder erscheinen. Ändern sich Foto, Preis und Lagerstatus sofort mit der gewählten Variante, legt der Kunde nicht das falsche Produkt in den Warenkorb. Der Link zur Größentabelle gehört neben die Auswahl.

03Kaufbereich

Die nächsten vier Details bilden den Bereich, in dem der Kunde sich entscheidet und handelt. Er sollte schlicht und ablenkungsfrei aufgebaut sein.

5. Preis, Rabatt und Ratenzahlung

Der Preis sollte eine der am besten lesbaren Angaben der Seite sein. Bei einem Rabatt wird der alte Preis durchgestrichen und der neue deutlich hervorgehoben. Die Ratenzahlungsoptionen können als kurze Zusammenfassung unter dem Preis stehen, die ausführliche Ratentabelle in einem Bereich, der sich per Klick öffnet.

6. Lagerstatus

Angaben wie »Auf Lager«, »Nur noch 3 Stück« oder »Vorbestellbar« helfen dem Kunden bei der Entscheidung. Sie müssen aber auf dem tatsächlichen Bestand beruhen; falsche Zähler, die künstliche Dringlichkeit erzeugen, beschädigen das Vertrauen. Die Option »Benachrichtigen, wenn wieder verfügbar« holt den Kunden bei ausverkauften Produkten zurück, statt ihn zu verlieren.

7. Auffälliger Warenkorb-Button

Der Warenkorb-Button ist das auffälligste Element der Seite: kontrastreiche Farbe, ausreichende Größe und eine klare Beschriftung. Bleibt der Button auf dem Smartphone beim Scrollen am unteren Bildschirmrand fixiert, muss der Kunde ihn im Moment der Entscheidung nicht suchen.

8. Liefer- und Versandinformationen

Neben dem Preis will der Kunde wissen, wann das Produkt bei ihm ankommt und ob der Versand etwas kostet. Der voraussichtliche Versandzeitpunkt und die Schwelle für kostenlosen Versand sollten direkt in der Nähe des Buttons stehen. Wenn diese Angaben erst im Bezahlschritt auftauchen, ist das einer der häufigsten Gründe für Warenkorbabbrüche.

04Vertrauens- und Folgebereich

Die letzten vier Details sind die Bereiche, die unentschlossene Kunden überzeugen und das Einkaufen fortsetzen lassen. Diese Abschnitte stehen in der Regel unterhalb des Kaufbereichs.

9. Ausführliche Beschreibung

Lange Beschreibung, technische Daten sowie Anwendungs- und Pflegehinweise lassen sich in Tabs oder aufklappbaren Bereichen anordnen. Wie man den Text schreibt, haben wir in unserem Ratgeber Produktbeschreibung schreiben in 10 Regeln erklärt.

10. Kundenbewertungen

Bewertungen mit Fotos und die Verteilung der Sterne gehören zu den stärksten Überzeugungsmitteln, weil sie die tatsächliche Nutzung zeigen. Das Label »Verifizierter Käufer« und höfliche Antworten auf negative Bewertungen stärken das Vertrauen. Bewertungen zu löschen oder nur positive zu zeigen, kostet langfristig Vertrauen.

11. Rückgabe und sichere Zahlung

Eine kurze Zusammenfassung der Rückgabebedingungen und die akzeptierten Zahlungsmethoden können als kleiner Infostreifen in der Nähe des Kaufbereichs stehen. Für Erstkäufer sind diese Angaben ausschlaggebend.

12. Ähnliche und ergänzende Produkte

Ähnliche Produkte am Seitenende halten Kunden im Shop, die nicht genau das Gesuchte gefunden haben. Ergänzende Produkte und Produktsets steigern dagegen den Warenkorbwert. Wichtig ist, dass dieser Bereich wirklich zum Produkt passt; zufällige Produkte lenken nur ab.

05Mobile First denken

Der Großteil des E-Commerce-Traffics kommt von mobilen Geräten. Deshalb sollte die Produktseite zuerst für den Smartphone-Bildschirm gestaltet und der Desktop daraus erweitert werden. Auf dem Smartphone müssen Preis, Variantenauswahl und Warenkorb-Button ohne Scrollen sichtbar sein; die Tippflächen müssen groß genug sein, um sie bequem mit dem Finger zu treffen.

Geschwindigkeit ist ein untrennbarer Teil des mobilen Erlebnisses. Bei den Core Web Vitals von Google gelten als gute Schwellenwerte 2,5 Sekunden für LCP, 200 Millisekunden für INP und 0,1 für CLS. Das Komprimieren großer Produktbilder, eine Galerie, die beim Laden der Seite nicht verspringt, und das Entfernen unnötiger Skripte verbessern diese Werte unmittelbar. Hier kommen Responsive Webdesign und Speed- & Performance-Optimierung ins Spiel.

06Design messen und verbessern

Eine gute Produktseite ist nicht auf einen Schlag fertig; sie reift mit Daten. Wer die Verhältnisse zwischen Produktaufrufen, Warenkorb-Hinzufügungen und Käufen regelmäßig beobachtet, erkennt, in welchem Schritt das Problem liegt.

Heatmap- und Session-Recording-Tools zeigen, wo Nutzer auf der Seite klicken und wo sie hängenbleiben. Bevor Sie eine Änderung im gesamten Shop umsetzen, testen Sie sie an einigen Produkten und vergleichen die Ergebnisse; so vermeiden Sie Entscheidungen aus dem Bauch heraus.

• Ist die Warenkorbquote niedrig: Prüfen Sie Galerie, Preis und Variantenbereich.
• Ist die Warenkorbquote hoch, der Kauf aber niedrig: Sehen Sie sich Versandkosten und Bezahlschritt an.
• Ist die Absprungrate hoch: Kontrollieren Sie Seitengeschwindigkeit und die Information im ersten Bildschirm.
• Gibt es große Unterschiede zwischen Smartphone und Desktop: Testen Sie das mobile Layout gesondert.

07Die Produktseite bei Aurora

Bei Aurora Smart E-Ticaret kommen keine fertigen Themes zum Einsatz; das Design jedes Shops, einschließlich der Produktseiten, entsteht mit unserem Konzeptdesign einzigartig für Ihr Unternehmen und die Struktur Ihrer Produkte. Nutzerführung und Oberflächenkonzept werden nach den Prinzipien von UI/UX-Design geplant.

Auf der Produktseite gehören Galerie mit Zoom und Video, Variantenauswahl, ähnliche Produkte, Produktsets, ein Schnellansichtsfenster und Fotobewertungen mit dem Label »Verifizierter Käufer« zur Standardausstattung. Hochgeladene Bilder werden automatisch in ein schnell ladendes Format umgewandelt. Für die Bilder selbst können Sie auch unsere Leistung Produktfotografie nutzen.

Wie Sie Kunden zurückgewinnen, die nach der Produktseite abgesprungen sind, haben wir in unserem Beitrag zur Warenkorbabbruch-Quote zusammengetragen.