Im Internet sind wir überall von Daten umgeben. Um diese einfacher zu verstehen, werden immer mehr Data Visualizations verwendet. Da ein großer Teil der Nutzer das Internet vor allem über das Smartphone verwendet, wird Responsive Visualization immer wichtiger (Peng & Zhou, 2015; Wu et al., 2021).

Was ist Data Visualization?

Daten Visualisierungen werden verwendet, um komplexe Informationen in einem zugänglichen Weg darzustellen. Im Vergleich zu schriftlichen Daten, versteht der Menschen sie viel besser, wenn die Informationen visuell aufbereitet werden (Dur, 2012).

Daten, die für Visualisierungen verwendet werden, sind meist Teil eines Datensets. Mithilfe von Visualisierungen können diese Daten besser verstanden werden und können sogar eine neue Perspektive bringen. Dadurch können z.B. Trends entdeckt oder neue Hypothesen aufgestellt werden. Mithilfe von unterschiedlichen Arten von Datenvisualisierungen können Daten auch untereinander besser verglichen werden (Dur, 2012).

Beim Erstellen von Visualisierungen gibt es einiges zu Beachten. Dafür gibt es einige Richtlinien, an denen man sich halten kann. Tamara Munzner hat zum Beispiel das Nested Model definiert. Dieses beinhaltet vier grobe Schritte (Munzner, 2009):

• das Problem verstehen
• die Daten vorbereiten
• das Design überlegen
• die Umsetzung

Als erstes ist es wichtig, das Problem und die Daten zu verstehen. Dazu sollte herausgefunden werden, woher die Daten kommen, wie sie verwendet werden und welche eigene Terminologie es zu diesem Thema gibt.
Im nächsten Schritt werden die Daten für den Designprozess vorbereitet. Dabei werden sie charakterisiert, um einfacher festzustellen, welche Visualisierungstechniken am besten zu den Daten passen.
Im vorletzten Schritt geht es darum, sich ein passendes Design zu überlegen. Wenn Responsive Visualizations erstellt werden, sollte von Anfang der mobile Kontext mit einbezogen werden. Dabei kommt es nicht nur darauf an, wie die Visualisierung am Ende ausschaut, sondern auch welche Interaktionen möglich sein sollen.
Der letzte Schritt in Munzners Nested Model ist die Umsetzung des Planes, die Entwicklung der Visualisierung (Munzner, 2009).

Diese vier Schritte vereinfachen den Prozess der Erstellung von Data Visualizations. Wenn man Visualisierungen fürs Smartphone erstellt, sollte man zuerst auch Design für mobile Geräte selbst verstehen.

Responsive Design

Nachdem sehr viel Internetkonsum über das Smartphone stattfindet, ist es wichtig, dass man sich als Entwickler und Designer auch damit beschäftigt, wie Applikationen und Webseiten auf mobilen Geräten aussehen und funktionieren.

Ein großes Problem dabei ist, dass es sehr viele unterschiedliche Geräte mit unterschiedlichen Plattformen gibt. Eine Standardstrategie ist dabei die mobile-first Arbeitsweise. Dabei wird zuerst darauf geschaut, dass eine Website auf jeder gängigen Smartphone-Größe verwendet werden kann und danach erst für den Desktop optimiert (Cazañas et al., 2017; Mullins, 2015; Peng & Zhou, 2015).

Eine sehr verbreitete Strategie dafür ist Responsive Web Design. Die Idee von Responsive Design ist es, ein Design zu erstellen, bei denen sich die Elemente einer Website an die Größe des verwendeten Gerätes anpassen. Das heißt, die Website hat keine fixen, sondern relative Größen. Dabei gibt es unteranderem drei Hauptelemente, die dafür umgesetzt werden: sich anpassende Raster (Fluid Grids), sich anpassende Bilder (flexible Pictures) und Media Queries (Cazañas et al., 2017; Peng & Zhou, 2015).

Bei sich anpassenden Raster geht es vor allem darum, dass bei Elementen relative Einheiten, wie Prozentangaben oder em angewendet werden. Bei normalen Desktopseiten werden fixe Einheiten, nämlich Pixel, verwendet. Mithilfe vor relationalen Einheiten, können sich die Layout-Elemente, z.B. die Schriftgröße, besser an die Größe des Designs anpassen (Cazañas et al., 2017; Peng & Zhou, 2015).

body { font-size:62.5%; } /* =10px */
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 12px; } /* =14px */

Um Bilder auf mobilen Endgeräten richtig anzuzeigen, muss man sie richtig skalieren, so dass keine Verzerrung entstehen. Zusätzlich muss darauf geachtet werden, dass die Bilder nicht zu viel Platz einnehmen, aber noch groß genug sind. Dafür kann man z.B. die CSS-Deklaration max-width verwenden (Cazañas et al., 2017; Peng & Zhou, 2015).

img {
  max-width: 100%;
  height: auto;
}

Media queries sind ein weiteres Kernelement von Responsive Web Design. Dabei werden Breakpoints für unterschiedliche Bildschirmgrößen gesetzt, an denen sich das Design anpasst. So können für verschiedene Bildschirmgrößen, verschiedene Einheiten verwendet werden (Cazañas et al., 2017; Peng & Zhou, 2015).

body {
  background-color: blue;
}

@media (min-width: 768px) {
  body {
    background-color: green;
  }
}

Diese Überlegungen und Strategien sind auch für Responsive Visualizations wichtig. Bei Visualisierungen gibt es aber noch zusätzliche Probleme, die beachtet werden müssen, wie z.B. Interaktionen.

Responsive Visualization – Probleme und Strategien

Wie bei Web Design ist auch das Layout für Responsive Visualization ein wichtiger Punkt. Dort kann es schnell passieren, dass Visualisierungen über den Bildschirm hinausragen und der Nutzer horizontal scrollen muss. Das beeinträchtigt die Usability (Andrews & Smrdel, 2017; Hoffswell et al., 2020; Wu et al., 2020).

Die Schriftgröße ist bei Visualisierungen noch wichtiger. Einige Erklärungen und Beschriftungen könne nur an einer bestimmten Position an der Visualisierung sinnvoll verwendet werden. Beim Designen der Visualisierung muss genau überlegt werden, welcher Text notwendig ist und wie er positioniert werden kann. Zusätzlich muss garantiert werden, dass der Text noch lesbar ist (Andrews & Smrdel, 2017; Wu et al., 2020).

Ein besonders wichtiger Punkt bei Data Visualizations sind Interaktionen. Bei Responsive Design nehmen sie einen besonderen Stellenpunkt ein, da der Input zwischen Desktop und Smartphone sehr unterschiedlich ist. Die Benutzung eines Touchscreens per Finger ist ungenauer als die Nutzung einer Computermaus. Außerdem fallen einige Interaktionsmöglichkeiten komplett weg. Bei Visualisierungen werden gerne Tooltips mittels Hover Effekt verwendet. Diese können nur sehr schwer auf Touchscreens umgesetzt werden (Andrews & Smrdel, 2017; Schnitzhofer, 2018).

Um diese Fehler zu vermeiden, ist es wichtig, bei der Erstellung von Responsive Visualizations direkt den mobilen Bezug mit einzubeziehen. Dafür gibt es unterschiedliche Strategien:

Um Zeit zu sparen, können verschiedene Ideen auf unterschiedlichen Geräten und Größen designt werden. Dadurch kann schneller festgestellt werden, welche Idee funktioniert. Um noch besser festzustellen, wie die Visualisierung auf unterschiedlichen Geräten funktioniert, können auch Previews beim Designprozess verwendet werden. Das erleichtert die Entscheidungen, wie die Visualisierungen auf unterschiedlichen Bildschirmgrößen dargestellt werden (Hoffswell et al., 2020).

Bei der Entwicklung der Idee sollte auch daran gedacht werden, dass mobile Endgeräte andere Features als Desktops haben. So können z.B. auf Smartphones Karten mit GPS einfacher verwendet werden. Generell sollten die Entwickler und Designer genau wissen, was die Visualisierung aussagen soll und wie diese Information an den Nutzer gebracht werden. Damit wird festgestellt, welche Informationen weggelassen werden können, um so viel wie möglich Platz zu sparen („Data Visualization for Mobile“, 2020; Scacca, 2021).

Auch bei Visualisierungen können Media Queries angepasst werden. Zum Beispiel kann festgelegt werden, ab welcher Bildschirmgröße, weniger Datenpunkte angezeigt werden, damit die Visualisierung lesbar bleibt. Dabei ist darauf zu Achten, dass die eigentliche Information der Visualisierung nicht verloren geht, aber gut auf einem kleinen Bildschirm zu lesen ist („Data Visualization for Mobile“, 2020; Scacca, 2021, Wu et al., 2020).

Um für den Nutzer die beste User Experience zu bieten und die Nutzung zu vereinfachen, sollten bekannte Visualisierungstechniken, wie z.B. Balkendiagramme oder Liniendiagramme, verwendet werden. Dadurch ist es für den Nutzer leichter, die Informationen der Visualisierungen zu verstehen. Anders als bei Desktopseiten, sollte White Space vermieden werden. Auf mobilen Endgeräten nimmt er nur unnötig Platz weg und die Visualisierung ist zu klein und schwerer lesbar („Data Visualization for Mobile“, 2020; Scacca, 2021, Wu et al., 2020).

Um Responsive Visualizations umzusetzen, sollte nicht nur verstanden werden, wie Data Visualizations im Allgemeinen erstellt werden, sondern auch Aspekte von Responsive Design mit in den Prozess einbeziehen. Dabei wird darauf Acht gegeben, dass der Platz auf kleineren Bildschirmgrößen angemessen verwendet wird und keine unnötigen Informationen dargestellt werden. Zusätzlich zu Ansätzen aus Web Design, spielen bei Data Visualization Interaktionen eine wichtige Rolle. Bei der Entwicklung sollte von Anfang an darauf geachtet werden, dass die Interaktionsmöglichkeiten auf die mobile Umgebung angepasst werden.

---

Literaturverzeichnis

Andrews, K., & Smrdel, A. (2017). Responsive Data Visualisation. EuroVis 2017 – Posters, 3 pages. https://doi.org/10.2312/EURP.20171182

Cazañas, A., Parra, E., Cazañas, A., & Parra, E. (2017). Strategies for Mobile Web Design. Enfoque UTE, 8, 344–357. https://doi.org/10.29019/enfoqueute.v8n1.142

Data visualization for mobile: How to shape it. (2020, Mai 7). Rock Content. https://rockcontent.com/blog/data-visualization-for-mobile/

Dur, B. I. U. (2012). Analysis of Data Visualizations in Daily Newspapers in Terms of Graphic Design. Procedia – Social and Behavioral Sciences, 51, 278–283. https://doi.org/10.1016/j.sbspro.2012.08.159

Hoffswell, J., Li, W., & Liu, Z. (2020). Techniques for Flexible Responsive Visualization Design. Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems, 1–13. https://doi.org/10.1145/3313831.3376777

Mullins, C. (2015). Responsive, mobile app, mobile first: Untangling the UX design web in practical experience. Proceedings of the 33rd Annual International Conference on the Design of Communication, 1–6. https://doi.org/10.1145/2775441.2775478

Munzner, T. (2009). A Nested Model for Visualization Design and Validation. IEEE Transactions on Visualization and Computer Graphics, 15(6), 921–928. https://doi.org/10.1109/TVCG.2009.111

Peng, W., & Zhou, Y. (2015). The Design and Research of Responsive Web Supporting Mobile Learning Devices. 2015 International Symposium on Educational Technology (ISET), 163–167. https://doi.org/10.1109/ISET.2015.40

Scacca, S. (2021, November 12). 4 Tips for Making Data Visualizations Look Good on Mobile. The Media Temple Blog. https://mediatemple.net/blog/design-creative/4-tips-for-making-data-visualizations-look-good-on-mobile/

Schnitzhofer, D. (2018). Casual information visualization on mobile devices considering the museum context [Diploma thesis, Wien]. https://repositum.tuwien.at/handle/20.500.12708/3502

Wu, A., Tong, W., Dwyer, T., Lee, B., Isenberg, P., & Qu, H. (2021). MobileVisFixer: Tailoring Web Visualizations for Mobile Phones Leveraging an Explainable Reinforcement Learning Framework. IEEE Transactions on Visualization and Computer Graphics, 27(2), 464–474. https://doi.org/10.1109/TVCG.2020.3030423

---