JavaScript InfoVis Toolkit - Create interactive data visualizations for the web
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
-
Upload
ergosign-gmbh -
Category
Design
-
view
239 -
download
4
Transcript of USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS
![Page 1: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/1.jpg)
USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONSQuiri Analyzer - Chronic Pain Therapy at a Glance
![Page 2: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/2.jpg)
Data Visualization
Pain Medicine
Quiri Analyzer
Conclusion
UCD & Quiri
![Page 3: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/3.jpg)
Following a user-centered design process supports the creation of a positive User Experience.
![Page 4: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/4.jpg)
5
ANALYSE
DESIGN
VALIDATE
SPECIFY
DEVELOP
PROCESS USER CENTERED DESIGN
![Page 5: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/5.jpg)
QUIRI
6
![Page 6: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/6.jpg)
QUIRI FOR WATCH
conhIT 2015 Quiri -Pain Assessment
7
![Page 7: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/7.jpg)
8
Tablet
Watch & Phone
Quiri
Analyzer
![Page 8: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/8.jpg)
Data Visualization
Pain Medicine
Quiri Analyzer
Conclusion
UCD & Quiri
![Page 9: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/9.jpg)
2015: German congress of physicians calls for strengthening of Pain Medicine www.bundesaerztekammer.de
Chronic pain also has an economic dimension: Each year it costs around 20 Billion €
The Facts
Chronic Pain is an independent clinical picture
German hospitals: 4% Experienced pain assessment and documentation (Survey Stamer et al, 2005)
96%
4%
vs.
Self-assessment vs. External assessment. Mostly in written, analog forms
Every fifth european suffers from chronic pain
![Page 10: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/10.jpg)
PAIN MEDICINE
11
PEDIATRIC PAIN PROFILE
FACE PAIN SCALE-REVISED©
Parameter 0 1 2
Weinen
Gesichtsausdruck
Rumpfhaltung
Beinhaltung
motorische Unruhe
Gar nicht
Entspannt, lächelt
Neutral
Neutral
Nicht vorhanden
Stöhnen, Jammern,Wimmern
Mund verzerrt
Unstet
Strampeld, tretend
Mäßig
Schreien
Mund und Augengrimassiert
Aufbäumen, Krümmen
An den Körper gezogen
Ruhelos
KUSS (BUETTNER)
BERNER PAINSCORE
Oberflächlich und unregelmäßig.Deutliche Zunahme der Frequenz um gleich oder mehr als 20 inner-
halb von 2’ und/oder starkethorakale Einziehungen
Oberflächlich. Zunahme derFrequenz um 15 bis 19
innerhalb von 2’. Vermehrtthorakale Einziehungen
Oberflächlich. Zunahme derFrequenz um 10 bis 14
innerhalb von 2’ und/oderthorakale Einziehungen.
Normal und ruhig(Ausgangswert)
Atmung
Körperausdruck
Gesichtsmimik
Hautfarbe
Beruhigung
Weinen
Schlaf
Parameter 2 310 Score
Zunahme von 20 bpm odermehr bpm vom Ausgangs-wert, ohne Rückgang zumAusgangswert innerhalb
von 2’
Zunahme von 30 bpm oder mehr bpm vom Ausgangswert oder
vermehrte Bradykardieninnerhalb von 2’
Zunahme von 20 bpm odermehr bpm vom Ausgangs-wert, mit Rückgang zumAusgangswert innerhalb
von 2’
Normal (Ausgangswert)Herzfrequenz
Sauerstoffsättigung Senkung von 0% bis 1,9% Senkung von 2% bis 2,9% Senkung von 3% bis 4,9% Senkung von 5% und mehr
Kein Schmerz: 0–10 PunkteSchmerz: ≥ 11 Punkte Total Gesamtskala
Kein Schmerz: 0–8 PunkteSchmerz: ≥ 9 Punkte
Total subjektive Indikatoren
Ruhiger Schlaf oder Phasephysiologischer Wachheit
Oberflächlicher Schlafmit Augenblinzeln Erwacht spontan Kann nicht einschlafen
Kurze Weinphase(weniger als 2 Minuten)
Vermehrtes Weinen(mehr als 2 Minuten)
Vermehrtes und schrilles Weinen(mehr als 2 Minuten)
Kein Weinen
Keine Beruhigungnotwendig
Weniger als 1 Minutezur Beruhigung
Mehr als 1 Minutezur Beruhigung
Mehr als 2 Minutenzur Beruhigung
Rosig errötet Leicht blass evtl. marmoriert Blass, marmoriert, zyanotisch
Gesicht entspanntVorübergehendes Ver -kneifen des Gesichts
Vermehrtes Verkneifen des Ge- sichts und Zittern des Kinns
Dauerhaftes Verkneifen des Ge-sichts und Zittern des Kinns
Körper entspannt Permanente VerkrampfungVorwiegend entspannt,
kurze VerkrampfungHäufige Verkrampfung, aberauch Entspannung möglich
NUMERIC ANALOGUE SCALE
![Page 11: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/11.jpg)
12
Tablet
Watch & Phone
Quiri
Analyzer
![Page 12: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/12.jpg)
Data VisualizationPain Medicine
Quiri Analyzer
Conclusion
UCD & Quiri
![Page 13: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/13.jpg)
DATA VISUALIZATION POTENTIAL
Anscombe’s-Quartet
14
![Page 14: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/14.jpg)
DATA VISUALIZATION POTENTIAL
Anscombe’s-Quartet
14
Mittelwert 9,0 7,5 9,0 7,5 9,0 7,5 9,0 7,5
Varianz 10,0 3,75 10,0 3,75 10,0 3,75 10,0 3,75
Korrelation 0,816 0,816 0,816 0,816
![Page 15: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/15.jpg)
DATA VISUALIZATION ADEQUATE VISUALIZATIONS
15
A
5
43
2
1
B
5
43
2
1
C
5
4
3
2
1
![Page 16: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/16.jpg)
DATA VISUALIZATION ADEQUATE VISUALIZATIONS
15
A
5
43
2
1
0
5
10
15
20
25
1 2 3 4 5
B
5
43
2
1
C
5
4
3
2
1
0
5
10
15
20
25
1 2 3 4 50
5
10
15
20
25
1 2 3 4 5
![Page 17: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/17.jpg)
Data Visualization
Pain Medicine
Quiri AnalyzerConclusion
UCD & Quiri
![Page 18: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/18.jpg)
ANALYSE
17
![Page 19: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/19.jpg)
![Page 20: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/20.jpg)
Dr. Jan Baumgaertner
19
Die Herausforderungen der Schmerztherapie reizen mich täglich aufs Neue. Ich möchte die Lebensqualität meiner Patienten unbedingt verbessern.
PROCESS ANALYSE
Therapiegespräche Dokumentation Schmerzerfassung ForschungOrganisation
Tägliche Aufgaben Sprechstunde Dokumentation (währenddessen am Computer) Weiterbildung und Forschungsprojekte Aktiv beteiligt am Ausbau der Schmerzforschung und -therapie. Nimmt regelmäßig an Konferenzen zum Thema Schmerz teil Kommunikation mit Patienten per E-Mail Organisation, Administration Software: Win8, Office 2012, Medistar
Frustpunkte Papierdokumentation/-erfassung Unzulängliche Datenvisualisierungen Lückenhafte Datenbasen Zu wenig Zeit, um sich auf das Wesentliche seiner Arbeit zu konzentrieren Fehlende Schnittstellen/Standardformate in med. Software Unzureichende schmerzmedizinische Versorgung in Deutschland
Ziele Zukunftsfähiges System zur Mitwirkung von Patienten bei kontinuierlicher Datenerfassung/Ferndiagnose Genauere und effizientere Diagnosen durch aufbereitete Datenvisualisierung Effektivere Therapien durch engmaschige Datenerfassung und Analyse Verbesserung der Schmerztherapie und -forschung in Deutschland
Anmerkungen Technisch sehr versiert Nutzt privat ein Tablet und iPhone 5s Sehr engagiert beim Thema Schmerztherapie Mitglied in Deutscher Schmerzgesellschaft Ist überzeugt, das mHealth in Zukunft fester Bestandteil des Gesundheitswesen wird: „In den nächsten 10 Jahren werden sich durch neue Technologien mehr Veränderungen ergeben als in den vergangenen 50 Jahren“
Facharzt für Anästhesie und Intensivmedizin mit Weiterbildung Spezielle Schmerztherapie • 52 Jahre • Berlin • verheiratet • 2 Kinder
![Page 21: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/21.jpg)
Tägliche Aufgaben Arbeitet, bewegungseingeschränkt durch seine Krankheit, nur noch zu 75% in der Buchhaltung im Lager
Nach der Arbeit ist er häufig so erschöpft, dass er sich hinlegen muss
Handwerkliche Tätigkeiten im Haushalt - soweit durch seine Einschränkungen möglich
Schraubt gerne an seinem Motorrad
Frustpunkte Enorme Einschränkungen im Alltag durch die Schmerzen
Das lange Sitzen auf der Arbeit belastet seinen Rücken
Kann seinem Hobby Motorradfahren nicht mehr nachgehen
Die Ehe wird durch das Dauerthema Schmerz belastet
Häufige Arztbesuche
Die Medikamente helfen nicht immer
Ziele Schmerzfreiheit
Möchte seine Krankheit mehr im Griff haben und besser darüber kommunizieren können
Weniger und effektivere Arztbesuche
Die „Schmerzspirale durchbrechen“
Möchte wieder in der Lage sein, seiner normalen Tätigkeit als Gabelstapler-fahrer nachzugehen
Eine lange Motorradtour mit seinem guten Freund
Anmerkungen Hohes technisches Verständnis, begeisterungsfähig für neue Technologien
Depression durch langen Leidensweg
ehem. Gabelstaplerfahrer für Logistikdienstleister • 44 Jahre • verheiratet • 1 erw. Kind • „Bandscheibenvorfall“ vor 4 Jahren
Meine Schmerzen schränken mich in meinem Alltag ein. Das macht mich fertig! “
Arbeit Beeinträchtigt durch Schmerzen MotorradArztbesuche Hausarbeit
Klaus Scholz
PROCESS ANALYSE
![Page 22: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/22.jpg)
PROCESS ANALYSIS
patient Klaus records his well-being digitally with Quiri for Watch
upcoming doctor’s visit
data is ready for analysis
identifying patterns, trends and relationships
tool for communication between Klaus and Dr. Jan
21
![Page 23: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/23.jpg)
PROCESS RELEVANT DATA FOR TREATING CHRONIC PAIN
22
pain intensitypain quality
side effects
movementweather
time of measurement
location of the measurement
therapy measures
events
changes in medicationsport activities
mental state
kinds of paindiet
![Page 24: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/24.jpg)
DESIGN
23
![Page 25: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/25.jpg)
Form data into information
![Page 26: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/26.jpg)
Design start: generate ideas
sketches, wireframes, mock-ups
![Page 27: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/27.jpg)
UNTERNEHMEN
26
![Page 28: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/28.jpg)
INHALT
27
![Page 29: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/29.jpg)
https://d3js.org
d3.js - Data-Driven Documents
![Page 30: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/30.jpg)
Quiri Analyzer
![Page 31: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/31.jpg)
VALIDATE
30
![Page 32: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/32.jpg)
INHALT
31Verify with Users by means of interactive prototypes
![Page 33: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/33.jpg)
32
Usability-testing using interactive prototypes
![Page 34: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/34.jpg)
ITERATION & VISUAL DESIGN
33
![Page 35: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/35.jpg)
Interaction & Animation High Fidelity Prototyping
![Page 36: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/36.jpg)
Data Visualization
Pain Medicine
Quiri Analyzer
Conclusion
UCD & Quiri
![Page 37: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/37.jpg)
CONCLUSION
Data visualization rocks!
36
involve users into the process:
requirement analysis
formative evaluation ¬ with interactive wireframes
summative validation
… use interactive UI prototypes!
![Page 38: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/38.jpg)
Ergosign GmbHKistlerhofstraße 7581379 MünchenGermany
T +49 89 6890607-0F +49 89 6890607-10
T +49 30 246397-13F +49 30 246397-15
Ergosign GmbHRingbahnstraße 4212099 BerlinGermany
Ergosign GmbHHopfenstraße 2320359 HamburgGermany
T +49 40 3179868-0F +49 40 3179868-10
Ergosign Switzerland AGBadenerstrasse 8088048 ZürichSwitzerland
T +41 44 54293-04F +41 44 54293-07
T +49 681 988412-0 F +49 681 988412-10
Ergosign GmbHEuropaallee 1266113 SaarbrückenGermany
THANK YOU.
![Page 39: USER CENTERED DESIGN OF INTERACTIVE DATA VISUALIZATIONS](https://reader031.fdocuments.us/reader031/viewer/2022030306/58d1b90d1a28ab98278b5a35/html5/thumbnails/39.jpg)
Ergosign GmbHKistlerhofstraße 7581379 MünchenGermany
T +49 89 6890607-0F +49 89 6890607-10
T +49 30 246397-13F +49 30 246397-15
Ergosign GmbHRingbahnstraße 4212099 BerlinGermany
Ergosign GmbHHopfenstraße 2320359 HamburgGermany
T +49 40 3179868-0F +49 40 3179868-10
Ergosign Switzerland AGBadenerstrasse 8088048 ZürichSwitzerland
T +41 44 54293-04F +41 44 54293-07
T +49 681 988412-0 F +49 681 988412-10
Ergosign GmbHEuropaallee 1266113 SaarbrückenGermany
T +49 30 246397-13 [email protected]
UX Designer
Annika KaltenhauserIhre Ansprechpartnerin
www.ergosign.de