Sparklines - Hochauflösende Datenworte in Miniaturgröße 17Feb08

Die grafische Visualisierung von Daten gewinnt wegen der neuen technischen Möglichkeiten nun auch bei Softwarebedienoberflächen zunehmend an Bedeutung. Dass zur Visualisierung nicht nur große Geschäftsgrafiken in Berichten oder Auswertungen eingesetzt werden können, zeigt ein Ansatz von Edward Tufte. Er beschreibt in seinem Buch „Beautiful Evidence“ wie sich mit Miniatur-Grafiken – sogenannten Sparklines – Daten besser visualisieren lassen.

Sparklines sind hochauflösende Grafiken, welche im direkten Kontext von Texten, Tabellen oder Bildern eingesetzt werden können. Damit wird zum einen das Lesefluss-behindernde Referenzieren von Datengrafiken (z.B. „Siehe Abb. 1 im Anhang“) in Texten vermindert. Aus einzelnen Zahlen bzw. Zahlenreihen entstehen so narrative Datenworte. Diese veranschaulichen neben dem aktuellen Wert auch Zusammenhänge bzw. die Entwicklung dieses Wertes. Als Beispiel habe ich mal eine Tabelle zu Wechselkursen mit Sparklines angereichert. Heute werden diese Werte oft in einfachen Übersichtstabellen dargestellt:




Damit der Betrachter die Entwicklung der Werte besser einschätzen kann, wird oft eine zusätzliche Grafik angeboten. Diese ist z.B. durch einen Klick auf einen Wert über eine zusätzliche Seite erreichbar. Mit Hilfe von Sparklines kann diese Information bereits auf den ersten Blick vermittelt werden:



Um dem Betrachter noch etwas mehr Genauigkeit für die Einschätzung der Grafik zu bieten, ist es möglich weitere Informationen wie z.B. den Anfangswert hinzuzufügen.



Tufte hatte Sparklines ursprünglich als ein Visualisierungskonzept für hochauflösende Medien wie z.B. Papier gedacht. Grundgedanke war es die Fähigkeiten des menschlichen Auges zu nutzen. Dieses ist in der Lage visuelle Unterschiede bis zu einer Größe von 0,1 mm zu erkennen. Diese Detailgenauigkeit lässt sich mit aktuell gängigen Druckverfahren auf Papier erreichen. Leider haben aktuelle Computermonitore noch nicht so hohe Auflösungen. Beispielsweise ist ein Pixel – und damit die kleinste visuelle Einheit – auf einem herkömmlichen 19-Zoll-Bildschirm mit einer Auflösung von 1280×1024 immer noch ca. 0,3 mm groß.

Die interaktiven Möglichkeiten des Computermonitors können diesen Nachteil aber teilweise beseitigen. Beispielsweise durch Ebenen die maussensitiv angezeigt werden.




Um Sparklines in Software nutzen zu können, sollten aus meiner Sicht folgende gestalterische Eckpunkte beachtet werden:

  • Zwischen der Sparkline-Grafik und den dazugehörenden Zahl(en) sollte der visuelle Zusammenhang leicht erkennbar sein. Beispielsweise kann dies durch die Verwendung von Farbe erreicht werden.
  • Außerdem sollte der Zusammenhang so visualisiert sein, dass der Betrachter die Grafik leicht quantifizieren kann. Dass heißt z.B. dass der Betrachter den Wertebereich der Grafik einschätzen kann oder erkennen kann, ob es sich um eine große oder kleine Veränderung handelt. Beispielsweise lässt sich das durch die Markierung und Bezeichnung eines oder mehrere Datenpunkte auf der Sparkline-Grafik erreichen.


  • Die Sparkline-Grafik und die dazugehörenden Zahl(en) sollten als ein zusammenhängendes Wort erkennbar sein. Dazu ist es ratsam, dass Grafik und Zahl(en) das gleiche visuelle Gewicht erhalten. Wird das visuelle Gewicht z.B. durch zu kräftige Kontraste oder flächige Darstellung auf die Grafik verschoben leidet die Lesbarkeit.


  • Nicht jede bekannte Grafikform ist für den Einsatz als Sparkline geeignet. Es ratsam eher auf einfache Grafikformen zu setzen, die dem Betrachter eine ungefähre Vorstellung vermitteln. Datenvisualisierungen, bei denen es auf große Genauigkeit und gute Lesbarkeit verschiedener bzw. aller Werte ankommt, sollten besser mit großen Grafiken dargestellt werden.
  • Um die eingeschränkte Auflösung von Computermonitoren so gut wie möglich zu nutzen, sollten die Sparklines geglättet dargestellt werden.

Ein Beispiel für den Praxiseinsatz von Sparklines findet sich bei google Analytics:



Screenshot google Analytics

Siehe auch:
Sparklines: theory and practice

Grafische Tabellen: Couchcontrolling



 
 


Suche



Twitter


Translate




Feed


Aktuelle UX-Jobs


Kategorien


Tags