Metrik- und Statistiksystem

Was macht Metrik- und Statistiksystem?

Zweck

Das Metrik- und Statistiksystem bietet eine Methodik zur Visualisierung quantitativer Daten, die sofort verständlich und kontextuell relevant ist. Es geht über das bloße „Anzeigen einer Zahl“ hinaus, indem es Regeln für numerische Hierarchie, Trendvisualisierung und semantische Farbgebung festlegt. Dadurch können Benutzer die Bedeutung eines Wertes (z. B. „Ist 42 % gut oder schlecht?“) ohne tiefgehende Analyse erfassen.

Anwendungsfälle

• SaaS-Dashboards: Anzeige von Key Performance Indicators (KPIs) wie MRR, Churn oder aktive Benutzer.
• Marketing-Social-Proof: Präsentation von „Auf einen Blick“-Abschnitten (z. B. „10.000+ Kunden“, „99,9 % Verfügbarkeit“).
• Gesundheits- und Überwachungsdashboards: Visualisierung von Systemleistung, Fehlerraten oder Ressourcennutzung.
• Persönliche Analysen: Darstellung von Fortschritten bei Zielen in Fitness-, Finanz- oder Produktivitäts-Apps.
• E-Commerce: Anzeige von Bewertungszahlen, Lagerbeständen oder „in den letzten 24 Stunden verkaufte Artikel“.

Wann NICHT zu verwenden

• Rohdatensätze: Wenn der Benutzer 10+ Zeilen mit mehreren Attributen sortieren, filtern oder vergleichen muss, verwenden Sie das data-table-ui-system.
• Komplexe Beziehungen: Wenn das primäre Ziel darin besteht, die Beziehung zwischen Variablen im Zeitverlauf darzustellen, verwenden Sie eine vollständige Charting-/Graphing-Bibliothek (nicht von diesem atomaren System abgedeckt).
• Erzählerischer Inhalt: Zahlen innerhalb von Sätzen sollten der Standardtypografie folgen; dieses System ist für „Anzeige“-Metriken gedacht.
• Wertarme Metadaten: Kleine Zählungen (wie Benachrichtigungspings) sollten das badge-and-tag-system verwenden.

Eingaben

1. Der Wert: Die primäre Zahl oder der Prozentsatz, der angezeigt werden soll.
2. Das Label: Eine klare, prägnante Beschreibung, was der Wert darstellt.
3. Kontext/Trend: Vergleichsdaten (z. B. vs. letzten Monat, vs. Ziel).
4. Einheit/Format: Währungssymbole, Prozentsätze oder Einheiten (z. B. „ms“, „GB“).
5. Hierarchie-Priorität: Ist dies ein „Primärer KPI“ oder eine „Unterstützende Statistik“?

Ausgaben

1. Stat-Karten-Spezifikation: Die räumliche Anordnung von Wert, Label und Trend innerhalb eines Containers.
2. Typografieskala: Definierte Größen für „Anzeige“-Zahlen vs. Labels.
3. Trendlogik: Visuelle Regeln für Aufwärts-, Abwärts- und Neutrale Zustände (Farbe + Symbole).
4. Responsive-Strategie: Wie Metrikraster auf Mobilgeräten zusammenbrechen oder skaliert werden.

Arbeitsablauf

1. Kategorisieren Sie den Metriktyp

Bestimmen Sie die erforderliche visuelle „Schwerkraft“:

• Stufe 1: Heldenmetrik. Groß, zentriert, oft ohne Rahmen. Wird für Social Proof auf oberster Ebene auf Landing Pages verwendet.
• Stufe 2: KPI-Karte. In einer Karte enthalten, oft in einem Raster. Für Dashboard-Zusammenfassungen.
• Stufe 3: Inline-Statistik. Kleine, hochdichte Anzeige. Wird in Kopfzeilen oder Seitenleisten verwendet.

2. Etablieren Sie die numerische Hierarchie

Wenden Sie die Regeln der „Anzeige-Typografie“ an:

• Der Wert: Muss das größte Element sein (normalerweise 200–400 % der Körpergröße).
• Das Label: Entweder direkt über oder unter dem Wert platziert. Verwenden Sie eine gedämpfte Farbe oder eine kleinere Schriftstärke, um sicherzustellen, dass es nicht konkurriert.
• Die Einheit: Symbole (%, $) sollten etwas kleiner als die Zahl sein, um zu verhindern, dass sie den Fokus des Auges auf den Wert „unterbrechen“.

3. Stellen Sie Trend- und Vergleichskontext bereit

Eine Zahl ohne Kontext ist oft bedeutungslos. Fügen Sie eine „Vergleichsschicht“ hinzu:

• Trendindikator: Verwenden Sie einen Pfeil (↑/↓) zusammen mit einer prozentualen oder absoluten Änderung.
• Zeitraum-Label: Geben Sie immer den Vergleichszeitraum an (z. B. „vs. letzte 30 Tage“).
• Semantische Farbgebung: Wenden Sie die Farbe auf den Trend an, nicht unbedingt auf den Wert.
  • Positiver Trend: Grün (üblich).
  • Negativer Trend: Rot (üblich).
  • Neutral: Grau.

4. Wenden Sie räumlichen Rhythmus an (Das Raster)

Metriken werden selten isoliert angezeigt. Gruppieren Sie sie mit responsive-grid-system:

• Raster-Layout: 3 oder 4 Spalten auf dem Desktop; 1 oder 2 auf Mobilgeräten.
• Interner Abstand: Sorgen Sie für reichlich Weißraum (--space-l oder --space-xl) um den Wert, damit er „poppt“.

5. Gestalten Sie für Lade- und Leerzustände

• Skeleton: Verwenden Sie skeleton-state-system für den Wert und den Trend, während Daten geladen werden.
• Nullzustände: Wenn eine Metrik 0 ist, entscheiden Sie, ob sie als „0“ oder als Gedankenstrich (—) angezeigt werden soll.

Entscheidungsregeln

• Die „Gut/Schlecht“-Regel: Verwenden Sie Grün/Rot niemals für Trends, wenn die Metrik nicht inhärent positiv/negativ ist (z. B. sollte „Temperatur“ nicht grün sein, nur weil sie gestiegen ist). Verwenden Sie Neutral (Grau/Blau) für nicht bewertete Änderungen.
• Rundungslogik: Für Marketing-Statistiken runden Sie auf die nächste „K“ oder „M“ für sofortiges Erfassen (z. B. „12,4K“ vs. „12.432“). Für Dashboards verwenden Sie die für die Aufgabe erforderliche Genauigkeit.
• Symbolverwendung: Verwenden Sie Symbole nur, wenn sie helfen, zwischen verschiedenen Kategorien von Metriken zu unterscheiden (z. B. ein „Benutzer“-Symbol vs. ein „Umsatz“-Symbol). Verwenden Sie Symbole nicht nur zur Dekoration.
• Label-Platzierung: Oben ausgerichtete Labels eignen sich besser zum Scannen eines Rasters ähnlicher Metriken; unten ausgerichtete Labels eignen sich besser für „Helden“-Statistiken, bei denen die Zahl die Hauptattraktion ist.

Einschränkungen

• Zugänglichkeit: Verwenden Sie aria-label, um den vollständigen Kontext bereitzustellen (z. B. „Umsatz: 12.000 Euro, 5 % gestiegen im Vergleich zum Vormonat“). Stellen Sie sicher, dass der Farbkontrast für Trendindikatoren WCAG AA (4,5:1) erfüllt.
• Responsivität: Metrikwerte dürfen niemals ihre Container überlaufen. Verwenden Sie flüssige Typografie (CSS clamp()) oder „Shrink-to-Fit“-Logik für sehr große Zahlen.
• Konsistenz: Alle Metriken in einer Gruppe müssen die gleiche Rundung, Ausrichtung und Trenddarstellung verwenden.

Häufige Fehlermuster

• Die „Nackte Zahl“: Anzeigen eines Werts ohne Label oder Kontext, sodass der Benutzer rät, was er bedeutet.
• Farbüberbetonung: Nur Rot/Grün zur Angabe des Trends ohne Symbole (↑/↓), was es für farbenblinde Benutzer unzugänglich macht.
• Hierarchie-Umkehrung: Das Label größer oder fetter als den Wert machen, was den „Scannen und Verstehen“-Prozess verlangsamt.
• Metrik-Überfüllung: Zu viele Metriken in einer einzigen Zeile platzieren, wodurch die Zahlen ineinander übergehen.
• Präzisionsüberladung: Anzeigen von 4 Dezimalstellen auf einer Marketing-Landing Page, was unnötige kognitive Belastung erzeugt.

Validierungskriterien

• Jede Metrik hat ein klares, sichtbares Label.
• Werte verwenden eine eigene „Anzeige“-Typografiegröße (größer als Fließtext).
• Trends (Auf/Ab) werden durch SOWOHL Farbe ALS AUCH ein Symbol/Zeichen angezeigt.
• Vergleichskontext (z. B. Zeitraum) wird explizit angegeben.
• Semantische Farben (Grün/Rot) werden nur für bewertete Änderungen verwendet.
• Das Raster-Layout bleibt auf Mobilgeräten lesbar (keine Überläufe).
• Barrierefreiheit: Der vollständige Kontext ist über ARIA für Screenreader verfügbar.