Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Mobile-First-Datenvisualisierung I

Interaktive Visualisierungen für alle Geräte entwickeln

Mobile-First-Datenvisualisierung I

Das mobile Internet ist seit Jahren auf dem Vormarsch und hat in einigen Bereich bereits die Nutzung durch stationäre Computer überholt. Damit müssen Webseiten umso mehr auch auf kleinen Bildschirmen funktionieren und sich nicht nur per Maus, sondern auch per Touch bedienen lassen. Welche Konsequenzen hat das für die Datenvisualisierung?

Die Visualisierung von Daten im Web hat in den letzten Jahren Aufwind bekommen. Das liegt an den steigenden multimedialen Fähigkeiten der Webtechniken, ist aber auch auf den allgemeinen Trend zurückzuführen, Informationen zu analysieren, aufzubereiten und visuell zu vermitteln. Viele der bisherigen Datenvisualisierungen sind auf Desktop-PCs ausgelegt: Sie sind komplex, setzen leistungsfähige Rechner voraus, sind für große Bildschirme und Mausbedienung ausgelegt. Einige nutzen sogar Flash-Plugins. Oft sehen Visualisierungen wie eine Kommandozentrale aus, ein überfrachtetes Interface mit dutzenden Menüs und Reglern.

Der Fakt, dass die Nutzung von Mobilgeräten stetig wächst und die Nutzung von klassischen Web-Zugangsgeräten übertrifft, zwingt uns zu einem Paradigmenwechsel. Das etablierte Designkonzept Mobile First legt den Fokus bei der Entwicklung von neuen Websites auf Mobilgeräte, ohne andere Zugangs- und Nutzungsarten aus den Augen zu verlieren. Leider stehen wir hinsichtlich der Datenvisualisierung noch am Anfang. Es gibt mittlerweile hervorragende native Apps, die z.B. aufgezeichnete persönliche Daten visualisieren. Doch die Zahl der Webprojekte, die Daten für alle Geräte gelungen visualisieren, ist noch klein.

Dieser Artikel bietet keine Patentlösungen, sondern definiert Anforderungen, zeigt Probleme auf und schildert Erfahrungen.

Ziele und Grenzen

Datenvisualisierungen im Web lassen sich grob in zwei Kategorien aufteilen:
Einerseits klassische Diagramme (z.B. Linien-, Balken- und Kuchendiagrammen, Karten). Diese kommen in verschiedenen Bereichen vor und lassen sich mit leistungsfähigen JavaScript-Bibliotheken wie Highcharts oder Datawrapper umsetzen.
Andererseits aufwändige, maßgeschneiderte Visualisierungen für einen begrenzten Datenbestand. Diese finden sich oftmals im sogenannten Datenjournalismus und beim Interactive Storytelling. Sie werden händisch z.B. mit der Bibliothek D3.js entwickelt.

In beiden Fällen stellt die Anpassungsfähigkeit der Visualisierung an die mannigfachen Zugangstechniken eine Herausforderung dar. Allein die Bandbreite der Bildschirmgrößen ist enorm. Wünschenswert ist, dass eine Visualisierung sowohl auf kleinen Smartphones als auch auf großen PC-Bildschirmen, sowohl im Hoch- als auch im Querformat funktioniert. Dem sind schon dadurch Grenzen gesetzt, dass das Grundkonzept der Visualisierung nur bedingt flexibel ist. Manche Visualisierungen leben davon, viele Daten zueinander in Relation zu setzen und Details schnell zugänglich zu machen.

Konzept: Das Wesentliche herausarbeiten

Eine erfolgreiche Datenvisualisierung vermag auszuwählen, zu gewichten und die Aufmerksamkeit zu lenken. Das wird im Mobilbereich umso wichtiger. »Mobile First« bedeutet nach Luke Wroblewski, sich auf das Wesentliche zu beschränken, ohne inhaltlich zu vereinfachen und zu verflachen.

Das Konzept sollte demnach die wesentlichen Aspekte herausarbeiten und eine Visualisierung entwickeln, die die entsprechenden Informationen beinhaltet. Nicht alle Daten können mit allen verglichen werden, dies würde dem Ziel der Visualisierung entgegen stehen. Daher ist es wichtig, eine initiale Auswahl treffen und darüber hinaus die Daten navigierbar zu machen.

Die Erfahrung zeigt, dass funktionierende und anpassungsfähige Visualisierungen durch manuellen Design-Arbeit und viele händische Anpassungen entstehen. So mühsam es klingt, das Ziel wird durch Suchen, Ausprobieren und Verbessern erreicht. Anpassungsfähige Visualisierungen gleichen insofern responsiven Website-Layouts, die durch ein starkes Grundkonzept, Detailanpassungen und stetige Verbesserung gelingen.

Grundgerüst mit SVG oder Canvas

Interaktive Visualisierungen werden in aller Regel clientseitig mit JavaScript erzeugt. Einfache Formen und Flächen können bereits mit HTML und CSS erzeugt werden. Vielseitiger sind Skalierbare Vektorgrafiken (SVG). Diese erlauben komplexe Formen und Effekte, die auch auf Geräten mit hoher Pixeldichte gut aussehen. Genauso wie HTML kann SVG über die DOM-Schnittstelle erzeugt und bearbeitet werden, und die Verarbeitung von Events erfolgt nach denselben Regeln. Ein bewährter Ablauf ist, dass JavaScript die Daten im CSV- oder JSON-Format einliest und ein SVG-DOM erzeugt. Die Standardbibliotheken dazu sind D3.js sowie Snap.svg.

Für spezielle Datenvisualisierungen eignet sich HTML5 Canvas mit 2D- oder 3D-Kontext (WebGL). Diese erlauben je nach Anwendungsfall eine bessere Rendering-Performance. Da lediglich auf eine Fläche gezeichnet wird und kein Render-Tree zur Verfügung steht, ist eine objektorientierte Abstraktion wie EaselJS, KinecticJS bzw. three.js zu empfehlen.

Anpassungsfähigkeit: Konzepte

Darstellungsmodi

Als hilfreich erwiesen haben sich verschiedene Darstellungsmodi, die die Visualisierung anhängig von der Größe des Viewports bzw. der Größe des Container-Elements annimmt. Bei schmalen aber hohen Viewports (z.B. Smartphones) oder bei einer Darstellung in einer schmalen Spalte des Layouts wird eine Kompaktdarstellung gewählt. Je nach zur Verfügung stehender Höhe und Breite wird ein unterschiedlicher Detailgrad gewählt.

Die Grundproportionen können bestehen bleiben, aber Elemente sollten intelligent skaliert, positioniert und angezeigt bzw. versteckt werden. Die Menge der Daten und die Art ihrer Darstellung variieren. Dies ermöglicht eine effektive Nutzung sowohl von kleinen als auch großen Bildschirmen. Anstatt Daten und visuelle Elemente gleichzeitig darzustellen, werden sie gegebenenfalls nacheinander nach Nutzerinteraktion dargestellt.

Es ist nicht ratsam, die Visualisierung einfach hoch- und herunterzuskalieren. Beim Hochskalieren einer einfachen Grafik würde der Bildschirmplatz nicht effektiv genutzt. Beim Herunterskalieren einer komplexen Grafik würden die grafischen Elemente zu Pixelbrei, die Texte würden unlesbar und Visualisierung wäre insgesamt überfüllt.

Chart-Modus klein
(OECD Data Portal)
Chart-Modus mittel (OECD Data Portal)
Chart-Modus groß (OECD Data Portal)

Hochformat und Querformat

Bei manchen Visualisierungen ist es möglich, die Hauptachse zu kippen. Bei Hochformat-Viewports ist die Hauptachse vertikal, sodass gescrollt werden kann, um weitere Daten zu sehen. Bei großen Querformat-Viewports verläuft die Hauptachse horizontal und es passen mehr Daten in den Viewport.

Horizontale Visualisierung (New York Times)
Vertikale Visualisierung (New York Times)

Small Multiples und Vergleichsgrößen

Um überfüllte, unübersichtliche Diagramme zu vermeiden, eignen sich sogenannte Small Multiples. Dabei wird z.B. ein komplexes Liniendiagramm in mehrere kleine aufgesplittet, sodass pro Diagramm nur ein oder zwei Datenreihen dargestellt werden. Die Achsen werden kompakt dargestellt und auf umfangreiche Beschriftungen und Legenden in den Diagrammen wird verzichtet. Die Vergleichbarkeit bleibt erhalten, da zahlreiche dieser Diagramme in den Viewport passen. Nicht nur die Reduktion der Daten erleichtert eine anpassungsfähige Visualisierung, auch eine Auswahl von sinnvollen Vergleichsgrößen. Das können der Vorjahreszeitraum, das Minimum, das Maximum oder der Median sein.

Small Multiples: Mehrere kleine Charts in einer Matrix (OECD Data Portal)

Vollbild-Modus

Auf Mobilgeräten wird der vergleichsweise kleine Viewport noch weiter durch Bedienelemente des Browsers und des Betriebssystems beschnitten. Damit Visualisierungen zur vollen Geltung kommen und gut bedient werden können, sollte es möglich sein, sie außerhalb eines beschränkenden Layouts oder sogar im Vollbild-Modus anzusehen. Dies kann mit einem separaten HTML-Dokument gelöst werden, das nur die Visualisierung enthält, oder direkt mit der JavaScript-Fullscreen-API.

Anpassungsfähigkeit: Technische Umsetzung

Mithilfe von Media Queries lassen sich HTML- und in beschränktem Maße SVG-Elemente abhängig von der Viewport-Größe formatieren. Bei eingebetteten Visualisierungen, die nicht notwendig den gesamten Viewport bedecken, helfen sie nicht weiter. Was wir eigentlich bräuchten, sind Element Queries.

Um verschiedene Modi umzusetzen, müssen wir die Größe des Containers mit JavaScript messen. Das JavaScript setzt dann eine Modus-Klasse wie z.B. small, medium oder large. Somit können Styles für den jeweiligen Modus greifen. Mithilfe der Container-Größe wird auch die Visualisierung passend gezeichnet. Es ist sinnvoll, den dokumentweiten resize-Event zu überwachen und die Visualisierung zu aktualisieren, sodass sie sich die zu Verfügung stehenden Höhe und Breite anpasst.

Wie allgemein bei responsiven Websites stellen Rastergrafiken eine Schwierigkeit dar. Im einfachsten Falle verzichtet eine Visualisierung auf Pixelgrafiken und nutzt konsequent Vektorgrafiken. Allerdings gibt es sinnvolle Anwendungen für Rastergrafiken in der Datenvisualisierung, z.B. Fotografien, Satellitenbilder, Filmaufnahmen, gezeichnete Illustrationen, vorgerenderte Animationen. Hier muss im Einzelfall entschieden werden, ob verschiedene Versionen mit dem picture-Element geladen werden.

Der zweite Teil dieses Artikels zeigt morgen, wie ihr Touchscreens unterstützt, Gesten sinnvoll einsetzt und die Performance der Visualisierung für Mobilgeräte optimiert.

Kommentare

Peter Bauer
am 03.12.2014 - 13:03

Ich bin gespannt auf die Fortsetzung.

Permanenter Link

Die Kommentare sind geschlossen.