visualisierung Informations-

(1)

Informations- visualisierung

Thema: 6. Interaktion Dozent: Dr. Dirk Zeckzer

zeckzer@informatik.uni-leipzig.de Sprechstunde: nach Vereinbarung

Umfang: 2

Prüfungsfach: Modul Fortgeschrittene Computergrafik Medizininformatik, Angewandte Informatik

(2)

Informationsvisualisierung, WS 2016/2017 6-2

Übersicht

6. Interaktion

6.1 Daten-Transformationen 6.2 Visuelle Abbildung

6.3 Ansichts-Transformationen

(3)

6. Interaktion

Interaktion ist ein zentraler Aspekt der Informationsvisualisierung (Visuelle Exploration)

 Warum?

 Datenmenge meist größer als verfügbare Darstellungsfläche

 Ziel

 Finden von nützlicher, möglicherweise versteckter Information

 Methodik

 Interaktion des Benutzers mit der Darstellung

 Hohe Effektivität einiger Techniken durch Dynamik der

Interaktion und Vielfalt der Ansichten

(4)

6. Interaktion

Referenzmodell

Daten Tabellen Visuelle

Strukturen Ansichten

Daten

Transformationen

Visuelle Abbildung

Ansichts- Transformation

Interaktion

Aufgabe

Daten Visuelle Darstellung

[CMS:17ff]

(5)

6. Interaktion

Zeitaspekte von Interaktion

 Wie schnell muss eine Reaktion erfolgen?

 Interaktion ist ein Echtzeit-Prozeß

 Sie muss schnell genug erfolgen, so dass der Benutzer keine Zeit mit nutzlosem und frustrierendem Warten verliert

 Interaktion darf in einigen Situationen auch nicht zu schnell erfolgen, da sonst Information übersehen werden kann

 Drei Arten von Reaktionszeit

 0,1 Sekunden: Animationen, Schieberegler (Slider), Ton, ...

 1 Sekunde: Systemantworten, Dialoge, ...

 10 Sekunden: Berechnungen

(6)

6. Interaktion

 Daten-Transformation

 Dynamische Abfragen

 „Direct walk“

 „Details-on-demand“

 „Attribute walk“

 „Brushing“

(7)

6. Interaktion

 Visuelle Abbildung

 Meist durch den Designer/Programierer festgelegt

 Selten dem Benutzer überlassen

(8)

6. Interaktion

 Ansichts-Transformation

 Direkte Auswahl

 Magische Linsen

 Verschiebung (Pan)

 Vergrößerung/Verkleinerung (Zoom)

 Überblick und Detail

 Verzerrung

 Fokus und Kontext

(9)

6.1 Daten Transformationen

Referenzmodell

Daten Tabellen ^Visuelle

Daten

Transformationen

Visuelle Abbildung

Interaktion

Aufgabe

[CMS:17ff]

(10)

6.1 Daten Transformationen

Unzureichendes Wissen führt zu unklar formulierten Problem



Man sucht etwa ein Haus:

 100 000 €

 3 Zimmer

 Nähe zu guter Schule

 Nicht zu weit von den Großeltern entfernt

 Unbekannte Faktoren:

 Beliebter Park spielt wesentliche Rolle bei Preisen

 Mieter sind leicht zu finden

(11)

6.1 Daten Transformationen

Informationsvisualisierung hilft bei



Formulierung des Problems

 Vage Fragestellung → Präzisierung der Frage



Lösung des Problems

 Suche nach der Antwort



Übergang zwischen beiden Aspekten

(12)

6.1 Daten Transformationen

Klassische Datenbankanfrage

 SELECT Hausadresse FROM Datenbank

WHERE Preis <= 100.000 AND Schlafzimmer>=3

 0 Treffer

 1543 Treffer (als Liste ...)

 Meist ohne weitere Hinweise zur Erweiterung oder Eingrenzung der Suchanfrage

 Wieviel mehr oder weniger sollte angezeigt werden?

(13)

6.1 Daten Transformationen

Nachteile üblicher Datenbankanfragen

 Suchsprache lernen kann lange dauern

 Tippfehler werden nicht (immer) toleriert

 Zu viele oder zu wenige Treffer, wenn man die Datenbank nicht kennt

 Kein Indikator wie die Anfrage zu ändern ist

 Keine Interaktivität, die Veränderung der Suchanfrage erfordert Zeit (Änderung, Eintippen, Antwort)

 Nützlicher Kontext ist verborgen

 Der Anwender kann keine interne Vorstellung von den Daten

erzeugen

(14)

6.1 Daten Transformationen

Dynamische Suchanfragen

 Interaktiven Antworten (≤ 0,1 sec)

 Mehr oder weniger gleichzeitige Darstellung von Abfrage und Ergebnis

 Dynamisches Erforschen: „Was wäre wenn...?“-Prinzip

 Generische Aufgabe:

 Gegeben:

 Eine Menge von Objekten

 Werte für eine Menge von Attributen

 Ziel:

 Finde das optimale Objekt

 Finde eine kleine Anzahl von Objekten, die näher studiert werden können

(15)

6.1 Daten Transformationen

Dynamische Suchanfragen Beispiel: Dynamic Homefinder

[Williamson, Shneiderman, The Dynamic Homefinder: evaluating dynamic queries in a real estate information exploration system.

Proc. ACM SIGIR, 1992 339-346]

(16)

6.1 Daten Transformationen

Dynamische Suchanfragen Beispiel: Dynamic Homefinder

[Williamson, Shneiderman, The Dynamic Homefinder: evaluating dynamic queries in a real estate information exploration system.

Proc. ACM SIGIR, 1992 339-346]

[http://www.cs.umd.edu/hcil/pubs/screenshots/]

(17)

6.1 Daten Transformationen

Dynamische Suchanfragen

 Schnittstellen

 Button

 Für die Auswahl von Werten

 Radiobutton

 Für die exklusive Auswahl von Werten

 Slider

 Auswahl von einem Wert

 Filter: Auswahl von Minimum und Maximum ordinaler oder quantitativer Werte; ergibt eine Menge von Werten

(18)

6.1 Daten Transformationen

Alpha-Slider und verbesserter Alphaslider zur dynamischen Auswahl nach Worten

[Ahlberg, Dynamic Queries, PhD dissertation, Chalmers University of Technology, Sweden, 1996]

[Osada, Liao, Shneiderman, Alphaslider: development and evaluation of text retrieval method using sliders,

Proc. of 9th Symposium on Human Interface, 1993, 91-94]1

(19)

6.1 Daten Transformationen

Range-Slider: Filter, untere und obere Schranke

(20)

6.1 Daten Transformationen

Hinweis auf Bereiche ohne Werte aufgrund anderer

Einschränkungen

(21)

6.1 Daten Transformationen

Filmfinder

(22)

6.1 Daten Transformationen

Filmfinder

(23)

6.1 Daten Transformationen

Filmfinder

[Ahlberg, Shneiderman, Alphaslider: a compact and rapid selector, Proc. ACM CHI, 1994, 365-371]

(24)

6.1 Daten Transformationen

Beispiel für die Suche in Daten

 Schwermetallbelastung in schwedischer Luft

(25)

6.1 Daten Transformationen

Vorteile

 Schnelleres Arbeiten

 Erforschen der Daten

 „Natürliche“ Art der Interaktion Nachteile

 Boole‘sche Ausdrücke können nur schwer verwendet werden

 Vielleicht wird diese Möglichkeit nicht benötigt

 Schnittstellen benötigen viel Platz auf dem Bildschirm

 Integration von Daten und Bedienung

(26)

6.1 Daten Transformationen

Data Visualization Slider

(27)

6.1 Daten Transformationen

Direct Walk

 Direkte Verbindungen (links) zwischen verschiedenen Einträgen in Tabellen

 Eine Verbindung (link) führt von einem Eintrag zu einem anderen, möglicherweise in einer anderen Tabelle

 So gelangt man von Information zu Information

 Beispiel: Webseiten

(28)

6.1 Daten Transformationen

Details-on-Demand

 Zu einer kleinen Anzahl von Objekten werden zusätzliche Details angezeigt

 Beispiel: Pop-Ups, Mouse- Over, ...

 Dadurch kann mehr Information dargestellt werden

S. Schlechtweg, P. Schulze-Wollgast, H. Schumann. Interactive Treemaps With Detail on Demand to Support Information Search in Documents. Joint EUROGRAPHICS - IEEE TCVG Symposium on Visualization (2004).

(29)

6.1 Daten Transformationen

Attribute walk

 Der Benutzer wählt einige Einträge aus und sucht nach ähnlichen Einträgen

[http://www.cs.umd.edu/hcil/pubs/screenshots/]

FilmFinder

Auswahl von Einträgen mit ähnlichen Attributen

(Schauspieler „Sean Connery“)

Das Programm sucht dann nach anderen Filmen mit ähnlichen Attributen.

(30)

6.1 Daten Transformationen

Brushing

 Mehrere Darstellungen derselben Objekte

 Meist für verschiedene Attribute

 Ein, mehrere oder alle Attribute können gleich sein

 Betonung (highlighting) eines Eintrags in einer Ansicht betont denselben Eintrag in einer zweiten Ansicht

 Konsistente Darstellung

 Erleichterte Suche

(31)

6.1 Daten Transformationen

Brushing

[http://www.infovis-wiki.net/index.php?title=Linking_and_Brushing, http://old.vrvis.at/via/resources/DA-RVoigt/masterthesis.html]

(32)

6.1 Daten Transformationen

Histogramm-Brushing

 Spezialfall

 Jedes Attribut wird in einem eigenen Histogramm dargestellt

 Werte und Wertebereiche können ausgewählt werden

 Die ausgewählten Elemente werden in allen Histogrammen betont

 Sehr gut geeignet für Vergleiche, zum Beispiel um Korrelationen oder Trends zu erkennen

 Attribute Explorer

 Alle Einträge werden angezeigt

 Für jedes Attribut wird eine eigene Ansicht verwendet

 Interaktionskosten

 Wie viele Interaktionen muss man durchführen?

 Wie lange dauert die Suche?

(33)

6.1 Daten Transformationen

Auswahl im Attribute Explorer

 Grün: Auswahl

 Weiß: alle anderen Werte

Objekt

(34)

6.1 Daten Transformationen

 Schwarz: ein gefiltertes Attribut

 Dunkelgrau: zwei gefilterte Attribute

 ...

(35)

6.1 Daten Transformationen

Link Crystal

 Boolesche Algebra erlaubt präzise Angaben

(36)

6.2 Visuelle Abbildung

Referenzmodell

Daten

Transformationen

Visuelle Abbildung

Interaktion

Aufgabe

[CMS:17ff]

(37)

6.2 Visuelle Abbildung

FilmFinder

 Die Attribute der Achsen des Scatterplots können verändert werden

[CMS:17ff]

(38)

6.3 Ansichts-Transformation

Referenzmodell

Daten

Transformationen

Visuelle Abbildung

Ansichts- Transformation

Interaktion

Aufgabe

[CMS:17ff]

(39)

6.3 Ansichts-Transformation

Fundamentales Problem: Skalierbarkeit

 Viele Datensätze sind zu groß oder zu komplex, um komplett auf dem Bildschirm dargestellt zu werden

 HD Auflösung: 1920 ∙ 1080 = 2.073.600 Pixel

 UHD Auflösung: 3840 ∙ 2160 = 8.294.400 Pixel

 Gründe:

 Zu viele verschiedene Einträge

 Zu viele Attribute pro Eintrag

 650.000 Einträge, 11 Attribute: 7.150.000 Werte

(40)

6.3 Ansichts-Transformation

Fundamentales Problem: Skalierbarkeit

 Der Benutzer kann nur einen Teil der Daten gleichzeitig sehen

 Bestimmte Einträge oder Attribute sollen hervorgehoben werden

 Durch den Benutzer (aktiv)

 Durch das Programm (passiv)

 Der Fokus auf bestimmte Objekte ändert sich stetig

(41)

6.3 Ansichts-Transformation

Interaktion mit der Ansichts-Transformation

 „Location probes“

 Direkte Auswahl

 Magische Linsen

 Kontrolle des Standpunktes

 Verschiebung (pan)

 Vergrößerung/Verkleinerung (zoom)

 Überblick und Detail

 Fokus und Kontext

 Verzerrung

(42)

6.3 Ansichts-Transformation Table Lens („Tabellen-Linse“)

 Location probes, Standpunktkontrolle und Verzerrung werden meist direkt in die GUI integriert

 In der Abbildung sind alle Gebiete in „magenta“ im Fokus

[C. Ware. Information Visualization: Perception for Design. 2nd Edition, Morgan Kaufman, San Francisco, ISBN 1-55860-819-2, 2004, page 342]

(43)

6.3 Ansichts-Transformation

Bekannte Texttechnik: Rollen (Scrolling)

 Kleine Balken an der Seite (Scrollbars)

 Ansatz von Orientierung relativ zum Gesamttext

 Möglichkeit zur beschleunigten Bewegung durch das Dokument

 Probleme

 Wo bin ich?

 Der größte Teil des Dokumentes ist verborgen!

 Man kann den Kontext nicht sehen.

(44)

6.3 Ansichts-Transformation

Im Prinzip sind alle Techniken Fokus und Kontext Techniken

 Scrollbars

 Fokus (Ausschnitt) sichtbar

 Kontext (Umgebung) unsichtbar

 Detaillierte Darstellung eines Teils der Daten (Fokus)

 Übrige Daten werden in geringer Auflösung dargestellt

(Kontext)

(45)

6.3 Ansichts-Transformation

Direkte Auswahl ist die einfachste Möglichkeit Ansichten zu verändern

 Man wählt ein Objekt oder eine Gruppe von Objekten aus

 Die ausgewählten Objekte werden hervorgehoben

 Zusätzlich Information über diese Objekte wird angezeigt

 Beispiele

 Brushing

 Pop-up Window

 Mouse-Over

[C. Ware. Information Visualization: Perception for Design. 2nd Edition, Morgan Kaufman, San Francisco, ISBN 1-55860-819-2, 2004, page 347]

[http://pfp7.cc.yamaguchi-u.ac.jp/~ichikawa/iv/06a.htm]

(46)

6.3 Ansichts-Transformation

Magic Lenses (Detaillupen)

 Lupenmetapher zur Definition des Fokus

 Einblenden nützlicher Information

[R. Spence. Information Visualization. ACM Press/Addison Wesley, New York, ISBN 0-201-59626-1, 2001, page 125]

(47)

6.3 Ansichts-Transformation

Magic Lenses (Detaillupen)

 Vorteile

 Einfach zu verstehen

 Verwendet wenig Platz auf dem Bildschirm

 Kontext bleibt erhalten

 Weit verbreitet

 Verschiedene Typen von Lupen zeigen unterschiedliche Information entsprechend dem Anwendungsgebiet (Parametrisierung der

magischen Linse)

(48)

6.3 Ansichts-Transformation

Detail- und Vorschau-Lupen

[Bier, E., et al., “Toolglass and Magic Lenses: The Seethrough Interface,” Proc. ACM SIGGRAPH 1993, Anaheim, Calif., Aug. 1993, pp. 73-80.

http://www.billbuxton.com/tgml93.html]

(49)

6.3 Ansichts-Transformation

Lupen zur Auswahl

[Bier, E., et al., “Toolglass and Magic Lenses: The Seethrough Interface,” Proc. ACM SIGGRAPH 1993, Anaheim, Calif., Aug. 1993, pp. 73-80.

http://www.billbuxton.com/tgml93.html]

(50)

6.3 Ansichts-Transformation

Vergrößern/Verkleinern und Verschieben (Zooming and Panning)

Verschiebung:

Kontinuierliches Verschieben eines Fensters (Ansicht) über ein zwei- dimensionales, größeres Bild

Vergrößerung (Verkleinerung):

Zunehmende Vergrößerung (Verkleinerung) eines kleiner (größer) werdenden Ausschnitts eines Bildes

(51)

6.3 Ansichts-Transformation

Vergrößern/Verkleinern (zooming)

 Vergrößern (zoom in)

 Die zunehmende Vergrößerung eines kleiner werdenden Ausschnitts eines Bildes

 Verkleinern (zoom out)

 Die zunehmende Verkleinerung eines größer werdenden Ausschnitts eines Bildes

Hierbei hat das Fenster (die Ansicht) immer die gleiche Größe.

(52)

6.3 Ansichts-Transformation

Verschieben (panning)

 Kontinuierliches Verschieben eines Fensters (Ansicht) über ein zwei- dimensionales, größeres Bild

 Unterschied zum Rollen (Scrolling): Freie Bewegung in einer Ebene statt nur vertikal oder horizontal

(53)

6.3 Ansichts-Transformation

Szenario

 Der Benutzer wechselt den Fokus von A nach B

[Furnas, Bederson, Space-Scale Diagrams: Understanding Multi-Scale Interfaces, Proc. CHI, ACM, 1995, 234-241]

(54)

6.3 Ansichts-Transformation

Szenario

 Zuerst wird verkleinert bis A und B sichtbar sind (zoom out)

 Dann erfolgt eine Verschiebung mit dem Ziel, B im Zentrum des Fensters zu

haben (pan)

 Anschliessend wird vergrößert, um mehr Details von B zu sehen (zoom in)

 Vergrößern/Verkleinern und Verschieben wechseln sich ab

Verwendung eines „Space-Scale-Diagramm“

(55)

6.3 Ansichts-Transformation

(56)

6.3 Ansichts-Transformation

Semantisches Vergrößern

 Zoom: nur Geometrie

 Semantic Zoom:

 Geometrie

 Form

 Art der Information

(57)

6.3 Ansichts-Transformation

Semantisches Vergrößern

[http://micro.magnet.fsu.edu/primer/java/scienceopticsu/powersof10/]

(58)

6.3 Ansichts-Transformation

Zoomable User Interfaces (Zooming User Interfaces, ZUIs)

 Fenster können überall in der „Welt“ erzeugt werden

 Sie werden als „Portale“ bezeichnet

 Typischerweise Rechtecke

 Aktionen: Vergrößern, Verkleinern, Ein-/Ausgabe

 Können verwendet werden, um Übersichten oder Kontextansichten zu erzeugen

 Beispiel: Pad++

 Tool-Entwicklung

 Pad → Pad++ → Jazz → Piccolo → Piccolo2D

[https://en.wikipedia.org/w/index.php?title=Zooming_user_interface&oldid=588130070]

 → Video

(59)

6.3 Ansichts-Transformation

Ein sinnvoller Ausgangspunkt für die Entwicklung graphischer

Benutzerschnittstellen ist das „Visual Information-Seeking Mantra“

von Ben Shneiderman

 Overview first (Überblick)

 Zoom and filter (Vergrößern/Verkleinern & Filtern)

 Details-on-demand (Details auf Nachfrage)

 Eine von drei Vorgehensweisen

 Top-Down → Shneiderman Mantra

 Bottom-Up → Starte mit den Details und erforsche die Umgebung (plant a seed and watch it grow)

 Middle-Out → Starte auf einer „angemessenen“ Detailebene und erforsche Umgebung (up) und Details (down)

(60)

6.3 Ansichts-Transformation

Überblick und Detail

 Überblick

 Ein guter Überblick über die Daten kann sehr nützlich sein

 Zeigt globale Muster

 Hilft bei der Navigation durch die Daten

 Hilft, die Richtung der Aktivitäten festzulegen

 Detail

 Benutzer möchten Details von interessanten Objekten sehen

 Wie kann man dem Benutzer ermöglichen interessante Daten zu finden und zu fokussieren?

(61)

6.3 Ansichts-Transformation

Idealerweise werden beide Aspekte zur Verfügung gestellt:

Überblick und Detail

 Dafür gibt es zwei prinzipielle Vorgehensweisen

 Zeit

 Wechsel zwischen Überblick und Detail

 Gleicher Platz wird für beide verwendet

 Platz

 Gleichzeitige Darstellung von Überblick und Detail

 Verwende Teile des Bildschirms für den Überblick und andere für Details

 Beide Vorgehensweisen haben Vor- und Nachteile

 In Abhängigkeit der Bildschirmgröße

(62)

6.3 Ansichts-Transformation

Der Artikel von Plaisant et al. gibt eine Übersicht über

verschiedene Möglichkeiten der Darstellung von Übersicht und Details

[C. Plaisant, D. Carr, and B. Shneiderman, “Image-Browser Taxonomy and Guidelines for Designers,” IEEE Software, Vol. 12, No. 2, pp. 21-32, March 1995.]

1) Nur Details

2) Ein Fenster mit Vergrößern und Ersetzen 3) Ein koordiniertes Paar

4) Kacheln, mehrere Ebenen

5) Freie Vergrößerung und mehrfache Überlappung 6) Bi-Fokus vergrößert

7) Fish-Auge

(63)

6.3 Ansichts-Transformation

1) Nur Details

 Ein Fenster mit horziontalem und vertikalem Verschieben

 Funktioniert nur mit kleinen Vergrößerungen

 Beispiel: Windows

(64)

6.3 Ansichts-Transformation

2) Ein Fenster mit Vergrößern und Ersetzen

 Globale Ansicht mit einem wählbaren Gebiet für

Vergrößerungen

 Variationen erlauben dem Benutzer:

 Verschiebungen

 Anpassung des vergrößerten Gebietes

 Anpassung der

Vergrößerungstufen

 Wechsel des Kontext kann Desorientieren

(65)

6.3 Ansichts-Transformation

3) Ein koordiniertes Paar

 Kombination von zwei separaten Ansichten

 Überblick

 Lokal vergrößerte Ansicht

 Einige Implementierungen reservieren viel Platz für den Überblick, andere für Details

 Fragen

 Wie groß sollen die Fenster sein?

 Wo sollen die Fenster platziert werden?

 Beispiel: netbeans, powerpoint

(66)

6.3 Ansichts-Transformation

4) Kacheln, mehrere Ebenen

 Kombination von

 Globalem Überblick

 Einer Zwischenansicht

 Einer Detail-Ansicht

 Ansichten nicht überlappend

 Gute Implementierungen verbinden die Ansichten

 Panning in einer Ansicht beeinflußt die anderen Ansichten

(67)

6.3 Ansichts-Transformation

5) Freie Vergrößerung und mehrfache Überlappung

 Zuerst nur Überblick

 Benutzer wählt ein Gebiet zur Vergrößerung aus

 Benutzer wählt Ort für Detail-Ansicht

 Vorteil:

 Flexibles Layout

 Nachteil:

 Benutzer muss die Fenster manuell anordnen

(68)

6.3 Ansichts-Transformation

6) Bi-Fokus vergrößert

 „Vergrößerungsglas“: die

vergrößerte Ansicht schwebt über der Übersicht

 Problem

 Benachbarte Objekte werden verdeckt

(69)

6.3 Ansichts-Transformation

7) Fish-Auge

 Das vergrößerte Bild ist

verzerrt, so dass der Fokus auf dem am stärksten

vergrößerten Gebiet liegt

 Alles wird in einer Ansicht dargestellt

 Problem

 Die Verzerrung kann zu Desorientierung führen

(70)

6.3 Ansichts-Transformation

Überblick und Detail

 Welche Aspekte im Vordergrund liegen sollten, hängt von der Aufgabe ab

 Analyse

 Hoher Detailierungsgrad

 Fließende Verschiebungen und komplette Ansichten

 Navigation

 Übersicht ist sehr wichtig

 Verschieben und Vergrößerung sind weniger wichtig

 Auswahl der Methode abhängig von der Anwendung

(71)

6.3 Ansichts-Transformation

Überblick und Detail

 Design Konzepte

 Ein Schlüssel ist die Verwendung von mehreren Sichten

 Frage: Wie kann man diese Sichten effizient nutzen?

 Baldonado et al. schlagen ein Modell mit drei Aspekten vor

[M. Baldonado, A. Woodruff, and A. Kuchinsky. Guidelines for using multiple views in information visualization. In Advanced Visual Interfaces, pages 110--119, 2000.]

 Selection (Auswahl)

 Presentation (Darstellung)

 Interaction (Interaktion)

(72)

6.3 Ansichts-Transformation

Wann sollten mehrere Ansichten verwendet werden?

 Rule of diversity

(Regel der Verschiedenheit)

 Unterschiedliche Attribute

 Unterschiedliche Modelle

 Unterschiedliche Benutzerprofile

 Unterschiedliche Abstraktionsebenen

 Rule of complementarity

(Regel der gegenseitigen Ergänzung)

 Erkennung von Korrelationen zwischen verschiedenen Ansichten

 Erkennung von Unterschieden zwischen verschiedenen Ansichten

(73)

6.3 Ansichts-Transformation

Wann sollten mehrere Ansichten verwendet werden?

 Rule of Decomposition (Regel der Unterteilung)

 Verteilung komplexer Daten auf verschiedene Ansichten

 handhabbare Blöcke zu erhalten

 Einsichten in die Wechselbeziehung zwischen Dimensionen zu erhalten

 Rule of Parsimony

(Regel der Sparsamkeit)

 Verwende mehrere Ansichten sparsam!

(74)

6.3 Ansichts-Transformation

Weitere Regeln für die Verwendung mehrerer Ansichten?

 Rule of space/time resource optimization

(Regel der Optimierung von Zeit und Platz Resourcen)

 Finde eine Balance zwischen den Kosten und dem Nutzen der Ansichten in zeitlicher oder räumlicher Anordnung

 Rule of consistency

(Regel der Einheitlichkeit)

 Schnittstellen und Darstellungen der verschiedenen Ansichten sollten einheitlich sein!

(75)

6.3 Ansichts-Transformation

Weitere Regeln für die Verwendung mehrerer Ansichten?

 Rule of self-evidence

(Regel der Selbsterklärung)

 Verwende visuelle Hinweise, um Beziehungen zwischen den Daten der verschiedenen Ansichten für den Benutzer sichtbar zu machen

 Rule of attention management

(Regel der Aufmerksamkeitssteuerung)

 Verwende Wahrnehmungstechniken, um den Fokus des Benutzers zur richtigen Zeit auf die richtige Ansicht zu lenken

(76)

6.3 Ansichts-Transformation

Information Mural

[Jerding, Dean and Stasko, John, “The Information Mural: A Technique for Displaying and Navigating Large Information Spaces,” IEEE Transactions on Visualization and Computer Graphics, Vol. 4, No.

3, July-Sept. 1998, pp 257-271.]

 Motivation

 Was können wir tun, wenn unsere Datenmenge zu groß ist, um sie auf dem Bildschirm darstellen zu können?

 Mehr Datenpunkte als Pixel

 Scrolling keine Option (Nachteile, Überblick)

 Lösung: Verwende Techniken aus der Computergraphik für alternative Ansichten

 Shading

 Anti-Aliasing

(77)

6.3 Ansichts-Transformation

Information Mural

 Jeder Datenpunkt: Tinte

 Jedes Pixel: Behälter

 Wenn die Datenpunkte (Tinte) nicht alle in einen Behälter passen, dann verteile die Tinte auf benachbarte Behälter

 Bilde Dichte auf Graustufen oder Farbe ab

[Jerding, Dean and Stasko, John, "The Information Mural: A Technique for Displaying and Navigating Large Information Spaces," IEEE Transactions on Visualization and Computer Graphics, Vol. 4, No. 3, July-Sept. 1998, pp 257-271]

[http://stefan.huberdoc.at/comp/work/WissArb/murals.html]

(78)

6.3 Ansichts-Transformation

Ausführung von Objekt-Orientiertem Code

[S. K. Card, J. Mackinlay, and B. Shneiderman. Readings in Information Visualization: Using Vision to Think. Academic Press, ISBN 1-55860-533-9, 1999, page 32]

(79)

6.3 Ansichts-Transformation

Aktivität von Sonnenflecken über 150 Jahre

[Jerding, Dean and Stasko, John, "The Information Mural: A Technique for Displaying and Navigating Large Information Spaces," IEEE Transactions on Visualization and Computer Graphics, Vol. 4, No. 3, July-Sept. 1998, pp 257-271]

(80)

6.3 Ansichts-Transformation

LaTeX-Editor

[Jerding, Dean and Stasko, John, "The Information Mural: A Technique for Displaying and Navigating Large Information Spaces," IEEE Transactions on Visualization and Computer Graphics, Vol. 4, No. 3, July-Sept. 1998, pp 257-271]

(81)

6.3 Ansichts-Transformation

Fokus & Kontext

 Herausforderung

 Nahtloser Übergang von Kontext (Overview) und Fokus (Detail)

 Fokus und Kontext sind im gleichen Ausgabefenster

 Gründe

 Leichter Wechsel zwischen beiden

 Bessere Erkennung von Aktualisierungen der Anzeige

(82)

6.3 Ansichts-Transformation

Fokus & Kontext

 Overview and Detail

 Räumliche Trennung

 Zooming und Panning

 Zeitliche Trennung

 Fokus & Kontext

 Integration der Ansichten

 Gleicher Raum und gleiche Zeit

(83)

6.3 Ansichts-Transformation

Fokus & Kontext Methoden

 Hervorheben (Highlighting)

 Bestimmte Elemente werden durch Farbe, Rahmen oder ähnliches hervorgehoben

 Verzerrung

 Cone Trees (3D)

 Fisheye views (1D, 2D, 3D, Fischaugen)

 Bifocal display (2D, 3D, Display mit zwei Fokuspunkten)

 Perspective wall (3D)

 Document lens (3D)

 Komplexe Funktionen (2D)

 Hyperbolische Räume (2D, 3D)

 Hyperbolische Bäume

(84)

6.3 Ansichts-Transformation

Unterdrückung (Suppression)

 Weglassen (Unterdrücken) nicht benötigter Information

 Effektiv, aber oft schwierig zu realisieren

(85)

6.3 Ansichts-Transformation

Kontextkarte (context map)

Problem beim Autofahren mit Atlanten:

 Seitenblättern zu neuem Ausschnitt

 Suchen nach neuem Standort benötigt Zeit

Lösung:

 Kontextdarstellung hilft hier durch Übersichtskarte

(eigentlich obsolet durch

Navigationssysteme)

(86)

6.3 Ansichts-Transformation

 Mehr Übersicht mittels Extradarstellung des Kontextes durch Lupe

 Probleme:

 Verzerrung

 Verdeckung

 Lösung:

 Verschiebung des

vergrößerten Bildes (DragMag)

(87)

6.3 Ansichts-Transformation

Verzerrung

 Anwendung: Really Useful Map

[Kadmon, Shlomi, A polyfocal projection for statistical surfaces, The Cartographic Journal 15(1):36-41, 1978]

 Gelungene Anwendung für Autofahrer

 Gummituchtechnik (rubber sheet distortion) zur Vergrößerung von Details

 Unterdrückung möglichst vieler Informationen

 Darstellung von Orientierungspunkten durch einfache Symbole

 Darstellung von wichtigen Orientierungspunkten für korrekte Orientierung

(88)

6.3 Ansichts-Transformation

[Kadmon, Shlomi, A polyfocal projection for statistical surfaces, The Cartographic Journal 15(1):36-41, 1978]

(89)

6.3 Ansichts-Transformation

Effektives Blättern

 Scrollen in langen, sortierten Listen zu aufwändig

 Verschieben der Fensterposition durch Anklicken/Rollen

 Anspringen von Positionen einer sehr großen sortierten Liste (z. B. Telefonbuch einer Stadt) durch weitere Mechanismen

sinnvoll:

 Tippen von Anfangsbuchstaben

 Ansicht mit exponentiell anwachsenden Lücken/Sprüngen kann sehr effektiv sein!

[Furnas, Effective View Navigation, Proc. CHI, ACM, 1997, 367-374]

(90)

6.3 Ansichts-Transformation

(91)

6.3 Ansichts-Transformation

(92)

6.3 Ansichts-Transformation

Effektives Blättern

 2D und 3D-Anordnungen können sinnvoll sein

 Der Durchmesser reduziert sich mit der Quadratwurzel bzw. der

dritten Wurzel von 𝑛

(93)

6.3 Ansichts-Transformation

Verzerrung

[Y.K. Leung and M.D. Apperley. A Review and Taxonomy of Distorsion-Oriented Presentation Techniques.

ToCHI ‘94]

1D

2D

(94)

6.3 Ansichts-Transformation

Verzerrung

Leung und Apperley haben Verzerrungstechnologien auf Basis von Transformation und Vergrößerungsfunktionen untersucht

[Y.K. Leung and M.D. Apperley. A Review and Taxonomy of Distorsion-Oriented Presentation Techniques. ToCHI ‘94]

Distorted Object

Transformation function

Magnification function

Object

Distance in the original image Distance in the distorted image

Magnification factor

Distance in the original image

(95)

6.3 Ansichts-Transformation

Beispiel: Cone Trees

[http://www3.sympatico.ca/blevis/thesis49prev.html]

(96)

6.3 Ansichts-Transformation

Beispiel: Cone Trees

 Verzerrung durch perspektivische Darstellung

 Elemente im Vordergrund sind im Fokus

 Elemente im Hintergrund bilden den Kontext

 Fokus und Kontext können durch Interaktion des Benutzers

verändert werden

(97)

6.3 Ansichts-Transformation

Fisheye View

 Fischaugen-Kamera-Linse

[http://www.abesofmaine.com/abeimg/nk1028g.jpg]

(98)

6.3 Ansichts-Transformation

Fisheye View

 Fisheye Views wurden 1981 von Georges Furnas (Bell Laboratories) vorgestellt

[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]

 Furnas verwendet folgende Konzepte und Metriken

 Focal Point (Fokuspunkt)

 “Level of Detail” (LOD, Detailierungsgrad)

 Distance from focus (Abstand vom Fokus)

 “Degree of interest” function (DOI, Grad des Interesses)

(99)

6.3 Ansichts-Transformation

Fisheye View: Fokuspunkt

 Der Fokus des Betrachters liegt auf einem Gegenstand oder einer Position

 𝑓: focal point

[Inspired by a lecture of J. Stasko]

(100)

6.3 Ansichts-Transformation

Fisheye View: Level-of-Detail (LOD)

 Wichtigkeit eines Punktes 𝑥 für den Betrachter (global)

 Wird auf die Auflösung oder den Detailierungsgrad abgebildet

 𝐿𝑂𝐷(𝑥)

 Beispiel

 𝐿𝑂𝐷 𝑥₁ = −4→ Kleinste Stufe mit den wenigsten Details

 𝐿𝑂𝐷 𝑥₁ = −3→ Zweitkleinste Stufe mit wenigen Details

 …

 𝐿𝑂𝐷 𝑥₁ = 0 → Höchste Stufe mit den meisten Details

(101)

6.3 Ansichts-Transformation

Fisheye View: Distance from Focus

 Berechnung, wie weit ein Punkt vom Fokuspunkt entfernt ist

 𝐷(𝑓, 𝑥), 𝑓 Fokuspunkt, 𝑥 Punkt

[Inspired by a lecture of J. Stasko]

(102)

6.3 Ansichts-Transformation

Fisheye View: Degree of Interest (DOI)

 Diese Funktion bestimmt, wie Elemente auf dem Bildschirm dargestellt werden (Transformation, Vergrößerung)

 𝐷𝑂𝐼 𝑓, 𝑥 = 𝐹 𝐿𝑂𝐷 𝑥 , 𝐷(𝑓, 𝑥)

 𝐹 steigt monoton mit dem 𝐿𝑂𝐷

 𝐹 fällt monoton mit dem Abstand 𝐷

 Typischerweise werden nur Elemente oberhalb eines Grenzwertes für DOI überhaupt angezeigt

 Mit dieser Technologie erhält man eine glatte Interpolation, wenn

der Benutzer weit vom Fokus entfernt ist.

(103)

6.3 Ansichts-Transformation

Fisheye View: Degree of Interest (DOI)

 Ursprünglich zur Darstellung von Baumartig strukturierten Datenbanken entwickelt

(104)

6.3 Ansichts-Transformation

Fisheye View Types

 Das Originalkonzept ist ein logisches, kein räumliches

 1992 stellten Sarkar und Brown „graphical fisheye views“ mit räumlicher Verzerrung vor

 Damit gibt es zwei Fisheye-Typen, die miteinander kombiniert werden können

 Logische Fisheye Views

 Graphical Fisheye Views (Verzerrung)

(105)

6.3 Ansichts-Transformation

Logische Fisheye Views

 Texte (1D)

 Dehnung und Stauchung von Textzeilen durch ändern der Fontgröße

[Greenberg, S., Gutwin, C., and Cockburn, A. 1996. Using Disortion-Oriented Displays to Support Workspace Awareness. In Proceedings of HCI on People and Computers XI M. A. Sasse, J.

Cunningham, and R. L. Winder, Eds. Springer-Verlag, London, 299-314.]

(106)

6.3 Ansichts-Transformation

Logische Fisheye Views

 Fisheye-Menues (2D)

 Der Fokus wird fixiert, wenn man auf der rechten Seite des Menues ist

 Demo:

http://www.cs.umd.edu/hcil/fisheyemenu/

[Bederson, B. B. Fisheye Menus. Proceedings of ACM Conference on User Interface Software and Technology (UIST 2000), pp. 217-226, ACM Press]

(107)

6.3 Ansichts-Transformation

Logische Fisheye Views

 Knoten in Netzwerken (3D)

[Greenberg, S., Gutwin, C., and Cockburn, A. 1996. Using Disortion-Oriented Displays to Support Workspace Awareness. In Proceedings of HCI on People and Computers XI M. A. Sasse, J.

Cunningham, and R. L. Winder, Eds. Springer-Verlag, London, 299-314.]

(108)

6.3 Ansichts-Transformation

Logische Fisheye Views

 Cone Trees (3D)

 Focus mit der DOI-Funktion von Furnas

(109)

6.3 Ansichts-Transformation

Graphical Fisheye Views

Transformation function Magnification function

(110)

6.3 Ansichts-Transformation

Graphical Fisheye Views

(111)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Graphen (2D)

[M. Sarkar and M.H. Brown, "Graphical Fisheye Views of Graphs." In Human Factors in Computing Systems: Proceedings of the CHI '92 Conference. New York: ACM, 1992.]

(112)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 3D Verzerrung

[M. S. T. Carpendale, D. J. Cowperthwaite, and F. D. Fracchia: Extending Distortion Viewing Techniques from 2D to 3D Data in IEEE Computer Graphics and Applications, Special Issue on Information

Visualization IEEE Computer Society Press, Vol. 17(4) pages 42 - 51, July 1997]

(113)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Polyfocal Displays: mehrere Fokuspunkte

[Y.K. Leung and M.D. Apperley. A Review and Taxonomy of Distortion-Oriented Presentation Techniques.

ToCHI ‘94]

(114)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Polyfocal Displays: mehrere Fokuspunkte auf Gittern

[Y.K. Leung and M.D. Apperley. A Review and Taxonomy of Distortion-Oriented Presentation Techniques.

ToCHI ‘94]

(115)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Polyfocal Displays: 1D Verzerrung von 2D Bäumen

[T. Munzner, F. Guimbretiere, S. Tasiran, L. Zhang, and Y. Zhou. TreeJuxtaposer: Scalable Tree Comparison using Focus+Context with Guaranteed Visibility. SIGGRAPH 2003, published as ACM Transactions on Graphics 22(3), pages 453--462]

TreeJuxtaposer

(116)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Polyfocal Displays: mehrere Fokuspunkte in 3D

[M. S. T. Carpendale, D. J. Cowperthwaite, and F. D. Fracchia: Extending Distortion Viewing Techniques from 2D to 3D Data in IEEE Computer Graphics and Applications, Special Issue on Information

Visualization IEEE Computer Society Press, Vol. 17(4) pages 42 - 51, July 1997]

(117)

6.3 Ansichts-Transformation

Graphical Fisheye Views

 Polyfocal Displays: überlappende Transformation

 Eher von theoretischem Interesse

[http://www.cs.indiana.edu/%7Etkeahey/research/nlm/nlmTour.html]

(118)

6.3 Ansichts-Transformation

Bifokales Display

 Information wird auf einem Band dargestellt

 Perspektivische Darstellung:

 Zentrum parallel zum Benutzer

 Beiden Seiten werden schräg nach hinten laufend projiziert

Projection from 3D to 2D

(119)

6.3 Ansichts-Transformation

Bifokales Display

 Verzerrungsfunktionen

(120)

6.3 Ansichts-Transformation

Perspective Wall

 Perspektivische Wand stellt Umsetzung des Prinzips dar

[Mackinlay, Robertson, Card, Perspective Wall: Detail and context smoothly integrated, Proc. of CHI, ACM, 1991, 173-179]

(121)

6.3 Ansichts-Transformation

Perspective Wall

 Im Vergleich zum

Originalkonzept, wurden Transformation und

Vergößerung modifiziert

(122)

6.3 Ansichts-Transformation

Perspective Wall: Image-Browsing

 Hilfe bei Auswahl von Videos

 Anzeige von bis zu 5 Bilder pro Sekunde

 Schnelle Auswahl aus großer Sammlung

[Lam, Spence. Image Browsing – a space-time trade-off, Proc. of INTERACT, 1997, 611-612]

(123)

6.3 Ansichts-Transformation

Bifokales Display

 Dehnung nur in X-Richtung (1D)

 Dehnung in X- und Y-Richtung (2D)

(124)

6.3 Ansichts-Transformation

Bifokales Display: Umsetzung für das Londoner U-Bahnnetz

(125)

6.3 Ansichts-Transformation

Document Lens

[George G. Robertson, Jock D. Mackinlay, The document lens, Proceedings of the 6th annual ACM symposium on User interface software and technology, p.101-108, December 1993.]

 5 anstatt 3 Oberflächen werden für die Projektion verwendet

 Verbesserte Ausnutzung des Platzes verglichen mit „Perspective

Wall“

(126)

6.3 Ansichts-Transformation

(127)

6.3 Ansichts-Transformation

TableLens

 Tabellarische Darstellungen mit Histogrammen

 Nutzung des Prinzips der bifokalen Displays

 Performanz von Footballspielern

(128)

6.3 Ansichts-Transformation

TableLens

(129)

6.3 Ansichts-Transformation

Context-Preserving Map

[Ziegler, Keim, Copernicus:

Context-Preserving Engine for Route Navigation with Interactive User-modifiable Scaling, Proc EuroVis 2008]

 Nichtlineare lokale Vergrößerung

 Navigation