coastdigitalgroup/coastai-skills

UI-System für den Warenkorb

Zweck

Das UI-System für den Warenkorb bietet ein zugängliches, konversionsstarkes visuelles und strukturelles Framework für Direct-to-Consumer (DTC) und Multi-Channel-E-Commerce-Warenkörbe. Als essentielle Transaktionsbrücke zwischen der Produktentdeckung (PDP) und dem Checkout-Abschluss muss der Warenkorb elegant Bestellaktualisierungen, Werbeanreize, Cross-Sells und Echtzeit-Versandfortschrittsanzeigen handhaben.

Ein systematischer Designansatz löst häufige Reibungspunkte von Warenkörben – wie unerwartete Layout-Verschiebungen (CLS) beim Aktualisieren von Artikeln, unleserliche Artikelzusammenfassungen, versteckte interaktive Steuerelemente auf Mobilgeräten, unzugängliche Mengenauswähler und das Fehlen eines klaren psychologischen Pfads zur Kasse. Dieses System gewährleistet konsistentes Styling, flüssige Mikrointeraktionen, Layout-Stabilität und strikte Einhaltung der WCAG AA-Barrierefreiheitsregeln.

Anwendungsfälle

• E-Commerce & Direct-to-Consumer (DTC)-Portale: Hochdynamische Einzelhandelsplattformen, die persistierende Mini-Warenkörbe und dedizierte Checkout-Überprüfungen nutzen.
• B2B- & Großhandelskatalogbestellungen: Bestelloberflächen für Massenbestellungen mit tabellarischen Listen, Multi-SKU-Auswählern und Schnellhinzufüge-Tools.
• Service- & Erlebnisbuchungsmaschinen: Organisation von mehrtägigen Tickets, Reservierungen, Miet-Zusatzoptionen oder Eventpässen.
• Software-, SaaS- & Digitalgüter-Bündler: Aggregation von Lizenzen, Service-Zusatzoptionen und Abonnementstufen vor der abschließenden Zahlung.

Wann NICHT zu verwenden

• One-Click- oder Single-Item-Checkouts: Für Plattformen, die direkt zur Kasse gehen (z.B. Apple Pay auf der PDP), verwenden Sie checkout-flow-optimization und product-detail-layout-system.
• Primäre Produktsuche: Verwenden Sie card-ui-system und filter-and-sort-system, um Artikelkarten oder Listenergebnisse zu präsentieren.
• Side-by-Side-Produktvergleich: Verwenden Sie comparison-matrix-system oder pricing-table-ui-system, um verschiedene Pläne oder Produktfunktionen zu vergleichen.
• Bulk-Produkt-CSV-Bestellung: Verwenden Sie data-table-ui-system für hochspezialisierte tabellarische Admin-Eingabebereiche.

Eingaben

1. E-Commerce-Design-Tokens: Globaler Schriftskalierung, Markenfarbpalette (primärer CTA, Warnrot, Erfolgsgrün), flüssiger Abstandsskalierung und Schattenelevationen für Oberflächen.
2. Produkt-SKU-Metadaten: Bildseitenverhältnis-Regeln, Titelbeschränkungen, Variantenstrings (z.B. „Farbe: Onyx / Größe: L"), Einheitspreis und Sale-/Rabattzustände.
3. Fulfillment- & Logikkonfigurationen: Schwellenwerte für kostenlosen Versand, Gutscheincode-Regeln, Versandschätzungen und Mengenlimits.
4. Cross-Sell-Katalogdaten: Empfehlungen, die auf aktuelle Warenkorbartikel abgebildet werden, um Impulskaufmodule zu füllen.
5. Mobile Viewport-Grenzen: Geräteabmessungen, Richtlinien für Touch-Zielbereiche und Safe-Area-Einschränkungen der Umgebung.

Ausgaben

1. Gleitende Mini-Warenkorb-Schublade (Slide-Out-Seitenpanel): Komponentenebene-Gitterbauplan für einen schnellen Warenkorbüberblick und einen Mobile-First-Schnellpfad zur Kasse.
2. Dedizierte Warenkorbseite (Ganzseitenraster): Zweispaltiges Layout (Haupt-Warenkorbliste + Bestellübersicht-Seitenleiste) für detaillierte Überprüfungen.
3. Architektur der Warenkorb-Artikellisten-Zeile: Detaillierte Spezifikationen für Abstände, Layouts, interaktive Mengensteuerung und Lösch-Elemente innerhalb einer einzelnen Zeile.
4. Fortschrittsanzeige für kostenlosen Versand & Werbeaktionen: Räumliches Layout, das Echtzeit-Feedback und dynamische Nachrichtenschwellenwerte anzeigt.
5. A11y-Routing & Screenreader-Spezifikation: Detaillierte Richtlinien für Fokusfallen, Tastatur-Tab-Reihenfolge, Roving-Tab-Index, aria-live-Ansagen und Touch-Ziel-Regeln.

---

Arbeitsablauf

1. Definieren der räumlichen Mechaniken: Mini-Warenkorb-Schublade vs. Dedizierte Warenkorbseite

Ein optimiertes Design muss beide wirkungsvollen visuellen Formate je nach Bildschirmgröße und Kontext unterstützen:

• Die Mini-Warenkorb-Schublade (Desktop & Mobil): Gleitet von der rechten Kante herein und bedeckt auf dem Desktop die rechten 400px–460px des Bildschirms, auf mobilen Geräten 100% des Bildschirms. Sie überlagert den Haupt-Viewport hinter einem halbtransparenten Hintergrund (background: rgba(0,0,0,0.5)). Verwenden Sie ein elastisches Layout, das die Schublade in drei feste Bereiche unterteilt:
  • Kopfzeile (feste Höhe): Warenkorbtitel (mit Anzahl), Schaltfläche zum Schließen (✕) und Fortschrittsanzeige für kostenlosen Versand.
  • Scrollbare Artikelliste (Flex Grow/Auto-Scroll): Die Liste der hinzugefügten Artikel (overflow-y: auto;).
  • Fußzeile (feste Höhe, angedockt): Zwischensumme, Steuer-/Versandhinweis, Werbenachricht und prominenter Checkout-CTA.
• Die Dedizierte Warenkorbseite (Desktop >1024px): Verwendet ein asymmetrisches zweispaltiges Layout-Gitter:
  • Linke Spalte (60–65% Breite): Enthält eine saubere, linksbündige tabellarische Ansicht der Warenkorbartikel, einschließlich Bulk-Entfernungsaktionen und Leerzuständen.
  • Rechte Spalte (35–40% Breite): Beherbergt die klebrige Bestellübersicht (position: sticky; top: var(--header-height);), enthält Zwischensummenberechnungen, geschätzten Versand, Eingabe für Gutscheincodes, dynamische Zahlungsabzeichen und die primäre Checkout-Schaltfläche.

2. Gestalten der Architektur der Warenkorb-Artikellisten-Zeile

Jede Zeile im Warenkorb repräsentiert eine Miniaturhierarchie. Standardisieren Sie den Layout-Fluss innerhalb eines Containers mit 100%-Breite mit CSS Flexbox oder Grid:

+-------------------------------------------------------------+
| [Thumbnail]  [Artikelname]                    [Löschen X]  |
| (64x64px)    Größe: M / Farbe: Blau                        |
|                                                              |
|              [-] [ 1 ] [+]                     [Preis]      |
|              (Mengeneingabe)                   $120,00      |
+-------------------------------------------------------------+

• Produkt-Thumbnail: Verankern Sie es in einem kompakten Container mit festem Seitenverhältnis (64x64px bis max. 96x96px) mit border-radius: var(--radius-s) und object-fit: cover;. Stellen Sie sicher, dass ein alternativer Text vorhanden, aber beschreibend ist (z.B. alt="Wolljacke in Marineblau").
• Metadaten-Stapel: Standardmäßiges vertikales Layout mit:
  • Titel: Fett, neutral-dunkel, mit Link zur PDP.
  • Variantenattribute: Gedämpftes Grau, kleinere Schriftgröße (z.B. 12px/0.75rem).
  • Einheitspreis: Dezent bei Einzelartikeln, hervorgehoben bei Menge > 1.
• Der Barrierefreie Mengenauswähler: Stellen Sie sicher, dass die Schaltflächen größer als normaler Text sind. Umfassen Sie die Wert-Eingabe mit flachen, visuellen Grenzen.
  • Dekrement-Schaltfläche (-), Mengeneingabefeld (Text oder Zahl), Inkrement-Schaltfläche (+).
  • Stellen Sie sicher, dass die Dekrement-Schaltfläche in ein sichtbares Mülleimer-Löschsymbol umgewandelt wird, wenn die Menge 1 beträgt, was anzeigt, dass ein Klick darauf den Artikel aus dem Warenkorb entfernt.
• Zeilenpreis: Richten Sie es unten rechts in der Zeile aus. Wenn der Artikel rabattiert ist, rendern Sie den ursprünglichen durchgestrichenen Preis in hellgrau direkt neben dem aktiven Verkaufspreis (dargestellt in kontrastreichem Rot oder Markenfett).
• Die Lösch-Schaltfläche: Platzieren Sie sie oben rechts in der Zeile. Verwenden Sie ein explizites aria-label="[Artikelname] aus dem Warenkorb entfernen", um zu verhindern, dass Screenreader nur „Schaltfläche" oder „X" ansagen.

3. Entwickeln der Fortschrittsmaschine für kostenlosen Versand & Werbeaktionen

Fördern Sie höhere durchschnittliche Bestellwerte (AOV), indem Sie Benutzern sofortiges Feedback zu Fulfillment-Zielen geben:

• Visuelle Fortschrittsanzeige: Verwenden Sie einen horizontalen Container (height: 8px) mit abgerundeten Enden, gestylt in Hellgrau, der von links nach rechts mit einer hellen Akzentfarbe (z.B. Grün, Blau) gefüllt wird, während sich die Zwischensumme des Benutzers dem Ziel nähert.
• Dynamischer Mikro-Text: Schreiben Sie klare, aktionsorientierte Nachrichten über oder unter der Anzeige:
  • Unter dem Schwellenwert: „Sie sind $15,00 vom kostenlosen Versand entfernt! [Mehr hinzufügen]"
  • Über dem Schwellenwert: „🎉 Herzlichen Glückwunsch! Sie haben kostenlosen Versand freigeschaltet!"
• Layout-Position: Positionieren Sie die Fortschrittsmaschine ganz oben sowohl in der Mini-Warenkorb-Schublade als auch auf der Haupt-Warenkorbseite, damit sie oberhalb der Falz sichtbar bleibt.

4. Optimieren des Checkout-CTA und der Bestellübersichts-Fußzeile

Der Checkout-Anker ist der zentrale Punkt des Warenkorb-Erlebnisses. Stellen Sie sicher, dass er als solider, vertrauenswürdiger Block wirkt:

• Berechnungsliste: Rendern Sie Zwischensumme, angewandte Rabatte (grüner Text mit Gutscheincode-Abzeichen, z.B. SOMMER20 [x]), geschätzten Versand (oder „Wird beim Checkout berechnet") und den endgültigen geschätzten Gesamtbetrag unter Verwendung von Key-Value-Listen-Layouts mit klaren Punktführern oder ausgerichteten Gittern.
• Primäre Checkout-Schaltfläche: Hoher Kontrast, volle Breite (100%), mit fetter Typografie. Muss bei einem Klick klare Ladeindikatoren anzeigen (z.B. Umwandlung des Beschriftungstexts „Sicherer Checkout" in einen Spinner), um Doppelklicks zu verhindern.
• Unterstützte Zahlungsabzeichen: Gedämpfte Graustufen- oder Standardfarb-Zahlungsicon-Abzeichen (Visa, Mastercard, Amex, PayPal, Apple Pay, Klarna) direkt unter der Checkout-Schaltfläche, um Vertrauen aufzubauen.

5. Erstellen einer responsiven, flüssigen Layout-Anpassung

Warenkörbe werden häufig auf mobilen Geräten genutzt. Gestalten Sie die Breakpoints mit höchster Präzision:

• Mobile Überlagerung des Mini-Warenkorbs: Bei Viewport-Breite <768px zwingen Sie den Mini-Warenkorb, 100vw zu umfassen. Platzieren Sie den Schließ-Auslöser explizit in einem großen, leicht antippbaren Ziel oben links oder oben rechts.
• Stapeln der Warenkorbseiten-Artikellisten: Auf mobilen Viewports klappt die horizontale Zeile ein:
  • Produkt-Thumbnail und Titel sitzen nebeneinander.
  • Der Mengenauswähler und der Preis klappen unter den Titel, wobei die Menge linksbündig und der Preis rechtsbündig auf derselben horizontalen Achse ausgerichtet sind.
• Fester mobiler Checkout-Bereich: Implementieren Sie auf mobilen Warenkorbseiten eine feste untere Fußzeile, die die Zwischensumme und den Checkout-CTA sicher über den Browser-UI-Elementen verankert, unter Verwendung von padding-bottom: env(safe-area-inset-bottom);.

6. Einrichten von Tastatur-Fokus-Routing & ARIA-Live-Trigger

Ein unzugänglicher Warenkorb blockiert Screenreader- und Nur-Tastatur-Benutzer beim Abschluss von Käufen.

• Fokusfalle des Mini-Warenkorbs: Wenn die Mini-Warenkorb-Schublade geöffnet wird:
  1. Lösen Sie den Fokus sofort auf das erste interaktive Element aus (normalerweise die Schließen-Schaltfläche oder der oberste Artikelname).
  2. Implementieren Sie eine Fokusfalle, die Benutzer daran hindert, zu Elementen zu tabben, die hinter dem Hintergrund verborgen sind.
  3. Fangen Sie die Escape-Taste (Esc) ab, um die Schublade zu schließen. Geben Sie den Fokus sauber an die Auslöser-Schaltfläche zurück, die den Warenkorb ursprünglich geöffnet hat (z.B. Header-Warenkorb-Symbol).
• Dynamische Ansagen (aria-live): Das Ändern der Menge, das Löschen eines Artikels oder das Anwenden eines Gutscheins muss Aktualisierungen sofort über ein unsichtbares aria-live="polite"-Element kommunizieren. Screenreader sollten ansagen: „Onyx-Jacke Menge auf zwei aktualisiert. Zwischensumme auf zweihundertvierzig Dollar aktualisiert."
• Fokusringe: Vermeiden Sie standardmäßige Browser-Umrisse; implementieren Sie einen benutzerdefinierten, kontrastreichen, nicht beschnittenen Fokusindikator-Ring um alle interaktiven Steuerelemente im Warenkorb.

---

Entscheidungsregeln

Auslöser für Dedizierte Warenkorbseite vs. Mini-Warenkorb-Schublade

Auslöser-Ereignis	Optimales UX-Antwortmuster	Design-Grundlage
Benutzer fügt Artikel von PDP hinzu	Mini-Warenkorb-Schublade aufschieben	Bestätigt erfolgreiches Hinzufügen zum Warenkorb, aktualisiert die Zwischensumme sofort, gibt sofortiges Feedback, hält den Benutzer aber auf der PDP, um weiter einzukaufen.
Benutzer klickt auf globales Warenkorb-Symbol im Header	Mini-Warenkorb-Schublade ein-/ausblenden (wenn Artikelanzahl > 0) / Zur Warenkorbseite navigieren (optional)	Schneller Zugriff zum Bearbeiten der Artikelliste, ohne eine neue Seite zu laden. Wenn der Katalog sehr komplex ist (z.B. hunderte B2B-Teile), navigieren Sie direkt zur Dedizierten Warenkorbseite.
Warenkorb ist leer (0 Artikel)	Inline-Leerzustand mit CTAs anzeigen	Statt einer leeren Seite oder dem Schließen der Schublade, rendern Sie eine klare Nachricht (z.B. „Ihr Warenkorb ist derzeit leer"), begleitet von 3–4 zielgerichteten, kategoriebasierten primären Shopping-Links.

Auswahl des Mengeneingabe-Stils

Oberflächenstil	Anwendungsfall	Design-Grundlage
Schritt-Schaltfläche [-] [ 1 ] [+]	DTC, Einzelhandel, Bekleidung, Standard-E-Commerce	Einfachste Ein-Tap-Interaktion auf Mobilgeräten, verhindert Tippfehler, einfaches Inkrementieren.
Nativer Texteingabe-Feld	Umfangreiche B2B-Katalogbestellblätter, Großhandelsmengen	Ermöglicht dem Benutzer die direkte Eingabe großer beliebiger Zahlen (z.B. 150), anstatt 150 Mal zu klicken.
Standard-Auswahl-Dropdown (Menge: 1) v	Hochpreisige Artikel, Elektronik, Abonnements mit Einzelmengenlimit	Begrenzt Käufe auf voreingestellte Mengenskalen (z.B. max. 10) und verhindert nicht behandelte Bestandsanfragen mit hohen Stückzahlen.

---

Einschränkungen

• Barrierefreiheit (WCAG AA Minimum):
  • SC 2.4.7 Fokus sichtbar: Die Warenkorb-Schublade muss gut sichtbare Fokusumrisse auf Schließen-Schaltflächen, Titelankern, Schritt-Schaltflächen und Eingaben beibehalten.
  • SC 2.5.8 Zielgröße: Antippziele für Mengen-Inkrement (+) und Dekrement (-) Schaltflächen, Lösch-Mülleimer und Entfernen-Links für Werbeaktionen müssen mindestens 24x24px auf dem Desktop und 44x44px auf mobilen Viewports betragen.
  • SC 1.1.1 Nicht-Text-Inhalt: Jedes Bild muss einen klaren alternativen Text haben. Dekorative Hintergründe in Leerzuständen müssen ignoriert werden (role="presentation" oder alt="").
• Prävention von kumulativen Layout-Verschiebungen (CLS):
  • Standardisieren Sie die Höhen der Artikellisten-Zeilen oder reservieren Sie minimale Skeleton-Zustandshöhen während der Ladezustände.
  • Dynamische Berechnungen von Werbeaktionen dürfen die Checkout-CTA-Schaltfläche nicht plötzlich aus dem Bildschirm oder unter die Falz drücken.
• Dynamische Überlagerungs-Scroll-Sperre:
  • Das Öffnen der Mini-Warenkorb-Schublade-Überlagerung muss das Hintergrundscrollen des primären Body-Elements sperren (overflow: hidden; auf <body> angewandt). Dies verhindert doppeltes Scrollen und springende Navigationsartefakte.

---

Häufige Fehlermuster

• Der Geister-Warenkorb-Schließen: Das Schließen der Schublade oder das Klicken außerhalb setzt den Fokusindex vollständig zurück, wodurch Tastaturbenutzer ganz nach oben auf die zugrunde liegende Seite zurückgeworfen werden und gezwungen sind, alles erneut zu durchtabben.
• Das kryptische Löschziel: Das Gestalten von Mülleimer-Symbolen oder „X"-Lösch-Auslösern als unbeschriftete Textsymbole, wodurch Screenreader „Schaltfläche" oder „unbeschriftete Schaltfläche" ausgeben und Benutzer ihren Warenkorb nicht bereinigen können.
• Die verzögerte Aktualisierungsdrift: Das Zulassen einer Verzögerung zwischen dem Klicken auf + und der Aktualisierung des Preises ohne Anzeige eines Lade-Spinners. Wenn der Benutzer dreimal schnell auf + klickt, driftet der Preis hinter die Aktion und führt zu ungenauen Gesamtsummen.
• Die blockierte mobile Tastatur: Das Zentrieren einer Gutschein-Eingabe auf der dedizierten Warenkorbseite in einem Layout-Stapel, der vollständig blockiert oder aus dem sichtbaren Bildschirm gedrückt wird, wenn die mobile Tastatur des Geräts geöffnet wird.