Die besten Beispiele für Datenvisualisierung und Dashboard-Designs

Veröffentlicht: 2022-03-11

Datenvisualisierung und Dashboard-Design sind sowohl Kunst als auch Wissenschaft und nicht so einfach zu erstellen, wie es zunächst erscheinen mag. Wie veranschaulichen Top-UX-Designer und visuelle Designer komplexe Informationen, ohne die Benutzer zu verwirren?

Drei Wege: ein besseres Verständnis der UX-Prinzipien hinter gutem Dashboard-Design, die Anwendung grafischer Exzellenz und Praxis.

Das UX-Dashboard-Design folgt bestimmten Prinzipien und Best Practices. Grafische Exzellenz erfordert dagegen eine gründlichere Prüfung.

Best Practices für Datenvisualisierung und Dashboard-Design bieten Benutzern eine effiziente und interessante Möglichkeit, komplexe Ideen besser zu sehen und zu verstehen. (Ramotion)

Grafische Exzellenz ist definiert als:

Eine gut gestaltete und effiziente Präsentation interessanter Daten.
Komplexe Ideen effizient, klar und präzise kommuniziert.
Dem Betrachter auf kleinstem Raum die meisten Ideen mit dem geringsten Zeitaufwand und dem geringsten Tintenverbrauch zu bieten.
Die Wahrheit über die Daten sagen.

Eine ausgezeichnete Quelle für ein besseres Verständnis der grafischen Exzellenz ist die Arbeit von Edward Tufte. Er gilt als „Leonardo da Vinci der Daten“ und hat eine Vielzahl von veröffentlichten Arbeiten, Büchern und Vorträgen. David McCandless, der Gründer von information is beautiful, einer Website, die das Beste an Datenvisualisierungen und grafischer Exzellenz darstellt, ist eine weitere hervorragende Quelle.

Die Prinzipien von vorbildlichem UX-Design und grafischer Exzellenz gelten sowohl für das Dashboard-Design als auch für Datenvisualisierungen. Hier sind einige der besten Beispiele für das Design von Datenvisualisierungen und Dashboards.

Top-Datenvisualisierungen

Napoleons März 1812

Minards Visualisierung von Napoleons Marsch von 1812 gilt als eine der „besten statistischen Zeichnungen, die jemals geschaffen wurden“: Eine Visualisierung mit so vielen Informationen wie Minard wäre unmöglich gewesen, wenn es nicht um die Anwendung grafischer Exzellenz gegangen wäre.

Diese einzelne Visualisierung zeigt die Anzahl von Napoleons Truppen nach Standort, die von den Truppen erfahrene Temperatur und den Weg, den die Truppen von und nach Moskau genommen haben.

Ein Beispiel für Best Practices zur Datenvisualisierung — Napoleons Marsch von 1812 ist eine der großartigsten Visualisierungen von Charles Minard aus dem Jahr 1861, die Tausende von Datenpunkten mit überlegener grafischer Exzellenz zeigt.

Cholera-Karte von John Snow

John Snows Grafik aus dem Jahr 1854, die die Lage von Londons 13 öffentlichen Brunnen und 578 Cholera-Todesopfern zeigt, wobei senkrecht zu ihrer Lage gestapelte Balken verwendet werden: Sie ist leicht zu verstehen, enthüllt die Wahrheit in den Daten und gibt dem Benutzer alle Informationen, die er benötigt, um eine richtige zu zeichnen Fazit zu Cholera-Todesfällen.

Visuelle Anzeige von Daten mit gestapelten Balken und einer einfachen Karte — Die Datenvisualisierung von John Snow ist eines der besten Beispiele dafür, wie man eine Geschichte mit mehreren Datenpunkten erzählt und sie sowohl fesselnd als auch verständlich hält.

Geschichte der Rockmusik

Die folgende Grafik stellt nur einen Bruchteil der gesamten Datenvisualisierung dar und zeigt einen Ausschnitt aus mehr als 30 Musikstilen von über 700 Künstlern im Zeitraum von 1955 bis 1978.

Es stellt nicht nur Künstler und Stile dar, sondern zeigt Einflüsse, das Volumen der Plattenverkäufe, stilistische Kategorien und wo diese endeten oder fortgesetzt wurden. Diese Art von grafischer Exzellenz zu erreichen, ist keine Kleinigkeit.

Ein Vorteil der Datenvisualisierung ist die Unterstützung bei der Darstellung hochkomplexer Informationen. — Einer der Vorteile der Datenvisualisierung besteht darin, dass hochkomplexe Informationen sowohl verständlich als auch nützlich dargestellt werden.

Wo die Bevölkerung Europas wächst und schrumpft

Eine Top-Datenvisualisierung, die zeigt, wie man mit einer immensen Datenmenge unkompliziert, gut gestaltet und wahrheitsgetreu umgeht. In der interaktiven Version sind auch Filter enthalten, die noch mehr Datenexploration ermöglichen, z. B. Geburtenraten.

Ein Top-Beispiel für die Datenvisualisierung, das Tausende von Datenpunkten in einer nicht komplexen Grafik zeigt — Datenvisualisierung, die grafische Exzellenz mit Tausenden von komplexen Datenpunkten zeigt.

Tägliche Routinen berühmter Persönlichkeiten

Diese Datenvisualisierung ist nicht nur interessant, sondern auch ein klassisches Beispiel für grafische Exzellenz. In einer einzigen Grafik können wir eine detaillierte Darstellung der täglichen Gewohnheiten, Rituale, Beschäftigungen und Prioritäten berühmter Persönlichkeiten sehen.

Mithilfe eines einfachen farbcodierten Diagramms ist diese Visualisierung leicht verständlich, einfach, effektiv und vor allem informativ.

Datenvisualisierungs-Dashboard-Design mit vielen Datenpunkten — Datenvisualisierung mit mehreren Datenpunkten, ohne den Benutzer zu überfordern. (Podium)

Weltsprachen-Grafik

Diese klassische Datenvisualisierung zeigt die Anzahl der Sprachen auf dem Planeten, wo sie gesprochen werden und wer sie in verschiedenen Teilen der Welt spricht.

Ohne ein hohes Maß an grafischer Exzellenz wäre es schwierig, so viele Daten so elegant, informativ und leicht verständlich darzustellen.

Eine der Datenvisualisierungstechniken besteht darin, Grafiken zu verwenden, die Daten darstellen. — Eine ikonische Datenvisualisierung, die Tausende von Datenpunkten auf elegante und leicht verständliche Weise anzeigt.

Top-Dashboard-Designs

Damit ein Dashboard als überlegen gilt, muss es eine Reihe spezifischer UX-Kriterien erfüllen:

Klare und konsistente Namenskonventionen
Der Fluss und das Layout der priorisierten Daten
Die Ränder sind für die Lesbarkeit angemessen
Daten werden weder versteckt noch überladen
Verständlich und leicht zu lesen

Freiberufliche UX-Designer in Vollzeit in den USA gesucht

Marketing-KPI-Dashboard

Das folgende Beispiel ist ein hervorragendes Beispiel dafür, wie komplexe Geschäftsinformationen leicht verständlich gemacht werden können. Die zurückhaltende Farbgebung gefällt und die Verwendung separater Karten schont die Augen.

Einer der Gründe für das hervorragende Design dieses Dashboards ist sein Daten-Tinten-Verhältnis. Die Daten und der Raum ergänzen sich. Anstatt den Bildschirm mit weiteren Grafiken zu füllen, werden separate Karten mit kleinen Registerkarten verwendet. Dies ist eine ausgeklügelte Methode, wichtige Informationen verfügbar zu halten (dh sie nicht zu verstecken) und dem Benutzer gleichzeitig eine einfache und instruktive Möglichkeit zu geben, sie nach seinen eigenen Bedingungen anzuzeigen.

Eine bewährte Methode für das Dashboard-Design ist die Verwendung von Farbe, um die Bedeutung der Informationen zu verbessern. — Sparsame Farben und die Anzeige der für den Benutzer relevanten Informationen sind Prinzipien eines guten Dashboard-Designs. (Artjom Sokolow)

Stripe-Dashboard

Das Stripe-Dashboard ist ein hervorragendes Beispiel für Best Practices im Dashboard-Design. Es ist einfach, beantwortet die relevantesten Benutzerfragen und hat nahezu perfekte Ränder innerhalb jeder Karte.

Ein Benutzer-Dashboard, das eine großartige visuelle Anzeige von Daten zeigt — Das Stripe-Dashboard zeigt eine großartige visuelle Anzeige von Daten auf eine Weise, die für Benutzer einfach zu sehen und schnell und einfach zu verstehen ist. (Michael Villar)

Telemedizin-Dashboard

Telemedizinische Analysen sind dafür bekannt, viele Rohdaten zu liefern. Die Organisation dieser Daten in einem aussagekräftigen und informativen Dashboard kann eine Herausforderung sein. In diesem Beispiel werden bewährte UX-Methoden für das Dashboard-Design verwendet. Die Seitenränder werden verdoppelt, die Informationen werden mit Fragen und Antworten präsentiert und die Daten bleiben nicht verborgen.

Best Practice für das Dashboard-Design mit übersichtlichen Informationssilos und gutem Informationsfluss — Dieses Dashboard-Design folgt den Best Practices für solide Datenvisualisierung: großzügige Ränder, ausgewogenes Layout und guter Farbkontrast, die alle dazu beitragen, dass die Daten effizient interpretiert werden können.

Aktien-Dashboard

Aktien können auf einem einzigen Dashboard aufgrund der Anzahl von Datenpunkten, die um Platz konkurrieren, schwer zu konzipieren sein. Dieses Dashboard-Designbeispiel hat es geschafft, ein sauberes, minimalistisches Erscheinungsbild mit allen relevanten Informationen im Vordergrund und in der Mitte zu erzielen.

Ein erstklassiges Dashboard-Designbeispiel, das einfach komplexe Informationen anzeigt — Ein Aktien-Dashboard, das viele Datenpunkte und komplexe Informationen auf vereinfachte und dennoch informative Weise anzeigt. (WhiteonWhite Digital)

Web-Zielgruppen-Dashboard

Google Analytics leistet mit seinen Dashboards hervorragende Arbeit; Es kann jedoch viel Anpassung erfordern, um ein bestimmtes Ziel zu erreichen. Dieses Dashboard hat die Analyse auf ein neues Niveau gehoben, indem es eine einfache, leicht verständliche, leicht lesbare und hilfreiche Ansicht bietet, ohne die kognitive Belastung zu erhöhen.

Dashboard-Design UX angewendet im Hinblick auf Lesbarkeit und Verständnis der Daten — Ein Dashboard-Designbeispiel, das Webanalysen auf durchdachte Weise zeigt und darauf ausgerichtet ist, was Benutzer am meisten sehen möchten.

Dokumentationsverwaltungs-Dashboard

Das Verwalten von Dokumenten ist schwierig, aber es kann noch schwieriger sein, sie zu organisieren und einfach zu navigieren. Eine hervorragende Lösung ist dieses Dashboard, das die Dinge einfach, verständlich und überraschend spärlich hält.

Selbst mit einem minimalistischen Ansatz bietet dieses ausgezeichnete Dashboard-Designbeispiel dem Benutzer alles, was er braucht, um das Dokumentensystem sowohl zu verstehen als auch darin zu navigieren.

Ein hervorragendes Dashboard-Designbeispiel für ein Dokumentenmanagementsystem — Ein Beispiel für ein großartiges Dashboard-Design mit einem minimalistischen Ansatz für ein komplexes Dokumentensystem. (Jan Losert)

Pflanzenaussaat-Wetter-App – Mobiles Dashboard

Dieses mobile Dashboard ist sowohl informativ als auch leicht verständlich. Breadcrumbs helfen bei der Navigation und Symbole mit Beschreibungen in gängigen Sprachen helfen bei der Erstellung eines großartigen UX-Designs.

Mobile visuelle Anzeige von Daten — Eine Pflanzenaussaat-Wetter-App, die ein mobiles Dashboard präsentiert, das nicht mit „Chart-Müll“ überladen ist. (Tomasz Zych)

Kreditkarten-Dashboard – Mobiles Dashboard

Ähnlich wie beim Bankwesen sind Kreditkarten-Dashboards berüchtigt für schlechte UX, insbesondere auf einem mobilen Gerät. Dieses mobile Dashboard-Design geht in eine neue Richtung. Die Informationen sind nicht nur gut organisiert, sondern auch verständlich und funktionsreich, ohne überwältigend zu sein.

Best Practice für das Design mobiler Dashboards — Kreditkarten- und Banking-Dashboards sind komplex, es sei denn, UX-Prinzipien werden zusammen mit Best Practices für die Datenvisualisierung angewendet. (Raj-Lal)

Hervorragende Datenvisualisierung und Dashboard-Design erfordern grafische Exzellenz und ein Verständnis und die Anwendung der Prinzipien des Dashboard-Designs. Kongruent angewendet profitieren Anwender von informativen Datenvisualisierungen und Dashboards, die ein hochwertiges Nutzererlebnis bieten.

• • •

Weiterführende Literatur im Toptal Design Blog:

Dashboard-Design – Überlegungen und Best Practices
Datenvisualisierung – Best Practices und Grundlagen
Lassen Sie sich von diesen Datenvisualisierungen inspirieren
Rüsten Sie Ihre Analytics mit diesen Dashboard-Design-Inspirationen auf