Annika Kaltenhauser

Annika Kaltenhauser
UX Designer

05.12.2016 • 7 Minuten

Von Wireframe bis Prototyp

Möglichkeiten und Grenzen für interaktive Big-Data-Visualisierungen

Wir alle wissen, dass interaktive Datenvisualisierungen ein wirkungsvolles Kommunikationswerkzeug sind, um auch komplexe Zusammenhänge einfach zu vermitteln: richtig angewendet, können Nutzer mit ihnen verborgene Muster aufdecken, Blickwinkel ändern und neue Ideen entwickeln.
Doch wie können wir Datenvisualisierungen erschaffen, welche die Nutzer bestmöglich bei ihren Aufgaben unterstützen? Und wie können wir interaktive Visualisierungen dort testen, wo sie gebraucht werden?

Einsichten und Erkenntnisse aus scheinbar abstrakten Schmerzdaten schaffen?

Für die Therapie von chronischen Schmerzen werden über lange Zeiträume Daten über die Veränderung der Befindlichkeit des Patienten, Bewegungsprofile, Schlafgewohnheiten, Wetter oder zeitliche Abläufe von Therapiemaßnahmen
beobachtet, analysiert und darüber hinaus auf Muster und Beziehungen überprüft. Um dem Schmerztherapeuten dies zu ermöglichen, benötigt er ein effektives und effizientes Werkzeug. Hierbei unterstützen (interaktive) Datenvisualisierungen die menschliche Kognition bei der schnellen Erkennung von Mustern, Lücken und
Ausreißern – auch bei großen Datenmengen. Die Frage nach einer solchen interaktiven Datenvisualisierung bildete daher die Grundlage meiner Arbeit: „Quiri Analyzer“ entstand in einer dritten Phase des Gesamtprojekts
„Quiri“ und ergänzt dieses um die Benutzungsschnittstelle für den Mediziner zur Auswertung der gesammelten Daten des einzelnen Schmerzpatienten.


Wie visualisiert man Daten für die Schmerztherapie?

Ich möchte in diesem Blogbeitrag fachliche Anforderungen (welche Art von Daten je nach Diagnose in welchem Zyklus erfasst werden) zunächst ausklammern. Eine besondere Herausforderung aus UX-Perspektive ergab sich vielmehr in der Fragestellung nach dem passenden Prototyping-Werkzeug, um Darstellung und Interaktion mit komplexen Datenmengen auch im Vorfeld mit potentiellen Anwendern hinreichend zu evaluieren.

Bei meiner Recherche zum Thema Prototyping habe ich hier und da Ansätze gefunden. Vom intensiven Paper-Prototyping bis zu ausschließlich digitalen Mock-ups: Viele dieser Methoden waren leider nur für wenig interaktive Visualisierungen oder sehr kleine Datenmengen geeignet. Aus dem bunten Repertoire der Prototyping-Methoden musste ich für mich diejenigen herausfinden, die meine Anforderungen erfüllten:

Eine weitere Besonderheit in diesem Projekt war die schwer zugängliche, kleine Zielgruppe: Schmerztherapeuten sind meist vielbeschäftigte Menschen mit einem vollen Terminkalender. Folglich sollte innerhalb der Evaluations-Sessions möglichst wenig Abstraktion, sondern vielmehr konkretes „Explorieren“ anhand realistischer Patientendaten bewertet werden, um für meinen Fall wertvolles Feedback zu erhalten, d.h. es mussten sinnvolle Daten in einen hoch funktionalen Prototyp fließen, um mein angestrebtes Filterkonzept zu testen.


Tools meiner Wahl

Die Visualisierungen der einzelnen Parameter, die für die Therapie von Schmerzen relevant sind, scribbelte ich zunächst auf Papier. Auf Papier lassen sich solche rudimentären Entscheidungen bereits gut treffen und erste Ansätze mit Kollegen diskutieren. Auch das grobe Layout sowie die Idee des Filterkonzeptes und der zeitlichen Darstellung der Daten habe ich auf diese Weise konzipiert.
Schnelle Änderungen oder neue Ideen waren kein Problem!

UI Scribbles des Quiri-Projekts von Ergosign
Scribbles während des Quiri-Projekts

Evaluation im Verlauf des Quiri-Projeks
Evaluation

Durch dieses Vorgehen konnte ich in einer zweiten Prototyping-Phase zunächst das Layout und das UI in Form digitaler Wireframes im Prototyping-Tool Antetype testen. In dieser Phase habe ich vor allem mit statischen Inhalten gearbeitet und mich zunächst viel mit dem grundsätzlichen UI beschäftigt. Durch den Sprung zum digitalen Prototyp hatte ich beispielsweise die Möglichkeit, wiederkehrende Elemente per „Copy-Paste“ weiterzuverwenden oder Informationen ein- und auszublenden. Mit meinen Kollegen führte ich anhand dieses Prototyps einige Expert Reviews durch, um in einer weiteren Iteration Verbesserungen einzubauen. Antetype gab mir in dieser Phase des Projekts die Möglichkeiten, Layout, Interaktionen mit dem UI und responsives Verhalten zu entwickeln und anzupassen.

Evaluation im Verlauf des Quiri-Projeks
Gespräch mit Dr. Jansen

Da die User Experience bei der Auswertung so vieler Daten aber letztendlich von den möglichen Interaktionen mit den Daten abhängt und sich diese möglichst echt und richtig anfühlen müssen, blieb mir nur der Weg zu einem funktionalen Prototyp. Da ich mit dem Framework D3.js bereits erste Erfahrungen gesammelt hatte und ich für „Quiri Analyzer“ eine hohe Flexibilität der Visualisierungen benötigte, entschied ich mich für D3 und die Umsetzung als HiFi-Prototyp mit Web-Technologien.

Nach einer kurzen Phase der Einarbeitung in die Möglichkeiten von D3 konnte ich das Konzept aus Antetype nach und nach umsetzen und dabei die Interaktionen realistisch gestalten. In dieser Phase des Prototypings traf ich Entscheidungen darüber, welches Verhalten natürlich wirkt und den Anwender optimal unterstützen kann. Mit dem entwickelten Prototyp holte ich qualitatives Feedback zu der Anwendung bei zwei Nutzern ein. Der Ansatz, die Nutzer anhand realistischer Patientendaten konkret „Explorieren“ zu lassen, hat meine Erwartungen übertroffen und sich als goldrichtig bewährt.

"Vor allen Dingen kann man sich das ja wunderschön auch mit dem Patienten angucken, die Grafik. [...] Menschen lieben Bilder. Ja? Die meisten sind visuell getriggert, und wenn man denen das dann zeigt und denen den Spiegel vorhält: ’Gucken Sie mal selbst. Das sind Sie. Sonst niemand‘. Dann ist da natürlich immense Dynamik dahinter. Cool."
Dr. Bialas

In einer zweiten Schleife wurde der Prototyp um ein visuelles Design ergänzt und Verbesserungen aus der Validierung eingearbeitet. Gestaltet in Antetype und umgesetzt mit CSS Styles entstand die finale Version meines Prototyps.


Fazit

Anhand des Praxis-Beispiels „Quiri Analyzer“ habe ich Euch (m)einen Weg gezeigt, Prototyping für interaktive Big-Data-Visualisierungen anzugehen. Die Mühe einer umfangreichen Prototyping-Phase lohnt sich, probiert es selbst aus!

Weitere News

SPS IPC Drives 2018

SPS IPC Drives 2018

13. Verleihung des Ergosign-Preises

13. Verleihung des Ergosign-Preises

Wir waren beim World Usability Day 2018

Wir waren beim World Usability Day 2018