Die Produktdetailseite (PDP) gestalten: Regeln und Beispiel

Kurz gesagt

Auf der Produktseite sucht der Käufer Antworten. Passt das zu mir, gibt es meine Größe, was kostet es bis zur Haustür und wann kommt es? Wer die Antwort nicht findet, wechselt in einen anderen Tab.

In der Bewertung des Baymard Institute, aktualisiert im März 2026, liegt der Anteil der Desktop-Websites mit einer „guten“ oder „ordentlichen“ Produktseite bei 48 %. Bei mobilen Websites sind es 38 %. Auf den meisten Websites ist diese Seite also noch mittelmäßig oder schlechter.

Diese Seite beschreibt nur das Muster der Produktdetailseite. Alle Seitentypen von der Startseite bis zum Checkout habe ich im Ratgeber zu E-Commerce-UX zusammengefasst. Hier öffne ich den Abschnitt zur Produktseite Regel für Regel.

• Machen Sie das Bild vergrößerbar und zeigen Sie das Produkt neben etwas mit bekannter Größe.
• Zeigen Sie die Größe nicht im Dropdown, sondern als Buttons mit Verfügbarkeit.
• Wird eine Farbe gewählt, wechselt das Hauptbild zu dieser Farbe.
• Schreiben Sie neben den Preis den voraussichtlichen Gesamtbetrag mit Versand.
• Nennen Sie nicht die Versanddauer, sondern den voraussichtlichen Liefertermin.
• Geben Sie beim Hinzufügen zum Warenkorb eine Bestätigung, die man nicht übersieht.
• Halten Sie den Warenkorb-Button auf dem Handy unten am Screen.

Die Anatomie einer Produktseite

Am Desktop stehen die Bilder links und der Kaufbereich rechts. Auf dem Handy stehen dieselben Teile untereinander, und der Warenkorb-Button bleibt unten am Screen fixiert.

Die Reihenfolge ist wichtig. Preis, Gesamtbetrag, Optionen, Lieferung und Button stehen in einem Block, weil dort die Entscheidung fällt. Datenblatt und Bewertungen stützen die Entscheidung und können deshalb darunter stehen.

Wenn Sie dieses Gerüst auf Papier zeichnen wollen: Auf der Seite zum Wireframe gibt es ein Beispiel für eine Produktseite.

Bilder

Der Leitfaden von Katie Sherwin von NN/g aus dem Jahr 2019 zählt das vergrößerte Bild zu dem, was auf eine Produktseite unbedingt gehört. Zoomen und Schwenken im Bild stehen auf der Liste „schön zu haben“. Laut Leitfaden beantwortet eine einzige Ansicht die Fragen der Käufer selten.

Die Größe aus dem Bild abzulesen, ist schwer. In Baymards Tests versuchten 42 % der Nutzer, die Größe eines Produkts aus den Bildern zu erkennen. Trotzdem bieten 37 % der Websites kein Bild, das das Produkt neben etwas mit bekannter Größe zeigt.

Bei Kleidung gibt der menschliche Körper den Maßstab. Laut Baymard zeigen 23 % der Websites Kleidung, Accessoires oder Kosmetik nicht an einem Model.

Ich empfehle auch, Körpergröße und getragene Größe des Models unter das Bild zu schreiben. So bekommt der Nutzer die Antwort, ohne die Größentabelle zu öffnen. Das ist mein Vorschlag, kein Forschungsergebnis.

Die Farbwahl ändert das Hauptbild. Wählt der Nutzer Mintgrün und sieht noch das gelbe Hemd, weiß er nicht, ob seine Wahl gewirkt hat. Das verletzt Nielsens erste Heuristik, die Sichtbarkeit des Systemstatus.

Varianten wählen: Größe und Farbe

Zeigen Sie die Größe als Buttons. Laut Baymard nutzen 57 % der Websites für die Größenwahl keine Buttons.

In Baymards Tests machte das Dropdown Probleme, weil die Größen darin standardmäßig verborgen waren. Ein Menü macht es auch schwer zu sehen, welche Größe vorrätig ist.

Baymards Leitlinie zu Variantenauswahl ohne Farbe beschreibt auch die Folge. Manche Nutzer übersehen Größenoptionen, die nicht sofort und direkt sichtbar sind. Dann glauben sie, es gebe keine passende Variante, oder verlieren Zeit mit der Prüfung.

Laut Sherwin muss die Verfügbarkeit klar sichtbar sein, besonders wenn sie sich nach Farbe oder Größe ändert. Der Nutzer soll nicht erst nach dem Hinzufügen zum Warenkorb erfahren, dass das Produkt ausverkauft ist.

Deshalb verstecke ich eine ausverkaufte Größe nicht, sondern zeige sie deaktiviert. Ich streiche sie durch und schreibe „Ausverkauft“ darunter. Gibt es sie in einer anderen Farbe, sage ich das direkt darunter.

Auf eine blasse Farbe allein verlasse ich mich nicht, weil Farbe allein keinen Zustand beschreibt. Gestrichelter Rahmen, durchgestrichener Text und das Wort „Ausverkauft“ wirken zusammen.

Größenbuttons werden mit dem Finger gewählt, deshalb zählt auch ihre Größe. Das Kriterium 2.5.8 der WCAG 2.2 (AA) verlangt, dass Ziele mindestens 24 × 24 CSS-Pixel groß sind oder genug Abstand haben. Ich nutze größere.

Preis und Gesamtkosten

Sherwins Leitfaden verlangt, den Preis mit produktspezifischen Zusatzgebühren zu zeigen. Eine Käuferin in der Studie rechnete beim Vergleich von Websites den kostenlosen Versand auf der Produktseite mit ein. Eine der Websites sagte erst nach dem Hinzufügen zum Warenkorb, dass der Versand kostenlos ist.

Laut Baymard zeigen 67 % der Websites neben dem Kaufbereich keine Schätzung der gesamten Bestellkosten. Baymard empfiehlt, standardmäßig den niedrigsten Gesamtbetrag mit den niedrigsten Versandkosten zu zeigen. Können Versand und Steuern hoch sein, empfiehlt Baymard auch einen Rechner dafür.

Die Daten zum Warenkorbabbruch zeigen den Grund. Baymards Liste, aktualisiert am 22. September 2025, beruht auf Käufern in den USA und lässt die weg, die „sich nur umgesehen“ haben. 40 % dieser Käufer brachen den Checkout ab, weil die Zusatzkosten zu hoch waren, 12 % sagten, sie hätten den Gesamtbetrag nicht von Anfang an sehen oder berechnen können.

Bei Produkten in mehreren Größen oder Mengen schreiben Sie auch den Grundpreis. Laut Baymard zeigen 81 % der Websites keinen Grundpreis. Wer eine Flasche mit 750 ml mit einer mit 1,5 Litern vergleicht, soll keinen Taschenrechner öffnen müssen. In Deutschland verlangt die Preisangabenverordnung den Grundpreis für viele Waren nach Gewicht oder Volumen ohnehin (§ 4 PAngV).

Eine Gebühr, die erst im letzten Schritt auftaucht, wirkt auf Nutzer wie versteckte Kosten. Das beschreibe ich im Ratgeber zu Dark Patterns. Die Regeln für den Zahlungsschritt stehen im Checkout-Muster.

Verfügbarkeit und Liefertermin

Schreiben Sie nicht „2–4 Werktage“, sondern ein Datum. Laut einem Baymard-Artikel von Iva Olah aus dem Jahr 2023 zeigen 41 % der Websites kein voraussichtliches Lieferdatum.

Teilnehmende, die nur die Versanddauer sahen, hielten inne und rechneten das Datum selbst aus. Diese Rechnung führte mal zu Zögern, mal zum Abbruch.

Olah empfiehlt vor allem, das Lieferdatum im Zahlungsschritt neben dem Preis jeder Versandoption zu zeigen. Wenn möglich, soll es auch auf der Produktseite stehen.

Datumsbereiche wurden leichter verstanden als Dauerbereiche wie „3–7 Werktage“. Wurde der Bereich aber breiter als 5 bis 7 Tage, zögerten manche Teilnehmende.

Rechnen Sie bei der Berechnung die Bestellfrist und die Bearbeitungszeit ein. Olah warnt, dass die Systeme der Versanddienstleister, wenn nichts anderes gesagt wird, davon ausgehen, dass das Paket am selben Tag rausgeht.

Teilnehmende lasen das angezeigte Datum wie eine Liefergarantie. Ein Datum, das nicht stimmt, untergräbt mit der Zeit das Vertrauen. Halten Sie die Schätzung in Spitzenzeiten und an Feiertagen aktuell.

Auch die Rückgabeinformation gehört hierher. Laut Baymard suchen 60 % der Nutzer die Rückgabeinformation auf der Produktseite. 44 % der Websites zeigen die Rückgabebedingungen im Hauptinhalt des Produkts aber nicht und verlinken auch nicht darauf.

Die Bestätigung beim Hinzufügen

Die Bestätigung beim Hinzufügen zum Warenkorb muss so deutlich sein, dass man sie nicht übersieht. In Sherwins Test fügten Nutzer, die nicht genug Feedback bekamen, ein Produkt mehrmals hinzu und fanden Doppelte im Warenkorb. Manche glaubten auch, sie hätten ein Produkt hinzugefügt, das gar nicht drin war.

Amy Schade von NN/g schrieb 2014 eine Warnung zum selben Thema. Eine einzeilige Meldung oder die geänderte Zahl am Warenkorb-Icon wird leicht übersehen. Wer sie verpasst, geht zum Warenkorb, um nachzusehen, oder fügt das Produkt erneut hinzu.

Sherwin akzeptiert beide Wege: eine bleibende Meldung oder einen Bestätigungsscreen. Ich bevorzuge ein Bestätigungsfeld, das auf der Produktseite bleibt. Darin stehen Produkt, Farbe, Größe, Gesamtbetrag im Warenkorb und zwei offene Wege: „Zum Warenkorb“ und „Weiter einkaufen“.

Wird der Button ohne gewählte Größe gedrückt, zeigen Sie die Fehlermeldung direkt unter der Größengruppe und setzen den Fokus dorthin. Wie man die Meldung schreibt, beschreibe ich auf der Seite zu Fehlermeldungen.

Datenblatt und Bewertungen

Datenblatt

Sherwin verlangt eine Beschreibung, die vollständig, aber kurz ist und das Wichtige an den Anfang stellt, weil Leser den Text überfliegen. Ungewohnte Begriffe werden erklärt. Für datenreiche Eigenschaften ist laut Sherwin eine Vergleichstabelle oft der beste Weg.

In Baymards Bewertung der Datenblätter auf 344 Websites sind 64 % der Websites in diesem Bereich mittelmäßig oder schlechter. Bei 30 % ist die Uneinheitlichkeit von Bezeichnungen, Aufbau und Maßeinheiten zwischen Produkten derselben Art erheblich.

Meine eigene Regel ist einfach: Jedes Produkt derselben Kategorie zeigt dieselben Zeilen in derselben Reihenfolge und mit derselben Einheit. Steht bei einem Hemd „Material“ und beim anderen „Stoff“, kann der Nutzer die beiden Seiten nicht leicht vergleichen.

Bewertungen

Sherwin empfiehlt für Bewertungen eine Zusammenfassung und eine klare Trennung von positiv und negativ. Angaben wie das Alter der rezensierenden Person oder wie sie das Produkt nutzt, zeigen, ob die Bewertung zum Leser passt. Dass die Website die Bewertungen verifiziert, schafft ebenfalls Vertrauen.

Laut Baymard antworten 89 % der Websites nicht auf negative Bewertungen. Baymard empfiehlt, die Antwort des Shops optisch von den Bewertungen abzuheben, damit sie leicht auffällt.

63 % der Websites erlauben nicht, zwischen den Fotos in Bewertungen zu blättern. Baymard empfiehlt, dass Nutzer mit Pfeilen oder einer Wischgeste zwischen Fotos und den zugehörigen Bewertungen wechseln können.

Der fixierte Warenkorb-Button auf dem Handy

Auf dem Handy füllt das Produktbild oft den ganzen ersten Screen. Liest der Nutzer Beschreibung oder Bewertungen, liegt der Warenkorb-Button weit über dem Screen. Den Button unten am Screen zu fixieren, erspart dem entschlossenen Käufer das Zurückscrollen.

Dazu habe ich keine unabhängige Studie geöffnet und gelesen, deshalb nenne ich Ihnen keine Quote. Meine Empfehlung beruht auf eigener Beobachtung und ist eine Hypothese, die getestet werden sollte. Auf Ihrer eigenen Website messen Sie das mit einem A/B-Test.

Wenn ich einen fixierten Button baue, achte ich auf Folgendes:

• Die Leiste ist schmal: Preis, gewählte Größe und Button reichen.
• Wird ohne Größe gedrückt, springt der Fokus zur Größengruppe, und der Grund steht da.
• Die Leiste verdeckt den Tastaturfokus nicht vollständig. Das Kriterium 2.4.11 der WCAG 2.2 (AA) erlaubt nicht, dass das fokussierte Element von einem fixierten Header oder einer unteren Leiste vollständig verdeckt wird. scroll-padding in CSS ist eine einfache Abhilfe.
• Der Button hat die volle Breite. Ein großes Ziel ist leichter zu treffen, das beschreibt das Fitts’sche Gesetz.
• Auch das Bestätigungsfeld öffnet sich in der Leiste. Wo auch immer der Nutzer auf der Seite ist, sieht er die Bestätigung dort.

Beispiel: gute und schlechte Produktseite

Die Produktseite unten ist ausgedacht. Probieren Sie zuerst die gute Fassung: Wählen Sie eine Farbe und sehen Sie, wie sich Bild und ausverkaufte Größen ändern. Wählen Sie dann eine Größe und legen Sie das Hemd in den Warenkorb.

Drücken Sie danach „Schlecht“ und machen Sie dasselbe. In dieser Fassung rutscht die Größe ins Dropdown, und die Versandkosten verschwinden. Die Bestätigung im Warenkorb landet nur noch im Zähler oben rechts.

Sind Sie auf dem Handy, scrollen Sie in der guten Fassung nach unten. Der Warenkorb-Button bleibt unten am Screen.

Meine Notiz

Der Befund, den ich in Audits von Produktseiten am häufigsten schreibe: Die Verfügbarkeit steckt im Größenmenü. Der Nutzer wählt seine Größe, drückt den Button und sieht „nicht auf Lager“ erst dann. Die Korrektur ist meist eine kleine Arbeit.

Auf Platz zwei kommen die Versandkosten. Teams schreiben die Grenze für kostenlosen Versand in den Streifen auf der Startseite und vergessen sie auf der Produktseite. Ich empfehle, direkt unter den Preis den voraussichtlichen Gesamtbetrag mit Versand zu setzen.

Wenn ich mir eine Produktseite ansehe, nehme ich zuerst das Handy in die Hand. Ein Kaufbereich, der am Desktop sauber aussieht, kann auf dem Handy unter Bild und Beschreibung verschwinden. Wenn Sie vor einem Redesign sehen wollen, was kaputt ist, ist der UX Audit genau dafür da.