coastdigitalgroup/coastai-skills

Tab-UI-System

Zweck

Das Tab-UI-System bietet eine Methodik zum Entwerfen und Strukturieren von Tabs – Navigationselemente, die es Benutzern ermöglichen, zwischen verwandten Inhaltsbereichen innerhalb desselben Kontexts zu wechseln. Tabs sind ein Schlüsselmuster für die progressive Offenlegung und helfen, die kognitive Last zu reduzieren, indem Informationen in logische Gruppen organisiert werden, ohne dass ein Seitenneuladen erforderlich ist. Ein systematischer Ansatz stellt sicher, dass Tabs klare aktive Zustände, logische Gruppierung haben und sich geräteübergreifend elegant anpassen.

Anwendungsfälle

• Produktdetailseiten: Organisation von Spezifikationen, Bewertungen, Versanddetails und FAQ in scannbare Abschnitte.
• Kontoeinstellungen: Gruppierung von Benutzerprofil, Sicherheit, Benachrichtigungen und Abrechnungseinstellungen.
• Dashboards: Wechseln zwischen verschiedenen Datenansichten (z. B. „Übersicht“, „Analytik“, „Verlauf“).
• Suchergebnisse: Filtern von Ergebnissen nach Typ (z. B. „Alle“, „Bilder“, „Videos“, „Nachrichten“).
• Komplexe Formulare: Aufteilung großer Formulare in thematische Abschnitte (falls die Schritte nicht in einer strengen Reihenfolge abgeschlossen werden müssen).

Wann NICHT zu verwenden

• Sequenzielle Schritte: Wenn der Benutzer Inhalte in einer bestimmten Reihenfolge abschließen muss, verwenden Sie stattdessen step-progress-system.
• Globale Navigation: Tabs sollten Inhalte innerhalb einer Seite verwalten; verwenden Sie site-navigation-system für die Bewegung zwischen verschiedenen Seiten.
• Vergleichen von Informationen: Wenn ein Benutzer Inhalte aus zwei Abschnitten gleichzeitig sehen muss, verwenden Sie keine Tabs. Ziehen Sie ein Akkordeon oder ein nebeneinander angeordnetes Layout in Betracht.
• Zu wenige Elemente: Wenn es nur zwei Elemente gibt und der Inhalt kurz ist, erwägen Sie, beide anzuzeigen oder einen einfachen Umschalter zu verwenden.
• Zu viele Elemente: Wenn Sie mehr als 6-7 Tabs haben, wird die Benutzeroberfläche überladen. Erwägen Sie eine Seitenleisten-Navigation oder einen Dropdown-basierten Filter.

Eingaben

1. Inhaltsinventar: Eine Liste von Labels und den zugehörigen Inhaltsbereichen.
2. Nutzungskontext: Wo die Tabs platziert werden (z. B. Hauptinhaltsbereich, Seitenleiste oder innerhalb eines Modals).
3. Prioritätsstufe: Ist dies der primäre Fokus der Seite oder ein sekundäres Detail?
4. Vorhandene Systeme: Flüssige Abstände, Typografieskalen und interaktive Zustandsdefinitionen.

Ausgaben

1. Tab-Anatomie-Spezifikation: Visuelle Definitionen für Trigger (die Tabs), die Tabliste (der Container) und die Bereiche (der Inhalt).
2. Zustandsmatrix: Definierte visuelle Behandlungen für die Zustände Standard, Hover, Aktiv, Fokus und Deaktiviert.
3. Responsive Strategie: Regeln für die Handhabung von Überlauf (scrollbar, umbrochen oder in Akkordeon/Auswahl zusammengeklappt).
4. Barrierefreiheits-Blaupause: ARIA-Rollen, Tastaturbelegung und Regeln für das Fokusmanagement.

Arbeitsablauf

1. Definieren der Inhaltsbeziehung

Stellen Sie sicher, dass alle Tabs auf derselben Hierarchieebene sind und sich auf dieselbe übergeordnete Entität beziehen. Labels sollten kurz sein (1-3 Wörter) und eine konsistente Groß-/Kleinschreibung verwenden.

2. Etablieren der visuellen Anatomie

Wenden Sie das visual-hierarchy-system an, um die Tabliste zu definieren:

• Der aktive Tab: Muss am prägnantesten sein. Verwenden Sie eine Kombination aus Farbe, Schriftstärke und einem visuellen Indikator (wie einer unteren Linie oder Hintergrundfüllung).
• Der inaktive Tab: Sollte interaktiv, aber sekundär aussehen.
• Der Inhaltsbereich: Teilt normalerweise einen visuellen Container oder eine Ausrichtung mit dem aktiven Tab, um ein „verbundenes“ Gefühl zu erzeugen.

3. Definieren der Interaktionslogik

• Sofortiges Umschalten: Der Inhalt sollte sich bei Interaktion sofort ändern.
• Hover vs. Klick: Tabs dürfen niemals bei Hover umschalten; sie erfordern einen expliziten Klick oder Tippen.
• Standardzustand: Der erste Tab ist standardmäßig aktiv, es sei denn, der Benutzer kehrt zu einem bestimmten Zustand zurück.

4. Optimierung für Abstände und Berührung

Wenden Sie das fluid-spacing-system und das interactive-state-system an:

• Berührungsziele: Jeder Tab-Trigger sollte WCAG 2.2 SC 2.5.8 (mindestens 24x24px) erfüllen; für primäre Tab-Oberflächen werden 44x44px bevorzugt.
• Interne Abstände: Verwenden Sie konsistente Abstände zwischen den Tabs (normalerweise --space-s oder --space-m).
• Aktiver Indikator: Stellen Sie sicher, dass die „Aktiv“-Linie oder der Hintergrund dick genug ist, um deutlich sichtbar zu sein.

5. Planung für Responsivität

Bestimmen Sie, wie die Tabliste schmale Viewports handhabt:

• Horizontaler Scroll: Das häufigste Mobilmuster. Lassen Sie die Tabliste horizontal überlaufen, mit einem subtilen Verblassen oder einem Pfeil, um mehr Inhalt anzuzeigen.
• Akkordeon-Transformation: Für langen Inhalt transformieren Sie die Tabs auf Mobilgeräten in ein Akkordeon-Layout.
• Auswahlmenü: Ersetzen Sie die Tabliste bei vielen Hilfselementen auf Mobilgeräten durch ein <select>-Element.

Entscheidungsregeln

• Die „Labels“-Regel: Wenn Labels in der Länge stark variieren, verwenden Sie linksbündige Tabs. Wenn sie konsistent und wenige sind, verwenden Sie zentrierte oder ausgerichtete Tabs.
• Horizontal vs. Vertikal:
  • Horizontal: Standard für die Organisation über dem Inhalt.
  • Vertikal: Am besten für lange Listen (Einstellungen) oder wenn horizontaler Platz begrenzt ist, aber vertikaler Platz reichlich vorhanden ist.
• Die „Sieben“-Regel: Begrenzen Sie horizontale Tabs auf 7 Elemente. Wenn Sie mehr benötigen, überdenken Sie Ihre Informationsarchitektur oder verwenden Sie ein vertikales Layout.
• Aktiver Indikator: Verwenden Sie immer mehr als nur Farbe, um den aktiven Zustand anzuzeigen (z. B. eine 2px-3px Unterstreichung oder eine fette Schriftstärkenänderung).

Einschränkungen

• Barrierefreiheit: Befolgen Sie das ARIA-APG-Tabs-Muster — role="tablist" auf dem Container, role="tab" mit aria-selected und aria-controls auf jedem Trigger und role="tabpanel" mit aria-labelledby, das auf seinen Tab verweist. Nur der aktive Tab hat tabindex="0"; inaktive Tabs verwenden tabindex="-1" (Roving Tabindex).
• Aktivierungsmodell: Bevorzugen Sie die automatische Aktivierung (Pfeiltasten bewegen den Fokus und schalten den Bereichsinhalt sofort um) für schnelle, leichte Bereiche. Verwenden Sie die manuelle Aktivierung (Pfeiltasten bewegen nur den Fokus; Enter/Leertaste bestätigt), wenn das Umschalten eine teure Netzwerkanfrage auslöst.
• Tastaturnavigation: Pfeiltasten links/rechts (oder hoch/runter bei vertikalen Tabs) bewegen sich zwischen den Tabs; Home/Ende springen zum ersten/letzten Tab; Tab bewegt den Fokus aus der Tabliste in den aktiven Bereich.
• Kontrast: Aktive und inaktive Zustände müssen WCAG AA (4,5:1 für Text) erfüllen.
• Responsivität: Tabs dürfen niemals horizontales Seiten-Scrollen verursachen; die Tabliste selbst sollte den Überlauf handhaben.

Häufige Fehlermuster

• Versteckter aktiver Zustand: Verwendung einer subtilen Farbänderung, die schwer zu sehen ist, sodass Benutzer unsicher sind, welchen Abschnitt sie betrachten.
• Inhaltssprung: Tab-Bereiche, die stark in der Höhe variieren, wodurch die Fußzeile beim Wechseln der Tabs auf und ab springt.
• Falsch verwendet für Navigation: Verwendung von Tabs, um auf separate Seiten zu verlinken, was die Benutzererwartungen an sofortigen Inhaltswechsel bricht.
• Mobile Abschneidung: Abschneiden von Tab-Labels auf Mobilgeräten, ohne eine Möglichkeit zu bieten, den Rest zu sehen.
• Fehlende Fokus-Zustände: Vergessen, einen sichtbaren Fokusring für Tastaturbenutzer zu entwerfen.

Validierungskriterien

• Alle Tabs beziehen sich auf denselben Kontext.
• Der aktive Zustand ist visuell unterscheidbar (mehr als nur Farbe).
• Jeder Tab-Trigger erfüllt mindestens das WCAG 2.2 24x24px Berührungsziel-Minimum (44x44px bevorzugt).
• ARIA-Rollen (tablist, tab, tabpanel) sind korrekt zugewiesen, mit aria-selected und Roving tabindex implementiert.
• Tastaturnavigation (Pfeiltasten, Home/Ende) wird gemäß dem ARIA-APG-Tabs-Muster unterstützt.
• Responsives Verhalten (Scroll, Akkordeon oder Auswahl) ist definiert.
• Inhaltsbereiche behalten eine konsistente visuelle Beziehung zu den Tabs bei.