InfoDesign in Bewegung

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

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

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

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