Datenvisualisierung für Designer: So entstehen Diagramme, die wirklich kommunizieren
Ein Praxisleitfaden zur Datenvisualisierung für Designer. Diagrammauswahl, Farbe, Hierarchie, Barrierefreiheit und die Prinzipien, die aus Daten ein Diagramm machen, das echte Nutzer in drei Sekunden lesen können.
Die meisten Produkt-Dashboards sind Rauschen. Zwölf Diagramme, sechs Farbpaletten, keine klare Hierarchie und ein Nutzer, der jedes einzelne studieren muss, um überhaupt zu verstehen, was da gemessen wird. Das Team nannte es datengetrieben und lieferte es aus. Der Nutzer nennt es verwirrend und ignoriert es.
Dieses Paper ist die Arbeitsversion. Die Diagrammtypen, die wirklich kommunizieren, die Farbregeln, die auch bei kleinen Größen halten, die Hierarchieentscheidungen, mit denen ein Nutzer die Daten in drei Sekunden versteht, und die Barrierefreiheits-Grundlagen, die die Arbeit nutzbar halten. Keine D3-Tutorials, keine Diagramm-Galerien, nur die Designdisziplin der Dataviz in einem echten Produkt.
Was Dataviz eigentlich ist
Datenvisualisierung ist die visuelle Kodierung von Zahlen in Formen, die das Auge schneller vergleichen kann, als das Gehirn Text lesen kann. Ein Balkendiagramm verwandelt eine Zahlenspalte in Rechtecke, deren Höhen das Auge sofort vergleicht. Ein Liniendiagramm verwandelt eine Zeitreihe in eine Steigung, die das Auge als Geschichte liest. Die Kodierung ist der ganze Job.
Ein schlechtes Diagramm ist eines, in dem die Kodierung gegen die Daten arbeitet. Ein Tortendiagramm mit elf Stücken kodiert nichts, was das Auge vergleichen könnte. Ein 3D-Balkendiagramm kodiert die Daten und verzerrt die Kodierung dann für den optischen Effekt. Ein Liniendiagramm mit zwei Achsen kodiert zwei Geschichten, als wären sie eine. Jedes davon ist ein Designfehler, kein Mathefehler.
Der Beitrag zum visuellen Hierarchie-Design zeigt, wie das Auge eine statische Seite liest. Dataviz ist Hierarchie, angewandt auf Zahlen.
Warum Dataviz-Design im Produkt zählt
Die meisten Produktoberflächen haben ein oder zwei Informationen pro Screen. Ein Dashboard hat Dutzende. Ohne Designdisziplin wird ein Dashboard zur Wand aus konkurrierenden Signalen, in der der Nutzer nicht findet, was zählt.
Dataviz scheitert auch anders als anderes Design. Ein Button in der falschen Farbe ist hässlich. Ein Diagramm vom falschen Typ ist irreführend. Der Nutzer trifft eine Entscheidung auf Basis dessen, was er das Diagramm sagen glaubt, und das Diagramm hat etwas anderes gesagt. Die Kosten eines irreführenden Diagramms sind eine falsche Entscheidung, nicht nur eine schlechte Ästhetik.
2026 ist jede Produktoberfläche datenlastiger als vor fünf Jahren. KI-Funktionen zeigen Modellsicherheit, Nutzungsmetriken, Kostenaufschlüsselungen. Analytics-Oberflächen sind überall Tabellen und Diagramme. Designer, die Dataviz-Systeme bauen können, sind jetzt für jedes Produkt wichtig, das komplexer ist als eine App mit nur einem Zweck.
Wähle das Diagramm, das zur Frage passt
Die Diagrammauswahl macht 80 % der Dataviz-Arbeit aus. Wähle das falsche Diagramm, und kein Feinschliff rettet es. Wähle das richtige, und das Design erledigt sich fast von selbst.
Die fünf Diagrammfamilien, die den Großteil der Produktarbeit abdecken
Die meiste Produkt-Dataviz lebt in fünf Diagrammfamilien. Beherrsche diese, und über 90 % der Dashboard-Arbeit wird Routine.
| Frage des Nutzers | Diagrammtyp |
|---|---|
| Wie verhält sich diese Zahl zu anderen in einer Kategorie? | Balkendiagramm |
| Wie verändert sich diese Zahl über die Zeit? | Liniendiagramm |
| Wie setzt sich ein Ganzes zusammen? | Gestapeltes Balkendiagramm oder Treemap (fast nie ein Tortendiagramm) |
| Wie hängen zwei Variablen zusammen? | Streudiagramm |
| Wie sind die Werte verteilt? | Histogramm oder Boxplot |
Passt das Diagramm auf dem Screen zu keinem davon, weiß der Nutzer wahrscheinlich nicht, welche Frage es beantwortet. Ändere entweder das Diagramm passend zur Frage oder die Frage, die gestellt wird.
Wann eine einzelne Zahl reicht
Das am meisten unterschätzte Diagramm im Produktdesign ist gar kein Diagramm. Eine einzelne große Zahl mit Label und Vergleich („Umsatz: 124.500 $, plus 12 % gegenüber dem Vormonat“) kommuniziert mehr als die meisten Dashboards mit zwölf Diagrammen.
Nutze eine einzelne Zahl, wenn:
- Den Nutzer nur der aktuelle Wert interessiert, nicht der Trend
- Der Trend durch den Vergleichskontext impliziert ist
- Der Platz knapp ist (Mobile, Sidebar, Statusleiste)
Das visuelle Gewicht einer einzelnen Zahl mit fetter Typografie und klarem Label ist enorm. Die meisten Dashboards wären besser, wenn die Hälfte der Diagramme durch einzelne Zahlen ersetzt würde.
Wann Small Multiples sinnvoll sind
Small Multiples sind ein Raster aus demselben Diagrammtyp, wiederholt für verschiedene Kategorien. Nutze sie, wenn der Nutzer Muster über viele Elemente hinweg vergleichen muss, nicht die absoluten Werte.
Ein Raster aus 12 Sparklines, die den Umsatz pro Region zeigen, ist schneller zu überblicken als ein einzelnes Diagramm mit 12 sich kreuzenden Linien. Das Auge liest jede Region für sich und vergleicht dann die Formen im Raster. Die Technik stammt von Edward Tufte und wird in Produkt-Dashboards weiterhin zu selten genutzt.
Die Obergrenze liegt bei etwa 16 bis 20 Small Multiples pro Ansicht. Darüber kann das Auge nicht mehr alle vergleichen, und das Raster wird zur Tapete.
Diagramme, die im Produkt fast nie funktionieren
Manche Diagrammtypen halten sich, weil sie im Screenshot beeindruckend aussehen. In einem echten Produkt kommunizieren sie fast nie gut. Streiche sie, wenn du sie siehst.
Tortendiagramme mit mehr als drei Stücken. Das Auge kann Winkel jenseits von drei oder vier Segmenten nicht mehr genau vergleichen. Nimm stattdessen ein gestapeltes Balkendiagramm oder eine Treemap. Tortendiagramme taugen für Verhältnisse mit zwei Stücken (ja/nein, an/aus) und für fast nichts sonst.
3D-Balkendiagramme. Die dritte Dimension verzerrt die Kodierung. Der vordere Balken wirkt größer, als er ist, der hintere kleiner. Immer 2D.
Liniendiagramme mit zwei Achsen. Zwei y-Achsen in einem Diagramm legen nahe, die beiden Linien zu vergleichen, aber der Vergleich ist bedeutungslos, weil jede Achse eine andere Skala hat. Der Nutzer liest eine Korrelation, die es nicht gibt. Teile entweder in zwei Diagramme oder nutze indexierte Werte auf einer Achse.
Donut-Diagramme mit Label im Inneren. Donut-Diagramme sind Tortendiagramme plus Extraaufwand. Das Label innen wiederholt oft Informationen, die schon auf dem Screen stehen. Nimm stattdessen eine einzelne Zahl plus ein kleines Balkendiagramm.
Wortwolken. Sie sehen aus wie Daten und kommunizieren nichts. Die Wortgröße korreliert nur lose mit der Häufigkeit, das Auge kann Größen nicht genau vergleichen, und längere Wörter wirken größer, weil sie mehr Pixel haben. Auf Sicht streichen.
Radardiagramme. Nützlich für sehr spezifische Vergleiche (mehrdimensionale Bewertungen auf derselben Skala), fast immer missbraucht für allgemeine Vergleiche. Das Auge kann die Flächen unregelmäßiger Polygone nicht vergleichen. Gibt es keinen konkreten, bekannten Anwendungsfall, nimm ein Balkendiagramm.
Farbe in der Dataviz
Farbe in der Dataviz ist keine Dekoration. Sie ist Teil der Kodierung. Die falsche Farbwahl kann die Aussage eines Diagramms von klar zu irreführend kippen.
Die drei Farbeinsätze
Jede Farbe in einem Diagramm erfüllt eine von drei Aufgaben:
Kategoriale Farbe unterscheidet diskrete Kategorien ohne Reihenfolge. Jede Region, jedes Produkt, jedes Kundensegment bekommt einen anderen Farbton. Nutze eine Palette aus 6 bis 8 klar unterscheidbaren Farbtönen. Ab 8 verwechselt das Auge ähnliche Farben, und die Kodierung scheitert.
Sequenzielle Farbe zeigt geordnete Werte entlang einer einzigen Dimension. Hell nach dunkel, niedrige zu hoher Sättigung. Nutze einen Farbverlauf in einem Farbton, nicht mehrere. Sequenzielle Paletten kommunizieren Größe über den Helligkeitswert, nicht über den Farbton.
Divergierende Farbe zeigt Werte, die um einen sinnvollen Mittelpunkt von negativ nach positiv reichen. Rot zu Weiß zu Blau ist das klassische Beispiel. Der Mittelpunkt muss eine echte Null oder ein Schwellenwert sein, keine optische Bequemlichkeit.
Die drei zu mischen, ruiniert das Diagramm. Eine kategoriale Palette, die Größe kodiert, ist unlesbar. Eine sequenzielle Palette, die Kategorien kodiert, verwirrt. Wähle die richtige für die Daten.
Der Beitrag zur Farbtheorie für Designer behandelt die allgemeineren Farbprinzipien. Das Farbpaletten-Glossar erklärt, wie Paletten aufgebaut sind.
Farbregeln, die kleine Größen überleben
Die meisten Diagrammfarben scheitern in den kleinen Größen, in denen Diagramme in Produkt-UIs tatsächlich leben. Eine Sparkline mit 60 Pixeln hat nicht den visuellen Platz, um acht kategoriale Farben klar darzustellen.
Fünf Regeln, die halten:
- Nutze nicht mehr als 6 kategoriale Farben pro Diagramm. Ab sechs gibt das Auge auf.
- Reserviere eine Akzentfarbe für das Highlight. Die Linie oder der Balken, auf den der Nutzer zuerst schauen soll, bekommt die Markenfarbe oder einen kontrastreichen Farbton. Alles andere wird gedämpft.
- Dämpfe die Nebendaten. Hintergründe, Gitterlinien, Achsenbeschriftungen mit 40 bis 60 % Deckkraft. Vordergrunddaten in voller Sättigung. Der Kontrast ist die Hierarchie.
- Teste in Monochrom. Wandle das Diagramm in Graustufen um und prüfe, ob die Hierarchie noch lesbar ist. Funktioniert das Diagramm nur in Farbe, leistet die Farbe zu viel.
- Teste im Dark Mode. Die meisten Produktdiagramme müssen auf hellem und dunklem Hintergrund funktionieren. Derselbe Farbton wirkt auf Dunkel oft zu gesättigt und auf Hell zu blass. Baue pro Modus eine eigene Palette.
Der Beitrag zum Dark-Mode-Design behandelt die allgemeinere Dark-Mode-Disziplin. Diagramme gehören zu den schwierigsten Teilen des Dark Mode.
Farbenblindheit ist keine Nische
Etwa 8 % der Männer und 0,5 % der Frauen haben eine Form von Farbsehschwäche. Die meisten kategorialen Paletten, die für Designer gut aussehen, werden für diese Nutzer unlesbar.
Die Lösung: Kodiere Informationen nie allein über Farbe. Kombiniere Farbe mit Form, Position, Label oder Muster. Ein Liniendiagramm mit drei farbigen Linien sollte außerdem direkte Labels an jeder Linie haben. Ein Balkendiagramm sollte Wertelabels für die Balken haben, die der Nutzer vergleichen muss.
Teste Paletten mit Simulatoren für Farbenblindheit. Der häufigste Fehler: Rot und Grün sind für Nutzer mit Deuteranopie nicht unterscheidbar. Nimm stattdessen Blau und Orange als kategoriales Paar, beide funktionieren bei den häufigsten Farbsehschwächen.
Der Beitrag zum barrierefreien Farbkontrast behandelt die Kontrast-Grundlagen. Das Kontrastverhältnis-Glossar erklärt, wie Kontrast gemessen wird.
Hierarchie in einem Diagramm
Jedes Diagramm hat eine Hierarchie. Das Auge des Nutzers muss zuerst auf den Daten landen, dann auf den Labels, dann auf Gitterlinien und Achsen. Die meisten Produktdiagramme kehren das um, und der Nutzer muss sich die Daten erarbeiten.
Was betonen, was dämpfen
Die Daten sind der Held. Balken, Linien, Punkte bekommen das stärkste visuelle Gewicht. Volle Deckkraft, volle Sättigung, Marken- oder Akzentfarbe, wo passend.
Labels und Titel sind die Nebenrollen. Stark genug zum Lesen, nicht stark genug, um mit den Daten zu konkurrieren. Meist 50 bis 70 % des visuellen Gewichts der Daten.
Gitterlinien, Achsenlinien und Teilstriche sind die Bühne. Nur sichtbar, wenn der Nutzer danach sucht. Meist 20 bis 40 % des visuellen Gewichts der Labels.
Die meisten Produktdiagramme werden mit Gitterlinien in voller Stärke ausgeliefert, weil das in jeder Chart-Bibliothek der Standard ist. Die Lösung ist ein CSS-Override, der die Gitterlinien dämpft, und das Diagramm wirkt sofort gestaltet statt aus der Vorlage.
Direkte Beschriftung schlägt Legenden
Eine Legende am Rand eines Diagramms zwingt das Auge des Nutzers zum Pingpong zwischen Legende und Daten. Direkte Labels an jeder Linie, jedem Balken oder Segment lassen den Nutzer das Diagramm in einem Durchgang lesen.
Direkte Beschriftung ist schwerer umzusetzen, und die Chart-Bibliotheken unterstützen sie schlecht. Baue sie trotzdem. Ein Liniendiagramm mit drei am rechten Ende beschrifteten Linien ist dramatisch lesbarer als dasselbe Diagramm mit Legende in der Ecke.
Die Ausnahme: Es gibt zu viele Datenreihen, als dass direkte Labels passen würden. Nutze dann eine interaktive Legende. Hovern oder Tippen auf einen Legendeneintrag hebt diese Reihe im Diagramm hervor und dämpft den Rest.
Die Drei-Sekunden-Regel
Jedes Diagramm in einem Produkt sollte seine Frage in drei Sekunden beantworten. Muss der Nutzer das Diagramm studieren, ist das Design gescheitert.
So testest du die Drei-Sekunden-Regel
Zeige das Diagramm jemandem, der das Dashboard noch nie gesehen hat. Frage: „Was sagt dir dieses Diagramm?“ Stoppe die Zeit bis zur Antwort.
Kommt die Antwort in unter drei Sekunden, funktioniert das Diagramm. Dauert es länger, finde heraus, was bremst. Meistens ist es eines davon:
- Der Diagrammtyp passt nicht zur Frage
- Die Hierarchie ist invertiert (Gitterlinien lauter als Daten)
- Die Legende erzwingt Augen-Pingpong
- Die Farbkodierung ist unklar
- Das Diagramm hat zu viele Datenreihen
Behebe den Fehler, teste erneut. Ein Dashboard, in dem jedes Diagramm den Drei-Sekunden-Test besteht, ist ein Dashboard, das ein Nutzer wirklich benutzen kann.
Wann die Drei-Sekunden-Regel nicht gilt
Explorative Analytics-Tools (BI-Tools, Data-Science-Notebooks) sind anders. Der Nutzer wirft keinen Blick, er untersucht. Er will jede Variable, jede Dimension, jeden Filter. Aus drei Sekunden werden drei Minuten, und das ist in Ordnung.
Der Fehler ist, ein Produkt-Dashboard mit der Disziplin eines BI-Tools zu bauen. Der Produktnutzer untersucht nicht. Er prüft. Drei Sekunden sind das Budget.
Interaktion in der Dataviz
Diagramme in Produkt-UIs sind interaktiv. Hover für Tooltips, Klick zum Filtern, Brush zum Zoomen. Die Interaktionen brauchen ein ebenso bewusstes Design wie die statische Kodierung.
Tooltip-Design
Tooltips auf Diagrammen beantworten die Frage „Was ist der genaue Wert dieses Punkts?“ Die meisten Chart-Bibliotheken zeigen standardmäßig einen Tooltip mit allen Reihen auf einmal, der beim Hovern zur Textwand wird.
Bessere Standards:
- Ein Tooltip pro Reihe, nicht für alle Reihen. Hovere die Linie, die dich interessiert, und sieh den Wert dieser Linie. Hovern auf dem Diagrammhintergrund zeigt nichts.
- Tooltips enthalten die Einheit. „1.240 $“ statt „1240“.
- Tooltips zeigen Vergleichskontext, wo nützlich. „1.240 $ (+8 % ggü. Vorwoche)“ macht den Tooltip zur Geschichte.
- Tooltips verdecken nie die Daten. Positioniere sie über oder unter dem Cursor, je nach Nähe zum Diagrammrand.
Filtern und Brushing
Diagramme mit direkter Manipulation fühlen sich reaktionsfreudig an, wie es Diagramme mit separatem Filterpanel nicht tun. Einen Datumsbereich auf der x-Achse zum Zoomen aufziehen, eine Kategorie in der Legende zum Isolieren anklicken, eine Schwellenlinie ziehen, um Zeilen zu filtern. Jedes erfordert Engineering-Aufwand, der sich in Nutzervertrauen auszahlt.
Das Risiko ist Over-Engineering. Ein Diagramm, das fünf Interaktionen braucht, um nützlich zu sein, sollte in mehrere einfachere Diagramme aufgeteilt werden. Jede Interaktion ist ein kognitiver Aufwand.
Das Progressive-Disclosure-Glossar behandelt das allgemeinere Prinzip. Diagramme können es gut nutzen, indem sie erweiterte Steuerelemente verbergen, bis der Nutzer Absicht zeigt.
Dataviz-Fehler, auf die du achten solltest
Jedes Dashboard-Audit findet dieselben Fehler. Wird das Produkt mit einem davon ausgeliefert, untergräbt die Dataviz-Schicht den Rest des Produkts.
Abgeschnittene y-Achsen, die Veränderung übertreiben. Ein Balkendiagramm mit einer y-Achse, die bei 95 statt bei null beginnt, macht aus einer 2-%-Änderung eine optische Klippe. Nutze Achsen im vollen Bereich, außer es gibt einen klaren Grund dagegen, und kennzeichne jede Kürzung ausdrücklich.
Balkendiagramme ohne Nullbasislinie. Die Balkenlänge ist die Kodierung. Beginnt der Balken nicht bei null, lügt die Kodierung. Das ist bei Balkendiagrammen nicht verhandelbar. Liniendiagramme können abgeschnittene Achsen nutzen, wenn sie einen kleinen Bereich über die Zeit zeigen.
Uneinheitliche Diagrammtypen in einem Dashboard. Zwei Balkendiagramme mit unterschiedlicher Ausrichtung, zwei Liniendiagramme mit unterschiedlichen Achsenbereichen, ein Tortendiagramm neben einem gestapelten Balken mit denselben Daten. Wähle den Diagrammtyp, der zu jeder Frage passt, halte aber die visuelle Behandlung im ganzen Dashboard konsistent.
Diagramme, die länger laden als der Rest der Seite. Ein Dashboard, das das Layout in 200 ms und die Diagramme in 2 Sekunden aufbaut, wirkt kaputt. Baue Skeleton-States für jedes Diagramm. Lade Diagramme unterhalb des sichtbaren Bereichs lazy. Streame Daten, statt auf die komplette Payload zu warten.
Diagramme, die die Marke ignorieren. Ein Dashboard mit den Standardfarben der Chart-Bibliothek sieht aus wie eine Vorlage. Die Diagrammpalette sollte aus dem Farbsystem der Marke abgeleitet werden, mit Anpassungen für Barrierefreiheit und Lesbarkeit bei kleinen Größen. Liefere nie ein Dashboard mit der Standardfarbpalette von Chart.js oder Recharts in Produktion aus.
Der Beitrag zur Markenfarbpalette behandelt die allgemeinere Markenfarb-Disziplin. Dataviz-Paletten werden abgeleitet, nicht erfunden.
Dataviz unter den Bedingungen von 2026
Drei Verschiebungen haben verändert, wie Dataviz gestaltet wird. Die Arbeit muss sich anpassen.
KI erzeugt Diagramme in Sekunden. Tools wie ChatGPT und Claude können aus Rohdaten mit einem Prompt ein Diagramm erzeugen. Das Risiko: Designer hören auf, über die Diagrammauswahl nachzudenken, weil die KI eines wählt. Die KI wählt fast immer einen generischen Diagrammtyp, der nicht zur eigentlichen Frage passt. Nutze KI für erste Entwürfe, dann überarbeite auf Basis der Frage, die der Nutzer stellt.
Echtzeitdaten sind der Standard. Dashboards streamen jetzt Live-Daten, statt alle 60 Sekunden neu zu laden. Die Konsequenz fürs Design: Auch Bewegung braucht Design. Live-Diagramme, die bei jedem Update flackern, sind unbrauchbar. Sanfte Interpolation zwischen Datenpunkten und ein klarer „Live“-Indikator sind die Grundlage.
Mobile Dashboards sind verbreitet. Ein Dashboard, das nur für den Desktop gestaltet ist, verliert den Großteil der Nutzung am Wochenende und unterwegs. Diagramme auf Mobile brauchen andere Entscheidungen: oft einfachere Diagrammtypen, weniger Reihen, höhere Layouts, die scrollen, statt Raster-Layouts, die komprimieren.
Der Beitrag zum Responsive Design behandelt die allgemeinere Responsive-Disziplin. Dataviz ist eine der schwierigsten Schichten, um wirklich responsiv zu werden.
FAQ
Welchen Diagrammtyp sollte ich verwenden?
Wähle das Diagramm passend zur Frage des Nutzers. Werte über Kategorien vergleichen: Balkendiagramm. Veränderung über die Zeit zeigen: Liniendiagramm. Teile eines Ganzen zeigen: gestapeltes Balkendiagramm oder Treemap (fast nie eine Torte). Zusammenhänge zwischen zwei Variablen zeigen: Streudiagramm. Verteilung zeigen: Histogramm oder Boxplot. Passt das Diagramm auf dem Screen zu keinem davon, weiß der Nutzer nicht, welche Frage es beantwortet.
Wann sollte ich Tortendiagramme vermeiden?
Fast immer. Tortendiagramme funktionieren bei zwei oder drei Stücken, wenn das Verhältnis die ganze Geschichte ist (ja/nein, an/aus, einfache binäre Aufteilungen). Ab drei Stücken kann das Auge Winkel nicht mehr genau vergleichen, und das Diagramm wird zur Dekoration. Nimm stattdessen einen horizontalen gestapelten Balken oder eine Treemap.
Wie viele Farben sollte ein Diagramm verwenden?
Maximal sechs kategoriale Farben, plus ein Akzent für die hervorgehobene Reihe. Ab sechs verwechselt das Auge ähnliche Farbtöne, und die Kodierung scheitert. Für sequenzielle Daten (niedrig bis hoch) nutze einen Farbverlauf in einem Farbton von hell nach dunkel. Für divergierende Daten (negativ bis positiv) nutze einen Verlauf aus zwei Farbtönen um einen sinnvollen Mittelpunkt.
Wie mache ich Diagramme barrierefrei?
Kodiere Informationen nie allein über Farbe. Kombiniere Farbe mit Form, Position, Label oder Muster. Teste Paletten mit Simulatoren für Farbenblindheit (Deuteranopie ist die häufigste). Erfülle die WCAG-Kontrastminima zwischen Diagrammelementen und Hintergrund. Biete direkte Labels statt reiner Legendenverweise, wo möglich. Ergänze Diagrammkomponenten um zugängliche Namen für Screenreader.
Was ist die Drei-Sekunden-Regel für Diagramme?
Jedes Diagramm in einem Produkt-Dashboard sollte seine Frage in höchstens drei Sekunden beantworten, wenn es einem neuen Nutzer gezeigt wird. Muss der Nutzer das Diagramm studieren, ist das Design gescheitert. Teste, indem du das Diagramm jemandem zeigst, der das Dashboard noch nie gesehen hat, und misst, wie lange er braucht, um zusammenzufassen, was das Diagramm sagt. Alles über drei Sekunden bedeutet, dass das Diagramm vereinfacht werden muss.
Sollte ich eine Chart-Bibliothek nutzen oder individuell bauen?
Nutze eine Chart-Bibliothek für erste Entwürfe und Prototypen. Die meisten Produktionsdiagramme in Produkt-UIs profitieren von eigenen Schichten über der Bibliothek, die die Standards korrigieren: gedämpfte Gitterlinien, direkte Labels, Farbpaletten der Marke, eigene Tooltips. Reine Eigenentwicklung mit D3 oder Canvas ist nur gerechtfertigt, wenn der Diagrammtyp so ungewöhnlich ist, dass keine Bibliothek ihn unterstützt.
Dataviz ist Design, nicht Dekoration
Ein Dashboard mit disziplinierter Dataviz wirkt wie ein Produkt, das die Zeit des Nutzers respektiert. Ein Dashboard ohne sie wirkt wie eine Wand aus Dekoration, die zufällig Zahlen enthält. Der Abstand zwischen beiden ist klein, und der einzige Weg zum ersten ist Designdisziplin bei Diagrammauswahl, Farbe, Hierarchie und Interaktion.
Wähle das Diagramm, das zur Frage passt. Dämpfe die Gitterlinien, hebe die Daten hervor. Nutze Farbe als Kodierung, nicht als Dekoration. Teste gegen die Drei-Sekunden-Regel. Teste gegen Farbenblindheit. Teste auf Mobile und im Dark Mode.
Das Produkt, das disziplinierte Dataviz ausliefert, wirkt seriös. Das Produkt, das den Standard-Output der Chart-Bibliothek ausliefert, wirkt wie eine Vorlage. Nutzer bemerken den Unterschied, auch wenn sie nicht sagen können, warum.
Wenn du ein Team willst, das Dataviz-Systeme zusammen mit der restlichen Produkt-UI baut, beauftrage Brainy. Diagramme als erstklassiger Teil des Designsystems, in jedem Projekt.
Weiterführende Lektüre
Want a dashboard or product UI where the data actually communicates? Brainy ships data-heavy interfaces with chart systems built in, not bolted on after the fact.
Get Started
