Archiv

Archiv für die Kategorie ‘Verschiedenes’

Professioneller Usability-Test unserer Infografik

3. Mai 2010

Es hat sich lange nichts mehr getan auf unserem Blog. Das liegt vor Allem daran, dass das “Interaktive Infografik-Projekt” abgeschlossen ist, und es eigentlich nichts mehr zu berichten gibt. Einen Nachtrag haben wir da aber noch und er wird das Ganze vermutlich auch abschließen.

Im Wintersemester 2009/2010 wurde von Informationsdesign Studenten und Studentinnen im damaligen 3. Semester, eine umfangreiche Usability-Studie durchgeführt. Dabei wurden interaktive Infografiken auf ihre Benutzbarkeit sowie ihre Gebrauchstauglichkeit getestet. Auch unsere Grafik wurde ausführlich unter die Lupe genommen.

Die Studie fand im Usability Labor der HdM Stuttgart statt und es wurde untersucht, wie die Nutzer die Infografik zum Virtuellen Wasser wahrnehmen, wie sie damit interagieren und an welche Inhalte sie sich später noch erinnern. Hauptziel war es heraus zu finden wo, und warum bei der Nutzung Probleme auftreten. Dabei kamen mehrere Datenerhebungsverfahren wie z.B. Lautes Denken und der AttrakDiff-Fragebogen zum Einsatz. Insgesamt nahmen 4 Personen, zwischen 18 und 46 Jahren, an dem Test für unsere Grafik teil.

Die Ergebnisse der Untersuchung sind für uns als Gestalter natürlich besonders spannend. Hier eine kurze Aufzählung der schwersten Usability-Probleme:

  • Teilnehmer haben Probleme bei der Bedienung der Haupt- und Inhaltsnavigation (Pfeile) in der Prozessebene (also bei der Kaffeeherstellung)
  • Die Drag n’ Drop Interaktion wird nicht erkannt
  • Hinweise auf Interaktion (wie z.B. Pfeil für Drag n’ Drop) werden übersehen oder nicht verstanden
  • Mehrmaliges Klicken auf einen Button wird nicht verstanden
  • Der Begriff „Virtuelles Wasser“ und der Kontext der Grafik werden nicht verstanden
  • Nutzer können wichtige von unwichtigen Elementen nicht unterscheiden und werden abgelenkt

Über die klassische Usability-Untersuchung hinaus wurde ein Fragebogen verwendet, um die Attraktivität der Grafik zu messen. Hier Schnitt unsere Infografik mit einem Gesamturteil von 6,1 von 7 möglichen Punkten sehr gut ab und erreichte in der Portfolio-Darstellung das Prädikat „begehrt“. Dennoch zeigte sich auch hier, dass es bei der Bedienung Probleme gibt und, dass diese sich auf die Attraktivität der Grafik auswirken.

-

Die Evaluatoren unserer Grafik haben folgendes Fazit gezogen:

„Insgesamt wurde die Infografik „Virtuelles Wasser“ zwar positiv wahrgenommen, in der Interaktion mit der Infografik traten jedoch teils schwere Probleme auf. Diese sollten behoben werden, um neben optischer Qualität auch eine intuitive Bedienung zu ermöglichen. „

Im Großen und Ganzen haben wir also eine durchaus positive Bewertung bekommen, auch wenn die Problem-Liste lang ist. Allerdings ist es eben auch der Zweck solcher Usability-Tests, (umfangreiche) Problemlisten zu erstellen.

Nichtsdestotrotz ist unsere Grafik noch verbesserungswürdig, was für uns jedoch keine Überraschung ist. Zum Einen konnten wir manche Aspekte aus unserem Konzept nicht umsetzten. Ein Intro, was den Begriff „virtuelles Wasser“ erklärt, war aus zeitlichen Gründen bspw. nicht mehr machbar. Zum Anderen haben wir unterschätzt, dass Interkationsmöglichkeiten wie z.B. Drag n’ Drop zum Vergleichen der Produkte von den Nutzern nicht verstanden werden.

Es wäre jetzt unsere Aufgabe, die Erkenntnisse zu verarbeiten. Da die Infografik allerdings nirgends „richtig“ verwendet wird und eine Verbesserung mit viel Arbeit verbunden ist, wird es leider keine neue Infografik geben.

Die Kurzfassung des Usability-Tests als PDF kann einfach heruntergeladen werden.
Nähere Informationen zum AttrakDiff-Fragebogen gibt es unter: www.attrakdiff.de.

Am Ende dieses Artikels ein großes Dankeschön an Katja Krüger, Paul Müller, Katrin Schlierkamp, Thomas Soyter und Claudia Steinau, die den Test durchgeführt haben. Wir wissen aus eigener Erfahrung, dass sehr viel Arbeit dahinter steckt!

Jürgen Verschiedenes

Mit interaktiven Infografiken effizient informieren

31. August 2009

Das ID Symposium 2009 in der HdM Stuttgart ist vorbei!

Symposium

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

Noch mehr Infografiken …

12. Juli 2009

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!

A Drug StoryGreen Sea Turtle, Anja Petri & Sarah Schröder

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 , ,

Danke Veronika

11. Juli 2009

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 ,

Pressetext

8. Juli 2009

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:———
Screenshot "Produktvergleich" - Interaktive Infografik zum Thema "Virtuelles Wasser"Screenshot "Kaffeeherstellung" - Interaktive Infografik zum Thema "Virtuelles Wasser"

Andrea Verschiedenes , , , , , , , ,

Die Infografik ist fertig!

7. Juli 2009

Nach vielen Tagen und Nächten Arbeit ist unsere interaktive Infografik nun endlich fertig! Wir freuen uns über sämtliche Meinungen & Kommentare.

Screenshot "Produktvergleich" - Interaktive Infografik zum Thema "Virtuelles Wasser"Screenshot "Kaffeeherstellung" - Interaktive Infografik zum Thema "Virtuelles Wasser"

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 , ,

Kaffeeherstellung (Prozessebene)

4. Juli 2009

Screenshot KaffeeherstellungAuch 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 , , ,

Infografik in der ZEIT

20. Juni 2009

Infografik der ZEITDurch 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 , , ,

Screendesign Weiterentwicklung

3. Juni 2009

Screendesign VergleichsebeneScreendesign KaffeeherstellungUnsere 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 , , ,

Kampagne des FAO

11. Mai 2009


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.

Plakat des FAOTeil 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 , , , ,