Usage Guidelines
Chart Aufbau
Das Layout aller Chart-Komponenten setzt sich aus den nachfolgenden drei Bereichen zusammen:
Die Chart-Komponente besteht aus einem Minimalset an Layoutelementen, die bei jedem Chart enthalten sein müssen. Darüber hinaus bietet die Chart-Komponente optionale Layoutelemente, die je nach Use Case und Sinnhaftigkeit integriert werden können.
Chart Header
Der Header ist – wie der Name schon sagt – ganz oben, über den eigentlichen Daten platziert.Der Header kann die folgenden Elemente umfassen:
- Diagrammtitel („Chart Title“)
- Untertitel („Chart Subtitle“) – optional
- Datum („Last updated“) – optional
- Funktionalitäten/Icon Buttons – optional
Diagrammtitel
Im Header ist das wichtigste Layoutelement der Diagrammtitel („Chart Title“).
🟢 Der Diagrammtitel beschreibt prägnant und klar den Zweck der Visualisierung.
🔴 Nutze den Diagrammtitel nicht, um eine exakte Beschreibung des Charts wiederzugeben. Dadurch geht der zentrale Zweck verloren.
Untertitel
Der Diagrammtitel kann bei Bedarf durch einen Untertitel („Chart Subtitle“) ergänzt werden.Zusätzlich kann ein Datum angezeigt werden, welches das letzte Update der Daten angibt („Last updated“). Dieses Datum kann vor allem im Kontext von Live-Daten relevant sein.
Zusätzliche Funktionalitäten
Schließlich bietet der Header die Möglichkeit, mit Hilfe von zwei Icon-Buttons in der rechten Ecke zusätzliche Funktionalitäten für den Chart zu hinterlegen. Mögliche Funktionalitäten können „Daten als Tabelle anzeigen“, „Chart/Daten herunterladen“, „Chart/Daten exportieren“, „Alternativen Beschreibungstext anzeigen“, „Chart anpassen“, etc. sein.
🟢 Die Funktionalitäten sind im Kontext von Charts eindeutig als “Chart/Daten herunterladen” und “Chart anpassen” verständlich.
🔴 Das “Warning”- und “Calendar”-Icon sind im Kontext von Charts nicht eindeutig verständlich, weshalb die entsprechenden Funktionalitäten (bspw. “Alarm einrichten”, “Zeitraum auswählen” o.Ä.) besser durch Labels beschrieben und an anderer Stelle integriert werden sollten.
Chart Content
Der Chart Content bildet den zentralen Bereich eines Charts, in welchem die Daten visualisiert werden.Je nach Chart-Typ kann der Chart Content variieren – ähnliche Chart-Typen basieren auf dem gleichen Chart Content Layout.
Chart Content von rechteckigen Charts
Die Guidelines für den Chart Content von rechteckigen Charts ist anzuwenden auf die folgenden Chart-Typen:
Der Chart Content von rechteckigen Charts kann die folgenden Elemente umfassen:
- Achsentitel für x- und y-Achse („x-Axis Title“ / „y-Axis Title“) – optional
- Achsenwerte/-labels („X Value“ / „Y Value“)
- Einheiten („X Units“ / „Y Units“) – optional
- Horizontale und/oder vertikale Gitternetzlinien („X Lines“ / „Y Lines“) – optional
- Datenlinien/-bereiche
- Datenlabels – optional
Achsentitel
X- und y-Achse stellen die horizontale und vertikale Begrenzung eines rechteckigen Charts dar. Die x-Achse repräsentiert die unabhängige Variable (z.B. Zeit, Kategorien, …), während die y-Achse die davon abhängige Variable (z.B. Anteile, Messungen, …) darstellt. Die Achsentitel an x- und y-Achse helfen dabei, die Daten intuitiv einordnen zu können.
🟢 Die Achsentitel sollten immer kurz, prägnant und präzise formuliert sein.
🔴 Achsentitel sollten nicht zu lang sein, um ein schnelles Erfassen der Daten zu ermöglichen. Auch sollten sie nicht unpräzise (fehlende “in Mio.”) sein, um Missinterpretationen zu vermeiden.
Achsentitel Sonderfälle
🟢 Sofern der Kontext der Daten durch die Achsenwerte/-labels bereits klar wird, kann auf einen zusätzlichen Achsentitel verzichtet werden.
🔴 Wenn der Kontext nicht eindeutig ist, sollten Achsentitel immer angezeigt werden.
🟢 Falls keine Achsentitel verwendet werden können, kann der Untertitel für die Beschriftung von einer Achse verwendet werden.
🔴 Verwende den Untertitel nicht, wenn sowohl die x- als auch die y-Achse dort erklärt werden muss.
Achsenwerte/-labels
Die Achsenwerte/-labels sind unerlässlich für die Dateninterpretation, da sie die Skalierung und den Maßstab der Daten festlegen. Abhängig von den vorliegenden Daten können numerische Achsenwerte wie „1“, „0,5“, „-1“, „1990“, … oder kategoriale Achsenlabels „Januar“, „weiblich“, „Berufstätig“, … verwendet werden.
🟢 Die Achsenwerte/-labels innerhalb einer Achse sollten einheitlich und in ihrem Intervall gleichmäßig sowie sinnvoll eingesetzt werden.
🔴 Ein ungleichmäßiges Intervall (x-Achse) kann zu Fehlinterpretationen führen. Ebenso kann ein nicht sinnvolles Intervall (y-Achse) die Lesbarkeit der Daten erschweren oder diese sogar verzerren.
Achsenwert Einheiten
Während Achsenwerte/-labels in keinem Fall weggelassen werden sollten, können optional Einheiten („X Units“ / „Y Units“), wie bspw. „%“, „km“, „min“, … an den Achsenwerten ergänzt werden, sofern die Art der Achsenwerte dies erfordert.
🟢 Da es sich an der y-Achse um prozentuale Werte handelt, werden hier die Einheiten an jedem Achsenwert angezeigt.
🔴 Durch das Fehlen der Einheit wird die Lesbarkeit erschwert und es können Missinterpretationen auftreten.
Horizontale und/oder vertikale Gitternetzlinien
Die horizontalen und vertikalen Gitternetzlinien dienen ebenso wie die Achsenwerte/-labels dazu, die Skalierung und den Maßstab der Daten abzubilden. So wird die Lesbarkeit der Daten erhöht und es werden Fehlinterpretationen verhindert.Der Verzicht auf Gitternetzlinien kann folglich zu Ungenauigkeiten führen. Auf der anderen Seite können zu viele Gitternetzlinien den Chart auch überfrachten, weshalb auch bei der Anzahl der Gitternetzlinien auf die Angemessenheit und Sinnhaftigkeit geachtet werden muss.
🟠 In Ausnahmen kann auf Gitternetzlinien auch gänzlich verzichtet werden. Allerdings nur, sofern die Datenpunkte den Achsenwerten/-labels immer noch eindeutig zugeordnet werden können und/oder die genaue Zuordnung zur Dateninterpretation nicht erforderlich ist (bspw. wenn die Kernaussage durch den Trend/Verlauf der Daten deutlich wird).
🟠 Durch die Verwendung von zu vielen Gitternetzlinien kann der Chart überfüllt wirken, wodurch der Fokus auf die Datenlinien selbst verloren gehen kann.
Chart Footer
Der Footer eines Charts als Gegenstück zum Header, beschließt den Chart und enthält zusätzliche Informationen zur Interpretation der Daten.Der Footer kann die folgenden Elemente umfassen:
- Legende
- Datenquelle(n) („Source“) – optional
Legende
Die Legende verbindet die Datensätze, die im Chart Content visualisiert werden, mit Datenlabels. Diese sollten prägnant und verständlich formuliert sein und sich im besten Fall auf ein Wort beschränken.
🟢 Die Legende ist prinzipiell ein unverzichtbares Layoutelement der Chart-Komponente und sollte unterhalb des Charts platziert werden.
🔴 Ab vier oder mehr Datensätzen sollten keine Datenlabels direkt im Chart Content platziert werden, da die Datenlabels überlappen und schlecht zugeordnet werden können.
Datenlabels anstatt einer Legende
🟢 Werden weniger als vier Datensätze abgebildet, passiert die Zuordnung der Datensätze am besten über Datenlabels, die direkt im Chart platziert sind. Die Datenlabels werden entweder an der rechten Seite von Datenlinien oder im Falle von Datenbereichen darin oder darüber platziert.
🟠 Werden im Chart weniger als vier Datensätze abgebildet, wird keine separate Legende mehr benötigt. Die Zuordnung ist einfacher über Datenlabels, die direkt im Chart platziert sind.
Datenquelle
Abschließend kann eine Datenquelle („Source“) angegeben werden.Dies ist eine rein optionale Information, die sinnvoll sein kann, wenn die Aktualität der Daten gewährleistet und kommuniziert sein muss oder auf verschiedene mögliche Datenquellen zugegriffen werden kann.
Weitere Visualisierungen benötigt?
Du benötigst weitere Daten Visualisierungstypen oder möchtest gerne ein eigene Visualisierung entwickeln, die nicht in einer Standardbibliotheken enthalten ist? Dann melde dich gerne bei uns.
E-Mail schreiben
Weiter