coastdigitalgroup/coastai-skills

Badge- und Tag-System

Zweck

Das Badge- und Tag-System bietet eine Methodik zur Gestaltung und Implementierung von kleinen, informativen Komponenten, die schnellen Kontext, Status oder Kategorisierung liefern. Dieses Skill stellt sicher, dass diese Elemente gegenüber dem primären Inhalt nachrangig bleiben, dabei aber sofort erfassbar, barrierefrei und logisch über eine Website organisiert sind.

Anwendungsfälle

• Statusanzeigen: Den Zustand eines Objekts anzeigen (z. B. „Aktiv“, „Ausstehend“, „Ausverkauft“).
• Kategorisierung: Inhalte nach Thema, Typ oder Sammlung kennzeichnen (z. B. „Produktivität“, „Tutorial“, „Neu im Sortiment“).
• Mengen/Anzahlen: Zahlen anzeigen, die mit einem Element verbunden sind (z. B. „12 Benachrichtigungen“, „5 Artikel im Warenkorb“).
• Filter-Sichtbarkeit: Aktive Filter anzeigen, die vom Benutzer entfernt werden können.
• Prioritätssignalisierung: Bestimmte Attribute wie „Bestseller“ oder „Dringend“ hervorheben.

Wann NICHT zu verwenden

• Primäraktionen: Verwenden Sie Badges oder Tags nicht als primären Call-to-Action (CTA); nutzen Sie Schaltflächen aus dem interactive-state-system.
• Große Inhaltsblöcke: Wenn die Information mehr als 2-3 Wörter erfordert, verwenden Sie ein card-ui-system oder die Standard-Typografie.
• Navigation: Tags können zwar zu gefilterten Ansichten führen, sollten aber nicht das primäre site-navigation-system ersetzen.
• Nur dekorative Symbole: Wenn das Element keine semantische Bedeutung hat, gehört es in das iconography-system.

Eingaben

1. Inhaltsintention: Handelt es sich um einen Status (Zustand), eine Kategorie (Metadaten) oder eine Anzahl (Zahl)?
2. Interaktionsanforderung: Ist das Element statisch oder entfernbar/anklickbar?
3. Hierarchiekontext: Was ist das übergeordnete Element? (z. B. eine Karte, eine Kopfzeile, eine Tabellenzeile).
4. Farb-Tokens: Vorhandene semantische Farbskala (Erfolg, Warnung, Fehler, Info).

Ausgaben

1. Spezifikation der visuellen Anatomie: Definitionen für Randradius (Pille vs. abgerundet), Abstände und Typografie.
2. Semantische Farbmatrix: Zuordnung von Farben zu bestimmten Bedeutungen (z. B. Grün = Erfolg).
3. Interaktionsspezifikationen: Visuelle Behandlung für Hover, Fokus und „Entfernen“ (X)-Aktionen.
4. Platzierungsregeln: Richtlinien, wo diese Elemente relativ zu Titeln und Bildern positioniert werden.

Arbeitsablauf

1. Unterscheidung zwischen Badge und Tag

Definieren Sie zuerst die funktionale Rolle:

• Badges: Zeigen in der Regel Status (z. B. „Live“) oder Anzahlen (z. B. „3“) an. Sie sind normalerweise nicht interaktiv oder verlinken auf einen einzelnen Zustand.
• Tags: Zeigen in der Regel Kategorisierung (z. B. „SaaS“) an. Sie sind oft interaktiv und erlauben Benutzern, Inhalte zu filtern oder den Tag zu entfernen.

2. Visuelle Anatomie festlegen

Definieren Sie den Basisstil, damit sie nicht wie Schaltflächen aussehen:

• Typografie: Verwenden Sie eine kleinere, oft in Großbuchstaben oder halbfette Schrift (z. B. 12px/0,75rem).
• Randradius:
  • Pille (Vollrund): Am besten für Status und Anzahlen.
  • Abgerundet (4-8px): Am besten für Kategorisierung und entfernbare Tags.
• Größe: Halten Sie die Höhe konsistent (z. B. 20px-24px), um eine gute Ausrichtung mit Text zu gewährleisten.

3. Semantische Logik zuweisen (Farbe & Symbole)

Verwenden Sie Farbe, um Bedeutung zu vermitteln, ohne den Benutzer zum Lesen zu zwingen:

• Erfolg (Grün): „Abgeschlossen“, „Aktiv“, „Verifiziert“.
• Warnung (Gelb/Orange): „Ausstehend“, „Niedriger Bestand“, „Entwurf“.
• Fehler (Rot): „Fehlgeschlagen“, „Kritisch“, „Nicht auf Lager“.
• Info/Neutral (Blau/Grau): „Neu“, „Kategorie“, „Metadaten“.

Regel: Kombinieren Sie Farbe immer mit Text oder einem Symbol, um die Barrierefreiheit für farbenblinde Benutzer zu gewährleisten.

4. Interaktive Zustände definieren

Wenn der Tag interaktiv ist:

• Hover/Fokus: Wenden Sie eine subtile Hintergrundverschiebung oder Rahmenänderung an.
• Entfernbar: Fügen Sie ein klares „X“-Symbol mit einer Mindestklickfläche von 24×24 px (WCAG 2.2 SC 2.5.8) hinzu, die je nach Layout auf bis zu 44×44 px vergrößert werden kann, um eine komfortable Touch-Bedienung zu ermöglichen.

5. Platzierung und Hierarchie bestimmen

• Overlay: Ein „Neu“-Badge in der oberen Ecke eines Bildes platzieren.
• Inline: Ein Status-Badge unmittelbar nach einem Titel in einem page-header-system platzieren.
• Gruppiert: Mehrere Tags unter einer Beschreibung in einem card-ui-system stapeln.

Entscheidungsregeln

• Der „Squint-Test“: Wenn ein Badge so hell ist, dass es von der H1 ablenkt, reduzieren Sie seine Sättigung oder verwenden Sie einen Outline-Stil.
• Anzahl begrenzen: Verwenden Sie nie mehr als 3 Tags auf einer einzelnen Karte, um visuelles Chaos zu vermeiden.
• Textlänge: Halten Sie Bezeichnungen auf 1-2 Wörter. Kürzen Sie ab oder verwenden Sie Tooltips, wenn Daten dynamisch und unvorhersehbar sind.
• Schaltflächenunterscheidung: Badges sollten eine andere visuelle Behandlung erhalten (z. B. kleinere Größe, anderer Radius) als die primären „Senden“- oder „Kaufen“-Schaltflächen.

Einschränkungen

• Barrierefreiheit: Text in Badges/Tags muss WCAG AA (4.5:1 Kontrast) erfüllen. Interaktive Tags müssen per Tastatur navigierbar sein.
• Responsivität: Tags in einer Gruppe sollten in die nächste Zeile umbrechen (flex-wrap: wrap), anstatt den Container zu überlaufen.
• Touch-Ziele: Entfernbare Tags müssen eine ausreichend große Zielfläche für die „Schließen“-Aktion haben (min. 24×24 px gemäß WCAG 2.2 SC 2.5.8; 44×44 px bevorzugt).

Häufige Fehlermuster

• Der „Button-Nachahmer“: Tags genau wie Schaltflächen aussehen zu lassen, führt dazu, dass Benutzer eine primäre Aktion erwarten.
• Farbabhängigkeit: Rot/Grün/Gelb ohne Textbeschriftung zu verwenden, macht es für farbenblinde oder Screenreader-Benutzer unmöglich, den Status zu verstehen.
• Tag-Suppe: Eine Karte mit 10+ Tags zu überladen, macht keinen davon nützlich.
• Inkonsistenter Radius: Pillenförmige Badges und eckige Tags in derselben Benutzeroberfläche zu mischen.

Validierungskriterien

• Badges und Tags sind optisch von Schaltflächen unterscheidbar.
• Semantische Farben werden konsistent verwendet (z. B. Grün bedeutet immer Erfolg).
• Kontrastverhältnisse erfüllen WCAG AA (4.5:1) für alle Farbvarianten.
• Interaktive Tags enthalten Fokus-Zustände und Touch-Ziele von mindestens 24×24 px (WCAG 2.2 SC 2.5.8).
• Die Elemente brechen auf mobilen Ansichten anmutig um.
• Symbole werden zusammen mit Farbe für kritische Statusanzeigen verwendet.