Das ID Symposium 2009 in der HdM Stuttgart ist vorbei!
Am 16. Oktober findet das 8. Symposium für Informationsdesign an der Hochschule der Medien in Stuttgart statt. Dieses Jahr dreht sich alles um das Thema “Mit interaktiven Infografiken effizient informieren” und dazu wird es zahlreiche Vorträge und Präsentationen geben. Unter anderem präsentiert die HdM die ersten Ergebnisse des Forschungsprojektes “Informieren, visualisieren, Wissen erwerben mit interaktiven Infografiken”.
Nähere Informationen gibt es unter http://www.idsymposium.de
Jürgen Verschiedenes
In der Lehrveranstaltung “Interaktive Infografiken” an der HdM Stuttgart entstanden bei Herrn Prof. Tille noch zahlreiche weitere Infografiken. Ein Besuch lohnt sich:
Leider funktionieren die Links zum HdM-Server (mars.iuk.hdm-stuttgart.de) nicht mehr!
Wasserknappheit von Monika Webers und Anna Zinßer:
http://mars.iuk.hdm-stuttgart.de/~mw090/index.html
A Drug Story von Anika Sanwald & Benjamin Schaufler:
http://mars.iuk.hdm-stuttgart.de/~as123/start.html
Max-Eyth-See von Jan Hottman:
http://www.hottmann.net/infografik
Green Sea Turtle von Anja Petri & Sarah Schroeder:
http://mars.iuk.hdm-stuttgart.de/~ss188/seaturtle/index.html
Camping in Europa von Simon Seeger & Jonathan Schödl:
http://mars.iuk.hdm-stuttgart.de/~ss184/Campingplaetze/Camping_mit_Animation.swf
Schneiderstube im Mittelalter von Beate Riefer & Melissa Morey del Castillo:
http://mars.iuk.hdm-stuttgart.de/~br022/start.html
Jürgen Verschiedenes HdM Stuttgart, interaktive Infografik, Projekte
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.
Jürgen Umsetzung, Verschiedenes Ergebnis, interaktive Infografik, virtuelles Wasser
Auch der zweite Teil unserer interaktiven Infografik nimmt immer mehr Gestalt an. Als kleinen Vorgeschmack gibt es hier einen Screenshot des Prozessschritts “Pflanzenwachstum”. Kleinigkeiten an Inhalt und Layout werden sich vermutlich noch ändern.
Jürgen Verschiedenes Kaffeeherstellung, Prozessebene, Screenshot, Vorschau
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
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
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 …
[kml_flashembed fversion="8.0.0" movie="http://www.info-design.net/wordpress/wp-content/uploads/2009/06/wasser_test.swf" targetclass="flashmovie" publishmethod="static" width="500" height="400"]
[/kml_flashembed]
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
