coastdigitalgroup/coastai-skills

Product Detail Layout System

Zweck

Das Product Detail Layout System bietet einen standardisierten, leistungsstarken visuellen und räumlichen Rahmen für die Strukturierung von E-Commerce-Produktdetailseiten (PDPs). Die Produktdetailseite ist die wichtigste Conversion-Engine jeder E-Commerce- oder Direct-to-Consumer-Website. Sie erfordert ein ausgewogenes Verhältnis von Rich Media, Multi-Variant-Konfiguratoren, dynamischen Preismodellen, Vertrauenssignalen und primären Call-to-Actions (CTAs) innerhalb einer kohärenten, scanbaren und vollständig zugänglichen Oberfläche.

Ein systematischer Ansatz löst häufige Design-Schwachstellen – wie nicht ausgerichtete Kauf-Raster ("Buy Boxes"), verwirrende Medien-Slider, Layout-Verschiebungen bei Variantenwechseln (CLS), versteckte mobile Kauf-Trigger und kritische Zugänglichkeitsblockaden bei benutzerdefinierten Selektoren. Dieses System überbrückt die Lücke zwischen Marketing-Präsentation und technischer Umsetzung und stellt sicher, dass Seiten stabil laden und maximale Conversion erzielen, während sie streng den WCAG-AA-Standards entsprechen.

Anwendungsfälle

• B2C- & Direct-to-Consumer (DTC) E-Commerce: Gestaltung hochglänzender Produktseiten für physische Güter, Bekleidung, Kosmetik oder Elektronik.
• Digitale Produkt- & Abonnementverkäufe: Organisation von Feature-Highlights, Stufenauswahl und Zahlungs-Checkouts auf Software-, Mitgliedschafts- oder Service-Landingpages.
• Industrielle & B2B-Katalogseiten: Strukturierung komplexer, spezifikationslastiger Hardware-Teilesysteme mit herunterladbaren Schemazeichnungen und Angebots-Buildern.
• Marktplatz-Detailansichten: Standardisierung von Layout-Rastern für verschiedene Multi-Vendor-Listings (Immobilien, Reisebuchungen, Peer-to-Peer-Verkäufe).

Wann NICHT verwenden

• SaaS-Preisvergleichs-Landingpages: Für den Side-by-Side-Vergleich verschiedener Abonnementpakete verwenden Sie pricing-table-ui-system oder comparison-matrix-system.
• Primäre Produktentdeckung (PLPs): Zum Durchsuchen von Katalogen oder Suchergebnislisten verwenden Sie card-ui-system und filter-and-sort-system.
• Einfache Lead-Erfassung oder Formulare: Für einfache Kontaktformulare, Newsletter oder einstufige Anmeldungen verwenden Sie form-design-system.
• Redaktionelle & Blog-Inhalte: Für narrative Geschichten, Newsletter und reine Textspalten verwenden Sie article-layout-system.

Eingaben

1. Inhalts- & Asset-Inventar: Hochauflösende Produktbilder/-videos (Seitenverhältnisse, Zoom-Anforderungen), Spezifikationen, Bewertungen, Preisstrukturen und Vertrauensgarantien.
2. Varianten-Matrix-Komplexität: Anzahl der Optionen (z. B. Farbe, Größe, Material) und Vorhandensein von Abhängigkeitsbeziehungen (z. B. "Größe L nur in Schwarz verfügbar").
3. Typografie- & Abstandsskala: Relative Größenskalen und fließende Abstands-Tokens (von fluid-typography-system und fluid-spacing-system).
4. Elevations- und Farb-Tokens: Markenakzentfarben, Statusfarbtöne (Sale, Warnung, ausverkauft), Oberflächen-Elevationen und aktiv/focus/hover-Zustände (von accessible-color-system und elevation-and-depth-system).
5. Mobile Viewport-Einschränkungen: Viewport-Grenzen und Geräte-Notches (insbesondere iOS Home-Indikator und Browser-Menüleisten).

Ausgaben

1. Dual-Pane-Raum-Blueprint: Strukturelles Raster, das den Bildschirm in eine left-hand Media Pane mit hohem Impact und eine scanbare right-hand Purchase Configurator Pane (Buy Box) unterteilt.
2. Responsive Stacking- & Flow-Regeln: Übergangsspezifikationen, die zeigen, wie das Layout in einen mobil-optimalen vertikalen Stack zusammenfällt.
3. Mobile Sticky Buy Drawer: Spezifikation einer am Viewport verankerten Kaufleiste, die auf mobilen Viewports nach der Haupt-CTA sichtbar bleibt.
4. Interaktive Swatch- & Selektor-Anatomie: Komponenten-Level-Designs für Größentasten, Farb-Swatches und Mengenzähler.
5. Aria-live- & Tastatur-Spezifikation: Klare Tastatur-Tab-Routen, Roving-Tabindex, Fokus-Erhaltung und Status-Ankündigung-Trigger für Screenreader-Konformität.

---

Workflow

1. Einrichtung des Dual-Pane-Spatial-Layouts (Desktop >1024px)

Strukturieren Sie die Desktop-Ansicht mit einem 2-Spalten-CSS-Grid oder Flexbox-Layout, proportional aufgeteilt:

• Linke Spalte: Media Pane (50–55%): Zeigt hochauflösende visuelle Produkt-Assets. Um zu verhindern, dass Benutzer während des langen Scrollens ihren Kaufkontext verlieren, setzen Sie die übergeordnete Spalte auf align-items: start; und machen den Medienbehälter sticky: position: sticky; top: calc(var(--global-header-height) + var(--space-m));.
• Rechte Spalte: Purchase Configurator / Buy Box (45–50%): Enthält alle Metadaten und Transaktionssteuerungen. Halten Sie sie in einer einzigen vertikalen Spalte mit einer klaren Hierarchie, die von oben nach unten lesbar ist.
• Grid-Abstand: Halten Sie einen großzügigen visuellen Abstand ein (z. B. gap: clamp(24px, 4vw, 48px)), um Medien und Steuerungen getrennt, aber vereint zu halten.

2. Gestaltung der visuellen Hierarchie des Purchase Configurator (Buy Box)

Wenden Sie den "F-Pattern"-Lesefluss in der Buy Box-Spalte an. Ordnen Sie Elemente logisch an:

1. Breadcrumbs & Kategorie-Indikator: Kleiner, gedämpfter Text oben (z. B. "Shop > Outdoor > Jacken") für Kontext.
2. Produkt-Header: Primärer Titel mit h1, gestaltet mit font-size: clamp(1.75rem, 3.5vw, 2.5rem) und fett.
3. Social-Proof-Zusammenfassung: Sternebewertungsblock mit Durchschnittsbewertung und aktivem Textlink, der direkt zum Bewertungsbereich scrollt (z. B. "★ ★ ★ ★ ☆ (128 Bewertungen)").
4. Preis-Engine-Block: Hochsichtbare Preisangabe. Fetter aktueller Preis, kleinerer durchgestrichener UVP (falls reduziert) und ein klares farbiges Sale-Badge (z. B. "Sparen Sie 20 €"). Platzieren Sie Ratenzahlungsinformationen (z. B. "Oder 4 Raten à 25 € mit Klarna") direkt darunter.
5. Varianten-Konfigurator: Größen, Farb-Swatches oder Materialien. Verwenden Sie einheitliche Label-Titel und Abstandsabstände (z. B. margin-bottom: var(--space-m)).
6. Bestands- & Versand-Beruhigung: Dezente Echtzeit-Bestandsalarme (z. B. "● Nur noch 3 auf Lager - Lieferung morgen") in der Nähe der Varianten.
7. Primäre Kauf-CTA: Prominenter, kontrastreicher "In den Warenkorb"- oder "Jetzt kaufen"-Button, der die gesamte Breite der Buy Box einnimmt.
8. Trust Badges & Rückgaberechte: Hochsichtbare Icon/Text-Cluster (z. B. "✓ Kostenloser Versand", "✓ 30 Tage Rückgaberecht") direkt unter der primären CTA, um Kaufwiderstände zu minimieren.

3. Strukturierung der linken Medien-Galerie

Organisieren Sie Bilder so, dass die Navigation schnell, leichtgewichtig und layoutstabil ist:

• Hauptanzeige-Container: Verankern Sie das aktive Bild in einem Container mit einem festen Seitenverhältnis (typischerweise 1:1 quadratisch oder 3:4 Hochformat) mit aspect-ratio: 1 / 1; object-fit: cover;. Dies verhindert kumulative Layoutverschiebungen (CLS) beim Laden von Bildern mit leicht unterschiedlichen Größen.
• Thumbnails-Navigation: Stapeln Sie unterstützende Thumbnails horizontal unter dem Hauptbild (oder vertikal links). Stellen Sie sicher, dass aktive Thumbnails eine kontrastreiche Umrandung und aria-current="true" haben.
• Vergrößerungs-/Zoom-Trigger: Fügen Sie ein dezentes Zoom-Symbol in der unteren rechten Ecke des aktiven Bildes ein. Das Auslösen öffnet eine Vollbild-, durchwischbare Modal-Lightbox (image-gallery-and-lightbox-system).

4. Erstellung des Mobile Stacking & Mobile Sticky Buy Drawer (<768px)

Auf mobilen Bildschirmen brechen mehrspaltige Layouts. Wenden Sie diese Anpassungsregeln an:

• Linearer vertikaler Fluss: Reduzieren Sie die Seite auf einen einspaltigen Stack. Platzieren Sie die Medien-Galerie ganz oben (volle Breite oder leicht versetzt), gefolgt von Produkt-Header, Preis, Varianten-Konfigurator, CTA und dann detaillierten Spezifikationen.
• Der Mobile Sticky Buy Drawer: Da die primäre CTA auf mobilen Geräten schnell aus dem Bild scrollt, implementieren Sie einen fixierten unteren Checkout-Drawer:
  • Halten Sie den Drawer versteckt, wenn die Inline-CTA auf dem Bildschirm sichtbar ist.
  • Sobald der Benutzer die Inline-CTA aus dem Bild scrollt (Schwellenwert > 600px Scroll), schieben Sie eine kompakte fixierte untere Leiste nach oben mit: [Produkt-Thumbnail + Titel] (optional/auf kleinen Viewports ausgeblendet), [Preis] und einer [primären In den Warenkorb-CTA] über die rechte Hälfte der Leiste.
  • Verwenden Sie padding-bottom: env(safe-area-inset-bottom);, um die Wischzonen mobiler Geräte zu respektieren und Überschneidungen mit Systemsteuerungen zu vermeiden.

5. Standardisierung der Interaktion mit benutzerdefinierten Swatch- & Varianten-Selektoren

Benutzerdefinierte Selektoren (wie Farbkreise oder Button-Matrizen) müssen poliert aussehen und sauber interagieren:

• Visuelle Swatches: Farbkreise müssen mindestens 32x32px auf Desktop und 40x40px auf mobilen Geräten sein. Aktive Swatches werden durch einen externen konzentrischen Randring (mit einem 2px weißen Spalt zwischen Farbkreis und Rand) angezeigt.
• Größen-Buttons: Verwenden Sie abgerundete Pill-Outlines für Größen (z. B. "S", "M", "L"). Streichen Sie nicht verfügbare Größen durch und dimmen Sie sie (z. B. Deckkraft 0.4 mit einem diagonalen Strich), aber lassen Sie sie fokussierbar, damit Screenreader "Größe S - Ausverkauft" ankündigen können.
• Dynamisches Feedback: Das Umschalten eines Swatches muss sofort den sichtbaren Preis, den Bestandshinweis und die Hauptbildgalerie aktualisieren, ohne die gesamte Seite neu zu laden.

6. Gestaltung für Tastaturnavigation und Screenreader-Zugänglichkeit

Benutzerdefinierte Konfiguratoren sind häufige Fehlerstellen bei der Zugänglichkeit. Wenden Sie diese strengen Richtlinien an:

• Semantische Swatch-Auswahl: Implementieren Sie Swatches mit standardmäßigen <input type="radio">, eingewickelt in <label>-Tags, gestaltet, um das native Eingabefeld visuell zu verstecken, während es vollständig zugänglich bleibt. Dies garantiert native Pfeiltasten-Navigation, automatische Radio-Gruppierung und Tastatur-Fokus-Zustände.
• Aria-Live-Ansagen: Wenn ein Benutzer einen Swatch oder eine Variante auswählt, verwenden Sie ein unsichtbares aria-live="polite"-Div, um die Aktualisierung an Screenreader anzukündigen (z. B. "Ausgewählte Farbe: Purpurrot. Preis aktualisiert auf neunundneunzig Dollar. Auf Lager.").
• Skip Links & kontextuelle Anker: Stellen Sie sicher, dass der "Bewertungsstern-Review-Link" einen sichtbaren Fokusring hat und den Tastaturfokus sanft zum Bewertungsbereich (#reviews) scrollt, indem Sie `tabindex="-1"" auf dem Ziel verwenden.

---

Entscheidungsregeln

Swatch-Stil-Auswahl

Optionenanzahl	Empfohlenes UI-Selektor-Muster	Design-Begründung
2 - 5 Optionen (z. B. Rot, Blau, Grün)	Visuelle Pill-Buttons oder Swatches	Sofortige Sichtbarkeit, geringe kognitive Belastung, einfache Ein-Tipp-Ziele.
6 - 15 Optionen (z. B. 10 Schuhgrößen)	Adaptives Flex-Grid-Matrix	Kompakte Gruppierung, passt ohne langes Scrollen sauber in die Buy Box-Spalte.
16+ Optionen (z. B. 50 Gerätemodelle)	Benutzerdefiniertes Auswahlmenü mit Suche	Verhindert visuelles Chaos und überwältigende "Auswahlparalyse"-Layoutblöcke.

Layout-Aufteilung (Desktop vs. Tablet-Viewports)

• Desktop (>1024px): 2-Spalten-Grid (Sticky Left Media, Scrolling Right Configurator).
• Tablet (768px - 1023px): Bewerten Sie die Spaltenbreiten neu. Wechseln Sie zu einer 50/50-Aufteilung oder reduzieren Sie das Layout frühzeitig auf einen Einspalten-Stack mit einem vereinfachten linksbündigen Container, wenn der Varianten-Konfigurator dichte Matrix-Eingaben enthält.
• Mobil (<768px): Strenger 1-Spalten-Stack. Aktiver Mobile Sticky Buy Drawer wird beim Scrollen ausgelöst.

Preisstrategie

• Sale-Präsentation: Rendern Sie den aktiven Angebotspreis in kontrastreichem Rot oder Markenfett (mindestens 24px/1.5rem). Rendern Sie den Originalpreis (UVP) durchgestrichen in gedämpftem Grau daneben und fügen Sie ein kompaktes, vollflächiges Pill-Badge hinzu, das die Ersparnis anzeigt (z. B. "Sparen Sie 30 €" oder "-25%"), um den wahrgenommenen Wert zu maximieren.
• Standard-Präsentation: Rendern Sie den aktiven Preis in fettem neutral-dunkel/neutral-hell (passend zur primären Körperüberschrift-Farbe).

---

Einschränkungen

• Barrierefreiheit (WCAG AA Minimum):
  • SC 2.4.11 Focus Not Obscured: Stellen Sie sicher, dass fokussierbare Varianten-Pills oder Mengen-Buttons niemals durch sticky Header oder den mobilen unteren Buy Drawer verdeckt werden. Verwenden Sie global scroll-margin-top und scroll-margin-bottom angemessen.
  • SC 2.5.8 Target Size: Jeder Varianten-Selektor, Swatch-Blase und Mengen-Inkrement-Trigger (+ / -) muss ein Tipp-Ziel von mindestens 24x24px mit klarer Trennung und 44x44px auf Touchscreens bieten.
  • Kontrast AA: Primärtext, Preise und ausgewählte Randzustände müssen ein Kontrastverhältnis von mindestens 4.5:1 aufweisen. Farbige Swatch-Kreise müssen ein begleitendes Textlabel haben (entweder benachbart oder als zugänglicher Tooltip/Screenreader-Text), um eine alleinige Abhängigkeit von Farbe zu vermeiden (SC 1.4.1 Verwendung von Farbe).
• Kumulative Layoutverschiebung (CLS) Erhaltung:
  • Reservieren Sie immer Platz für den Produkttitel, den Bildcontainer und dynamische Hinweisboxen. Ein Skelett-Zustand (skeleton-state-system) oder explizite Abmessungen müssen verhindern, dass Inhalte springen, wenn dynamische Bewertungen oder Bestandszähler geladen werden.
• Dynamische Viewport-Höhen: Der mobile Sticky Buy Drawer muss die sicheren Umgebungszonen (env(safe-area-inset-bottom)) respektieren, um sicherzustellen, dass physische Home-Wisch-Buttons nicht mit der primären Checkout-CTA kollidieren.

---

Häufige Fehlermuster

• Das "gestaffelte Buy Box"-Verschiebung: Größen- oder Farbvarianten-Buttons, die je nach Produkt unterschiedlich umbrechen, was dazu führt, dass die primäre "In den Warenkorb"-CTA dynamisch auf und ab springt.
• Der farbenblinde tote Winkel: Verwendung unbeschrifteter farbiger Kreise als Swatches. Farbenblinde Benutzer können nicht zwischen grünen und braunen Swatches unterscheiden, und Screenreader lesen nur "Farb-Button", wenn kein expliziter Label-Text zugeordnet ist.
• Die mobile virtuelle Tastatursperre: Positionierung einer sticky unteren Leiste auf mobilen Bildschirmen auf eine Weise, die Formularfelder blockiert oder überlappt, wenn die mobile virtuelle Tastatur aufgeklappt wird, wodurch der Benutzer eingeschlossen wird.
• Bildseitenverhältnis-Springen: Fehlende Deklaration expliziter Seitenverhältnisse im Hauptgalerie-Display, was dazu führt, dass die gesamten Layout-Spalten kollabieren und sich ausdehnen, wenn der Benutzer zwischen Quer- und Hochformat-Produktbildern umschaltet.
• Doppelte Scrollleisten-Verriegelung: Setzen der sticky linken Spalte zu hoch oder Überlaufen lassen, wodurch die linke Spalte innerhalb eines kleinen Fensters unabhängig scrollt und doppelte Scrollleisten nebeneinander entstehen.

---

Validierungskriterien

• Dual-Pane-Setup: Das Desktop-Layout verfügt über eine sticky left-hand Medien-Spalte und eine scrollende right-hand Buy Box-Spalte mit sauberen 1px Rändern oder klarer Weißraum-Aufteilung.
• Lineare mobile Kaskade: Der mobile Viewport reduziert das Raster auf einen einspaltigen Stack mit dem Medien-Galerie-Block ganz oben und der Buy Box darunter.
• Mobile Sticky Buy Drawer: Ein fixierter unterer Aktionscontainer erscheint, sobald die primäre CTA aus dem sichtbaren Bereich scrollt, mit korrekter env(safe-area-inset-bottom)-Polsterung.
• Swatch-Interaktion: Farb-Swatches (mindestens 32x32px) und Größen-Pills (24x24px Mindestgröße) sind fokussierbar, tastaturzugänglich und haben aria-current="true" für aktive Zustände.
• Barrierefreiheit: Farb-Swatch-Kreise haben zugehörige zugängliche Textlabels und aria-live="polite" verkündet Variantenänderungen.

---

Verwandte Systeme

• fluid-typography-system: Fließende skalierende Typografie-Tokens für PDP-Überschriften, Preise, Badges und Beschreibungstexte.
• fluid-spacing-system: Konsistente, reaktionsschnelle Abstandsabstände innen und zwischen den PDP-Elementen.
• accessible-color-system: Überprüfte Farbkontraste und semantische Statusfarben (Standard, Sale, Ausverkauft, Fokus).
• elevation-and-depth-system: Visuelle Hierarchie für Karten, Badges, den mobilen unteren Drawer und Produkt-Thumbnails.
• skeleton-state-system: Platzhalter-Ladezustände für Produktbilder, Titelblöcke und dynamische Bestandszähler.
• image-gallery-and-lightbox-system: Erweiterter Endlos-Swipe-Galerie-Modus und Vollbild-Modal-Lightbox für Zoom-Ansichten.
• card-ui-system: Einheitliches Kartenmuster, das für Produktlisten-Elemente auf PLP-Seiten nützlich ist.
• filter-and-sort-system: Kombiniertes Filtersystem, das auf Sammlungs-/Suchergebnisseiten zusammen mit dem PDP-Layout-System verwendet wird.
• pricing-table-ui-system: Alternativer Tabellen-Ansatz zum Auflisten mehrerer Preis-/Leistungsstufen.
• comparison-matrix-system: Gegenüberstellung der Funktionen verschiedener Produkte oder Dienstleistungen.
• form-design-system: Optimierte Eingabeaufforderungen für Kontaktformulare und einfache Abonnementmeldungen.
• article-layout-system: Fokussiert auf narrative Lesbarkeit und ohne E-Commerce-Transaktionskomponenten.