coastdigitalgroup/coastai-skills

System für Daten-Tabellen-UI

Zweck

Das Skill „System für Daten-Tabellen-UI“ bietet eine Methodik zur Organisation und Präsentation strukturierter, mehrattributiger Daten. Es stellt sicher, dass große Datensätze leicht zu scannen, zu vergleichen und zu bearbeiten sind, indem es klare Regeln für Ausrichtung, Abstand, Hierarchie und interaktive Elemente innerhalb eines tabellarischen Formats festlegt.

Anwendungsfälle

• Entwerfen von SaaS-Dashboards für Inventar, Benutzerverwaltung oder Abrechnung.
• Erstellen von Produktvergleichsmatrizen für E-Commerce- oder Marketingseiten.
• Implementieren von Log-Viewern oder Audit-Trails für technische Anwendungen.
• Organisieren von Finanzdaten oder Leistungskennzahlen in einer strukturierten Ansicht.
• Etablieren eines Komponentenbibliothek-Standards für „Datentabellen“ oder „Datenraster“.

Wann NICHT zu verwenden

• Einfache Schlüssel/Wert-Paare: Wenn Sie nur zwei Spalten haben (z. B. Bezeichnung: Wert), verwenden Sie stattdessen eine Beschreibungsliste (<dl>) oder eine einfache Liste.
• Erzählerischer Inhalt: Langformatiger Text oder Geschichten sollten mit Standard-Typografie und Abschnittsstrukturen dargestellt werden, nicht mit Tabellen.
• Layout-Raster: Verwenden Sie responsive-grid-system für das Seitenlayout; Tabellen sind ausschließlich für Daten gedacht.
• Karten mit wenigen Daten: Wenn die Daten stark visuell sind und wenige Attribute haben, verwenden Sie card-ui-system für eine bessere Interaktion.

Eingaben

1. Datenschema: Die Arten von Daten, die angezeigt werden sollen (Zeichenketten, Zahlen, Daten, Booleans, Aktionen).
2. Spaltenpriorität: Welche Attribute für die Identifikation wesentlich sind vs. sekundäre Details.
3. Benutzeraufgaben: Muss der Benutzer eine bestimmte Zeile finden, Werte über Zeilen hinweg vergleichen oder Massenaktionen durchführen?
4. Volumenerwartungen: Wie viele Zeilen und Spalten werden in einer typischen Ansicht erwartet?

Ausgaben

1. Tabellenanatomie-Spezifikation: Definierte Bereiche (Kopfzeile, Zeile, Zelle, Fußzeile) und deren interne Abstände.
2. Ausrichtungsmatrix: Regeln für die horizontale Ausrichtung basierend auf dem Datentyp.
3. Dichtevarianten: Definitionen für kompakte, normale und lockere Zeilenhöhen.
4. Interaktionskarte: Verhalten für Sortierung, Filterung, Zeilenauswahl und Inline-Aktionen.

Arbeitsablauf

1. Spaltentypen und Ausrichtung definieren

Wenden Sie die „Faustregel für Ausrichtung“ an, um die Scanbarkeit zu gewährleisten:

• Text/Standard: Linksbündig (hilft dem Auge, dem Wortanfang zu folgen).
• Zahlen/Metriken: Rechtsbündig (richtet Dezimalpunkte aus und ermöglicht einen schnellen Größenvergleich).
• Daten/Statusbezeichnungen: Zentriert oder linksbündig (abhängig von der Spaltenbreite).
• Aktionen: Rechtsbündig (normalerweise die letzte Spalte).

2. Visuelle Hierarchie festlegen (Die Kopfzeile)

Die Tabellenkopfzeile muss sich klar von den Daten unterscheiden:

• Stil: Verwenden Sie eine andere Hintergrundfarbe, fette Schrift oder eine Versal-Behandlung für <th>-Elemente.
• Persistenz: Verwenden Sie für lange Tabellen eine klebrige Kopfzeile, damit Benutzer beim Scrollen nicht den Kontext verlieren.

3. Zeilendichte und Rhythmus festlegen

Wählen Sie eine Dichtestufe basierend auf dem Anwendungsfall:

• Kompakt: Hohe Datendichte (z. B. 32px Höhe). Am besten für Power-User und Dashboards.
• Standard: Ausgewogen (z. B. 48px Höhe). Am besten für allgemeine Zwecke.
• Locker: Niedrige Dichte (z. B. 64px Höhe). Am besten für Marketing oder einfache Listen. Verwenden Sie Zebrastreifen oder dezente Rahmen, um Zeilen zu trennen und „Zeilensprünge“ zu reduzieren.

4. Für interaktive Daten gestalten

Definieren Sie, wie Benutzer die Daten manipulieren:

• Sortierung: Fügen Sie Indikatoren (Winkel) zu Kopfzeilen hinzu, die Sortierung unterstützen.
• Zeilenzustände: Definieren Sie Hover-, Ausgewählt- und Fokussiert-Zustände für Zeilen.
• Massenaktionen: Fügen Sie bei Bedarf eine Kontrollkästchenspalte ganz links hinzu.

5. Für Inhaltsvarianz planen

Behandeln Sie Randfälle bei der Datenlänge:

• Abschneiden: Verwenden Sie Auslassungspunkte für langen Text, der nicht für die Identifikation entscheidend ist.
• Umbrechen: Erlauben Sie das Umbrechen für wichtigen beschreibenden Text.
• Feste Breiten: Weisen Sie feste Breiten zu stabilen Spalten zu (z. B. Status, Datum) und flexible Breiten zu primären Identifikatoren (z. B. Name).

Entscheidungsregeln

• Die Scanbarkeitsregel: Die erste Spalte sollte immer der wichtigste Identifikator sein (z. B. Name, ID), um als Anker für die Zeile zu dienen.
• Zahlenausrichtung: Wenn der Wertevergleich die primäre Aufgabe ist, verwenden Sie nichtproportionale Schriftarten für Zahlen, um Ziffern perfekt auszurichten.
• Zebrastreifen vs. Rahmen: Verwenden Sie Zebrastreifen für sehr breite Tabellen, um dem Auge bei der horizontalen Verfolgung zu helfen; verwenden Sie Rahmen für kürzere, einfachere Tabellen.
• Aktionsplatzierung: Gruppieren Sie Aktionen in der letzten Spalte oder verwenden Sie ein sichtbares „Mehr“-Menü, um die Oberfläche sauber zu halten.
• Leere Zellen: Lassen Sie niemals eine Zelle leer. Verwenden Sie einen Bindestrich (—) oder „N/V“, um zu bestätigen, dass die Daten fehlen, nicht nur ein Ladefehler.

Einschränkungen

• Barrierefreiheit: Es müssen semantische <table>-Tags verwendet werden. Kopfzeilen müssen scope="col" haben. Beschriftungen müssen für den Kontext verwendet werden. Klebrige Kopfzeilen dürfen den Fokusindikator von Zellen oder Zeilenaktionen, die darunter gescrollt werden, nicht verdecken (WCAG 2.2 SC 2.4.11). Inline-Aktionsschaltflächen/Links müssen die Mindestzielgröße von 24x24px erfüllen (SC 2.5.8).
• Responsivität: Tabellen müssen Mustern aus responsive-data-tables folgen (Scrollen, Stapeln oder Umschalten), wenn die Viewports schrumpfen.
• Kontrast: Kopfzeilentext und Statusindikatoren müssen WCAG AA (4,5:1) erfüllen.

Häufige Fehlermuster

• Falsch ausgerichtete Zahlen: Linksbündiges Ausrichten von Zahlen macht es unmöglich, Größenordnungen auf einen Blick zu vergleichen.
• Die „Textwand“: Verwendung von Zeilen mit hoher Dichte ohne Zebrastreifen oder klare Kopfzeilenunterscheidung, was zu „Augenermüdung“ führt.
• Unsichtbare Kopfzeilen: Kopfzeilen, die den Daten zu ähnlich sehen, was es schwer macht zu erkennen, was die Spalten darstellen.
• Fehlende Aktionsaffordanz: Schaltflächen oder Links in Zellen, die zu klein zum Antippen sind oder nicht interaktiv wirken.
• Kein leerer Zustand: Anzeigen einer leeren Tabelle ohne eine Meldung „Keine Ergebnisse gefunden“.

Validierungskriterien

• Spaltenausrichtung folgt den Datentyp-Regeln (Text=Links, Zahlen=Rechts).
• Tabellenkopfzeilen sind visuell von den Zeilendaten unterscheidbar.
• Der primäre Identifikator ist in der ersten Spalte verankert.
• Semantisches HTML (<table>, <th>, scope) wird für die Struktur verwendet.
• Leere Zellen verwenden einen Platzhalter (z. B. —) anstatt leer zu sein.
• Interaktive Zustände (Hover/Auswählen) sind klar definiert.
• Das Design behandelt lange Inhalte elegant (Abschneiden oder Umbrechen).
• Klebrige Kopfzeilen verdecken niemals Fokusindikatoren auf Zeilen oder Zellenaktionen (WCAG 2.2 SC 2.4.11).
• Zeilenaktionen erfüllen die Mindestzielgröße von 24x24px (WCAG 2.2 SC 2.5.8).