InfoDesign in Bewegung

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.

———
Link zur Infografik: www.info-design.net/infografik
Link zum Blog: www.info-design.net

Und hier noch zwei exemplarische Screenshots der Infografik:———

Andrea Verschiedenes Artikel, Beschreibung, interaktive Infografik, Kaffeeherstellung, Pressetext, Produktvergleich, virtuelles Wasser, Wasserverbrauch, Zusammenfassung

Auch der zweite Teil unserer interaktiven Infografik nimmt immer mehr Gestalt an. Als kleinen Vorgeschmack gibt es hier einen Screenshot des Prozessschritts “Pflanzenwachstum”. Kleinigkeiten an Inhalt und Layout werden sich vermutlich noch ändern.

Jürgen Verschiedenes Kaffeeherstellung, Prozessebene, Screenshot, Vorschau

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.

Andrea Umsetzung Illustration, Kaffee, Kaffeeherstellung, Prozessebene

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.

Andrea Konzeption, Storyboard Informationsarchitektur, Interaktionskonzept, Kaffeeherstellung, Konzeption

Anhand von Kaffee möchten wir die Zusammensetzung der Zahlen für das virtuelle Wasser einzelner Produkte (140L für eine Tasse Kaffee) demonstrieren (Vgl. Eintrag vom 12. Mai). Allerdings ergaben sich bei der Recherche verschiedene Schwierigkeiten, wie die Thematik visualisiert und erklärt werden kann.

Wasser steckt fast nur in der Pflanze

Fast alles Wasser, was für die Herstellung von Kaffee benötigt wird, steckt in der Kaffeepflanze. Die einzelnen Schritte in der Weiterverarbeitung benötigen selbst kaum Wasser. Im Verlauf verlieren die anfänglichen Kaffeekirschen allerdings immer mehr an Masse und damit auch an virtuellem Wasser. Am Schluss bleiben von den Kaffeekirschen nur noch die gerösteten Bohnen (die Kerne der Kirschen) übrig. Der enorme Wasserverbrauch hängt also damit zusammen, dass viel Pflanze für wenig Kaffee gebraucht wird.

Infografik muss “Verlust” erklären

Daraus ergibt sich, dass die Prozess-Ebene erklären muss, in welcher Station wieviel Masse der Kaffeekirschen verloren geht. Beim Prozessschritt “Fruchtfleisch entfernen” fallen z.B. 50% der Kaffeekirsche weg, wodurch das Wasser verloren geht, was darin steckt. Man benötigt für eine Tasse Kaffee (125ml) 52g Kaffeekirschen. Im Laufe der Weiterverarbeitung werden daraus aber nur 7g geröstete Kaffeebohnen (Vgl. Grafik ‘Abnahme der Masse’).

Wasserverbrauch und -Verlust  bei der Kaffeeherstellung

Basierend auf der wissenschaftlichen Arbeit von A.K. Chapagain und A.Y. Hoekstra, “The water needed to have the Dutch drink coffee” (Vgl. Eintrag vom 14.April) haben wir die Werte für eine einzelne Tasse Kaffee errechnet. Dabei entstand eine Tabelle, welche die einzelnen Stationen, den Verlust an Masse und den Wasserverbrauch enthält (Vgl. Grafik). Diese Tabelle wird Grundlage für unsere interaktive Infografik sein.

Die Originaltabelle gibt es hier zum Download (XSLX-Format, 48Kb).

Jürgen Storyboard Kaffee, Kaffeeherstellung, Tabelle, virtuelles Wasser, Wasserverbrauch, Wasserverlust

Folgendes Video zeigt die Herstellung von Kaffee mit animierten, anschaulichen Infografiken:

Außerdem gibt es weitere Weblinks zu Quellen, die sich ausführlich mit diesem Thema beschäftigen:

• Wikipedia: http://de.wikipedia.org/wiki/Kaffee
• Deutscher Kaffeeverband: http://www.kaffeeverband.de/26.htm

Ein interessantes Projekt mit spannenden Interaktionsmöglichkeiten haben vier Studenten der HfG Gmünd realisiert:

• http://ig.hfg-gmuend.de/Members/marc_arthofer/meine-projekte/do-you-like-some-coffee-just-a-minute..

Jürgen Recherche, Storyboard HfG Gmünd, Kaffee, Kaffeeherstellung, Links

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

Andrea Storyboard Interaktionskonzept, Kaffee, Kaffeeherstellung, Konzeption, Produkte, Prozess, virtuelles Wasser für Kaffee, Wasserverbrauch