Interaktion und Datenexploration

Transcrição

Grundlagen der
wissenschaftlichen Visualisierung
Vorlesung: Mo + Mi, 9:15 – 10:45, INF 368 – 532
Übung: Mi, 14:15 – 15:45, INF 350 (OMZ) – U011
JProf. Dr. Heike Leitte
http://www.iwr.uni-heidelberg.de/groups/CoVis/
8. Interaktion und Datenexploration
3
Hardcopy Informationsmanagement
http://tinamcallister.com/why-the-current-state-of-the-economy-doesnt-scare-me/
4
Hardcopy Informationsmanagement
http://tinamcallister.com/why-the-current-state-of-the-economy-doesnt-scare-me/
5
Detailgrad von Information
?
6
Beispiel eines interaktiven Systems
●
●
Im folgenden Video seht ihr eine interaktive Visualisierung eines Energiesystems:
http://vimeo.com/98084399
Fragen:
– Wie ist die Visualisierung aufgebaut?
– Welche Arten von Interaktion kann der Nutzer mit dem System ausführen?
– Welche Ziele verfolgt er dadurch?
7
Digitale Interaktion
Wie können wir
●
●
die Arbeitsstrategien aus der realen Welt auf digitale Information
übertragen?
die digitalen Methoden nutzen um das Arbeiten zu erleichtern?
8
Inhalt
1. Theorie
2. Methoden
3. Lessons Learned
9
Interaktion in der Visualisierung
●
●
Interaktion mit den Daten ist ein wichtiger Bestandteil der Visualisierung. Häufig sind die
darzustellenden Datenmengen sehr groß und komplex, so dass sie auf einmal gar nicht
sinnvoll dargestellt werden können. Hier hilft die Interaktion, so dass der Nutzer die
Darstellung immer wieder anpassen kann.
Dies wird durch das Visual Information-Seeking Mantra zusammengefasst:
– Overview first, zoom and filter, then details-on-demand. [Shneiderman, 1996]
[Ben Shneiderman, The Eyes Have It: A Task by Data Type Taxonomy for Information Visualizations. In
Proceedings of the IEEE Symposium on Visual Languages, pages 336-343, Washington. IEEE Computer
Society Press, 1996.]
●
Um diesen Wechsel zwischen verschiedenen Sichten auf die Daten zu ermöglichen, muss
es dem Nutzer möglich sein, die Visualisierung mittels Nutzerinteraktion anzupassen. Es
müssen also gleichzeitig zwei Gebiete bearbeitet werden:
– Repräsentation der Daten → Computergraphik
– Interaktion mit dem Rechner → Mensch-Maschine-Interaktion (human computer
interaction (HCI)
10
Was ist Interaktion?
●
Eine exakte Definition von Interaktion ist schwierig, da viele Aspekte hineinspielen. Deshalb
sind die meisten Definition sehr weit gefasst:
– Interaktion: die Kommunikation zwischen Nutzer und dem System
[Dix, Alan. Human-computer interaction. Springer US, 2009.]
–
Interaktion: direkte Manipulation und sofortige Veränderung
–
Interaktionsmethode: Verfahren zur Bewältigung einer allgemeinen Aufgabe mittels
eines physischen Ein-/Ausgabegeräts im Mensch-Maschine-Dialog.
[Becker, Richard A., William S. Cleveland, and Allan R. Wilks. "Dynamic graphics for data analysis."
Statistical Science (1987): 355-383.]
[Van Dam, Andries, Steven K. Feiner, John F. Hughes, and Richard L. Phillips. Introduction to
computer graphics. Vol. 55. Reading: Addison-Wesley, 1994.]
●
Wir wollen uns im Folgenden auf Interaktionsmethoden konzentrieren, die dazu dienen
visuelle Darstellungen direkt oder indirekt zu manipulieren und zu interpretieren.
11
Klassifikation von Interaktionsmethoden
●
Hierzu folgen wir der Klassifikation von Yi et al.
[Yi, Ji Soo, Youn ah Kang, John T. Stasko, and Julie A. Jacko. "Toward a deeper understanding of the role
of interaction in information visualization." Visualization and Computer Graphics, IEEE Transactions on
13, no. 6 (2007): 1224-1231.]
●
●
Yi et al. unterscheiden sieben Arten der Interaktion basierend auf der Absicht/ dem Ziel des
Nutzers:
– Auswählen (select): markiere etwas als interessant
– Erkunden (explore): zeig mir etwas anderes
– Umgestalten (reconfigure): zeig mir eine andere Anordnung
– Codieren (encode): zeig mir eine andere Darstellung
– Abstrahieren (abstract/elaborate): zeig mir mehr/weniger Detail
– Filtern (filter): zeig mir etwas unter einer gegebenen Bedingung
– Verbinden (connect): zeig mir verwandte Elemente
Im wesentlichen folgen wir dieser Systematik, werden jedoch etwas umsortieren und
umgruppieren.
12
Inhalt
1. Theorie
2. Methoden
1. Umgestalten (reconfigure)
2. Erkunden (explore)
3. Abstrahieren (abstract/elaborate)
4. Auswählen und Filtern (select and filter)
5. Verbinden (connect → linking + brushing)
3. Lessons Learned
13
Interne Modelle / Mental Models
●
●
●
●
●
Die Art und Weise wie Menschen visuelle Information aufnehmen und verarbeiten spielt
eine wichtige Rolle bei der Planung von Interaktionsmechanismen.
Die ist besonders deutlich, wenn man die englische Bedeutung des Wortes visualisieren
betrachtet:
to visualize: to form a mental image or vision of …
Hiernach entspricht der Visualisierungsprozess dem Erstellen eines inneren, gedanklichen
Bildes/Modell beim Betrachter.
Um die Gesamtheit der Daten und die darin enthaltenen Zusammenhänge zu erfassen und
daraus Schlussfolgerungen ziehen zu können, sind oft Interaktionen nötig, mit denen die
Daten genauer untersucht, manipuliert oder alternativ dargestellt werden können.
Dadurch kann sich der Betrachter ein genaueres Bild von den Daten machen, Hypothesen
entwickeln und diese auch überprüfen.
14
Entstehung eines internen Modells
Die Bildung und Interpretation eines internen Modells entspricht einem Zyklus:
●
Browse: Die erste Phase besteht meist im allgemeinen Betrachten der Visualisierung (mal
schaun, was da ist).
●
Model: Das Bild wird anschließend strukturiert, man merkt sich wichtige Merkmale und
erstellt so ein inneres Modell, eine eigene Vorstellung von den Daten.
●
Interpret: Aus dem Gesehenen werden Schlüsse über die Daten gezogen. Dies geschieht
meist im Hinblick auf eine bestimmte Fragestellung.
●
Formulate a browsing strategy: Um diese zu verifizieren, wird die Visualisierung nun
gezielt weiter analysiert.
15
Theorie perfekter Nahrungssuche
Bei der Nahrungssuche nehmen Tiere (z.B. Vögel) nicht alle Nahrung eines Nahrungsspenders
(z.B. Busch) auf bis er aufgebraucht ist, sie konzentrieren sich auf große Nahrungseinheiten und
zu einem gewissen Zeitpunkt entscheiden sie weiter zu ziehen. Dieses Verhalten unterliegt Gesetzmäßigkeiten: Sie ziehen dann zu einem neuen Nahrungsspender um, wenn die erwartete
Nahrungsrate größer ist als eine Kombination aus aktueller Nahrungsrate und Wechselzeit.
kummulierte
Nahrungsaufnahme
erwartet
aktuell
Wechsel
Aktuell
Zeit
Zur Bestimmung der Raten verwenden Tiere ihren Geruchssinn (engl. scent) und ignorieren
Nahrungsspender, deren Duft Nahrungsraten unter der Erwartung erscheinen lässt.
16
Theorie der Informationssuche
Pirolli und Card (2007) zeigten, dass Menschen sich bei der Suche nach Informationen sehr
ähnlich verhalten.
Sie starten mit einer initialen Suche (anfänglicher Informationsspender) dann gehen sie die
Ergebnisse durch. Unter Verwendung von Thumbnails und Linktexten (Duft), entscheiden sie
was angeklickt wird (Konsumieren von Information). Nicht alle Ergebnisse werden
„abgegrast“: nachdem einige Links kein zufriedenstellendes Ergebnis mehr erbringen
(Reduktion der Informationsrate) also der Informationsspender erschöpft scheint, verwenden
sie die Suche erneut.
17
Können wir unserem Gedächtnis trauen?
Welche Stadt liegt weiter nördlich: London oder Berlin?
18
„Erkennen ist einfacher als Erinnern“
19
Kognitive Collage
●
Häufig erstellen wir interne Modelle aus einer Verknüpfung mehrerer Einzelmodelle. Es
entsteht so eine große interne Collage lose verbundener Teilstücke.
[Tversky, Cognitive Maps, Cognitive Collages and Spatial Mental Models, in „Spatial Information Theory
– a Theoretical Basis for GIS“, Proceedings of the European Conference COSIT'93, Springer Lecture
Notes in CS, 1993, 14-24]
●
●
Die führt jedoch häufig auch zu Fehlern, da die gedachte Verbindung nicht exakt mit der
Realität übereinstimmt.
Beispiele aus dem Alltag:
– Geschätzte relative Lage von Städten zueinander.
– Eigene Vorstellung eines Stadtplans aufgrund von eigenen Erfahrung.
20
Interner Modelle – Kontext und Stabilität
●
●
Daneben spielt bei unseren kognitiven Karten eine bildorientierte Auffassung eine große
Rolle, so dass wir mit Skalierungen und besonders Drehungen Probleme haben.
Stimmen dargestellte Daten und das interne Modell der Daten nicht mehr überein, z.B. weil
die Darstellung rotiert oder Elemente neu angeordnet wurden, fällt es Menschen schwerer
diese neue Darstellung mit dem internen Modell in Einklang zu bringen. Deshalb ist bei
Visualisierungen auf Stabilität zu achten.
21
Interne Modelle – Veränderungen
●
Sind räumliche Veränderungen der Elemente einer Visualisierung für die Interpretation
nötig, so ist darauf zu achten, dass der Betrachter sie nachvollziehen kann. Häufig
geschieht dies durch eine Animation, wobei vom einen Zustand in den anderen langsam
übergegangen wird (Transformation, Überblenden, etc.).
22
JobVoyager (USA, 1850 - 2000)
24
Berufe mit Namen „*ist“
25
Inhalt
1. Theorie
2. Methoden
3. Lessons Learned
26
Umgestalten
●
●
Mit der Visualisierung soll es dem Anwender ermöglicht werden seine Daten besser zu
verstehen. Meist wird hierbei nach Mustern und Auffälligkeiten gesucht.
Zum Teil können diese bereits durch ein Bild dargestellt werden. Zumeist benötigt man
aber verschiedene Sichten auf die Daten, z.B.
– Veränderte Einstellungen des Visualisierungsalgorithmus
– Unterschiedliche Sortierungen im Small-Multiples-/Kleine-Vielfache-Darstellungen
27
Interaktives Anpassen von Visualisierungsparametern
●
Beim interaktiven Volumerendering kann die Transferfunktion manipuliert werden, so dass
Bereiche mit einem bestimmten Wert etc. angezeigt werden.
http://www.youtube.com/watch?v=vMHODQCBfFE
28
Inhalt
1. Theorie
2. Methoden
3. Lessons Learned
29
Erkunden
●
●
●
Beim Erkunden verändert der Nutzer die Untermenge der dargestellten Information. Bei
vielen Darstellungen können nicht alle Datenpunkte gleichzeitig dargestellt werden, da der
Bildschirm nicht genug Pixel hat, oder aber der Betrachter von der Datenfülle überwältigt
wäre.
In diesen Fällen wird immer nur eine Untermenge dargestellt und diese kann interaktiv
manipuliert werden. Die bekannteste Technik in diesem Bereich ist das Verschieben.
Einige Beispiele folgen auf den nächsten Folien:
30
Bildlauf (Scrolling)
●
●
●
Eine bekannte Technik zum Umgang mit großen Texten ist der Bildlauf
(Scrolling).
Häufig findet man schmale Balken an der Seite (Bildlaufleiste, Scrollbars), die
einen Ansatz von Orientierung relativ zum Gesamttext geben, sowie eine
Möglichkeit zur beschleunigten Bewegung durch das Dokument.
Jedoch ist es meist eher schwierig eine bestimmte Position im Bild oder
Stelle im Text gezielt zu finden. Schnell kann es hierbei passieren, dass man
vergisst, warum man diese Stelle überhaupt gesucht hat/was man vorher
getan hat.
31
Bildlauf (Scrolling) 2D
●
Diese Technik lässt sich leicht auf 2D erweitern, indem der Nutzer mit der Maus die Ansicht
verschieben und so den sichtbaren Ausschnitt manipulieren kann.
32
Panning and Zooming
●
●
●
●
Gerade in großen Daten kann das Verschieben bei starker Vergrößerung sehr anstrengend
sein. Hier hilft es vor dem Verschieben an eine bestimmte Stelle aus den Daten
herauszuzoomen.
Beim Zoom+Pan werden diese beiden Techniken kombiniert:
– Panning (Schwenken): Sanftes, kontinuierliches Bewegen des sichtbaren
Bildausschnitts über das gesamte Bild.
– Zooming: Stetige Vergrößerung bzw. Verkleinerung des dargestellten Bildausschnitts
Beim klassischen Zoomen wird das Bild geometrisch vergrößert oder verkleinert und die
Detailgenauigkeit der Daten nicht angepasst, so dass der gesamte Bereich gleichmäßig
manipuliert wird (vgl. bifokales Display). Es geht also eher um das Fokussieren, als um das
Filtern.
Dies kann im Scale-Space-Diagramm gut dargestellt werden.
33
Vergrößern und Verschieben (Zooming and Panning)
●
Diese und weitere Techniken kann man in einem Raum-Skalen-Diagramm darstellen.
[Furnas, Bederson, Space-Scale Diagrams: Understanding Multi-Scale Interfaces, CHI'95 Proceedings,
ACM, 1995, 234-241]
●
Anwendung: GoogleMaps → Bewegung von London nach New York
34
Interaktionsprinzipien
●
●
Wie zuvor gesehen, sollte der Übergang von Details zum Überblick fließend sein oder
beides vorhanden sein (Fokus+Kontext). Diese Prinzipien sagen aber noch nicht, wie der
Übergang zu gestalten ist.
Interpolation (linear im Raum, logarithmisch in der Skala) im Raum-Skalen-Diagramm mag
nützlich sein, aber beim Übergang von einem Detailbild zu einem anderen ist diese
Strategie ungeeignet.
35
Smooth and Efficient Zooming and Panning
●
Der Ansatz von van Wijk [van Wijk, Nuij, Smooth and efficient zooming and panning, Proceedings of
IEEE Information Visualization Symposium 2003, 2003, 15-22] gibt eine Formel zur Berechnung
geeigneter Vergrößerungen und Verschiebungen an.
36
●
Sei ein Objekt M über dem Gebiet W aus IR² definiert und A⊂W der zu projizierende
quadratische Ausschnitt um einen Punkt c = (cx, cy) in W mit Breite w, also
A=[c x −w/2, c x w/2]×[c y −w / 2,c y w/ 2]
●
Der Bildschirm wird als
I =[−1/2 ,1/ 2]×[−1/2 , 1/2]
●
modelliert.
Dann gilt für die Projektion (x',y') = p(x,y) eines Bildpunktes (x, y ) auf einen Bildschirmpunkt
(x', y')

x−c x y−c y
 x ' , y ' =
,
w
w

und für die Inverse
(x , y)=(c x + w x ' , c y + w y ' )
37
●
Sind nun zwei Ausschnitte mit ci, wi, i=0,1 gegeben, so sucht man Funktionen c(s), w(s), s 
[0,S] mit
c (0)=c0
w (0)=w0
●
c (S )=c 1
w (S )=w 1
Eine Animation ergibt sich mit echter
Zeit t und konstanter Geschwindigkeit
V durch
s=Vt ,t ∈[0, S /V ]
38
●
Wenn man annimmt, dass es keinen Unterschied in der Wahrnehmung von vertikalem,
horizontalem und diagonalem Verschieben gibt, ist der optimale Pfad eine Gerade c(s):
(c 1−c 0)
c ( s )=c0 + u ( s)
∣∣c 1−c 0∣∣
u ∈[ u0 , u1 ]
mit u0 = 0, u1 = ||c1-c0||.
●
u(s) beschreibt die Verschiebung entlang einer geraden Linie. Also suchen wir Funktionen
u(s), w(s) mit s  [0, S], so dass
u(0)=u0
w ( 0)=w0
●
u(S )=u1
w (S )=w 1
Dies ergibt ein u-w-Diagramm,
wobei Verschieben (Panning)
der u-Richtung und Vergrößern
(Zooming) der w-Richtung entspricht.
39
●
●
Man kann die (u,w)-Werte als Position einer Kamera in Höhe w über der Ebene mit
Öffnungswinkel 2 arctan 0.5 ~ 53° interpretieren und somit physikalisch untersuchen.
Als optimalen Weg betrachten wir einen glatten und effizienten (= kurzen) Weg. Glatt
übersetzen wir mit glatt wahrgenommen, ohne kognitive Aspekte, die wir hier außer Acht
lassen wollen. Außerdem wird jede Sicht als gleich wichtig betrachtet, obwohl etwa Städte
viel mehr Details als ebene Felder enthalten. Glattheit wird hier folglich als Einschränkung
und Effizienz als zu optimierende Größe aufgefasst.
40
●
Um zu einer Metrik zu kommen, messen wir den optischen Fluss im Bild, also die Änderung
auf dem Bildschirm. Die Änderungen in einem Pixel sind gegeben durch
(
ẋ ' =
−x ẇ− c˙x w+c x ẇ − y ẇ− c˙ y w +c y ẇ
,
2
2
w
w
)
mit ȧ=da /ds und wir erhalten als mittleres Quadrat der Geschwindigkeit V RMS
V
2
RMS
=V
●
2
=V
(
2
0.5
0.5
∫I ẋ '⋅ẋ ' dI /∫i dI =V ∫−0.5 ∫−0.5 ( ẋ ' 2+ ẏ ' 2) dx ' dy '
2
1 2 1 2 1
1
2
2 1
2
2
ċ
+
ċ
+
ẇ
=V
u̇
+
ẇ
2 x
2 y
2
2
2
w
w
6w
w
6w
) (
)
Als Metrik nutzen wir den etwas allgemeineren Ausdruck
ρ2 2
1
2
ds = 2 du + 2 2 dw
w
ρ w
2
um die Bedeutung der Wahrnehmung von Vergrößern und Verschieben zu
berücksichtigen. Für ρ = 6^0.25 ergibt sich VRMS.
41
●
ρ bestimmt unterschiedliche Pfade.
Pfade mit konstant wahrgenommener Veränderung
 < 1: Zoomen hat großen Einfluss
 = 1: Einfluss gleich
> 1: Verschieben hat großen Einfluss
42
●
Ein glatter Weg (konstante Änderung auf dem Animationspfad resultiert in einer als
konstant wahrgenommenen Änderung des Bildes) bedeutet nun, dass bei konstanter
Animationsgeschwindigkeit ds für den Pfad (u(s), w(s)) in Bogenlänge die folgende
Gleichung gelten soll:
1
2 2
2
ds = 2 du  2 2 dw
w
 w
2
●
●
ρ2 u̇ 2 +1/ρ 2⋅ẇ 2 =w 2
(5.1)
Effizienz bedeutet einen kurzen Weg, also S minimal.
Um einen optimalen Pfad in der vorherigen Grafik zu finden heißt dies in etwa, dass
– bei jedem Schritt gleich viele Ellipsen
geschnitten werden und
– insgesamt möglichst wenige Ellipsen
geschnitten werden.
43
●
Einen ersten Ansatz, den wir untersuchen wollen, zeigt das folgende Bild.
44
Zoom Out, Pan, Zoom In
●
●
●
ρ2 u̇ 2 +1/ρ 2⋅ẇ 2 =w 2
3 Phasen sind zu unterscheiden:
– Für s = 0 bis sA, verkleinere von (u0, w0) zu (u0, wm)
–
Für s = sA bis sB, verschiebe von (u0, wm) nach (u1, wm)
–
Für s = sB bis S, vergrößere von (u1, wm) zu (u1, w1)
Gesucht wird nun ein Pfad (u(s), w(s)), der minimale Bogenlänge S hat.
Für die erste und dritte Phase ergibt sich mit ( u̇=0)
ẇ=ρ w
→
w (s)=w 0 exp (ρ s) ,
s=[0, s A ]
w (s)=w m exp (ρ(s B − s)) ,
●
(5.1)
s∈[s B , S ]
d.h. die Geschwindigkeit wird logarithmisch verlangsamt, wenn wir uns einem Objekt
nähern.
Für die mittlere Phase ( ẇ=0) ist eine Lösung der Differentialgleichung
u̇=w m /ρ
→
u ( s)=w m ( s− s A )/ρ+u0,
s∈[s A , s B ]
wm ist hierbei die Übergangszoomstufe im mittleren Bereich.
45
●
Die Parameter sA, sB, S hängen von wm ab und wm sollte so gewählt werden, dass die
Pfadlänge S minimiert wird. Es gilt wegen w(sA) = wm für das erste und letzte Stück:
s A =ln (w m / w 0 )/ρ , w m ≥w 0
S − s B =ln (w m / w 1 )/ρ , w m≥w 1
●
Mit u(sB) = u1 ergibt sich für die mittlere Phase
s B −s A=ρ(u 1 −u 0 )/ w m
und letztlich als Summe der drei Teilstücke
S=
ρ(u1 −u 0 ) ln (w m / w 0 ) ln (w m / w 1 )
+
+
ρ
ρ
wm
46
●
Den kürzesten Pfad erhalten wir, wenn gilt
also
und somit:
dS
=0
dw m
→
−ρ(u1 −u0 )
2
wm
+
2
=0
ρ wm
w m =max (w 0 , w 1 ,ρ2 (u 1−u0 )/ 2)
47
Smooth and Efficient Zooming and Panning – Optimaler Weg
●
Unser letztes Ergebnis ist nicht glatt an den Ecken (Wechsel zwischen Zoomen und
Verschieben). Aus der Differentialgeometrie wissen wir, dass die Geodäte (= kürzeste
Verbindungskurve) (u(s),w(s)) zu einem Raum mit der Metrik
2
2
ds =E du G dw
2
die folgende Bedingungen erfüllen
Eu 2 E w
Gu 2
ü+
u̇ +
u̇ ẇ−
ẇ =0
2E
E
2E
E w 2 Gu
Gw 2
ẅ−
u̇ + u̇ ẇ +
ẇ =0
2G
G
2G
●
Mit E = ρ²/w² und G=1/(ρ²w²) ergibt sich für unsere Metrik
ü−2 u̇ ẇ / w=0
4 2
2
ẅ−ρ u̇ / w−ẇ / w=0
48
●
Als Ergebnis erhält man nach einigem Rechnen
49
●
Anwenderstudie
V und ρ müssen noch ermittelt werden. Dazu wurden 26 Personen gebeten, die Werte so
einzustellen, dass sie glatt erscheint. Als Mittelwerte ergaben sich V=0,9 und ρ = 1,42.
http://good-wallpapers.com/misc/14875"><img src="http://goodwallpapers.com/wallpapers/14875/small_Surface Of Mars.jpg
51
Inhalt
1. Theorie
2. Methoden
1. Fokus und Kontext
2. Informationsreduktion
3. Lessons Learned
52
Übersicht + Detail
●
●
●
●
Bei vergrößerten Teilansichten eines Datensatzes verliert
man leicht den Überblick und den Bezug zum Ganzen.
Hier können Kontextkarten helfen, die einen groben
Überblick über den gesamten Datensatz geben und
markieren, welcher Bereich gerade vergrößert dargestellt
wird.
Ursprünglich waren diese Ansichten statisch, so dass man
sich nur einen bestimmten Bereich im Bild vergrößert
ansehen konnte, oder wie im Autoatlas zwischen
verschiedenen vergrößerten Seiten blättern musste.
Was diesen Darstellungen zumeist fehlt, ist eine direkte
Verbindung zwischen der Übersicht- und der Detailansicht.
Der Nutzer muss selber nach Landmarken suchen und diese
in beiden Ansichten identifizieren.
53
Übersicht + Detail
54
Übersicht + Detail
infragistics.com
55
Übersicht + Detail
http://www.leica-microsystems.com
56
Übersicht + Detail
57
Inhalt
1. Theorie
2. Methoden
3. Lessons Learned
58
Fokus und Kontext
●
●
Eines der wichtigsten Prinzipien der (Informations-)Visualisierung nennt sich Fokus und
Kontext. Es basiert auf der detaillierten Darstellung eines Teils der Daten, der gerade
besonders untersucht wird, während die übrigen Daten in geringer Auflösung dargestellt
werden.
Der Erfolg dieser Darstellung zusammen mit geeigneter Interaktionstechnik und möglichst
rascher Systemantwort basiert auch auf der Ähnlichkeit zum Aufbau des Auges und seiner
Informationsverarbeitung, vgl. Kapitel 4.
59
Lupe und DragMag Bildvergrößerer
●
●
●
Abhilfe kann hier ein Lupenwerkzeug
schaffen, dass über das Bild bewegt wird
und den darunter liegenden Bereich
vergrößert.
Ein Problem hierbei ist der fehlende
Übergang an den Grenzen zwischen Lupe
und Kontext, so dass die Orientierung
wieder schwieriger ist.
Hier hilft das DragMag-Verfahren (Ware
and Lewis, 1995), welches die interessante
Region (rotes Quadrat) und die
Vergrößerung entkoppelt. Das Quadrat
kann nun interaktiv bewegt werden, um
verschiedene Bereich zu vergrößern.
60
Verzerrung – Bifokale Anzeige
●
Ein erfolgreiches Konzept für Fokus und Kontext stellt das bifokale Display dar.
[Imperial College Television Studio, Focus on Information: The Office of the Professional (Video)
Production No. 1003, 1980].
●
Ein langes Band, das alle Informationen enthält
wird perspektivisch dargestellt, indem das Zentrum parallel zum Benutzer und die beiden
Seiten schräg nach hinten laufend projiziert werden.
61
Bifokale Anzeige
●
Merkmale
– Zwei Bereich für Fokus und Kontext
– Fließender Übergang zwischen beiden
– Zwei Merkmale können auf den Achsen kodiert werden
– Fokusbereich: Lesbarkeit und Interaktion
– Kontextbereich: Präsenz und Identifikation
– Manuelle Kontrolle
62
Anwendung bifokale Anzeige
●
Die perspektivische Wand (Perspective Wall) [Mackinlay, Robertson, Card, Perspective Wall:
detail and context smoothly integrated, Proceedings of CHI'91, ACM, 1991, 173-179] stellt
eine erfolgreiche Umsetzung des Prinzips dar.
63
●
Auch die Auswahl von Videos kann man erleichtern, wobei bis zu 5 Bilder pro Sekunde
angezeigt werden, um schnell aus einer großen Sammlung auszuwählen. [Lam, Spence,
Image Browsing – a space-time trade-off, Proceedings of INTERACT'97, 1997, 611-612]
64
●
Neben einer Verzerrung in x-Richtung kann natürlich auch eine Verzerrung in y- oder x+yRichtung erfolgen.
65
Vergrößerung mit der Fischaugenprojektion
●
●
Bei der Fischaugenprojektion wird die
Darstellung so verzerrt, so dass Elemente in
der Nähe des Fokuspunktes größer
erscheinen als solche am Rand.
Gegeben seien der Winkel zwischen
Bildpunkt und optischer Achse θ und die
Brennweite der Linse f. Eine mögliche
Projektion zur Berechnung des Abstandes
r des projizierten Punktes zur Bildmitte ist:

r=2 tan  
2
[web.mit.edu]
66
Logarithmische Darstellung
[View of the world from 9th avenue
Saul Steinberg, 1976]
[http://xkcd.com/482, Ausschnitt]
67
Inhalt
1. Theorie
2. Methoden
3. Lessons Learned
68
Unterdrückung (Subpression)
●
●
●
Häufig bestehen Daten und die resultierenden Visualisierungen aus einer Vielzahl Details.
Bei der Analyse ist man u.U. nur an einem Teil der Information interessiert.
Hier kann es helfen, unwichtige Aspekte der Daten auszublenden oder im Vergleich zu den
relevanten Daten abzuschwächen.
Beispiel: Flugzeugreparatur
US Airforce
69
Matthew Paris (c. 1200-1259) – Wegbeschreibung von London nach Jerusalem
70
John Ogilby (1675) – Wegbeschreibung von London nach Holy head
71
Routendarstellung mit Copernicus
[H. Ziegler, D. A. Keim: COPERNICUS: Context-preserving engine for route navigation
with interactive user-modifiable scaling, 2008, Proceedings EuroVis 2008]
72
„A Really Useful Map“
●
Eine automatische Implementierung dieser Technik, wieder für Autofahrer, stellt die „Really
Useful Map“ dar. Hier wird die Gummituchtechnik [Kadmon, Shlomi, A polyfocal projection for
statistical surfaces, The Cartographic Journal 15(1):36-41, 1978] angewandt, um Details zu
vergrößern und möglichst viel Information unterdrückt. Orientierungspunk- te werden
durch einfache Symbole dargestellt.
73
Bestimmung relevanter Aspekte – Beispiel Baum
●
●
Im Allgemeinen ist es sehr schwierig automatisch zwischen wichtigen und unwichtigen
Details zu unterscheiden.
Furnas [Furnas, The FISHEYE View: A New Look at Structured Files, AT&T Laboratories, Murray Hill, NJ,
1981.][Furnas, Generalized Fisheye Views: Visualizing Complex Information Spaces, CHI '86
Proceedings, ACM, 1986, 16-23] schlägt eine Balance zwischen lokalem Detail und globalem
●
Kontext vor, bei dem Daten nur visualisiert werden, wenn der wahrgenommene Wert der
Information eine anwenderdefinierte Grenze überschreitet.
Dabei orientierte sich Furnas ursprünglich an einem Baum und verwendet zwei Maße, a
priori Bedeutung (API) des Objekts und Nähe (D) zum fokussierten Objekt
74
Semantisches Vergrößern
●
Häufig wird beim Vergrößern auch Metainformation ab einer bestimmten Auflösung
eingeblendet.
75
Einblenden zusätzlicher Information
●
Magische Lupen (Magic Lenses):
Dieses Konzept nutzt die Lupenmetapher, um aus dem Kontext ein Element
herauszugreifen und dann nützliche Information einzublenden.
76
Interaktive Bezeichner
Fekete, J.-D., Plaisant, C.: “Excentric Labeling: Dynamic Neighborhood
Labeling for Data Visualization “ In Proceedings CHI 1999, pp. 512-519.
77
Inhalt
1. Theorie
2. Methoden
4. Filtern (filter)
5. Auswählen und Verbinden (select and connect → linking + brushing)
3. Lessons Learned
78
Datenexploration
●
●
Viele Fragen sind wegen unzureichendem Wissen unklar formuliert. Man sucht etwa ein
Haus für 100.000 $ mit 3 Schlafzimmern in der Nähe einer guten Schule und nicht zu weit
von den Großeltern entfernt. Dass ein beliebter Park eine wesentliche Rolle bei den Preisen
spielt und evtl. Mieter leicht zu finden sind, merkt man erst später.
Die Suche nach der richtigen Frage erweist sich somit als Teil der Suche nach der Antwort
auf eine nur grob festgelegte Fragestellung. Hier kann Visualisierung helfen.
79
Datenbankabfrage
●
Eine klassische Datenbankanfrage der Form
SELECT Hausadresse
FROM Datenbank
WHERE Preis <= 100.000 AND Bäder=2 AND Schlafzimmer>=3
liefert oft
0 TREFFER
oder
1543 TREFFER
ohne weitere Hinweise zur Erweiterung oder Eingrenzung der Suchanfrage.
80
Datenbankabfrage
Dies zeigt einige Nachteile üblicher Datenbankanfragen:
●
Man muss eine Suchsprache lernen. In Studien stellte sich heraus, dass selbst ein Training
von 60 min noch nicht hinreichend für eine ausreichende Beherrschung der Sprache ist.
●
Tippfehler werden nicht toleriert.
●
Man erhält zu viele oder zu wenige Treffer, wenn man die Datenbank nicht kennt.
●
Bei zu wenigen oder zu vielen Treffern erhält man keinen Indikator wie die Anfrage zu
ändern ist.
●
Eine Veränderung der Suchanfrage erfordert Zeit für die Änderung, das Eintippen und die
Anwort, also aufwändige Interaktivität. Der Anwender hat nicht die Möglichkeit schnelle
Rückmeldung auf „Was wäre wenn...?“ Fragen zu erhalten.
●
Kein Kontext.
●
Der Anwender kann keine interne Vorstellung von den Daten erzeugen.
81
Dynamische Suchanfragen
●
●
Dynamische Suchanfragen mit interaktiven Antworten (< 0,1s) erlauben dynamisches
Erforschen, also Aktivitäten nach dem „Was wäre wenn...?“-Prinzip.
[Williamson, Shneiderman, the dynamic homefinder: eveluating dynamic queries in a real
estate information exploration system. ACM, Proceedings SIGIR '92, 1992 339-346]
Dynamic Homefinder hilft beim Suchen nach geeigneten Häusern die zum Verkauf stehen.
http://www.youtube.com/watch?v=5X8XY9430fM
Als generische Aufgabe ergibt sich:
Gegeben eine Menge von Objekten mit Werten für eine Menge von Attributen. Finde eines
oder wenige Objekte, die der Anfrage am besten entsprechen, so dass diese dann näher
studiert werden können.
82
●
Filmauswahl kann ebenfalls so angegangen werden [Ahlberg, Shneiderman, Alphaslider: a
compact and rapid selector, ACM, Proceedings CHI '94, 1994 365-371]
83
●
Filmauswahl kann ebenfalls so angegangen werden [Ahlberg, Shneiderman, Alphaslider: a
compact and rapid selector, ACM, Proceedings CHI '94, 1994 365-371]
84
85
●
Erforschen von Attributen
Um die Verteilung von Attributwerten zu studieren, eignen sich besonders Histogramme.
Hier können wie vorher interessante Bereich markiert werden. Momentan uninteressante
Bereiche werden nicht ausgeblendet, sondern farblich anders markiert.
86
●
Weitere Histogramme für andere Attribute helfen bei der Suche.
87
Inhalt
1. Theorie
2. Methoden
4. Filtern (filter)
3. Lessons Learned
88
Auswählen
●
Beim Auswählen hat der Nutzer die Möglichkeit Elemente der Darstellung zu selektieren
und diese hervorzuheben. Hierdurch können sie entweder nur verdeutlicht werden, oder
aber in weiteren Aktionen verwendet oder verfolgt werden.
89
Interaktion in Parallelen Koordinaten
●
Parallele Koordinaten lassen sich leicht filtern. Für jede Achse kann man separat ein
Minimum und Maximum einstellen und so schrittweise seinen Fokus einschränken.
[Bild mit protovis generiert]
90
Streudiagramm-Matrix
92
Streudiagramm-Matritzen und Brushing
●
●
●
In vielen Fällen ist die Einteilung in Klassen jedoch nicht von vornherein klar. Man hat
lediglich eine Vielzahl von Messung und man möchte z.B. wissen,
– ob bestimmte Variablen miteinander korrelieren.
– wie der Zusammenhang zwischen multiplen Dimensionen ist.
– ob es Cluster gibt.
Hier hilft Brushing, d.h. wenn bestimmte
Werte in einer Darstellung markiert werden,
werden diese Datenpunkte in allen anderen
Ansichten ebenfalls automatisch markiert.
Dies bezeichnet man als Linking.
Demo
http://vis.stanford.edu/protovis/ex/brush.html
93
Brushing und Linking
[image: generated with ggobi]
94
Verknüpfte Darstellungen (Linked Views)
●
Brushing und Linking wurde ursprünglich für Streudiagrammmatrizen entwickelt, man
kann das Prinzip aber für alle Darstellungen anwenden.
95
Streudiagramm-Matritzen bei räumlichen Daten
Druck vs.
Geschwindigkeit
kinetische Energie vs.
Geschwindigkeit
Druck vs. kin. Energie
[http://www.simvis.at/old/images/gallery/SkiJump--Analysis-Session.png]
96
Inhalt
1. Theorie
2. Methoden
4. Filtern (filter)
3. Lessons Learned
97
Theorie der Informationssuche
Die Theorie der Informationssuche legt die folgenden Prinzipien nahe:
●
Gute Benutzerschnittstellen kommunizieren den Nutzen einer Operation bevor diese
durchgeführt wird (Duft).
●
Verringern der Zeitkosten der Interaktion führt zu erhöhter Bereitschaft zur Interaktion.
●
Trade-off: Entweder komplexe Darstellungen mit langsamer Interaktion oder viele einfache
Darstellungen mit schneller Interaktion. Da unser Gedächtnis schlechter ist als unsere
Augen, sollten wir komplexe Darstellungen präferieren. Interaktionsgeschwindigkeit ist
begrenzt durch die menschliche Verarbeitungsgeschwindigkeit, wir können sie künstlich
verlängern, z.B. durch Animation, um den Menschen zu intensiverem Studieren der
komplexen Darstellungen zu zwingen.
98
Scented Widgets
Jedes Bedienelement kann man mit „Duft“ versehen.
[Willett, Wesley, Jeffrey Heer, and Maneesh Agrawala. "Scented widgets: Improving
navigation cues with embedded visualizations." In Proceedings InfoVis 2007: 1129-1136.]
99
Hicksches Gesetz
Hicksches Gesetz:
Bei n gleichwahrscheinlichen Möglichkeiten
beträgt die Zeit eine Entscheidung zu treffen
T = b log2 (n + 1).
Bei zu vielen Möglichkeiten entscheidet man
sich gar nicht.
Dies hat zwei Folgen für die Gestaltung:
●
Die möglichen nächsten Interaktionsschritte sollten zu jedem Zeitpunkt
gering gehalten werden. Für jede
Operation sollte nur eine Geste angeboten werden.
●
Details sollten reduziert werden, so dass
der Nutzer nicht überrumpelt wird und
schnell entscheiden kann wohin seine
Exploration weitergeht
(NICHT wie im Bild rechts).
Schulz, H-J.;Hadlak, S.; Schumann, H.: "Point-based
tree representation: A new approach for large
hierarchies." In Proceedings of PacificVis 2009.
100
Fittsches Gesetz
Fittsches Gesetz:
Für ein Ziel der Breite W und Distanz D ist die Zeit auf es mit dem Finger zu zeigen
T = a + b log2 (1 + D /W ).
Je weiter oder je kleiner etwas ist, umso länger brauche wir um eauf es zu zeigen. Card (1982)
zeigte, dass das Fittsche Gesetz auch für Bedienung mit Computermäusen gilt.
Benutzerelemente sollten nicht zu klein sein. Funktionen die oft zusammen gebraucht werden,
nah beieinander platzieren um den erwarteten Weg zu minimieren.
101
Gesetz des Lernens
Ein Gesetz des Lernens besagt, dass die n-te Wiederholung einer Aktion ungefähr
T = T1 / n Zeit beansprucht, wobei T1 die Zeit für die erstmalige Ausführung ist.
Dieses Gesetz kann experimentell gut verifiziert werden (unter Anderem wurde ein Arbeiter
einer Zigarettenfabrik über 40 Jahre begleitet, in denen er 900 Millionen Zigaretten anfertigte).
Das Gesetz gilt allerdings nur für automatisierbare Aktionen, also Aktionen die ohne bewußtes
Nachdenken ausgeführt werden können (Entscheidungsfindung in sich ändernden Kontexten
ist nicht automatisierbar).
Gute Benutzerschnittstellen ermöglichen die Ausführung von Gesten ohne Nachdenken, damit
man durch ihr Erlernen schneller werden kann.
Expert Reversal: Menschen die sich an eine Benutzerschnittstelle gewöhnt sind, arbeiten
langsamer mit einer konzeptionell anderen Schnittstelle als unvoreingenommene Menschen.
102
Prinzipien guter Interaktionsgestaltung
Gute Nutzerschnittstellen stellen sicher, dass
●
Nutzer niemals überfordert werden. Sie stellen zunächst einen Überblick dar, ermöglichen
dem Nutzer dann seinen Fokus durch Vergrößern und Filtern einzustellen, dabei werden
mehr Details eingeblendet. Viele Details sind so speziell,dass sie nur nach Bedarf angezeigt
werden.
●
der aktuelle Zustand der Interaktion ist stets erkennbar (Fokus+Kontext).
●
der Nutzer sieht seine Möglichkeiten der nächsten Interaktion (Affordances).
●
genügend Informationsduft (scent) verfügbar ist, dass der Benutzer seinen nächsten
Schritt planen kann.
●
Übergänge zwischen Zuständen weich sind und dem gedanklichen Modell des Nutzers
nicht entgegenlaufen.
●
Fehler den Benutzer nicht zum Neustart der Exploration zwingen, sondern Undo anbieten.
●
es einen „Home“-Button gibt, so dass falls sich der Nutzer „verirrt“ er in einen Zustand
zurückkehren kann, mit dem er vertraut ist.
●
der Nutzer seine „Reise“ später nachvollziehen kann. Hierfür kann eine Historie und
Lesezeichen angeboten werden.
103
Beispiel: Kleine Vielfache, Große Einzelne
(A) Großes Einzelnes
(B) Menü der Variablen
(C) Lupe für Details
(D) Vorschau
möglicher Operationen
(E-G) Historie
(H) Undo, Redo, Reset
(I) Legende
[van den Elzen, S., and
van Wijk, J.J.: "Small
multiples, large singles: A
new approach for visual
data exploration." In
Proceedings of EuroVis
2013.]
104
Literatur
●
●
●
●
●
●
R. Spence: Information visualization, Addison-Wesley, 2007.
J.J. van Wijk and Wim A.A. Nuij. "Smooth and efficient zooming and panning." Proceedings
of IEEE Information Visualization, 2003.
B. Shneiderman: „The eyes have it: a task by data type taxonomy of information
visualizations”, Proceedings of IEEE Symposium on Visual Languages '96, 336-343.
J.R. Anderson: Cognitive Psychology and its Implications, 7th ed. Worth Publishers, 2009.
D. Norman: The Design of Everyday Things, 2nd ed. Basic Books, 2002.
P.L. Pirolli: „Information foraging theory: Adaptive interaction with information“, Oxford
University Press, 2007.
105

Interaktion und Datenexploration

Transcrição

Documentos relacionados

PresseInformation Media Space 2011

J.MAYER H. -‐ A.WAY -‐ Eine Vision der Mobilität

Nr. 3/2013 - Kinderärzte Schweiz

Die Therapie von Interaktionsstörungen in der - Mutter-Kind-Kur

Parasoziale Interaktion

Mensch-Maschine-Interaktion - Medieninformatik

Einführung in Augmented Reality

Mobile Benutzerschnittstellen f¨ur die Interaktion mit Sensoren

metaphern für AR, Tangible User Interfaces und AR

Filmbeschreibungen zum Projekt Burschenkino