coastdigitalgroup/coastai-skills

Karussell- und Schieberegler-System

Zweck

Das Karussell- und Schieberegler-System bietet eine Methodik zum Entwerfen horizontaler Scroll-Container, die es Benutzern ermöglichen, eine Sammlung verwandter Inhalte (Karten, Bilder, Testimonials) zu durchsuchen, ohne übermäßig viel vertikalen Platz zu verbrauchen. Obwohl Karussells oft wegen geringer Interaktionsraten kritisiert werden, stellt ein systematischer Ansatz Affordanzen, wahrgenommene Leistung und Benutzerkontrolle in den Vordergrund, um sicherzustellen, dass die horizontale Entdeckung intuitiv, barrierefrei und wirkungsvoll ist.

Anwendungsfälle

• Produktentdeckung: Durchstöbern von „Ähnliche Produkte“ oder „Neuheiten“ im E-Commerce.
• Sozialer Beweis: Anzeigen einer Sequenz von Kundenreferenzen oder Fallstudien.
• Mediengalerien: Hochdichte Foto- oder Videokollektionen in einem begrenzten Ansichtsfenster.
• Onboarding/Feature-Touren: Führen von Benutzern durch eine lineare Abfolge von Wertversprechen.
• Dashboard-Widgets: Verwalten mehrerer Datenzusammenfassungen in einer horizontalen Reihe, um den Seitenrhythmus zu bewahren.

Wann NICHT verwenden

• Kritische aufeinanderfolgende Schritte: Wenn ein Benutzer jedes Element sehen muss, um eine Aufgabe abzuschließen, verwenden Sie einen vertikalen Stapel oder ein Raster, um sicherzustellen, dass nichts übersehen wird.
• Kleine Inhaltsmengen: Wenn Sie nur 2 oder 3 Elemente haben, ist ein Standardraster effizienter und erfordert weniger Interaktion.
• Unterschiedliche Inhaltstypen: Mischen Sie keine verschiedenen Kartentypen (z. B. einen Artikel neben einem Produkt) in einem einzigen Karussell; Konsistenz ist der Schlüssel zur Scanbarkeit.
• Wertarme Marketing-Slider: Vermeiden Sie große „Hero-Karussells“ für nicht zusammenhängende Werbeaktionen, die Benutzer typischerweise ignorieren (Bannerblindheit).

Eingaben

1. Inhaltsarchetyp: Was wird gescrollt? (z. B. card-ui-system-Karten, Bilder oder Textblöcke).
2. Kataloggröße: Wie viele Elemente sind in der Gesamtsammlung?
3. Container-Kontext: Ist es ein vollbreiter Abschnitt oder in einer Rasterspalte enthalten?
4. Interaktionsanforderungen: Benötigt es automatische Wiedergabe, Endlosschleife oder nur manuelles Scrollen?
5. Marken-Tokens: Abstands-, Typografie- und Farbsysteme für Steuerelemente und Indikatoren.

Ausgaben

1. Karussell-Anatomie-Spezifikation: Visuelle Definitionen für Container, Spur, Navigation (Pfeile) und Paginierung (Punkte).
2. Enthüllungsstrategie: Definierte Regeln für die „Teilweise Element-Enthüllung“, um horizontal versteckte Inhalte zu signalisieren.
3. Responsives Mapping: Regeln für Elemente pro Ansicht auf Mobilgeräten, Tablets und Desktops.
4. Barrierefreiheits-Blueprint: ARIA-Labels, Fokusverwaltung und Spezifikationen zur Bewegungskontrolle.

Workflow

1. Bestimmen Sie die Entdeckungsabsicht

Identifizieren Sie, wie der Benutzer mit den Elementen interagieren soll:

• Linear: Der Benutzer bewegt sich einzeln durch die Elemente (z. B. Onboarding).
• Erkundend: Der Benutzer kann springen oder überfliegen (z. B. Produktraster).
• Ambient: Inhalte bewegen sich automatisch (z. B. Logo-Laufband).

2. Legen Sie das „Enthüllungsmuster“ fest

Signalisieren Sie dem Benutzer, dass sich rechts weitere Inhalte befinden:

• Teilweise Enthüllung: Stellen Sie sicher, dass das „nächste“ Element teilweise sichtbar ist (normalerweise 10-20 % über die Container-Kante hinausragend). Dies ist der stärkste visuelle Hinweis auf die Scrollbarkeit.
• Verblassungseffekt: Wenden Sie einen subtilen Farbverlauf an den Rändern des Containers an.

3. Wählen Sie Navigationsmöglichkeiten

Stellen Sie klare Steuerelemente für die Bewegung bereit:

• Pfeile (Richtung): Platzieren Sie sie in der vertikalen Mitte der Spur (innerhalb oder außerhalb des Containers). Am besten für das Durchsuchen hoher Dichte.
• Paginierung (Punkte): Platzieren Sie sie unterhalb der Spur. Am besten für kurze Sequenzen (3-7 Elemente), um den Fortschritt anzuzeigen.
• Bildlaufleiste: Eine visuelle Fortschrittsleiste am unteren Rand. Am besten für sehr große Sammlungen.

4. Definieren Sie die responsive Spaltenlogik

Ordnen Sie zu, wie viele Elemente gleichzeitig sichtbar sind:

• Desktop: 3–5 Elemente pro Ansicht.
• Tablet: 2–3 Elemente pro Ansicht.
• Mobil: 1,2 Elemente pro Ansicht (1 vollständiges Element + teilweise Enthüllung).

5. Implementieren Sie Steuerelemente und Barrierefreiheit

• Tastaturunterstützung: Benutzer müssen mit den Pfeiltasten ArrowLeft und ArrowRight zwischen den Elementen navigieren können; Tab sollte zum nächsten fokussierbaren Steuerelement springen, nicht zwischen jeder Folie.
• Bewegungskontrolle: Wenn automatische Wiedergabe verwendet wird, stellen Sie eine sichtbare „Pause“-Schaltfläche bereit und stoppen Sie die Animation bei Hover, Fokus und wenn prefers-reduced-motion: reduce gesetzt ist (verlassen Sie sich nicht nur auf Hover/Fokus).
• ARIA-Rollen: Befolgen Sie das ARIA-APG-Karussellmuster – role="region" mit einem aria-label auf dem Container, aria-roledescription="carousel" und aria-live="polite" (oder "off" während der automatischen Wiedergabe) auf der Folien-Spur, damit Screenreader Änderungen ankündigen, ohne überfordert zu werden.
• Fokussichtbarkeit: Stellen Sie sicher, dass der Fokusindikator auf Pfeilen, Punkten und Folieninhalten niemals durch benachbarte Folien oder eine klebrige Enthüllungskante verdeckt wird (WCAG 2.2 SC 2.4.11).

Entscheidungsregeln

• Die „Teilweise Enthüllung“-Regel: Zeigen Sie auf Mobilgeräten immer einen kleinen Teil des nächsten Elements an, um horizontales Scrollen anzuzeigen, ohne auf Pfeile angewiesen zu sein.
• Pfeile vs. Punkte: Verwenden Sie Pfeile, wenn Sie mehr als 5 Elemente haben. Verwenden Sie Punkte nur, wenn die Gesamtzahl klein ist (3-7) und die Anzeige des Fortschritts wertvoll ist.
• Schleifenlogik: Verwenden Sie „Endlosschleife“ nur für die ambienten Entdeckung (wie Logos). Verwenden Sie für funktionale Inhalte (wie Produkte) einen „Ende-der-Spur“-Zustand, in dem der rechte Pfeil deaktiviert wird.
• Snap-Scroll: Verwenden Sie immer scroll-snap-type: x mandatory, um sicherzustellen, dass die Elemente nach einem Wisch oder Klick perfekt an den Container-Kanten ausgerichtet sind.

Einschränkungen

• Barrierefreiheit: Muss prefers-reduced-motion unterstützen. Alle interaktiven Steuerelemente (Pfeile/Punkte) müssen WCAG 2.2 SC 2.5.8 erfüllen (mindestens 24x24px Zielgröße, 44x44px bevorzugt für primäre Pfeile).
• Responsivität: Elemente müssen fließend sein. Der Karussellcontainer darf niemals einen horizontalen Seitenüberlauf verursachen; der Überlauf muss innerhalb der Komponente bleiben. Verwenden Sie clamp() für Elementbreite/-abstand, sodass die Anzahl der Elemente pro Ansicht sanft skaliert, anstatt bei festen Breakpoints zu springen.
• Wahrgenommene Leistung: Verwenden Sie skeleton-state-system für Elemente, die noch nicht geladen oder außerhalb des Bildschirms sind.

Häufige Fehlermuster

• Das „unsichtbare“ Karussell: Keine teilweise Enthüllung und keine Pfeile, sodass die Komponente wie ein statisches, defektes Raster aussieht.
• Die „Auto-Play“-Falle: Inhalte zu schnell rotieren, als dass Benutzer sie lesen könnten, oder keine Möglichkeit zum Stoppen bereitstellen.
• Defekter Snap: Elemente, die auf halbem Weg zwischen Ansichtsfenstern stoppen und Inhalte abschneiden.
• Fehlende Interaktionszustände: Pfeile, die keine Hover-/Fokus-Zustände haben oder nicht deaktiviert aussehen, wenn das Ende der Spur erreicht ist.
• Mobiler Überlauf: Ein Karussell, das die Breite der gesamten Seite vergrößert und dazu führt, dass Benutzer beim horizontalen Scrollen „verloren“ gehen.

Validierungskriterien

• Eine „Teilweise Enthüllung“ oder ein klarer visueller Indikator für versteckte Inhalte ist vorhanden.
• Navigationssteuerelemente (Pfeile/Punkte) erfüllen WCAG 2.2 SC 2.5.8 (mindestens 24x24px Berührungsfläche).
• Tastaturnavigation (Pfeiltasten) und Fokusverwaltung sind implementiert, und Fokusindikatoren werden niemals verdeckt (WCAG 2.2 SC 2.4.11).
• scroll-snap wird verwendet, um sicherzustellen, dass Elemente am Raster ausgerichtet sind.
• Die automatische Wiedergabe (falls verwendet) kann vom Benutzer pausiert werden und stoppt automatisch unter prefers-reduced-motion.
• Responsive Elementanzahlen sind für alle Haupt-Breakpoints definiert.
• ARIA-Landmarken und -Labels sind korrekt für Screenreader angewendet.