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!

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

Update: Leider funktionieren viele der Links 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

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.

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 …

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.

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.

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