Analytics-Dashboards müssen komplexe Informationen schnell darstellen. Diese Muster sorgen für Konsistenz in unserem Produkt und optimieren gleichzeitig für schnelles Verständnis und Entscheidungsfindung.

Metrikkarten

KPI-Karten sind der primäre Weg, wie Nutzer Top-Level-Metriken konsumieren:

Primäre Zahl: Große, fette Typografie (32–48px) zieht sofort den Blick auf den Schlüsselwert.
Vergleichsindikator: Grüner Pfeil nach oben oder roter Pfeil nach unten mit prozentualem Wechsel gegenüber dem vorherigen Zeitraum.
Sparkline optional: Kleines eingebettetes Diagramm, das den 7-Tage-Trend zeigt, bietet Kontext ohne Überwältigung.
Beschriftungsklarheit: Metriknamen sind kurz (max. 2–3 Wörter) mit Info-Icon für detaillierte Erklärung.

Zeitbereich-Auswähler

Konsistente Zeitsteuerungen über alle Dashboard-Ansichten hinweg:

Vordefinierte Optionen: Heute, Gestern, Letzte 7 Tage, Letzte 30 Tage, Letzte 90 Tage, Letzte 12 Monate.
Benutzerdefinierter Bereich: Datumsauswahl mit visuellem Kalender für präzise Auswahl.
Vergleichs-Umschalter: Ein-Klick-Aktivierung zum Überlagern von Vorperioddaten auf Diagrammen.
URL-Persistenz: Ausgewählter Bereich wird in URL-Parametern gespeichert für teilbare Dashboard-Zustände.

Filter-Muster

Filter schränken Daten ein, ohne die aktuelle Ansicht zu verlassen:

Filterleiste: Horizontale Reihe von Dropdown-Filtern für häufige Dimensionen (Land, Gerät, Quelle).
Aktive Filter-Pills: Ausgewählte Filter erscheinen als entfernbare Pills, die den aktuellen Zustand zeigen.
Segment-Builder: Erweiterter Modus für komplexe Bedingungen mit UND/ODER-Logik.
Gespeicherte Segmente: Nutzer können Filterkombinationen speichern und benennen für schnelle Wiederverwendung.

Echtzeit-Indikatoren

Live-Daten benötigen klare visuelle Signale:

Pulsierender Punkt: Grüner animierter Punkt zeigt Live-Verbindung zum Echtzeit-Datenstrom an.
Zuletzt aktualisiert: Zeitstempel mit "Aktualisiert vor 3s" mit automatischer Aktualisierung.
Neue Daten hervorheben: Zeilen oder Metriken, die sich gerade geändert haben, kurz hervorheben (subtiles gelbes Aufblitzen).
Verbindungsstatus: Toast-Benachrichtigung, wenn die Echtzeitverbindung abbricht, mit Wiederverbindungsversuch.

Leere Zustände

Was Nutzer sehen, wenn noch keine Daten vorhanden sind:

Hilfreiche Illustration: Freundliche Grafik, die dem Kontext entspricht (Diagramm ohne Datenpunkte, leere Liste).
Klare Erklärung: Warum keine Daten vorhanden sind – "Keine Besucher in diesem Zeitraum" vs. "Tracking noch nicht installiert."
Handlungsaufforderung: Button oder Link zur Behebung des leeren Zustands (Skript installieren, Datumsbereich ändern).
Beispieldaten-Option: Für neue Nutzer anbieten, Demo-Daten anzuzeigen, um die Benutzeroberfläche kennenzulernen.

Ladezustände

Wahrgenommene Performance ist genauso wichtig wie tatsächliche Geschwindigkeit:

Skeleton-Bildschirme: Graue Platzhalterformen, die dem erwarteten Layout entsprechen, reduzieren die wahrgenommene Ladezeit.
Progressives Laden: Gecachte Daten sofort anzeigen, mit frischen Daten aktualisieren, wenn verfügbar.
Gestaffelte Animation: Skeleton-Elemente animieren in Sequenz, um Aktivität anzuzeigen.
Timeout-Behandlung: Nach 10 Sekunden Wiederholungsoption anzeigen statt endlosem Laden.

Tabellen-Muster

Datentabellen für detaillierte Erkundung:

Sortierbare Spalten: Kopfzeilen klicken zum Sortieren, mit klaren aufsteigenden/absteigenden Indikatoren.
Feste Kopfzeile: Spaltenköpfe bleiben beim Scrollen langer Tabellen sichtbar.
Hover-Aktionen: Zeilenaktionen (anzeigen, bearbeiten, löschen) erscheinen beim Hovern, standardmäßig ausgeblendet.
Paginierung vs. unendlich: Paginierung für Datenerkundung verwenden, unendliches Scrollen für Echtzeit-Feeds.

Drill-Down-Navigation

Von der Übersicht zum Detail:

Klicken zum Filtern: Das Klicken auf ein Diagrammsegment filtert das gesamte Dashboard auf diese Dimension.
Breadcrumb-Pfad: Zeigt den aktuellen Drill-Down-Pfad mit Links zur Rückkehr zu höheren Ebenen.
Seitenbereich-Detail: Das Klicken auf eine Zeile öffnet ein herausgleitendes Panel mit vollständigen Details ohne Kontextverlust.
Zurück-Navigation: Die Browser-Zurück-Schaltfläche funktioniert korrekt durch Drill-Down-Zustände.

Dashboard-Muster