InfoDesign in Bewegung

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

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.

Andrea Gestaltung, Storyboard Gestaltung, Kaffee, Scribbles, Skizzen, Storytelling

Hier verschiedene Skizzen (Wireframes) zur Verlgeichs- und Prozessebene. Außerdem die Visualisierung, wie die Wassermengen für unsere Produkte “greifbar” gemacht werden können (Vgl. “Produktwahl“).

Jürgen Gestaltung, Storyboard Scribbles, Skizzen, Visualisierung von Wassermengen, Wireframes

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

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.

Andrea Storyboard Screendesign, Scribbles, Skizzen

Das Ziel für die Vergleichsebene ist relativ einfach: Der Nutzer soll die Möglichkeit erhalten verschiedene Produkte in Bezug auf ihren virtuellen Wassergehalt miteinander zu vergleichen (Vgl. Einträge ‘Storytelling’ und ‘Flowchart’).

Dabei haben wir uns entschieden (mehr oder weniger) klassische Säulendiagramme zu verwenden. Diese Art der Darstellung hat den Vorteil, dass sie sehr bekannt und äußerst funktional ist. Zahlenwerte lassen sich in Form von Säulendiagrammen sehr gut veranschaulichen und innerhalb von Sekunden vergleichen. Die traditionelle (langweilige) Darstellung von Säulendiagrammen wollen wir aber durch eine schön gestaltete, multimediale Komponente durchbrechen. So sollen die Betrachter auch emotional angesprochen und dazu motiviert werden, die interaktive Infografik weiter zu entdecken.

Kernstück der Vergleichsebene ist aber die „Bühne“ auf welcher der Vergleich stattfindet. Der Nutzer hat hier selber die Möglichkeit zu entscheiden, welche Produkte ihn interessieren und welche er miteinander vergleichen möchte (Vgl Eintrag ‘Produktwahl‘). Mittels Drag n’ Drop können zwei Produkte (bzw. Diagramme) aus einer Art „Bibliothek“ auf die Bühne gezogen werden. Daneben gibt es eine Säule, die den durchschnittlichen Wasserverbrauch einer Person pro Tag darstellt. So soll der Betrachter ein Gefühl dafür entwickeln, wie die Zahlen von virtuellem und direktem Wasserverbrauch miteinander in Beziehung stehen.

Das Konzept folgt den Ansichten des Konstruktivismus in der Lernpsychologie. Im Sinne der konstruktiven Seite ist Lernen dann am effektivsten, wenn die Lernenden ihren Lernprozess umfassend selbst steuern können.

Jürgen Storyboard Drag n' Drop, Interaktionskonzept, Konstruktivismus, Säulendiagramme

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.

Andrea Storyboard Flowchart, Informationsarchitektur, interaktive Infografik