InfoDesign in Bewegung

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 …

Jürgen Konzeption, Umsetzung Benutzbarkeit, interaktive, interaktive Infografik, Usability, Usability-Test, User-Experience

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

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.

Zur Vorschau des Produktvergleichs!

(!) Es öffnet sich ein externes Fenster.

Jürgen Umsetzung Flash, interaktive Infografik, Produktvergleich, Umsetzung, Vorschau

Durch eine E-Mail eines interessieren Besuchers unseres Blogs wurden wir auf die aktuelle Ausgabe der Zeit aufmerksam gemacht. Darin gibt es eine schön gestaltete Infografik zum Thema Virtuelles Wasser.

Das Konzept dabei ist unserem ähnlich und enthält z.B. einen Vergleich verschiedener Produkte, eine Form der Visualisierung von Wassermengen, einen Vergleich mit dem realen Wasserverbrauch einer Person pro Tag, eine kurze Info, wie sich virtuelles Wasser berechnet und die Information wieviel Wasser der Erde überhaupt nutzbar ist. Alles Elemente, die in unserem Konzept ebenfalls auftauchen!

Die Infografik lässt sich als PDF auf http://www.zeit.de/online/2009/25/infografik-wasser herunterladen.

Jürgen Recherche, Verschiedenes Die ZEIT, Infografik, Produktvergleich, virtuelles Wasser

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. 60x30x40; 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, 280x202cm, 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

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

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 Drag n’ Drop Funktion unserer interaktiven Infografik gibt es inzwischen einen Flash-Prototyp. Dadurch lässt sich die Art der Interaktion gut simulieren. Bis zur “Serienreife” wird es allerdings noch etwas dauern …

Jürgen Umsetzung Drag n' Drop, Flash, Prototyp

Dieser Blog-Eintrag ist Teil der Entwicklung einer interaktiven Infografik zum Thema “Virtuelles Wasser”. Mehr Infos gibt es im Pressetext.

Für die Vergleichsebene war noch eine kleine Recherche nötig. Als eine Art Referenz soll dort ein Balkendiagramm angezeigt werden, das den Wasserverbrauch einer Person pro Tag visualisiert. Dies soll helfen die Zahlen des Virtuellen Wassers in Relation zu setzten (Vgl. Eintrag “Interaktionskonzept Vergleichsebene“, 8. Mai 09)

Folgende Zahlen haben wir (bei Wikipedia) gefunden, mit anderen Quellen verglichen und leicht angepasst:

Gesamtverbrauch einer Person pro Tag: 126 Liter!

Der Wasserverbrauch setzt sich zusammen durch:

Trinken und Kochen:   4 Liter
Geschirrspülen:  6 Liter
Putzen:   6 Liter
Körperpflege:   10 Liter
Baden und Duschen:   30 Liter
Wäschewaschen:   30 Liter
Toilettenspülung:   40  Liter

Das original Datenblatt mit allen Zahlen gibt es hier zum Download (XSLX-Format, 16KB).

Quellen: http://www.stadtwerke-gengenbach.de/de/produkte/wasser/wasserverbrauch/ und http://de.wikipedia.org/wiki/Wasserverbrauch

Jürgen Konzeption, Recherche Recherche, Wasser, Wassersäule, Wasserverbrauch

Unsere ersten Entwürfe haben wir inzwischen angepasst, weiterentwickelt und grafisch aufgewertet. Die Formen sind abgerundet, halbtransparent und wurden zum Teil mit einem Glanz-Effekt versehen. Zum Beispiel bei den Produkt-Icons lässt sich so besser visualiseren, dass die Objekte mit der Maus bewegt werden können. Die abgerundeten Formen schaffen eine Zusammengehörigkeit zwischen den Objekten. Insgesamt wurde außerdem ein Raster verwendet, was sich über beide Bereiche der Infografik erstreckt. Die Farbcodierung hilft bei der Navigation und schafft eine passende “Atmosphäre” für die Nutzung.

Jürgen Verschiedenes Design, Gestaltung, Layout, Screendesign