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)
Andrea Gestaltung, Umsetzung Design, Gestaltung, Grafik, Infografik, Screendesign, Wasserverbrauch
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).
Andrea Gestaltung, Umsetzung Design, Gestaltung, Grafik, Icons, Screendesign
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.
Andrea Gestaltung Design, Gestaltung, interaktive Infografik, Layout, Screendesign
Erste Entwürfe
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.
Jürgen Gestaltung Design, Gestaltung, interaktive Infografik, Layout, Screendesign
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
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).
