coastdigitalgroup/coastai-skills

System zur Datenvisualisierung

Zweck

Das System zur Datenvisualisierung bietet eine Methodik zum Entwerfen von Diagrammen und Grafiken, die über die Ebene einzelner Metriken hinausgeht. Es stellt sicher, dass quantitative Beziehungen – wie Trends im Zeitverlauf, Vergleiche zwischen Kategorien und Verteilungen von Werten – klar, genau und barrierefrei kommuniziert werden. Dieses System verhindert „visuelles Rauschen“ und kognitive Überlastung, indem es Regeln für Diagrammauswahl, optische Normalisierung, barrierefreie Farbcodierung und responsives Reflow festlegt.

Anwendungsfälle

• SaaS-Dashboards: Visualisierung von Nutzerwachstum, Umsatztrends oder Systemleistung.
• Finanzberichte: Darstellung von Portfolioverteilungen, Ausgabenkategorien oder Marktschwankungen.
• Analyseplattformen: Anzeige von Traffic-Quellen, Conversion-Funnels oder Verhaltens-Kohorten.
• Impact- & Nachhaltigkeitsberichte: Visualisierung von Umweltkennzahlen oder sozialen Auswirkungen im Zeitverlauf.
• Gesundheits- & Fitness-Apps: Verfolgung von Vitalwerten, Aktivitätsniveaus oder Fortschritten bei Zielen.

Wann NICHT zu verwenden

• Einzelne, hochwirksame Zahlen: Für isolierte KPIs (z. B. „Gesamtumsatz: 10.000€“) verwenden Sie metric-and-statistic-system.
• Rohe Mehrattribut-Daten: Wenn der Benutzer spezifische Werte für 20+ Elemente über mehrere Spalten hinweg lesen muss, verwenden Sie data-table-ui-system.
• Rein dekorative Infografiken: Wenn das Ziel künstlerischer Ausdruck oder narrative Geschichtenerzählung mit nicht-dynamischen, nicht-datengetriebenen Grafiken ist.
• Schritt-für-Schritt-Status: Für lineare Prozesse (z. B. „Schritt 2 von 4“) verwenden Sie step-progress-system.

Eingaben

1. Benutzerziel: Was versucht der Benutzer zu verstehen? (Vergleich, Trend, Verteilung oder Teil-vom-Ganzen).
2. Datentyp: Sind die Daten kategorisch (z. B. „Browsertyp“), temporal (z. B. „Umsatz nach Monat“) oder quantitativ (z. B. „Preis vs. Qualität“)?
3. Kardinalität: Wie viele Elemente oder Serien müssen gleichzeitig angezeigt werden?
4. Gerätebeschränkungen: Ziel-Viewports und Interaktionsmodi (Touch vs. Maus).
5. Marken-Tokens: Palette, Typografie und Abstände aus dem übergeordneten Designsystem.

Ausgaben

1. Diagrammauswahl-Map: Der gewählte Diagrammtyp (Linie, Balken, Kreis, Streuung) basierend auf Ziel und Daten.
2. Barrierefreies Farbschema: Eine Palette, die für Benutzer mit Farbblindheit (Protanopie, Deuteranopie, Tritanopie) unterscheidbar bleibt.
3. Anatomie- und Beschriftungsspezifikation: Regeln für Achsentitel, Legenden, Tooltips und Datenmarkierungen.
4. Responsive Übergangs-Map: Wie sich das Diagramm von Desktop zu Mobilgerät anpasst (z. B. Ausrichtungswechsel, Datenvereinfachung).

Arbeitsablauf

1. Kommunikationsziel identifizieren

Bevor Sie ein Diagramm auswählen, definieren Sie, was die Daten „aussagen“ sollen:

• Trend im Zeitverlauf: Verwenden Sie ein Liniendiagramm oder Flächendiagramm.
• Vergleich von Kategorien: Verwenden Sie ein Balkendiagramm (vertikal oder horizontal).
• Teil-vom-Ganzen-Beziehung: Verwenden Sie ein Donut-Diagramm oder eine Baumkarte (Vermeiden Sie Standard-Kreisdiagramme für >3 Kategorien).
• Korrelation/Verteilung: Verwenden Sie ein Streudiagramm oder Histogramm.

2. Diagrammtyp auswählen und normalisieren

Wenden Sie die „Wahrheit in Daten“-Regeln an, um Genauigkeit zu gewährleisten:

• Die Null-Baseline-Regel: Balkendiagramme MÜSSEN auf der Werteachse bei einer Null-Baseline beginnen, um Übertreibungen von Unterschieden zu vermeiden.
• Die „Seitenverhältnis“-Regel: Für Liniendiagramme ein ausgewogenes Seitenverhältnis beibehalten (normalerweise 2:1 oder 3:2), damit Steigungen nicht künstlich verstärkt oder abgeflacht werden.
• Minimalistische Geometrie: Entfernen Sie nicht wesentliches „Diagramm-Junk“ wie 3D-Effekte, schwere Gitterlinien oder Schatten, die keine Daten vermitteln.

3. Visuelle Hierarchie und Beschriftung festlegen

Wenden Sie visual-hierarchy-system auf die Diagrammkomponenten an:

• Direkte Beschriftung: Beschriften Sie Datenreihen wann immer möglich direkt neben den Linien/Balken, anstatt eine separate Legende zu verwenden, um Augenermüdung zu reduzieren.
• Hervorhebung: Verwenden Sie eine kontrastreiche Farbe für die „Aktuelle“ oder „Ziel“-Datenreihe und gedämpfte Neutrale für historische oder Benchmark-Daten.
• Hierarchie des Kontexts: Achsentitel sollten vorhanden, aber untergeordnet sein (kleiner/heller) im Vergleich zu den Primärdaten und dem Diagrammtitel.

4. Barrierefreie Farben und Muster anwenden

Stellen Sie sicher, dass die Daten von jedem wahrgenommen werden können:

• Farbenblinde-sichere Paletten: Verwenden Sie unterschiedliche Farbtöne und variierende Helligkeitsstufen. Vermeiden Sie es, nur Rot und Grün zu paaren, um „Schlecht“ vs. „Gut“ anzuzeigen; verwenden Sie Rot/Blau oder fügen Sie Symbole/Symbole hinzu.
• Redundante Kodierung: Verwenden Sie mehr als nur Farbe. Fügen Sie gestrichelte Linien, unterschiedliche Markierungsformen (Kreise, Quadrate, Dreiecke) oder unterschiedliche Muster/Texturen hinzu, um Serien zu unterscheiden.
• Kontrast: Stellen Sie sicher, dass der gesamte Text (Beschriftungen, Achsen) den WCAG-AA-Kontrast (4,5:1) gegenüber dem Hintergrund erfüllt.

5. Für Interaktion und Responsivität entwerfen

• Progressive Offenlegung: Verwenden Sie Tooltips, um bei Hover/Berührung genaue Werte anzuzeigen, sodass das Diagramm sauber und überfliegbar bleibt.
• Responsives Reflow:
  • Horizontal zu Vertikal: Ein breites vertikales Balkendiagramm auf dem Desktop sollte auf Mobilgeräten zu einem horizontalen Balkendiagramm wechseln, um horizontales Scrollen zu vermeiden.
  • Datenreduzierung: Reduzieren Sie auf Mobilgeräten die Anzahl der X-Achsen-Beschriftungen (z. B. jeden zweiten Monat anzeigen) oder aggregieren Sie Datenpunkte.
  • Seitenverhältnis-Sperrung: Stellen Sie sicher, dass das Diagramm seine Lesbarkeit behält; verwenden Sie aspect-ratio in CSS, um Platz zu reservieren und CLS zu verhindern.

Entscheidungsregeln

• Die „Kein Kreis“-Regel: Vermeiden Sie Kreis-/Donut-Diagramme, wenn Sie mehr als 5 Kategorien haben oder wenn die Unterschiede zwischen den Kategorien gering sind. Verwenden Sie stattdessen ein horizontales Balkendiagramm.
• Beschriftung vor Legenden: Wenn eine Legende benötigt wird, platzieren Sie sie so nah wie möglich an den Daten (z. B. über dem Diagramm oder rechtsbündig), anstatt ganz unten.
• Monochromatischer Erfolg: Ein gutes Diagramm sollte auch beim Drucken in Graustufen verständlich sein. Ist dies nicht der Fall, sind die Farbwahl oder Markierungen zu stark von der Farbe allein abhängig.
• Präzision vs. Überfliegen: Runden Sie Werte auf Dashboards (z. B. 1,2 Mio. statt 1.242.301) für sofortiges Überfliegen. Behalten Sie die hohe Präzision für die Tooltips bei.

Einschränkungen

• Barrierefreiheit: Diagramme müssen eine begleitende Datentabelle oder eine beschreibende aria-label haben, die die wichtigste Erkenntnis zusammenfasst. Verwenden Sie role="graphics-document" oder role="img" mit einer aria-label. Stellen Sie sicher, dass alle interaktiven Elemente (Markierungen) die Mindestzielgröße von 24x24 Pixel erfüllen.
• Responsivität: Diagramme dürfen niemals eine feste Pixelbreite haben; sie müssen fließend sein. Verwenden Sie für komplexe SVG-Diagramme viewBox zur Skalierung.
• Hierarchie: Der Titel des Diagramms sollte der markanteste Text sein, gefolgt von den Daten selbst.

Häufige Fehlermuster

• Kreisdiagramm-Überlastung: 10 Segmente in einem Kreisdiagramm darzustellen, macht die kleineren unmöglich zu unterscheiden.
• Die abgeschnittene Achse: Ein Balkendiagramm bei einem Wert ungleich Null beginnen zu lassen, um einen kleinen Unterschied riesig erscheinen zu lassen (täuschendes Design).
• Nur-Farben-Abhängigkeit: 5 Linien in einem Liniendiagramm nur durch ähnliche Blautöne zu unterscheiden, macht es für farbenblinde Benutzer unzugänglich.
• Legendenermüdung: Den Benutzer zu zwingen, zehnmal zwischen einem Farbschlüssel und den Daten hin- und herzusehen, um das Diagramm zu verstehen.
• Überlaufende Mobil-Diagramme: Den Diagrammtyp oder die Beschriftung nicht für Mobilgeräte anzupassen, was zu winzigem, unleserlichem Text oder kaputten Layouts führt.

Validierungskriterien

• Die Auswahl des Diagrammtyps entspricht dem Kommunikationsziel (z. B. Linie für Trend).
• Balkendiagramme beginnen bei einer Null-Baseline.
• Die Farbpalette ist farbenblindsicher und verwendet redundante Kodierung (Markierungen/Muster).
• Direkte Beschriftung wird verwendet, wo der Platz es zulässt; Legenden werden in unmittelbarer Nähe platziert.
• Das Diagramm ist fließend und passt sich korrekt an Mobilgeräte an (z. B. horizontales Reflow).
• Barrierefreiheit: aria-label bietet eine Zusammenfassung der Daten/Erkenntnisse.
• Interaktion: Tooltips liefern präzise Daten bei Hover/Berührung.
• Der gesamte Text erfüllt den WCAG-AA-Kontrast (4,5:1).