InfoDesign in Bewegung

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

Wir sind noch nicht ganz fertig mit unserem Projekt, bevor wir nicht unserer Tutorin Veronika Ziegler gedankt haben. Ob Masken, Tooltips, Schleifen oder Blubberblasen, immer Stand sie uns mit Rat und Tat zur Seite. Solange bis der Code funktioniert hat!

Danke, dass wir Dich mit all den Fragen bombadieren durften und danke, dass Du immer eine Antwort parat hattest

Andrea Verschiedenes Danke, Flash

Um die fertige Infografik nun auch publik machen zu können gibt es hier einen kurzen Pressetext:

———

Virtuelles Wasser interaktiv

Nein, beim Begriff „virtuelles Wasser“ handelt es sich nicht um eine neue Web 2.0-Idee oder gar einen futuristischen Springbrunnen. Vielmehr ist virtuelles Wasser die Menge an Wasser, die ein Produkt in der Herstellung benötigt. Bei einer Tasse Kaffee sind dies z.B. 140 Liter. Das Konzept des virtuellen Wassers hilft die globalen Probleme in Bezug auf das Thema Wasser und den Wassermangel besser verständlich und greifbar zu machen.

Zwei Studenten an der Hochschule der Medien in Stuttgart haben sich nun diesem Konzept gestellt und die Thematik „virtuelles Wasser“ digital aufbereitet. Das Ergebnis ist eine interaktive Infografik, die den Nutzer sensibilisieren und Wissen vermitteln will. Dabei setzten die beiden Informationsdesign-Studenten Andrea Müller und Jürgen Röhm ganz auf den Alltagsbezug ihrer Grafik und eine intuitive Bedienung.

So können die Nutzer z.B. per Drag n’ Drop den virtuellen Wassergehalt von verschiedenen Produkten vergleichen. Eine Darstellung der Wassermenge durch bekannte Größen wie beispielsweise eine Badewanne veranschaulicht dabei die abstrakten Zahlen. Im zweiten Teil der interaktiven Grafik werden exemplarisch die Stationen der Kaffeeherstellung erklärt. So kann nachvollzogen werden, wie sich der virtuelle Wassergehalt von Produkten berechnet.

Die Entstehung der interaktiven Infografik haben Müller und Röhm ausführlich in einem Blog dokumentiert. Dort ist nicht nur die Grafik selbst zu sehen, sondern es können alle Stationen der Entwicklung, vom ersten Brainstorming bis hin zur Umsetzung, nachvollzogen werden.

———
Link zur Infografik: www.info-design.net/infografik
Link zum Blog: www.info-design.net

Und hier noch zwei exemplarische Screenshots der Infografik:———

Andrea Verschiedenes Artikel, Beschreibung, interaktive Infografik, Kaffeeherstellung, Pressetext, Produktvergleich, virtuelles Wasser, Wasserverbrauch, Zusammenfassung

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

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

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 die ‘Water Developement and Management Unit’ des FAO (Food and Agriculture Organization of the United Nations) bietet zahlreiche Informationen zum Thema Wasser und Ressourcen. Unter anderem gibt es eine Kampagne um die Öffentlichkeit über virtuelles Wasser zu informieren.

Teil der Kampagne ist eine (ansatzweise interaktive) Animation auf dieser Seite: http://www.fao.org/nr/water/infores_multimedia.html (Vgl. YouTube Video oben).

Außerdem bietet das FAO verschiedene kate, Flyer und E-Cards auf dieser Seite an: http://www.fao.org/nr/water/promotional.html

Auf YouTube finden sich außerdem noch weitere Videos unter http://www.youtube.com/faowater

Kritik

Unserer Meinung nach sind die Medien der Kampagne zwar schön gestaltet, Informationsgehalt und Behaltensleistung lassen aber sehr zu wünschen übrig. Die Animation verfälscht die grafische Repräsentation von Daten, ist nur minimal interaktiv (Play/Pause) und wirkt wenig ansprechend auf den Nutzer.

Jürgen Recherche, Verschiedenes Animation, FAO, Video, virtuelles Wasser, YouTube

Hier eine Sammlung von verschiedenen Projekten, Grafiken, Fotos, etc. zum Thema “virtuelles Wasser” als eine Art Benchmark und als Ideenpool für unser eigenes Projekt:

Infografik von Timm Kekeritz

Der Grafikdesigner Timm Kekeritz hat bereits ein vielbeachtetes Plakat zum Thema “virtuelles Wasser” gestaltet (Vgl. Eintrag vom 10. April). Sein “The Virtual Water Project” basiert auf dem Bericht von A.K. and Hoekstra, A.Y. (2004), »Water footprints of nations«, der UNESCO-IHE in den Niederlanden. Das doppelseitige Plakat zeigt auf einer Seite die virtuellen Wassermengen von Produkten, auf der anderen Seite den virtuellen Wasserverbrauch (“Water footprint”, inkl. Im- und Export) verschiedener Nationen. Mehr Infos zu Plakat, Projekt und den Reaktionen in der Presse gibt es auf http://www.traumkrieger.de/virtualwater/.

General Electric: Plug Into the Smart Grid

Mit der interaktiven Infografik (eigentlich eher Microsite) zum Thema “Smart grid” (Intelligentes Stromnetz) setzt General Electric neue Maßstäbe in Gestaltung und Programmierung. Die Seite ist Teil der Kampagne “Ecomagination” und wirb dafür ins Stromnetz von General Electric zu wechseln. Die Nutzer werden dabei sehr stark emotional angesprochen und zur Interaktion aufgefordert (simulativ und explorativ). Zu sehen gibt’s die Grafik auf http://ge.ecomagination.com/smartgrid/

Visualisierung von Stefan Stubbe

Die Installation des Grafikdesign-Studenten Stefan Stubbe soll die versteckten, schwer vorstellbaren Volumenwerte von täglich verbrauchtem Wasser veranschaulichen und den Menschen im Umgang mit Wasser sensibilisieren. Sie ist als vierteiliges Ausstellungsobjekt gedacht und demonstriert die benötigte Menge an virtuellem Wasser für Orangensaft, Milch, Kaffee und Tee. Nach Knopfdruck beginnt Wasser durch das Gefäß zu fließen, ein Display zeigt den aktuellen Wasserstand an. Mehr gibt’s auf http://www.stefanstubbe.com/pr_vwasser.php.

‘art meets science’-Project

Die Künstler des Art meets Science Projekts sind der Meinung, dass der Blick auf das unsichtbare Wasser sich hervorragend für eine künstlerische Umsetzung eignet, ohne dabei den wissenschaftlichen Kontext verlieren zu müssen. In der Ausstellung zum Thema “virtual water” gab es viele kreative Ansätze, die dieses Thema aus den verschiedensten Perspektiven beleuchten. Mehr gibt’s auf der Projekt Website http://www.artmeetsscience.de/austellung/index.html.

Fotostrecke von The Guardian

Neben verschiedenen Artikeln bietet die englische Tageszeitung The Guardian eine Fotostrecke. Dabei werden die Zahlen des virtuellen Wassers mit zahlreichen Bildern verknüpft. Die Fotostrecke gibt es auf der Website des Guardian (Engl.) unter http://www.artmeetsscience.de/austellung/index.html.

Microsite von www.H2ouse.org

Die Website H2ouse.org bietet jede Menge Informationen, wie Wasser gespart werden kann. Dazu gibt es unter Anderem eine Microsite in der sich der Nutzer durch den Grundriss eines Hauses navigieren kann. Bei Klick auf eines der Zimmer erscheint dieses als Grafik und der Nutzer kann wählen zu welchen Geräten (z.B. Wasserhahn …) er nähere Informationen will. Diese Art der Navigation erinnert an eine Art interaktive Infografik und ist auf der Seite http://www.h2ouse.org/tour/index.cfm zu sehen.

Jürgen Recherche, Verschiedenes art meets science, Benchmarking, Fotostrecke, Smart Grid Grafik, Stefan Stubbe, The Guardian, Timm Kekeritz, Virtual Water Project, www.H2ouse.org