1. Design-Prinzipien¶
+1.1 Grafikdesign
+1. Design-Prinzipien¶
1.1 Grafikdesign¶
++Grafikdesign ist ein Beruf, eine akademische Disziplin und eine angewandte Kunst, deren Tätigkeit darin besteht, visuelle Mitteilungen zu entwerfen, die dazu bestimmt sind, bestimmte Botschaften an soziale Gruppen mit bestimmten Zielen zu übermitteln.
+
– Professional Graphics Design by Scholar IT Institute
+Wesentlich sind demnach
+-
+
- Kommunikation +
-
+
- Ziele +
-
+
- Zielgruppen +
1.1.2 Das Raster
+1.1.4 Diagramm-Aufbau
+Dazu unterscheiden wir zunächst die beiden Hauptzwecke der Datenvisualisierung:
+-
+
- explorative Datenvisualisierung +
-
+
- erklärende Datenvisualisierung +
)
Quelle: PyViz Tutorial
+
-
+
- die illustrierten Diagramme vermitteln die Botschaft besser +
-
+
- die illustrierten Diagramme bleiben nach einem Zeitraum von drei Wochen besser in Erinnerung +
Die Illustrationen und visuellen Elementen scheinen also die Vermittlung einer Botschaft in (einfachen) Datensätzen nicht zu beeinträchtigen.
+Wie in den Abschnitten 1.1.3 Gliederung und Leserichtung und 1.1.2 Das Raster beschrieben, können einige Elemente in einer Veröffentlichung stärker hervorgehoben werden, indem sie einfach in die linke obere Ecke gesetzt werden. Es gibt jedoch noch weitere Möglichkeiten, eine visuelle Hierarchie zu schaffen:
+1.2.4 Seitenverhältnisse
+1.2.5 Farbe
+1. Design-Prinzipien¶
1.2. Visuelle Hierarchie¶
1.2.1 x- und y-Achse¶
Die einfachste Art einer visuellen Hierarchie ist die Position von Elementen in einem Design: Elemente, die am Anfang einer Publikation platziert sind, werden vor Elementen weiter unten auf der Seite betrachtet, und Elemente auf der linken Seite einer Zeile werden vor Elementen auf der rechten Seite betrachtet.
+Die Hierarchie für die Position von Elementen in einem Design lautet
+oben links → oben rechts → unten links → unten rechts
+Obwohl Papier- und Bildschirmpublikationen naturgemäß zweidimensional angezeigt werden, gibt es Techniken, um Tiefe und eine dritte Dimension in z-Richtung zu simulieren:
+-
+
- Layer +
-
+
- Schatten +
Viele visuelle Designprogramme wie GIMP, Adobe Photoshop und Illustrator verwenden die Metapher der Ebenen für die Verwaltung der verschiedenen Elemente eines Designs.
+Ebenen wird auch in geografischen Informationssystemen verwendet:
+
-
+
- Der gesamte Text sollte sich über allen anderen Ebenen befinden. +
-
+
- Datenmarkierungen (Punkte, Kreise, Balken, Linien, …) sollten über unterstützenden Elementen, wie Gitternetzlinien, liegen. +
-
+
- Wenn sich Datenmarkierungen überlappen können, stellt sicher, dass kleinere Elemente über größere gezeichnet werden. +
-
+
- Alternativ kann eine leichte Transparenz der überdeckenden Elemente die darunter liegenden Elemente durchscheinen lassen. +
Die Illusion von Tiefe kann auch durch die Verwendung von Schatten erzeugt werden:
+
Quelle: Le Monde
+
Quelle: How America Uses Its Land
+Innerhalb einer Visualisierung wird durch die Größe des Textes eine klare visuelle Hierarchie geschaffen.
+
-
+
- Datenmarkierungen und Schriftgrößen sollten skaliert werden, damit größere Diagramme nicht leer wirken. +
-
+
- Die Anzahl der Diagrammdaten kann bei größeren Diagrammen zunehmen. +
-
+
Der Raum für Anmerkungen nimmt bei größeren Diagrammen zu.
+Sind die Anmerkungen unverzichtbar für die Botschaft des Diagramms, können sie in kleineren Versionen ausgelagert werden, z.B. in einen separaten Bereich unterhalb des Diagramms.
+
+
Quelle: Datawrapper
+Bestimmte Diagrammtypen tendieren zu einem breiten Layout, während andere sich schnell zu einem hohen Layout entwickeln:
+-
+
- Balkendiagramme mit vertikalen Balken sind eher breit als hoch. +
-
+
- Steigungsdiagrammene hingegen sind eher hoch als breit. +
-
+
- Tortendiagramme nehmen einen mehr oder weniger quadratischen Platz ein. +
-
+
- eine auffällige Farbe zur Hervorhebung und Kennzeichnung der Datenmarkierungen oder Kategorien, die für die Aussage des Diagramms von größter Bedeutung sind +
-
+
- dezentere Farben für andere sekundäre Datenmarkierungen oder Kategorien +
-
+
- Schwarz für die wichtigsten Textelemente, wie den Titel der Visualisierung +
-
+
Grau
+-
+
- für weniger wichtige Datenmarken, die nur für den Kontext hinzugefügt werden +
- für unterstützende Diagrammelemente, wie Achsenbeschriftungen und Gitterlinien +
+
2. Data-Storytelling¶
+++»Geschichten haben alle Elemente des Lebens, und noch mehr: Menschen, Orte, Zeit, Emotionen, Absichten, Kausalität, Dramatik, Spannung, Geheimnisse, und dann lauern in jeder Schicht Moral, Magie und Bedeutungen aller Art, die der Leser entdecken und wiederentdecken kann. Wie das Leben, aber das Leben verdichtet, geschärft, verschönert und neu erdacht.«
+
– Barbara Tversky, Data-Driven Storytelling
+2. Data-Storytelling¶
2. Data-Storytelling¶
Der obige chartoon zeigt deutlich die häufigsten Elemente, die den meisten Geschichten gemeinsam sind:
+-
+
- Kontext +
-
+
- Figur +
-
+
- Ereignisse +
-
+
- Wirkung +
2. Data-Storytelling¶
+Quelle: The UK contribution to the EU budget, ONS
+
++„Interessanterweise entspricht das journalistische Dreieck mehr oder weniger dem Mantra interaktiver Grafiken:
+zuerst Überblick, zoomen und filtern, und Details auf Anfrage“
+
– Barbara Tversky in Data-Driven Storytelling
+2. Data-Storytelling¶
Journalistische Techniken¶
Mantra der visuellen Informationssuche¶
Quelle: Bloomberg: How Hong Kong’s National Security Law Is Changing Everything
+2. Data-Storytelling¶
Journalistische Techniken¶
Mantra der visuellen Informationssuche¶
Quelle: Bloomberg: How Hong Kong’s National Security Law Is Changing Everything
+2. Data-Storytelling¶
Journalistische Techniken¶
Mantra der visuellen Informationssuche¶
Quelle: Bloomberg: How Hong Kong’s National Security Law Is Changing Everything
+2. Data-Storytelling¶
Journalistische Techniken¶
Mantra der visuellen Informationssuche¶
+Quelle: Datawrapper
+
Quelle: population.io
+
3. Kognitive Belastung¶
+++Die kognitive Belastung beschreibt den Umfang des Arbeitsspeichers, den eine Person verwendet, wenn sie neue Informationen aufnimmt und sie in das Langzeitgedächtnis überträgt. Vereinfacht ausgedrückt, hilft uns die kognitive Belastung dabei zu beurteilen, wie leicht oder schwer es für jemanden ist, etwas Neues zu verstehen.
+
– Eva Sibinga, Erin Waldron: Cognitive Load as a Guide: 12 Spectrums to Improve Your Data Visualizations
+3. Kognitive Belastung¶
Die kognitive Belastung wird in drei Arten unterteilt, die alle für die Datenvisualisierung relevant sind:
+
Quelle: gapminder.org/tools
+
3. Kognitive Belastung¶
+-
+
- Vorunterricht (Pre-Teaching) +
Quelle: Gapminder Tools Guide
+3. Kognitive Belastung¶
-
+
- Effekt der geteilten Aufmerksamkeit (Chunking) +
4. Diagramm-Typen¶
+Der Diagrammtyp ist abhängig von
+4.1 Datentypen
+4.2 Botschaft
+4.3 Datengröße
+4.4 Zielgruppe
+4.5 Medium
+4.1.1 Kategorische Daten¶
+
Quelle: Visual Vocabulary Poster
+4. Diagramm-Typen¶
4.2 Botschaft¶
Galerien zur Datenvisualisierung¶
-
+
- Dataviz Project +
- Das Dataviz-Projekt ist eine Sammlung von Datenvisualisierungen mit mehr als 160 Diagrammtypen. +
- Data to Viz +
- Die Data to Viz-Galerie enthält etwa 40 Diagrammtypen, die als einfache Gitterliste oder als Hierarchie der Datentypen durchsuchbar sind. +
- Dataviz Inspiration +
- Dataviz Inspiration ist eine Sammlung von Datenvisualisierungen, die von Yan Holtz, dem Autor von data-to-viz.com, kuratiert wurde. Mit Dataviz Inspirations möchte Holtz Hunderte der schönsten und wirkungsvollsten Datenvisualisierungsprojekte vorstellen. +
- Dataviz Catalogue +
- Der Katalog der Dataviz Collection enthält rund 60 Diagrammtypen, die nach Funktionen durchsucht werden können. +
4. Diagramm-Typen¶
4.2 Botschaft¶
Galerien zur Datenvisualisierung¶
-
+
- Xenographics +
- Xenographics ist eine Sammlung seltsamer, aber (manchmal) nützlicher Diagramme, kuratiert von Maarten Lambrechts. Das Ziel der Sammlung ist es, neuartige, innovative und experimentelle Visualisierungen zu zeigen, die für die Visualisierung bestimmter Datensätze inspirierend sein können. +
- One chart at a time +
- One Chart at a Time ist eine Reihe von Videos, die der Buchautor, Podcaster und Visualisierungsspezialist Jon Schwabish erstellt hat. Für die Videoserie hat er mehr als 50 Personen aus der Welt der Datenvisualisierung gebeten, einen bestimmten Diagrammtyp zu diskutieren, indem sie ihn beschreiben und einige Beispiele für den Diagrammtyp geben. +
-
+
- Abweichung +
- um positive und negative Abweichungen von einem festen Bezugspunkt hervorzuheben +
-
+
- Korrelation +
- um die Beziehung zwischen zwei oder mehreren Variablen darzustellen +
-
+
- Rangfolge +
- zur Verwendung, wenn die Position eines Elements in einer geordneten Liste wichtiger ist als sein absoluter oder relativer Wert +
-
+
- Verteilung +
- zur Darstellung von Werten in einem Datensatz und deren Häufigkeit +
-
+
- Größenordnung +
- um Größenvergleiche darzustellen +
-
+
- Teil-zu-Ganzes +
- um zu zeigen, wie eine einzelne Einheit in ihre Bestandteile zerlegt werden kann +
Quelle: Maarten Lambrechts
+
Quelle: Datawrapper
+5. Accessibility¶
+
Web Content Accessibility Guidelines (WCAG)
+Version 2.0 wurde 2008 veröffentlicht und enthielt vier Zugänglichkeitsgrundsätze, die auch als POUR-Prinzipien bezeichnet werden.
+-
+
- Perceivable (wahrnehmbar) +
-
+
- Operable (bedienbar) +
-
+
- Understandable (verständlich) +
-
+
- Robust +
-
+
- A: minimale Konformität +
- Einige der Anforderungen, um diese Stufe zu erreichen, sind +
-
+
- Alle Nicht-Text-Inhalte, wie Bilder und Videos, sollten eine Textalternative haben. +
+-
+
- Aufgezeichnete Video- und Audioinhalte sollten mit Untertiteln versehen sein. +
+-
+
- Der Inhalt einer Seite sollte nur mit einer Tastatur navigierbar sein +
+-
+
- Die Seite sollte einen eindeutigen Titel haben und eine Sprache zugewiesen bekommen. +
+
5. Accessibility¶
Accessibility standards¶
WCAG 2.0 – und auch die aktuelle empfohlene Version 2.1 – hat drei Konformitätsstufen:
+-
+
- AA: akzeptable Konformität +
- Zusätzlich zu allen Anforderungen der Stufe A gelten für die Stufe AA folgende Anforderungen +
-
+
- Live-Videos haben Untertitel +
+-
+
- Das Kontrastverhältnis zwischen Text und Hintergrund sollte mindestens 4,5:1 betragen. +
+-
+
- Der Text sollte bis zu 200% vergrößert werden können, ohne dass Inhalt oder Funktionalität verloren gehen. +
+-
+
- Es sollten keine Bilder von Text verwendet werden +
+-
+
- Der Tastaturfokus ist immer deutlich sichtbar +
+-
+
- Vorschlag einer Korrektur, wenn ein Fehler gemacht wurde +
+
5. Accessibility¶
Accessibility standards¶
WCAG 2.0 – und auch die aktuelle empfohlene Version 2.1 – hat drei Konformitätsstufen:
+-
+
- AAA: optimale Übereinstimmung +
- Diese Stufe erfordert alle Merkmale der Stufen A und AA, plus (neben anderen Anforderungen): +
-
+
- Gebärdensprachdolmetschung für Videos +
+-
+
- Das Kontrastverhältnis zwischen Text und Hintergrund sollte mindestens 7:1 betragen +
+-
+
- Die Benutzer müssen wissen, an welcher Stelle des Dokuments sie sich befinden. +
+-
+
- Das Leseniveau sollte so sein, dass Nutzer mit neun Jahren Schulbildung in der Lage sind, das Dokument zu lesen, und alle schwer auszusprechenden Wörter sollten erklärt werden. +
+-
+
- Elemente auf einer Seite sollten nicht geändert werden, es sei denn, dies wurde aktiv gefordert +
+
5. Accessibility¶
Gesetze zur Barrierefreiheit¶
-
+
- 2016 +
- Die EU verabschiedete die Richtlinie zur Barrierefreiheit im Web: +
-
+
- Alle Websites des öffentlichen Sektors müssen einheitliche Standards für die Barrierefreiheit umsetzen: +
+-
+
- Diese Standards basieren auf den WCAG mit der Konformitätsstufe AA. +
+
-
+
- 2019 +
- Das europäische Gesetz zur Barrierefreiheit wird verabschiedet. Reichweite geht über Websites und Apps hinaus und umfasst auch Anforderungen für: +
- Computerbetriebssysteme, Smartphones, Bankdienstleistungen und mehr. +
-
+
- 2025 +
- Unternehmen müssen das europäische Gesetz zur Barrierefreiheit umgesetzt haben. +
-
+
- Compromising +
-
+
- Assistive +
-
+
- Flexible +
-
+
- Eine Visualisierung und ihre Botschaft sollte für Bildschirmlesegeräte zugänglich sein, so dass sie laut vorgelesen werden können. Dies kann technisch z.B. mit dem Alt-Text umgesetzt werden. +
-
+
Für Menschen mit anderen Einschränkungen der Sehfähigkeit kann die Datenvisualisierung optimiert werden durch
+-
+
- ausreichend große Schriftgrößen, genauer, die Schriftgröße des Textes durch konfigurierbar sein. +
- die verwendeten Farben sollten auch für Farbenblinde genügend kontrast aufweisen. +
+
-
+
- Mit direkter Beschriftung anstelle einer separaten Legende könnt ihr Merkmale deutlicher kennzeichnen. +
-
+
- Das Kontrastverhältnis zwischen Text und Hintergrund sollte größer als 4,5:1 sein. +
-
+
Die grafischen Elemente eines Diagramms sollten ausreichend groß sein, damit sie wahrgenommen werden können.
+-
+
- Linien sollten eine ausreichend große Strichstärke haben +
- Punkte sollten einen ausreichend großen Radius haben +
- Balken sollten nicht zu dünn sein +
+
-
+
- Um die Wahrnehmung benachbarter Elemente bei der Visualisierung zu erleichtern, sollten die Elemente durch weißen Raum voneinander getrennt werden. +
5. Accessibility¶
Datenvisualisierung ist Barrierefreiheit¶
POUR-CAF-Prinzipien: Perceivable (Wahrnehmbar)¶
-
+
Jeder Text in einer Visualisierung sollte andere Diagrammelemente nicht überlagern.
+Wenn Text über anderen Elementen platziert wird, sollte er eine eigene Hintergrundfarbe haben, um die Lesbarkeit zu gewährleisten (→ * Halo (Lichthöfe)).
+
+
Quelle: Christopher Ingraham
+
