Wir sind noch nicht ganz fertig mit unserem Projekt, bevor wir nicht unserer Tutorin Veronika Ziegler gedankt haben. Ob Masken, Tooltips, Schleifen oder Blubberblasen, immer Stand sie uns mit Rat und Tat zur Seite. Solange bis der Code funktioniert hat!
Danke, dass wir Dich mit all den Fragen bombadieren durften und danke, dass Du immer eine Antwort parat hattest 
Um die fertige Infografik nun auch publik machen zu können gibt es hier einen kurzen Pressetext:
———
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.
———
Link zur Infografik: www.info-design.net/infografik
Link zum Blog: www.info-design.net
Und hier noch zwei exemplarische Screenshots der Infografik:———
Auch die Prozessebene nimmt langsam Gestalt an. Dort wird erklärt, wie Kaffee hergestellt wird und bei welchen Stationen wieviel Wasser verbraucht wird (Vgl. Gestaltung der Prozessebene). Dafür haben wir Illustrationen für die Kaffepflanze und -Bohnen in verschiedenen Stadien angefertigt.
Wie bereits erklärt werden die Wassermengen der Säulen auf der Vergleichsebene noch einmal anders dargestellt, damit der Nutzer einen besseren Bezug dazu hat (Vgl. Einträge Skizzen und Vergleichsebene).
Dafür nutzen wir die Tooltipps, die erscheinen sobald man mit der Maus über eine Säule mit Wasser fährt. In diesen Tooltipps gibt es dann eine Illustration die verdeutlicht, wie viel Wasser sich in der Säule befindet. Die Illustrationen zeigen jeweils einen Gegenstand, der vergleichbar viel Wasser enthält. Beispielsweise fasst ein Löschfahrzeug der Feuerwehr ca. 4100 l Wasser – genausoviel, wie für einen Hamburger benötigt werden.
Natürlich gibt es sehr unterschiedliche Badewannen, Aquarien, etc. Trotzdem beruht unsere Auswahl der illustrierten Objekte auf “harten Fakten”. Hier eine kurze Auflistung der genauen Spezifikationen unserer inkl. Quelle und Link:
4100 Liter: Tanklöschfahrzeug 20/40 – SL
http://de.wikipedia.org/wiki/Tankl%C3%B6schfahrzeug
140 Liter: Normbadewanne 1; nach DIN 4708 Teil 2
http://iq.lycos.de/qa/show/415488/Wieviel-Liter-Wasser-passen-in-eine-durchschnittliche-Badewanne/
70 Liter: Aquarium ca. 60×30x40; z.B. Juwel Rekord 70
http://www.elimbo.de/EAP00000tzj-juwel_rekord_70_schwarz.htm
10 Liter: Üblicher (Hand-)Eimer
http://de.wikipedia.org/wiki/Eimer_(Beh%C3%A4lter)
2100 Liter: Gartenteich, 280×202cm, Tiefe 85cm; Wasserstandzonen: 50, 30 u. 20cm
http://www.poolcomfort.at/gartenteiche.htm
(alle Links wurden das letzte Mal am 18.06.09 besucht)
Bislang war noch nicht geklärt wie die Interaktion des Nutzers auf der Prozessebene im Detail aussieht (Vgl. “Gestaltung der Prozessebene“) Jetzt ist aber auch das ausgearbeitet:
Die Prozessschritte werden einzeln anklickbar sein, sodass der Nutzer bestimmt an welcher Stelle des Prozesses er einsteigt oder ob er sich von Anfang bis Ende durchklicken möchte. Bei jedem einzelnen Prozessschritt muss der Nutzer etwas tun (klicken), um den Prozess voran zu bringen.
Dabei wird jeweils eine Kirsche, bzw eine Bohne exemplarisch aus der Masse des Kaffees herausgenommen und vergrößert in einem Kasten dargestellt. Durch Klicks auf einen Button startet der Nutzer den Prozessschritt und verändert damit das Aussehen der Bohne in dem Kasten. Je nachdem wieviel Wasser bei dem jeweiligen Schritt benötigt wird, muss der Nutzer unterschiedlich oft auf den Button klicken bis er zum nächsten Prozessschritt übergehen kann.
1. Schritt: Die Kaffeepflanze und die Kirschen wachsen. Dies benötigt viel Zeit und einen Großteil des Wassers. (3 x klicken)
2. Schritt: Die Schale und das Fruchtfleisch wird von den Bohnen entfernt. Auch dabei geht sehr viel Wasser verloren (3 x klicken)
3. Schritt: Die Bohnen werden mit Wasser umspült, um auch die letzten Reste des Fruchtfleisches entfernen zu können (1 x klicken)
4. Schritt: Die Bohnen werden in der Sonne getrocknet. Dabei werden sie dunkler und verlieren viel Flüssigkeit (2 x klicken)
5. Schritt: Die Bohnen werden von dem Silberhäutchen getrennt, ein letztes Mal geschält (1 x klicken)
6. Schritt: Die Bohnen werden sortiert. Schlechte und zu kleine Bohnen werden aussortiert. (1 x klicken)
7. Schritt: Die Bohnen werden geröstet, dabei werden sie immer dunkler. (1 x klicken)
Der Button zeigt verschiedene Zeichen, die davon abhängen was bei der jeweiligen Ebene passiert. Unterschieden wird zwischen Prozessschritten bei denen für den Prozessschritt zusätzlich Wasser hinzugefügt wird, Prozessschritte bei denen Wasser während des Vorgangs verloren geht und Prozessschritte bei denen Maschinen benötigt werden.
Nun sind auch die Icons für die Vergleichsprodukte fertig.
Der Nutzer kann diese Icons per Drag n’ Drop auf die Wassersäulen ziehen und erhält dann weitere Detailinformationen über das jeweilige Produkt (Vgl. Flash Prototypen unten).
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 der Vergleichsebene wird nun auch die Prozessebene in ihrem Aufbau und ihrer Darstellung konkreter.
Die Navigation
Wie bei der Vergleichsebene soll der Nutzer auch hier über Steuerungselemente im oberen Bereich der Seite interagieren können. Die Prozessschritte haben jeweils eine pfeilartige Form. So wird deutlich, dass jeder visualisierte Schritt ein Teil des ganzen Prozesses ist. Der Nutzer kann die einzelnen Stationen gezielt anwählen oder sie linear durchlaufen. Weiter unten gibt es rechts und links Pfeile mit denen der Nutzer sich im Prozess vorwärts oder rückwärts bewegen kann.
Die Wassersäule als Index des Wasserverbrauchs
Im linken Bereich wird eine Wassersäule abgebildet. Sie enthält am Ende des Prozesses die Wassermenge, die für die Herstellung von einer Tasse Kaffee benötigt wird. Bei jeder Station füllt die Säule sich mit dem Wasser, das für den Prozess bis zu dem Punkt gebraucht wird.
Die Prozessschritte im Detail
Der rechte Bereich visualisiert den jeweils gewählten Schritt. Er ist noch einmal unterteilt. Unter der Überschrift wird die Kaffeemenge abgebildet, die von den anfänglich 52g Kaffeekirschen übrig geblieben ist. Sie zeigt die Beschaffenheit und die Menge der Kaffeebohnen. Exemplarisch wird jeweils eine Bohne herausgenommen und vergrößert. An ihr wird visualisiert, was mit den einzelnen Bohnen während des Schrittes passiert. Sie begleitet den kompletten Prozess, sodass der Nutzer an einer Bohne sehen kann wie aus der Kaffeekirsche die geröstete Kaffeebohne wird.Ganz rechts befindet sich ein Button mit dem der Prozessschritt in Gang gesetzt wird. Durch den Klick des Nutzers verändert sich die Bohne. Dies hat gleichzeitig auch eine Auswirkung auf die Kaffemenge und ihre Beschaffenheit (links daneben) sowie die Wassersäule (ganz links). Ist der Prozessschritt beendet, wird der Button ausgegraut. Unter den Abbildungen wird durch ergänzenden Text erklärt was in den einzelnen Prozessschritten passiert.
Die Farbsprache
Die einzelnen Ebenen sollen sich farblich von einander unterscheiden. In der Vergleichsebene bietet es sich an eine blaue Farbpalette zu wählen, da es um den virtuellen Wasserverbrauch verschiedener Produkte geht. Die Prozessebene richtet den Blick verstärkt auf den Kaffee. Daher soll hier eher mit einer rot, braunen Farbpalette gearbeitet werden. Über die Farbkodierung können die verschiedenen Screens schnell den Themen zugeordnet werden und die Orientierung wird dem Nutzer leicht gemacht.
Anhand der Kaffeeherstellung möchten wir beispielhaft den Wasserverbrauch aufdecken, der für ein Produkt anfällt. Dabei erklären wir für welche Prozesschritte wieviel Wasser benötigt wird. In der Kaffeeherstellung haben wir 6 Stationen definiert, die den Prozess von der Kaffeepflanze bis hin zur gerösteten Kaffeebohne dokumentieren:
1. Wachstum der Pflanze
Die Pflanze benötigt Wasser zum Wachsen bis sie ausreichend Früchte trägt.
Anschließend werden die roten Kaffeekirschen, die die Bohnen enthalten geerntet.
–> Wasserverbrauch: Wasser für die Pflanze
—
2. Entfernen des Fruchtfleischs
Die Bohnen in der Kirsche werden von dem Fruchtfleisch getrennt, das nicht verwendet werden kann.
–>Wasserverbrauch: Wasser für den Prozess der Fruchtfleischentfernung / Verlust des Wassers, das in den Kirschen enthalten ist
—
3. Fermentation
Die Bohnen werden aufgeweicht, um sie später von den Resten des Fruchtfleischs und dem Silberhäutchen entfernen zu können.
–> Wasserverbrauch: Wasser für das Einweichen und Waschen / Verlust des Wasser, das in dem Rest des Fruchtfleischs enthalten ist
—
4. Trocknen und Schälen
Die Bohnen werden zum Trocknen ausgelegt und anschließend von dem Silberhäutchen entfernt
–> Wasserverbrauch: Die Bohnen verlieren durch das Trocknen viel Feuchtigkeit
—
5. Sortieren und Waschen…
Nun werden die Bohnen noch einmal gewaschen, sortiert und poliert
–> Wasserverbrauch: Verlust des Wassers das in den aussortierten Bohnen und in der restlichen Hülle steckt
—
6. Rösten
Schließlich werden die Bohnen geröstet, damit sie ihr Aroma entfalten können
–> Wasserverbrauch: Die Bohnen verlieren durch das Rösten sehr viel Feuchtigkeit
Hier sind ein paar erste Ideen und Skizzen zum Screendesign der Vergleichsebene. Wichtige Elemente sind: die Navigation (für die 3 Ebenen), die ‘Bühne’ für den Vergleich von zwei Produkten, eine Referenz-Säule und die ‘Bibliothek’ mit den Produkten.
