Informationsdichte in B2B-SaaS: Entwerfen von Dashboards für Power-User und Anfänger
So entwerfen Sie dichte B2B-Dashboards und -Tabellen, die Experten schnell durchsuchen können, ohne neue Benutzer zu überfordern: Dichtemodi, Hierarchie, progressive Offenlegung.
Kernaussage
Dichte Schnittstellen sind nicht das Problem; Desorganisierte sind es. Experten wünschen sich mehr Informationen pro Bildschirm. Geben Sie ihnen daher eine starke Hierarchie, eine konsistente Ausrichtung und Diagramme, die Position und Länge verwenden. Schützen Sie Anfänger mit sinnvollen Standardeinstellungen und progressiver Offenlegung und lassen Sie die Benutzer eine Dichtestufe wählen, wie es Designsysteme wie Carbon für Tabellen tun.
Dichte ist eine Funktion für Experten
Menschen, die ein B2B-Tool den ganzen Tag nutzen, wie Analysten, Supportmitarbeiter und Operatoren, möchten oft lieber mehr auf einmal sehen, weil das Scrollen und Wechseln von Tabs Zeit kostet. Wenn Sie im Interesse eines sauberen Screenshots alles geräumiger gestalten, kann dies die Arbeit verlangsamen. Das Ziel sind Informationen, die kompakt, aber leicht zu scannen sind.
Lassen Sie die Menschen die Dichte wählen
Designsysteme bauen jetzt Dichte in Komponenten ein. Die Carbon-Datentabelle von IBM bietet beispielsweise fünf Zeilenhöhen, von extra klein (24 Pixel) für sehr dichte Layouts bis extra groß (64 Pixel) für einfacheres Scannen, wobei mittel (40 Pixel) die Standardeinstellung ist.
- Bieten Sie zwei oder drei Dichteeinstellungen an, die pro Benutzer gespeichert werden.
- Ändern Sie den Abstand und die Zeilenhöhe, nicht die Schriftgröße oder den Kontrast.
- Halten Sie Touch-Ziele auf Touch-Geräten unabhängig von der Dichte groß genug.
Hierarchie macht Dichte lesbar
Nielsen Norman Group definiert Dashboards als Visualisierungen, die auf einen Blick Informationen liefern, auf die Menschen schnell reagieren können, und empfiehlt die Codierung von Mengen mit Länge und 2D-Position, die Menschen am schnellsten lesen. In der Praxis: Platzieren Sie die wenigen Zahlen, die Entscheidungen beeinflussen, oben, richten Sie alles in einem Raster aus, verwenden Sie Farben nur für die Bedeutung (Status, Warnungen) und richten Sie die Zahlen rechts aus, damit sie verglichen werden können.
Schützen Sie Einsteiger, ohne Experten auszubremsen
Durch die progressive Offenlegung bleiben erweiterte Optionen verfügbar, aber nicht im Weg. Starten Sie neue Benutzer mit einer fokussierten Standardansicht, lassen Sie sie nach Bedarf Spalten, Filter und Widgets hinzufügen und speichern Sie Ansichten, damit Experten sofort zu ihrem dichten Setup zurückkehren können.
Bewegung in dichten Grenzflächen
Auf datenintensiven Bildschirmen sollte Bewegung Veränderungen erklären und nicht schmücken: Markieren Sie einen Wert, der gerade aktualisiert wurde, animieren Sie eine Zeile in ihre neue sortierte Position oder zeigen Sie einen Diagrammübergang an, damit Benutzer verfolgen können, was sich bewegt hat. Halten Sie sich kurz und vermeiden Sie kontinuierliche Animationen, die mit den Daten konkurrieren.
Wichtige Prinzipien
- Experten profitieren von dichten Bildschirmen; Desorganisation ist das eigentliche Problem
- Bieten Sie Dichteeinstellungen an, indem Sie den Abstand ändern, nicht die Schriftgröße oder den Kontrast
- Verwenden Sie Länge und Position für Zahlen. Farbe dient nur der Bedeutung
- Die progressive Offenlegung schützt Anfänger
- Verwenden Sie Bewegung, um Datenänderungen zu erklären, nicht um sie zu schmücken
Häufige Fragen
Quellen
- Data table usage — Carbon Design System (IBM)
- Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group
- Progressive Disclosure — Nielsen Norman Group