Wie User mit interaktiven Infografiken umgehen

Multimediale Infografiken

Interaktiv und multimedial verpackte Infos machen auf einer Website etwas her – aber wie kommen die Nutzer damit klar, wenn’s auf einmal zappelt und vom gewohnten Navigationsschema abweicht? Eine Usability-Studie der Uni Trier hat das untersucht und sechs Leitlinien für Grafiker und Journalisten aufgestellt.

Von Peter Schumacher

Produzenten multimedialer Inhalte sollten ihr Angebot aus der Perspektive der Nutzer prüfen: Wie interagieren sie mit dem Angebot? Wie scannen, browsen, lesen und interpretieren sie die Grafiken? Die Erwartungen und das Verhalten der Nutzer sind ein Schlüssel zu Qualitätsstandards für interaktive Infografiken.

Um die Nutzer-Interaktion zu analysieren, lassen sich Testmethoden für Website-Usability anwenden: Etwa die Methode des Lauten Denkens oder die Blickaufzeichnung. An der Universität Trier wurde mit diesen Mitteln in verschiedenen Untersuchungen die Interaktion von Test-Nutzern aufgezeichnet und analysiert. Die Testergebnisse geben Hinweise, wie interaktive Infografiken nutzerfreundlich und benutzbar gestaltet werden können.

Nicht überraschend: Eine Reihe von Kriterien aus der klassischen Usability-Forschung lassen sich auf Multimedia-Features übertragen, etwa die Notwendigkeit einer klaren Navigationsstruktur, die dem Nutzer sowohl die Navigationsoptionen anzeigt wie auch die aktuelle Position im Angebot. Doch die Anforderungen an Usability für multimediale Features reichen weiter: Durch die Integration von Text, Grafik, Fotos, Animationen, Video und Audio in einer kompakten Präsentation ergeben sich zusätzliche Herausforderungen an den Nutzer – und damit an den Produzenten.

Aus den bisher gewonnenen qualitativen Daten zur Nutzung von Infografiken lassen sich sechs Leitlinien gewinnen, die Grafiker und Journalisten beachten sollten, wenn sie interaktive Grafiken produzieren:

1. Den „information overload“ vermeiden
Multimedia verführt dazu, möglichst viele Informationen in möglichst vielen Modi anzubieten: Ausufernde Foto-Galerien, Zeitleisten mit ausführlichen Agenturtexten, klickbare Karten mit einer Fülle an Details, Augenzeugenberichte in Wort, Bild und Video. Je umfangreicher das Angebot, umso stimmiger muss die Hierarchisierung und Nutzerführung sein – sonst ist der Nutzer überfordert. Interaktive Infografiken erfordern ein „multi-tasking“ des Nutzers. Er muss

  • die Navigationsoptionen finden, verstehen und nutzen,
  • einen Überblick über jede Seite bekommen – und die aktuelle Position innerhalb des Features bestimmen können,
  • Information in verschiedenen Modi wie Text, Grafik, Foto und Animation interpretieren und zueinander in eine sinnvolle Beziehung setzen.

Fordern allein Navigation und Orientierung viele kognitive Ressourcen, so bleibt für die Inhalte nicht ausreichend Kapazität. Im besten Fall nimmt der Nutzer dann nur einen geringen Teil des Angebots wahr – im schlechtesten ist er irritiert, desorientiert und steigt er frühzeitig aus.

Infografik zum Seebeben in Asien

Beispiel 1 (aus nytimes.com): Über die Zeitleiste links (hier gelb umrandet, Hour 1 – 7) lässt sich per Mouse-over der Inhalt der drei Inhaltsbereiche (orange markiert) steuern. Im Test sprang die Aufmerksamkeit der Nutzer zwischen der Navigationsleiste und der Karte hin und her. Der Newsticker unten links wurde nicht beachtet, die Anzeige der Wellenhöhe wurde von den meisten Nutzer nicht wahrgenommen.


2. Nutzer erwarten Funktionalität
Interaktive Grafiken stellen den Nutzer vor zwei Fragen: Welche Elemente sind als Hyperlinks angelegt – und wohin führen mich diese? Nutzer neigen dabei dazu, alle durch Farbe, Kontrast, Form, Größe oder Position hervorgehobenen Elemente als klickbar anzunehmen. Das ist ein entscheidender Unterschied zu gedruckten Infografiken, bei denen hervorgehobene Elemente als Signale zur Leserführung gesehen werden, Informationen hierarchisieren und die Nutzungspfade sequenzieren. In Online-Grafiken vermutet der Nutzer bei vielen Elementen – sei es Schrift, Grafik oder Foto – eine Aktionsmöglichkeit: Ein Klick oder ein Mouse-over könnte schließlich neue Informationen bringen. Eine Schlüsselfrage für Multimedia-Produzenten ist daher: Wie lässt sich die Funktion von einzelnen Elementen klar signalisieren?

Die Schwierigkeit dabei: Interaktive Grafiken sind eine neue, wenig standardisierte Form der Präsentation. Bei textdominierten Darstellungen im Internet gibt es Standards: Links sind unterstrichen, farblich hervorgehoben oder beides. In multimedialen Darstellungen dagegen können Buttons, Legenden, grafische Markierungen oder Wörter oder Textblöcke als Link fungieren. Viele Online-Redaktionen haben Standards für solche Funktionsmarkierungen eingeführt und verwenden einheitliche Signale und Navigationssysteme: Das hilft vor allem den Stammnutzern des jeweiligen Mediums – auf anderen Sites jedoch können die Standards schon wieder ganz anders aussehen. So bleibt den Nutzern oft nur, eine Infografik mit der Maus zu erkunden und per Trial-and-Error die Links aufzuspüren.

Infografik: Meerbeben in Asien


Beispiel 2 (aus elmundo.es): Die Testpersonen klicken auf hervorgehobene Elemente, in diesem Fall das Kästchen, das das Epizentrum des Tsunami markiert, und die roten Pfeile. Sie erwarten eine vergrößerte Darstellung oder weitere Erklärungen – doch in diesem Fall gibt es innerhalb der Karte keine Navigationsmöglichkeiten.

Infografik zur Europameisterschaft, Spielfeld unten rechts markiert

Beispiel 3 (Fußball-Newsticker von dpa infocom): Die Testpersonen versuchten auf das Fußballfeld unten rechts zu klicken (hier rot markiert) und erwarteten Informationen über die Mannschaften – doch das Feld war nicht klickbar.
Infografik zur Europameisterschaft, Blickkonzentration oben links und in den Ecken

Zu Beispiel 3: Blickaufzeichnungsdaten zeigen, dass grafische Elemente die Aufmerksamkeit in der ersten Phase der Nutzung auf sich ziehen.


3. Animationen gezielt einsetzen

Animationen ziehen die Aufmerksamkeit der Nutzer auf sich: Wenn ein Text in Konkurrenz zu einer Animation steht, verliert er. Blinken und Bewegung wirken wie Magneten für Aufmerksamkeit und Klicks – stärker noch als Hervorhebungen durch Farbe, Kontrast, Größe oder Position. Deshalb sollten Animationen nur gezielt eingesetzt werden, wenn sich damit eine bestimmte Funktion verbindet und die Aufmerksamkeitssteuerung gewollt ist.

Wenn Animationen eingesetzt werden, um Prozesse im Zeitverlauf darzustellen, sind oft Erklärtexte notwendig. So lange eine Dauer-Animation Aufmerksamkeit bindet, kann sich der Nutzer kaum auf diese notwendigen Informationen konzentrieren. Deshalb ist es sinnvoll, den Nutzern Steuerungsmöglichkeiten für die Animation zu geben, etwa durch Buttons für Start, Stop, Pause und Neustart der Animation.

BBC-Grafik zum Tsunami

Beispiel 4 (aus bbc.co.uk): Das Epizentrum ist rot blinkend markiert: Diese Animation lenkt die Aufmerksamkeit der Leser vom Text ab und verführt dazu, auf den roten Punkt zu klicken – auch in diesem Fall vergeblich.


4. Die Aufmerksamkeit der Nutzer ist durch die Prinizipien der Ähnlichkeit, Geschlossenheit, Nähe und Einfachheit der dargestellten Elemente bestimmt
Eine besondere Stärke von interaktiven Infografiken ist ihre Nicht-Linearität: Die Leser picken sich die Elemente heraus, die sie interessieren und erkunden die Grafik so auf ihrem eigenen Pfad. Diese Wahlfreiheit kann eine schwierige Aufgabe sein: Die Nutzer müssen Informationen aus verschiedenen Codes wie Text, Grafik, Foto, Animation, Video und Audio in Beziehung setzen, um zu einer sinnvollen Interpretation zu gelangen.

Ein klares grafisches Konzept kann diesen Prozess unterstützen: Durch die Hierarchisierung von Informationen und durch Signale, welche Teil-Informationen aufeinander bezogen werden sollen. Wie Nutzer einzelne Elemente in ihrer Wahrnehmung in Beziehung setzen, lässt sich mit den klassischen Prinzipien der Gestalt-Theorie gut erklären:

  • Ähnlichkeit: Elemente, die – etwa in Hinblick auf Farbe, Form, Größe – ähnlich sind, werden im Zusammenhang gebracht.
  • Geschlossenheit: Elemente, die zusammen genommen eine Einheit bilden, werden als zusammen gehörige Gruppe wahrgenommen.
  • Nähe: Elemente, die räumlich nahe beieinander sind, werden zueinander in Beziehung gesetzt.
    Einfachheit und Prägnanz: Elemente werden in der Wahrnehmung so zueinander geordnet, dass sie möglichst einfache, prägnante Formen entstehen.
  • Diese Grundsätze können helfen, Informationen zu Clustern zusammen zu fügen, die auch vom Nutzer als Einheit wahrgenommen werden. Auch als Instrument zur Fehlerdiagnose taugen die Gestalt-Grundsätze: Fehldeutungen und Missverständnisse in Nutzertests lassen sich in vielen Fällen mit Verstößen gegen diese Prinzipien erklären.

    Als Beispiel 5 noch einmal die Grafik von nytimes.com: Wofür stehen die roten Markierungen? Die meisten Testpersonen wussten es nicht: Sie sahen die roten Markierungen nicht in Verbindung mit der schwarzen Erklärung „Approximate location of 12-to 14-foot waves“. Ein Beispiel für die Missachtung des Gestaltprinzips der Ähnlichkeit.

    5. Die Nutzer ans Ruder lassen
    Lineare Elemente wie Video, Audio oder Animationen wollen die Nutzer selbst starten, stoppen oder neu starten können. Die Nutzungshaltung bei Onlinemedien ist (noch) überwiegend eine aktive: Die Nutzer lehnen sich nicht passiv zurück, wie bei linearen Medien wie Fernsehen oder Radio, sondern wählen aktiv ihren eigenen Nutzungspfad. Die Integration von linear ablaufenden Elementen in ein nicht-lineares Medienangebot muss daher so geschehen, dass der Nutzer die Steuerung selbst in der Hand hat – automatisch startende Videos, Animationen oder Audio-Sequenzen sind nicht nur in der Online-Werbung ein Ärgernis, sondern auch bei redaktionellen Inhalten – jeder kennt die hektische Suche nach dem Stop-Button, die oft genug mit einem Klick auf den Zurück-Button des Browsers endet. Zwei Tipps hierzu: Es sollte dem Nutzer erstens klar signalisiert werden, wo ein Klick eine Animation, ein Video oder Audio startet. Und es muss zweitens deutlich gekennzeichnet sein, wie diese linearen Sequenzen wieder gestoppt werden können.

    Um dem Nutzer die volle Kontrolle über die Infografik zu geben, ist eine klare Navigation innerhalb der Grafik nötig, die eine dreifache Orientierungsfunktion erfüllen muss: Wo bin ich gerade? Wo kann ich hin? Wie komme ich zurück zur Ausgangsseite? Interaktive Infografiken werden als relativ unabhängige Sites wahrgenommen – egal ob sie als Pop-up gestaltet oder in eine Seite integriert sind. Wie bei Websites erwarten Nutzer einen „Home“-Button, der sie jederzeit zurück zur Ausgangsseite bringt, wenn sie sich im Angebot „verlaufen“ haben.

    6. Durch Nutzer testen lassen
    It’s the usability, stupid! Wie bei Websites auch, lassen sich viele Fehler nur im Nutzertest finden. Das geht auch ohne Testlabor und teures Gerät: In der Minimalvariante bekommt man schon mit drei bis vier Nutzern, die zur typischen Zielgruppe des Angebots zählen, gute Ergebnisse. Zum Vorgehen: Die Testpersonen schauen sich das Angebot an – entweder frei surfend oder mit Such- oder Rechercheaufgaben. Dabei werden sie gebeten, ihr Handeln spontan zu kommentieren – warum sie wo klicken, was sie erwarten, welche Elemente sie wie beurteilen. Mit dieser vereinfachten Methode des „Lauten Denkens“ lassen sich eine Reihe von Verbesserungsmöglichkeiten ausloten, die einem als Produzenten solcher Angebote kaum auffallen.

    Fazit: Trend zur Standardisierung
    Warum ist die Nutzerperspektive notwendig und hilfreich? Für Zeitungen gibt es in Jahrhunderten gelernte Standards, die Designern und Lesern vertraut sind – für News-Websites haben sich einige Standards in den letzten Jahren entwickelt. Multimediale Darstellungsformen sind in dieser Hinsicht noch in einer frühen Entwicklungsstufe. Die Vielzahl möglicher Kombinationen der unterschiedlich codierten Informationen lässt die Varianten sprießen, die Integration von Text, Bild, Grafik, Animation, Video und Audio führt zu interessanten neuen Produkten. Neue Technologien und Breitband-Verbindungen lassen neue Formen der Präsentation zu. Doch Standards, die den Produzenten ein einfaches Handling und den Lesern Nutzerfreundlichkeit garantieren, entwickeln sich langsam.

    Im Vergleich von führenden US-amerikanischen und spanischen Websites zeigen sich Trends: nytimes.com, elpais.es oder elmundo.es haben einheitliche Präsentationsformen für ihre Infografiken entwickelt, die nur für Specials durchbrochen werden. Interessanterweise ist das Grundmuster oft ähnlich: Eine Kopfnavigation wird als globaler Anker in der gesamten Grafik angeboten, meist kombiniert mit einer browser-ähnlichen, linearen Vor-zurück-Navigation.

    Peter Schumacher ist seit 2003 wissenschaftlicher Mitarbeiter im Fach Medienwissenschaft an der Universität Trier. Davor war er Redakteur bei FAZ.NET.

    Die getesteten Grafiken (bis auf die dpa-Grafik, die nicht mehr online ist):

    Weitere Links bei onlinejournalismus.de

    Der Artikel erschien zuerst in englischer Sprache im Online Journalism Review.

    • Facebook
    • Twitter
    • StumbleUpon
    • Diigo