Nach vielen Tagen und Nächten Arbeit ist unsere interaktive Infografik nun endlich fertig! Wir freuen uns über sämtliche Meinungen & Kommentare.
Und hier geht’s zur interaktiven Infografik! (!) Es öffnet sich ein externes Fenster.
* Kleiner Hinweis: Die Wassermengen bei der Kaffeeherstellung sind teilweise gerundet um sie besser verständlich zu machen.
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 …
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.
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.
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)
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 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 …
Parallel zum Screendesign kümmern wir uns um verschiedene Prototypen für die spätere Umsetzung in Flash. Hier zwei Beispiele für eine Umsetzung der Wassersäulen für die Vergleichsebene. Die “Balkendiagramme” sollen animiert werden, dabei aber trotzdem möglichst gut vergleich- und lesbar bleiben. Die Idee ist ein leeres Gefäß, was sich mit Wasser füllt, je nach dem welches Produkt ausgewählt wurde.