Die meisten SaaS-Dashboards werden von Ingenieuren gebaut, die die Daten verstehen. Sie werden selten von Menschen entworfen, die verstehen, was ein Erstnutzer sieht, wenn er sich einloggt, nichts findet und den Tab schließt.
Diese zwölf Muster adressieren den vollständigen Lebenszyklus der Dashboard-Interaktion.
Der Empty State ist der Bildschirm, den Nutzer sehen, wenn sie sich zum ersten Mal einloggen, bevor sie Daten hinzugefügt haben. Ein guter Empty State tut drei Dinge:
Zeigt, wie der befüllte Zustand aussieht. Nicht ein trauriges Symbol mit „Noch keine Daten." Eine Vorschau davon, wie das Dashboard aussehen wird, sobald Daten hinzugefügt wurden.
Bietet genau eine Aktion. „Ihre erste Integration verbinden" oder „Ihr erstes Projekt erstellen."
Erklärt, warum der Zustand leer ist. Kontext verhindert Verwirrung darüber, ob etwas kaputt ist.
Progressive Disclosure bedeutet: das Wesentliche zeigen, Details auf Abruf offenbaren.
Eine Zusammenfassungskarte zeigt die Schlüsselmetrik. Ein Klick darauf erweitert sich zur vollständigen Aufschlüsselung, dem Trend und Exportoptionen.
Overlays (Modal-Touren) sind für Features geeignet, die aus der UI nicht selbstverständlich sind. Wenn Sie erklären müssen, wie die Navigation zu benutzen ist, ist die Navigation falsch.
Inline-Führung (kontextuelle Tooltips, Hilfetext direkt in der UI) ist besser für persistente Führung für Nutzer aller Erfahrungsstufen.
Primäre Metriken (die ein oder zwei Zahlen, die Erfolg definieren) bekommen die oberste Position, größte Größe und klarste visuelle Gewichtung.
Sekundäre Metriken erscheinen darunter, kleiner.
Tertiäre Metriken gehören in eine Detailansicht, nicht auf das Haupt-Dashboard.
Tabellen verwenden wenn:
Karten verwenden wenn:
Ein genuinlich responsives Dashboard redefiniert das Mobile-Erlebnis:
Mobile zeigt weniger Metriken. Die Mobile-Ansicht sollte standardmäßig die drei wichtigsten Metriken zeigen.
Tabellen werden zu Karten. Eine zwölfspaltige Tabelle auf Desktop wird zu einer erweiterbaren Kartenliste auf Mobile.
Charts verwenden mobile-optimierte Formate. Liniendiagramme funktionieren auf Mobile. Komplexe Multi-Serien-Charts nicht.
Skeleton-Screens (Platzhalterformen in der ungefähren Größe des ladenden Inhalts) reduzieren die wahrgenommene Ladezeit im Vergleich zu Spinners erheblich.
Vier Alarm-Ebenen, mit distincter visueller Behandlung:
Kritisch (Rot, persistent): Etwas ist kaputt und erfordert sofortige Aufmerksamkeit.
Warnung (Bernstein, schließbar): Etwas könnte bald Aufmerksamkeit erfordern.
Info (Blau, auto-schließbar): Nützlicher Kontext, aber nicht actionierbar.
Erfolg (Grün, auto-schließbar): Bestätigung, dass eine Aktion funktioniert hat.
Verwenden Sie niemals Rot für etwas, das nicht wirklich kritisch ist.
Suche sollte universell und schnell sein. Eine Sucheingabe, Sub-200ms-Antwort, Übereinstimmung über alle relevanten Entitäten.
Filter sollten persistent sein. Wenn ich auf „Letzte 30 Tage" filtere und auf eine Unterseite navigiere und zurückkomme, sollte der Filter noch da sein.
Filter-Zustand sollte URL-kodiert sein. Gefilterte Ansichten sollten teilbar sein.
Liniendiagramm — Trends über Zeit.
Balkendiagramm — Vergleich über Kategorien.
Donut/Torten-Diagramm — Teil-zu-Ganzem-Beziehungen. Nur wenn die proportionale Beziehung die Geschichte ist. Nie mehr als fünf Segmente.
Jede Tabelle sollte als CSV exportieren. Jedes Chart sollte als Bild oder Grundlagendaten exportieren. Jede gefilterte Ansicht sollte in ihrem aktuellen gefilterten Zustand exportieren.
Das ist technisch nicht komplex. Es signalisiert Enterprise-Käufern, dass Sie ihre Daten ernst nehmen.
Was schaut niemand an? Welche Karten, Charts und Tabellen haben in den letzten 30 Tagen null Interaktion? Entfernen Sie sie.
Wonach suchen Leute, was sie nicht finden? Ihre eigenen Suchprotokolle sind eine Produkt-Roadmap.
Was referenzieren Support-Tickets? Wenn Nutzer Tickets über dasselbe verwirrende Verhalten einreichen, versagt das Dashboard bei ihnen.
Bauen Sie ein SaaS-Dashboard und möchten eine zweite Meinung zu den Design-Entscheidungen? Starten Sie ein Gespräch — wir überprüfen Dashboard-UX und sagen Ihnen, was Ihre Aktivierung kostet.
Wir nehmen jeden Quartal eine begrenzte Anzahl von Projekten an. Erzählen Sie uns, was Sie bauen.
Schlechte Typografie, inkonsistente Abstände, Stockfotos und generische CTAs. Die konkreten Designprobleme, die professionelle Sites von amateurhaften unterscheiden.
Zehn Marketing-Sites mit echten Lighthouse-Scores, Core-Web-Vitals-Daten und einer Analyse von was jede richtig macht — vom Above-the-Fold bis zu Footer-Vertrauenssignalen.