Karten-UI-System

Was macht Karten-UI-System?

Zweck

Das Karten-UI-System bietet eine Methodik zum Entwerfen und Strukturieren von Karten – den modularen Bausteinen, die verwendet werden, um zusammengehörige Informationen und Aktionen zu gruppieren. Karten sind die grundlegenden Bausteine entdeckungsintensiver Oberflächen und ermöglichen es Benutzern, mehrere verschiedene Elemente (Produkte, Artikel, Profile) innerhalb eines einheitlichen Rasters oder einer Liste zu scannen und zu vergleichen. Ein systematischer Ansatz für Karten stellt sicher, dass Inhalte scanbar, visuell kohärent sind und sich elegant an verschiedene Layoutkontexte (Raster, Karussells, Stapel) anpassen, während Barrierefreiheit und klare Absicht erhalten bleiben.

Anwendungsfälle

• Entwerfen von Produktrastern für E-Commerce-Listenseiten (PLPs).
• Erstellen von Artikel- oder Blogbeitrags-Vorschauen für Inhalts-Hubs.
• Erstellen von „Funktionen“- oder „Dienstleistungen“-Abschnitten auf einer Landingpage.
• Organisieren von Dashboard-Widgets, Feature-Highlights oder Datenzusammenfassungen.
• Implementieren von „Ähnliche Inhalte“-Abschnitten am unteren Ende von Seiten.
• Definieren einer „Ergebnis“-Komponente für Such- oder Filteransichten.

Wann NICHT verwenden

• Dichte Datentabellen: Wenn Benutzer bestimmte Attribute über viele Zeilen granularer Daten hinweg gleichzeitig vergleichen müssen; stattdessen responsive-data-tables verwenden (obwohl Karten ein responsiver Fallback sein können).
• Einzelne narrative Inhalte / einfache Textflüsse: Wenn der Inhalt einer strengen linearen Geschichte oder Standardabsätzen folgt, wo eine Kartenhülle unnötiges visuelles Rauschen hinzufügen oder den Lesefluss stören würde.
• Minimalistische aktionsorientierte UI: Wie eine einzelne Suchleiste oder ein einfaches Anmeldeformular, wo eine Kartenhülle unnötiges visuelles Rauschen hinzufügen würde.

Eingaben

1. Inhaltsanatomie: Eine Liste erforderlicher Elemente (z. B. Bild, Titel, Kategorie, Preis, Beschreibung, CTA).
2. Interaktionsabsicht: Ist die gesamte Karte anklickbar, oder gibt es bestimmte Aktionsziele?
3. Übergeordneter Kontext: Wo wird die Karte leben? (z. B. 3-spaltiges Raster, Seitenleiste, horizontaler Scroller?)
4. Inhaltsvarianz: Was ist die minimale und maximale Textmenge, die für Titel und Beschreibungen erwartet wird?
5. Vorhandene Systeme: Fluid-Abstände, Typografieskalen und Farbpaletten aus dem übergeordneten Designsystem.

Ausgaben

1. Karten-Anatomie-Spezifikation: Definierte Regionen (Header, Media, Body, Footer) und deren interne Abstände.
2. Karten-Blaupause: Eine strukturelle Definition des internen Layouts und der Schichten der Karte.
3. Responsive Varianten: Regeln, wie sich die Karte anpasst (z. B. Wechsel von vertikal zu horizontal auf Mobilgeräten).
4. Interaktionsspezifikation: Definierte Zustände (Hover, Focus, Active) und Definitionen anklickbarer Bereiche.
5. Barrierefreiheitskarte: Anleitung zur Überschriftenhierarchie und Tastaturnavigationsmustern.

Arbeitsablauf

1. Wende die „Drei-Punkte-Regel“ an und definiere die Anatomie

Jede Karte sollte drei klare Hierarchiepunkte haben, um die Scanbarkeit zu gewährleisten:

1. Der Anker (Visuell): Ein hochwertiges Bild oder Symbol, das sofortige Erkennung ermöglicht. Definiere das Seitenverhältnis für Bilder (z. B. 16:9, 1:1).
2. Der Kontext (Inhalt): Der Titel und die Kernmetadaten (z. B. Preis, Datum, Kategorie).
3. Das Ziel (Aktion): Eine klare primäre Aktion (z. B. „In den Warenkorb“, „Mehr lesen“).

Kartiere die vollständige interne Hierarchie: Header (Meta-Informationen wie Tags/Daten), Medienbereich, Inhalt/Hauptteil (Titel + Beschreibung) und Footer/Aktionen (CTAs, Preis, soziale Beweise).

2. Etabliere interne Abstände und das interne Raster

Wende das fluid-spacing-system auf das Innere der Karte an:

• Padding: Der Abstand zwischen dem Kartenrand und seinem Inhalt (normalerweise --space-m).
• Stapellücken: Der vertikale Raum zwischen internen Elementen (normalerweise --space-xs oder --space-s).

Bestimme, wie der Inhalt innerhalb der Karte verteilt wird:

• Von oben nach unten (Standard): Bild oben, Inhalt in der Mitte, Aktion unten.
• Nebeneinander (Horizontal): Bild links, Inhalt und Aktion rechts (am besten für mobile Listen oder Seitenleisten).
• Überlagerung: Inhalt liegt über dem Bild (erfordert kontrastreiche Behandlungen für die Lesbarkeit).

3. Gestalte die visuelle Hierarchie und handhabe Inhaltsvarianz

Wende Hebel des visual-hierarchy-system an, um Inhalte zu unterscheiden:

• Gewicht: Mache den Titel fett und größer als die Beschreibung.
• Kontrast: Verwende eine gedämpfte Farbe für Meta-Text (z. B. „Veröffentlicht am 24. Okt.“).
• Erhebung: Verwende Rahmen oder subtile Box-Schatten, um die Karte vom Hintergrund zu trennen.

Gestalte für das „Worst-Case“-Inhaltsszenario:

• Abschneiden vs. Umbruch: Entscheide, ob lange Titel mit Auslassungspunkten abgeschnitten oder auf mehrere Zeilen umbrochen werden sollen.
• Ausrichtung: Verwende Flexbox margin-top: auto auf dem Aktionscontainer, um sicherzustellen, dass Buttons perfekt über Karten unterschiedlicher Höhen in einem Raster ausgerichtet sind.

4. Etabliere Interaktionsmuster

Wähle ein funktionales Muster für die Interaktion:

• Die Große Box: Die gesamte Karte ist ein Link (erfordert sorgfältige Handhabung der Barrierefreiheit für Bildschirmlesegeräte).
• Die Verschachtelte Aktion: Nur bestimmte Buttons oder der Titel sind anklickbar.
• Der Hybrid: Die Kartenoberfläche hat einen Hover-Effekt, aber bestimmte Aktionen führen unterschiedliche Aufgaben aus (z. B. „In den Warenkorb“ vs. „Details anzeigen“).

Verwende subtile Transformationen beim Hover (z. B. leichte Anhebung, Rahmenfarbänderung), um Interaktivität anzuzeigen.

5. Definiere responsive Anpassungen und überprüfe die Barrierefreiheit

Plane, wie die Karte verschiedene Viewports übersteht:

• Vertikal zu Horizontal: Auf Mobilgeräten könnte eine Karte von einem Layout mit Bild oben zu einem Layout mit Bild links wechseln, um vertikalen Platz zu sparen.

Überprüfe die Barrierefreiheit vor der Freigabe:

• Überschriftenebenen: Stelle sicher, dass Kartentitel angemessene Überschriftenebenen verwenden (normalerweise H3 oder H4), um die Dokumentgliederung der Seite beizubehalten.
• Touch-Ziele: Jedes interaktive Element innerhalb der Karte muss WCAG 2.2 SC 2.5.8 erfüllen (mindestens 24x24px, mit ausreichendem Abstand, wenn kleinere Ziele unvermeidbar sind); bevorzuge 44x44px, wo der Platz es erlaubt.
• Alt-Text: Jedes Ankerbild muss einen beschreibenden Alt-Text haben oder als dekorativ markiert sein.
• Tastaturnavigation: Jedes interaktive Element innerhalb einer Karte muss über Tab erreichbar sein und einen Fokusindikator haben, der nicht durch benachbarte Karten oder sticky-Header abgeschnitten oder versteckt wird (WCAG 2.2 SC 2.4.11, Focus Not Obscured).

Entscheidungsregeln

• Die „Drei-Punkte“-Regel: Eine Karte sollte selten mehr als 3 unterschiedliche Prioritäten haben (z. B. 1. Bild, 2. Titel, 3. Preis). Zu viele Details machen sie zu einer „Mini-Seite“, nicht zu einer Karte.
• Die Seitenverhältnisregel: Verwende konsistente Seitenverhältnisse für Bilder (z. B. 4:3, 16:9 oder 1:1), um „springende“ Layouts in einem Raster zu verhindern.
• Nähewert: Der Abstand zwischen Titel und Beschreibung sollte kleiner sein als der Abstand zwischen Beschreibung und CTA.
• Die „Keine Waisen“-Regel: Wenn eine Karte Teil eines Rasters ist, muss das Raster verbleibenden Platz elegant behandeln (z. B. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))).
• Gleiche Höhen: In einem Raster sollten Karten in derselben Reihe idealerweise die gleiche Höhe haben (mit Flexbox align-items: stretch).
• Primäre vs. sekundäre Aktionen: Nur eine Aktion sollte visuell dominant sein (primärer CTA). Andere Aktionen (z. B. „Zur Wunschliste hinzufügen“) sollten Symbole oder kontrastarme Links sein.
• Interaktive Affordanz: Wenn eine Karte anklickbar ist, muss sie einen sichtbaren Hover-Zustand haben.

Einschränkungen

• Responsivität: Karten dürfen niemals die Viewport-Breite überschreiten oder eine feste Breite haben; sie sollten Spalten in einem responsive-grid-system überspannen und auf kleinen Bildschirmen vertikal stapeln oder zu einem horizontalen Layout wechseln.
• Barrierefreiheit: Muss die Tastaturnavigation unterstützen (Tab durch interaktive Elemente) und ein minimales Kontrastverhältnis von 4,5:1 für Text einhalten. Wenn die gesamte Karte anklickbar ist, verwende das „Stretched Link“-Muster, um redundante Links für Bildschirmlesegeräte zu vermeiden.
• Leistung: Vermeide übermäßig große Bilder; verwende srcset, um passend dimensionierte Assets für den Kartencontainer bereitzustellen.
• Layout: Bevorzuge CSS Grid mit auto-fill/auto-fit und clamp()-basierten Lücken gegenüber festen Breakpoints, damit Karten natürlich umfließen; verwende Container Queries (@container), wenn sich das interne Layout einer Karte an ihre eigene Breite anpassen muss, anstatt an den Viewport (z. B. dieselbe Karte in einem vollbreiten Raster und einer schmalen Seitenleiste).

Häufige Fehlermuster

• Der „Treppen-/Versetzte Button“-Effekt: Buttons, die aufgrund unterschiedlicher Titellängen auf unterschiedlichen Höhen sitzen, was das Raster unordentlich aussehen lässt.
• Übermäßige Dekoration: Verwendung zu vieler Rahmen, Schatten und Farbverläufe, die den Inhalt schwer lesbar machen.
• Niedrige Informationsdichte: Zu große Karten mit zu wenig Inhalt, die unnötiges Scrollen erzwingen.
• Informationsüberflutung: Versuch, zu viele Details in eine einzelne Karte zu packen, was die Drei-Punkte-Regel bricht und den Benutzer verwirrt.
• Unzugängliche / Unsichtbare Klickziele: Kleine Buttons oder Links, die auf Mobilgeräten schwer zu tippen sind, oder eine Karte, die nur mit einem winzigen Symbol als tatsächlichem Auslöser anklickbar aussieht.
• Fehlendes Padding: Text direkt an den Kartenrand oder das Bild quetschen.

Validierungskriterien

• Die „Drei-Punkte-Regel“ ist klar sichtbar (Anker, Kontext, Ziel).
• Interne Abstände (Padding/Lücken) verwenden Tokens aus dem fluid-spacing-system.
• Die Typografie folgt der etablierten Skala und Hierarchie der Website.
• Primäre Aktionen (Buttons) sind über die untere Reihe des Rasters ausgerichtet.
• Bildseitenverhältnisse sind über alle Karten im System hinweg konsistent.
• Interaktive Zustände (Hover/Focus) sind definiert und zugänglich.
• Karten in einem Raster sind korrekt ausgerichtet und handhaben unterschiedliche Inhaltslängen elegant.
• Überschriftenebenen folgen einer logischen Hierarchie innerhalb der Seite.
• Touch-Ziele erfüllen WCAG 2.2 SC 2.5.8 (mindestens 24x24px).
• Fokusindikatoren werden niemals durch überlappende Karten, Bilder oder sticky-Elemente verdeckt (WCAG 2.2 SC 2.4.11).