Aufgabe der Projektarbeit in der Vorlesung „Multimediales Informationsdesign“ bei Dipl.-Des. Lothar B. Blum war es, Print-Berichte zu verschiedensten Themen interaktiv umzusetzen. Interaktives Informationsdesign und Storytelling standen dabei im Fokus.

Folgende Themen standen zu Auswahl:

  1. Erneuerbare Energien in Europa
  2. Klassifizierung von Nutzertypen in Deutschland
  3. Wohnungseinbruchdiebstahl in Deutschland

Neben der einfachen Darstellung komplexer Datensätze, musste auf Gestaltung und Bedienbarkeit des Prototypen geachtet werden.

In diesem Artikel soll beispielhaft die Umsetzung von Thema (1), Erneuerbare Energien in Europa, gezeigt werden. Die Umsetzung dieses Themas wurde unter anderem vom einem Team bestehend aus Patrick Frank, Tobias Kern, Kevin Weber und meiner Wenigkeit, bearbeitet.

Konzept

Herausgeber der Daten ist das Statistische Bundesamt. Zunächst wird der Herausgeber analysiert, um die Daten in seinem Sinne in ein interaktives Format adaptieren zu können. Aufgrund der Analyse des Herausgebers wurde bei der Konzeption und Umsetzung das KISS-Prinzip verfolgt. Durch Gestaltung entsprechend dem KISS-Prinzip sollte eine möglichst hohe Nützlichkeit erreicht werden.

Aufgrund des sehr zahlenlastigen Aufbaus des Dokuments war sich das Team einig, einen möglichst explorativen Aufbau der Webseite zu wählen, welcher vor allem den Joy of Use beim Benutzer erhöhen soll.

Daher wurde zunächst der Aufbau der Webseite ähnlich einer Webanwendung angedacht – mit der Möglichkeit der Navigation über eine Europa-Karte. Nach einigen Gesprächen innerhalb des Teams fiel jedoch die Entscheidung gegen diesen Aufbau, da die Anzahl der verschiedenen Inhalte zu unterschiedlich waren, um eine simple Darstellung zu ermöglichen.

Skizzen verschiedener Interaktiver Diagramme wurden angefertigt. Hier ein Bubble-Chart.
Skizzen verschiedener Interaktiver Diagramme wurden angefertigt. Hier ein Bubble-Chart.

Mit Hilfe von Skizzen wurden verschiedene Elemente der Webseite konzipiert. Besonders wichtig war es dabei ein gutes Verhältnis von Gestaltung und Informationsgehalt zu bewahren.

Nachdem sich das Team mithilfe von Skizzen über verschiedene Ideen und Ansätze ausgetauscht hat, wurde ein Mockup mit Photoshop erstellt. Das Mockup zeigt die grundsätzliche Struktur der zu entwickelnden Seite und verschiedene Konzepte, wie beispielsweise die permanent sichtbare Navigationsleiste am oberen Bildschirmrand.

Storytelling mit One-Page-Design

Statt eines ähnlichen Aufbaus wie bei einer Webanwendung, wurde schließlich ein One-Page-Design gewählt um die Inhalte darzustellen.

Für das „One-Page-Design“ ist kennzeichnend, dass die wichtigsten Inhalte auf einer einzelnen Seite dargestellt werden. Im Idealfall erzählen die Inhalte der Seite eine Art Geschichte („Storytelling“), dessen Ende der Nutzer allein durch Scrollen erfährt.

Durch den Verwendung des One-Page-Designs und einen linearen Aufbau der Inhalte ist die Bedienung berechenbar und auch für weniger erfahrene Internetnutzer benutzerfreundlich. Der Nutzer wird wie in der originalen PDF-Version von der Titelseite bis zum Glossar geführt. Die PDF-Titelseite wird für das Web adaptiert und „Above the fold“ angezeigt. Erst durch Scrollen sieht der Nutzer die visualisierten Daten.

Dabei folgt der Aufbau dieser Elemente nicht dem Zufall, sondern ist Teil des Gesamtkonzepts des Storytelling: Es wird ein Top-Down Ansatz gewählt (Deduktion), welcher besagt, dass je weiter ein Benutzer in der Webseite fortschreitet, desto mehr gehen die Daten ins Detail. Wo anfangs noch interaktive Grafiken platziert sind, die die Daten in der Übersicht darstellen, werden für die folgenden interaktiven Grafiken verschiedene Aspekte spezifischer dargestellt. So liegt das Ausmaß der Auseinandersetzung mit den Daten in der Hand des Besuchers.

Diese Aufteilung der Daten in verschiedene interaktive Grafiken ermöglicht eine Konzentration auf die jeweils hervorgehobenen Daten.

Interaktive Diagramme

Um die Daten des Print-Berichts interaktiv zu gestalten, wurden verschiedene interaktive Elemente verwendet. Um diese interaktiven Elemente, wie z.B. verschiedene Graphen zu erstellen, wurde hauptsächlich auf folgende zwei Frameworks zurückgegriffen:

  • Highcharts
  • D3.js

Bei beiden Frameworks handelt es sich um reine JavaScript Bibliotheken, die ein breites Spektrum an verschiedenen Diagramm-Typen bereitstellen.

Bubble-Chart

Bubble-Chart für Verbrauch, Erzeugung und Energieabhängigkeit der EU-27
Bubble-Chart für Verbrauch, Erzeugung und Energieabhängigkeit der EU-27

Um den Verbrauch, die Erzeugung und die Energieabhängigkeit der 27 EU-Länder möglichst informativ und aussagekräftig abzubilden, wurde eine Darstellung in Form von „Bubble-Charts“ gewählt. Die Entscheidung fiel zugunsten dieser Darstellung, da hierdurch ein umfassender Überblick der 27 EU-Länder in Bezug auf Energie-Verbrauch und –Erzeugung gewährleistet wird. Diese Art der Darstellung eignet sich besonders dazu, Differenzen zwischen den beiden Themengebieten aufzuzeigen. Der Verbrauch wird hierbei in einem dunklen Grauton dargestellt, wohingegen die Erzeugung durch die Farbe Grün gekennzeichnet ist. Zusätzlich kodiert die Position der Kreise entlang der x-Achse die Energieabhängigkeit der verschiedenen Länder in Prozent.

Durch Klick auf „Verbrauch“ bzw. „Erzeugung“ in der Legende ist es dem Nutzer möglich, diese Daten aus- und einzublenden. Tooltips mit genaueren Angaben zu Verbrauch und Erzeugung werden angezeigt, sobald man den Mauszeiger über das jeweilige Land bewegt.

Stacked-Colum Chart

Um den Länder-Vergleich der einzelnen Energiearten für die Erzeugung bzw. den Verbrauch abzubilden, wurde die Darstellung mit Hilfe eines Säulen-Diagramms gewählt. Der Nutzer erhält somit einen Vergleich aller Länder in puncto Erzeugung oder deren Verbrauch. Hierbei sind die Bestwerte bzw. die „Verlierer“ des Ländervergleichs auf einen Blick zu erkennen. Zusätzlich werden die einzelnen Energiearten miteinander verglichen und deren Anteile pro Land angezeigt.

Säulendiagramm zur Erzeugung und Verbrauch der EU-27 im Vergleich
Säulendiagramm zur Erzeugung und Verbrauch der EU-27 im Vergleich

Interaktionsmöglichkeiten bieten sich hierbei bei der Auswahl der Darstellung zwischen „Erzeugung“ oder „Verbrauch“. Wie auch bei den Bubble-Charts erhält der Nutzer genauere Informationen in Form von Tooltips bei Auswahl der entsprechenden Säule mit der Maus. Um eine bessere Übersicht auf die einzelnen Energiearten zu gewährleisten, können diese bei Klick auf den entsprechenden Begriff in der Legende aus- bzw. eingeblendet werden.

Sunburst Chart

Ein Sunburst-Diagramm wurde eingesetzt um die Zusammensetzung der jeweiligen Energieerzeugung der einzelnen Länder darzustellen. Diese Diagramm-Art eignete sich vor allem für die von uns angestrebte hierarchische Darstellung der Daten. Der Nutzer erhält hierdurch die Möglichkeit, den Datensatz explorativ zu erkunden. Das Sunburst-Diagramm ermöglicht eine kompakte Visualisierung der Daten und ist in der Lage, einzelne Bestandteile und deren Zusammensetzung auf einfache Art und Weise aufzuzeigen.

Sunburst-Diagramm zur Zusammensetzung der Energieerzeugung
Sunburst-Diagramm zur Zusammensetzung der Energieerzeugung

Die Länderauswahl und die Ausgabe der entsprechenden Daten erfolgt über die nebenstehende Landkarte. Zur Auswahl stehen hierbei allerdings nur die 27 EU-Länder, die mit der Farbe Grün gekennzeichnet sind.

Fazit des Projekts

Allgemein gilt es zu sagen, dass die ausführliche Auseinandersetzung mit der Darstellung von komplexen Daten dem Team viele neue Ansätze und Erfahrung mit der Umsetzung von interaktiven Grafiken beigebracht haben.

Außerdem konnten sehr wertvolle Erfahrungen im Bereich der Konzeption in Abhängigkeit von Zielgruppen gesammelt werden. Die Vorlesung „Multimediales Informationsdesign“ bei Dipl.-Des. Lothar B. Blum war ein voller Erfolg und im Rahmen der Projektarbeit wurden von allen Teams tolle interaktive Webseiten erstellt.

Eine Live-Version dieser Anwendung findet sich unter http://kevinweber.github.io/erneuerbare-energien/

Weitere Live-Versionen der anderen Projekte sollen folgen.

Ein Kommentar

  1. Interessanter Artikel, der sich mit der adäquaten Visualisierung von Daten innerhalb des LV-Rahmens auseinandersetzt.

    Ich habe begonnen, einige der hervorragenden Arbeiten der oben beschriebenen LV zu analysieren und Querbezüge zu Trends und Geschichte im Design herzustellen. Unter http://www.design-forschung.com ist bereits eine Analyse der Arbeit zu Nutzertypen publiziert. Zwei weitere sind geplant; auch die hier beschriebene Arbeit.

    Lothar B. Blum

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.