In der Lehrveranstaltung “Interaktive Infografiken” an der HdM Stuttgart entstanden bei Herrn Prof. Tille noch zahlreiche weitere Infografiken. Ein Besuch lohnt sich:
Update: Leider funktionieren viele der Links nicht mehr!
Um die fertige Infografik nun auch publik machen zu können gibt es hier einen kurzen Pressetext:
———
Virtuelles Wasser interaktiv
Nein, beim Begriff „virtuelles Wasser“ handelt es sich nicht um eine neue Web 2.0-Idee oder gar einen futuristischen Springbrunnen. Vielmehr ist virtuelles Wasser die Menge an Wasser, die ein Produkt in der Herstellung benötigt. Bei einer Tasse Kaffee sind dies z.B. 140 Liter. Das Konzept des virtuellen Wassers hilft die globalen Probleme in Bezug auf das Thema Wasser und den Wassermangel besser verständlich und greifbar zu machen.
Zwei Studenten an der Hochschule der Medien in Stuttgart haben sich nun diesem Konzept gestellt und die Thematik „virtuelles Wasser“ digital aufbereitet. Das Ergebnis ist eine interaktive Infografik, die den Nutzer sensibilisieren und Wissen vermitteln will. Dabei setzten die beiden Informationsdesign-Studenten Andrea Müller und Jürgen Röhm ganz auf den Alltagsbezug ihrer Grafik und eine intuitive Bedienung.
So können die Nutzer z.B. per Drag n’ Drop den virtuellen Wassergehalt von verschiedenen Produkten vergleichen. Eine Darstellung der Wassermenge durch bekannte Größen wie beispielsweise eine Badewanne veranschaulicht dabei die abstrakten Zahlen. Im zweiten Teil der interaktiven Grafik werden exemplarisch die Stationen der Kaffeeherstellung erklärt. So kann nachvollzogen werden, wie sich der virtuelle Wassergehalt von Produkten berechnet.
Die Entstehung der interaktiven Infografik haben Müller und Röhm ausführlich in einem Blog dokumentiert. Dort ist nicht nur die Grafik selbst zu sehen, sondern es können alle Stationen der Entwicklung, vom ersten Brainstorming bis hin zur Umsetzung, nachvollzogen werden.
Für den Produktvergleich haben wir mit mehreren Personen ein spontanes, kurzes “Usability-Testing” durchgeführt. Dabei haben sich verschiedene Dinge gezeigt, die bei der interaktiven Infografik noch verbessern konnten.
Zum Beispiel gibt es inzwischen eine kurze Erklärung, was die Grafik zeigt und wie sie zu Nutzen ist. Außerdem wird bei den Tooltips kein Hand-Cursor mehr verwendet, weil einige der Tester dies als Link wahrgenommen haben. Auch die Drag n’ Drop – Funktion und das Feedback der Produk-Icons wurden verbessert, da es dabei ebenfalls zu Schwierigkeiten kam. Des weiteren haben wir Kleinigkeiten in Text und Layout geändert, um die Informationen noch verständlicher zu machen.
Durch Verbessern einiger Kleinigkeiten konnten wir so die “Qualität der Nutzung” (Usability & User Experience) unserer Infografik deutlich (iterativ) optimieren. Eine (teilweise bereits verbesserte) Version gibt es hier (Vgl. Beitrag “Vorschau des Produktvergleichs“). Die neueste Version wird es dann in der fertigen interaktiven Infografik, nächste Woche, geben! Dann wird auch die Prozessebene fertig sein …
Nach langem Gestalten und Programmieren nimmt unsere interaktive Infografik langsam Form an! Im Moment stecken wir zwar noch Mitten in der Umsetzung, hier gibt’s aber schon mal eine kleine Vorschau des Produktvergleichs.
Auch für die Prozessebene gibt es nun erste Entwürfe. Da wir den Kaffeeprozess visualisieren, soll der Nutzer durch die Farbgebung sofort an Kaffee erinnert werden.
In diesem Entwurf fehlt jedoch noch die Hauptnavigation.
Nach einer langen Recherche- und Konzeptionszeit geht’s jetzt an die Gestaltung. Ziel für das Screendesign ist die Kombination eines zurückhaltenden, seriösen Stils mit ansprechender, moderner Gestaltung (in Anlehnung an typische Web 2.0 Designs). Hier einer der ersten Entwürfe in Photoshop für die Vergleichs-Ebene mit Drag n’ Drop Funktion.
Format
Das Format unserer interaktiven Infografik wird 800×600 Pixel sein. So kann die Grafik, parallel zu einem Artikel über virtuelles Wasser, in einem externen Fenster geöffnet werden. Das 800×600-Format bietet genug Platz für unsere Inhalte, verdeckt aber nicht den ganzen Bildschirm und ist somit bestens für diesen Zweck geeignet.
Die Flowchart zeigt die drei Ebenen unserer Infografik und ihre Verknüpfungen miteinander. Sie ist eine Visualierung des Storytelling-Konzepts (Vgl. Eintrag “Storytelling“). Verschiedene Elemente sollen dem Nutzer Navigations- und Interaktionsmöglichkeiten bieten.
Eine Besonderheit enthält die Ebene “Vergleich”: Hier soll es dem Nutzer ermöglich werden, verschiedene Produkte zu vergleichen. Deshalb ist die Seite stark dynamisch und der Nutzer kann also aus einem “Pool” an Informationen wählen.
Das Zielmedium unserer interaktiven Infografik wird das Internet sein. Auf diese Weise erreichen wir ein großes Publikum, da die Infografik zu jeder Zeit abgerufen werden kann. Eine Einsatzmöglichkeit besteht darin, die Infografik als Zusatz zu einem Artikel über virtuelles Wasser zu veröffentlichen. Die Nutzer könnten so das in dem Artikel erworbene Wissen auf explorative Art festigen und erweitern.
Zielgruppe
Die Zielgruppe unserer Infografik ist eine sehr vielseitige und große. Vorraussetzungen die die Personen mitbringen sollten, sind ein Internetzugang und das Interesse für das Thema des virtuellen Wassers, bzw. Spaß daran etwas Neues zu entdecken. Wir gehen davon aus, dass sich unsere Zielgruppe zwischen 15 und 60 Jahren bewegt. Jugendliche ab 15 Jahren beginnen sich für das Thema des virtuellen Wassers zu interessieren und Personen über 60 Jahren werden vermutlich nicht das Medium einer interaktiven Infografik wählen. Innerhalb dieser Altersspanne gibt es Nutzer mit unterschiedlich ausgeprägtem Interesse an Interaktivität. So werden einige Nutzer eher weniger explorativ vorgehen und sich lediglich die Basisinformationen ansehen, während andere Nutzer großen Spaß daran haben selbst zu entdecken und Zusammenhänge zu erkunden.
Timm Kekeritz hat bereits ein sehr stylisches Plakat zum Thema virtuelles Wasser gestaltet. Im Netz existiert als Ergänzung zum Plakat (hier) außerdem folgende interaktive Infografik. Sie zeigt, welches Produkt wieviel virtuelles Wasser verbraucht.
