Institut für Visualisierung und Interaktive Systeme
Universität Stuttgart
Allmandring 19
D–70569 Stuttgart
Diplomarbeit Nr. 3486
Visualisierung von
Eye-Tracking-Daten auf der
Grundlage benutzerdefinierter
AOIs
Changsheng Qian
Studiengang: Informatik
Prüfer/in: Prof. Dr. Daniel Weiskopf
Betreuer/in: Dr. rer. nat. Michael Burch
Beginn am: 06.05.2013
Beendet am: 05.11.2013
CR-Nummer: H.1.2, H.3.3, H.4.0, H.5.2, I.3.3

Kurzfassung
Heute ist Eye-Tracking ein wichtiges Werkzeug bei den Kognitiven Wissenschaften. Mit Hilfe
von Eye-Tracking Systemen können die Interaktionen zwischen Menschen und Computer
aufgezeichnet und analysiert werden. Genauer gesagt können die Augenbewegungen wäh-
rend eines Explorationsprozesses einer Visualisierungstechnik aufgezeichnet werden. Dabei
fallen große Datenmengen bei der Durchführung von Eye-Tracking-Studien an, die sowohl
räumlicher als auch zeitlicher Natur sind. Die AOI Rivers bieten eine gute Möglichkeit, um
die dynamischen Verhaltensweisen von Probandengruppen zu beobachten. Hierbei kann man
gut erkennen, wie sich Blickanzahlen verändern und von welchen AOIs in welche anderen
AOIs sie sich bewegen. Dies wiederum ermöglicht eine bessere und entwirrte Sicht auf die
Daten.
Das Ziel dieser Diplomarbeit ist das AOI Rivers-Werkzeug zu erweitern, so dass weitere
Sichten für die Heat-Map, den Gaze-Plot und den angezeigten Stimulus dargestellt werden.
Des Weiteren soll die Interaktion zwischen den gewählten Daten aus Stimulus-, Heat-Map-,
und Gaze-Plot-Sicht und definierten AOIs ermöglicht werden. Für die Überkreuzungen in
den AOI Rivers soll ein Sortieralgorithmus entwickelt werden, sodass die Überkreuzungen in
den AOI Rivers reduziert bzw. minimiert werden. Schließlich wird die Abspeicherung der
benutzerdefinierten Ausschnitte der Daten für eine spätere Analyse ermöglicht.
3
Abstract
Eye-tracking is today an important tool in the cognitive sciences. By using eye-tracking
researchers can record and analyze the interactions between humans and computers. In
particular, the eye movements of study participants are recorded. This leads to large amounts
of data when conducting eye tracking studies that have both a spatial and a temporal nature.
The AOI Rivers offer a good opportunity to observe the dynamic behavior of groups of study
participants. Hereby we can easily explore, how the frequency of eye movements changed
over time, i.e. the number of views and from which AOIs they move from to which other
AOIs.
The goal of this diploma thesis is the development of visualization techniques for the views of
stimulus, heat map and gaze plot. Furthermore, the visualization tool supports the interactions
between the selected data from a given stimulus, heat map, and gaze plot and user-defined
AOIs. The number of river crosses and intersections in is reduced or minimized by some
crossing minimization algorithm. Finally, the storage of the user defined sections of data will
be supported to allow a later inspection of the already explored data without starting from
the beginning again.
4
Inhaltsverzeichnis
1 Einführung 11
2 Verwandte Arbeiten 13
2.1 Eye-Tracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.2 Eye-Tracking Visualisierung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.3 Theme-River . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.4 AOI Rivers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
3 Die Aufgabenstellung und das Konzept 27
3.1 Aufgabenstellung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
3.2 Das Implementierungskonzept . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
4 Die Implementierung 37
4.1 Darstellung der Eye-Tracking Daten als Stimulus, Heatmap und Gazeplot . . . 37
4.2 Darstellung der benutzerdefinierten AOIs in AOI-River . . . . . . . . . . . . . . 40
4.3 Minimierung der Flussüberkreuzungen in AOIs . . . . . . . . . . . . . . . . . . 42
4.4 Abspeicherung der benutzerdefinierten ausgeschnittenen Daten . . . . . . . . . 44
5 Anwendungsbeispiel für AOI-River 47
5.1 Vorstellungen möglicher Anwendungen . . . . . . . . . . . . . . . . . . . . . . . 47
5.2 Anwendung der Eye-Tracking-Daten in AOI-River . . . . . . . . . . . . . . . . . 48
6 Zusammenfassung und Ausblick 55
6.1 Zusammenfassung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
6.2 Ausblick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Literaturverzeichnis 57
5
Abbildungsverzeichnis
2.1 Elektrookulographie [ElN] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2 Videobasierte Eye-Tracking Systeme [VBS] . . . . . . . . . . . . . . . . . . . . . 14
2.3 Ein Beispiel von Fixationen und Sakkaden über einem Text. Dies ist eine typi-
sche Art der Augenbewegung während dem Lesen [EyT] . . . . . . . . . . . . . 15
2.4 Es zeigt den visuellen dorsalen Strom(grün) und ventralen Strom(lila).Ein
großer Teil der menschlichen Hirnrinde ist an der visuellen Wahrnehmung
beteiligt. [ViP] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.5 Visualisierungsprozess [KGV] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.6 Eine Beispieldatei für Eye-Tracking Daten . . . . . . . . . . . . . . . . . . . . . . 18
2.7 Ein Beispiel des traditionalen Node-Link-Baums [ETO11] . . . . . . . . . . . . . 19
2.8 Ein Beispiel des orthogonalen Node-Link-Baumes [ETO11] . . . . . . . . . . . . 19
2.9 Ein Beispiel des radialen Node-Link-Baum [ETO11] . . . . . . . . . . . . . . . . 20
2.10 Eine typische Heat-Map: Die häufig betrachteten Bereiche werden mit wärme-
rer Farbe markiert. [GSE12] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
2.11 Eine Heat-Map für Eye-Tracking Daten aus einer Benutzerstudie, die verschie-
dene Knoten-Kanten-Diagramme für Hierarchien untersucht. [ETO11] . . . . . 22
2.12 Ein Beispiel eines Gaze-Plots [ETO11]: Viele Studienteilnehmer führen dazu,
dass der Gaze-Plot viele übereinandergezeichnete Polylinien enthält, die zu
Visual Clutter führen und somit die Darstellung unbrauchbar machen. . . . . . 23
2.13 Ein Beispiel der Theme-River-Visualisierung [ThR00] . . . . . . . . . . . . . . . 24
2.14 AOI River Visualisierung [AOI13] . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.15 AOI-Rivers mit Zu- und Abflüssen [AOI13] . . . . . . . . . . . . . . . . . . . . . 26
3.1 Beispiel der Eye-Tracking Daten. Der rote Bereich beschreibt die Metainforma-
tion während Eye-Tracking. Der lila Bereich ist die Auflösung des Eye-Tracking
Bereichs. Der untere grüne Bereich enthält die Informationen der Augenbewe-
gung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
3.2 Das Konzept für die Darstellung der Eye-Tracking Daten als Stimulus, Heatmap
und Gazeplot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
3.3 Das Konzept für die Darstellung der benutzerdefinierten AOIs . . . . . . . . . . 33
3.4 Beispiel der Flussüberkreuzungen in AOI-River. [EdT12] . . . . . . . . . . . . . 34
3.5 Das Konzept für die Berechnung der minimalen Anzahl der Flussüberkreuzungen 35
3.6 Drei wichtige Eigenschaften der Farben. [Far] . . . . . . . . . . . . . . . . . . . . 36
4.1 Stimuliverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
4.2 Auswahlkästchen für den Stimulus, die Heatmap und den Gazeplot (Roter
Bereich) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
6
4.3 Darstellung eines Stimulus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.4 Darstellung einer Heatmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
4.5 Benutzeroberfläche des Visualisierungswerkzeugs . . . . . . . . . . . . . . . . . 39
4.6 Definierung der gewünschten AOIs . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.7 Aufhebung der ausgewählten AOIs . . . . . . . . . . . . . . . . . . . . . . . . . 40
4.8 Die Darstellung der benutzerdefinierten AOIs . . . . . . . . . . . . . . . . . . . 41
4.9 Die erneute Darstellung der benutzerdefinierten AOIs . . . . . . . . . . . . . . . 42
4.10 Position der Taste für den Optimierungsalgorithmus . . . . . . . . . . . . . . . 42
4.11 Position der Taste für Abspeicherung der benutzerdifinierten Daten . . . . . . . 44
4.12 Auswahlfenster für benutzerdefiniertes Intervall . . . . . . . . . . . . . . . . . . 44
4.13 Auswahl des Speicherziels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
4.14 Generierte benutzerdefinierte Dateien . . . . . . . . . . . . . . . . . . . . . . . . 46
5.1 Darstellung des ausgewählten Stimulus . . . . . . . . . . . . . . . . . . . . . . . 48
5.2 Darstellung der berechneten Heatmap . . . . . . . . . . . . . . . . . . . . . . . . 49
5.3 Darstellung des berechneten Gazeplot . . . . . . . . . . . . . . . . . . . . . . . . 49
5.4 Darstellung aller Visualsierungsmethoden, wobei Gazeplot an der Oberfläche
steht und Stimulus an der Unterfläche steht . . . . . . . . . . . . . . . . . . . . . 50
5.5 Flussdarstellung der benutzerdefinierten AOIs in AOI-River . . . . . . . . . . . 51
5.6 Beispiel der Flussüberkreuzungen . . . . . . . . . . . . . . . . . . . . . . . . . . 52
5.7 FlowRiver-Darstellung vor Optimierung . . . . . . . . . . . . . . . . . . . . . . 53
5.8 FlowRiver-Darstellung nach Optimierung . . . . . . . . . . . . . . . . . . . . . . 53
7
Tabellenverzeichnis
3.1 Elektrookulographie [ElN] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
3.2 Videobasierte Eye-Tracking Systeme [VBS] . . . . . . . . . . . . . . . . . . . . . 32
8
Verzeichnis der Listings
4.1 Alle Kombinationen der AOIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
4.2 Berechnung der Anzahl der Flussüberkreuzungen . . . . . . . . . . . . . . . . . 43
9

1 Einführung
Die Forschung des Eye-Tracking(Augenbewegung) wurde bereits im 19. Jahrhundert ange-
fangen. Damals konnte die Beobachtung der Augenbewegung nur durch sehr beschränkte
Mittel durchgeführt werden. Heute ist Eye-Tracking ein wichtiges Werkzeug bei den Kogniti-
ven Wissenschaften. Durch Eye-Tracking können die Interaktionen zwischen Menschen und
Computer aufgezeichnet und analysiert werden. [EoB04]
Wegen der sehr schnell steigenden Rechnerleistungen ist es möglich, sehr große Datenmenge
in Echtzeit zu generieren. Darüber hinaus steigen auch die von Displays bereitgestellten Auf-
lösungen und Abmessungen, was gerade im Bereich des Eye Tracking zu noch genaueren und
zu noch größeren Datenmengen führt. Die Visualisierungstechniken für Eye-Tracking-Daten
sind dagegen noch zu schwach und es gibt noch zu wenig Forschung in diesem Bereich. Meist
werden Scan-Path oder Heat-Map-Visualisierungen eingesetzt, um die räumlich-zeitlichen
Daten zu analysieren. Dies bietet zwar einen schnellen Überblick über die Augenbewegungen
des oder der Probanden an, allerdings leiden solche Diagramme entweder unter Visual Clutter
oder aggregieren die Zeitdimension so stark, dass man keine sich über die Zeit variierenden
Schlüsse aus den Daten ziehen kann. Des Weiteren sind die beiden Visualisierungstechniken
noch mangelhaft was z.B. die Analyse einer größeren Anzahl von Probanden betrifft. [KGV]
Bei einem Gaze Plot werden beispielsweise immer mehr farbkodierte Polylinien übereinander
gezeichnet, was dazu führt, dass die Darstellung ohne geschickte Interaktion unlesbarer
wird.
Es fallen große Datenmengen bei der Durchführung von Eye-Tracking-Studien an, die sowohl
räumlicher als auch zeitlicher Natur sind. Aus technischer Sicht lassen sich beliebig viele
solcher Trajektorien aufzeichnen. Die AOI (Area of Interest) Rivers bieten eine gute Möglich-
keit, um die dynamischen Verhaltensweisen von Probandengruppen zu beobachten [AOI13].
Hierbei kann man gut erkennen, wie sich Blickanzahlen verändern und von welchen AOIs
in welche anderen AOIs sie sich bewegen. Allerdings lässt sich die Technik noch weiter
verbessern sowie mit Interaktionstechniken ausstatten, die es erlauben, die neue Technik mit
bereits existierenden wie Heat-Maps und Gaze-Plots interaktiv zu kombinieren. Darüber
hinaus soll auch der analysierte Stimulus angezeigt werden, um die AOI Rivers damit in
Zusammenhang bringen zu können. Dies ermöglicht es dem Betrachter, die Daten sowohl im
Stimulus als auch als neue Darstellung des AOI Rivers gleichzeitig zu betrachten.
Das Ziel dieser Diplomarbeit ist das AOI-River-Werkzeug zu erweitern, dass weitere Sichten
für die Heat-Map, den Gaze-Plot und den angezeigten Stimulus dargestellt werden. Des
Weiteren soll die Interaktion zwischen den gewählten Daten aus Stimulus-, Heat-Map-, und
Gaze-Plot-Sicht und definierten AOIs ermöglicht werden. Interaktion auf allen Sichten soll
integriert werden, um mittels Brushing und Linking dafür zu sorgen, dass der Analysierende
11
1 Einführung
in allen Sichten Veränderungen machen kann, die dann auch in allen Sichten dargestellt wer-
den. Speziell für die Überkreuzungen in den AOI Rivers soll ein Sotieralgorithmus entwickelt
werden, sodass die Überkreuzungen in den AOI Rivers minimiert werden und somit die
Darstellung weiter verbessert wird was den Grad des Visual Clutter betrifft.
Gliederung
Die vorliegende Arbeit ist in folgender Weise gegliedert:
Kapitel 2 – Verwandte Arbeiten gibt einen Überblick über die bestehenden Visualisierungs-
techniken und Verfahren, auf deren Grundlagen diese Diplomarbeit aufgebaut wird.
Kapitel 3 –Die Aufgabenstellung und das Konzept präsentiert zuerst die Aufgaben-stellung
dieser Diplomarbeit und danach wird das Konzept für die Aufgabenstellung vorgestellt.
Kapitel 4 – Die Implementierung beschreibt die Realisierung der vorgestellten Kon-epte.
Kapitel 5 – Anwendungsbeispiel für AOI-River stellt die entwickelte Implementierung
anhand eines Beispiels vor.
Kapitel 6 – Zusammenfassung und Ausblick In diesem Kapitel werden die Ergebnisse der
Arbeit zusammengefasst und ein Ausblick auf mögliche Verbesserungen gegeben.
12
2 Verwandte Arbeiten
2.1 Eye-Tracking
Die Untersuchung der Augenbewegung ist seit über 100 Jahren Gegenstand der Forschung.
In früheren Forschungen wäre die Augenbetrachtung wegen sehr eingeschränkten techni-
schen Mitteln fast nicht möglich gewesen. Die Augenbewegung wurde meistens mit einem
Spiegel, Teleskop oder Guckloch beobachtet. Eine andere Methode ist die Untersuchung der
Augenbewegung durch einen Beobachter. Solche Methoden sind aber zweifelhaft, da die
Bewegungen oder die Eigenschaften der Augen nicht richtig und genau genug analysiert
werden können und auch nicht so leicht aufgezeichnet werden können. Der bedeutendste und
größte Fortschritt ist deshalb die Erfindung der mechanischen Vorrichtungen, die konsistent
und dauerhaft die Augenbewegung aufzeichnen und sehr viel zuverlässiger arbeiten als die
herkömmliche alte Methode.
Im Laufe der Zeit wurden vielen weitere Methoden entwickelt. Am Anfang des 20. Jahrhun-
derts wurden die Augen durch Lichtreflexion auf der Augenhornhaut analysiert und kurz
danach wurde die Methode verwendet, das Aufzeichnen der Augenbewegung durch Auf-
nahme von bewegten Bildern durchzuführen. In der Mitte des 20. Jahrhunderts beobachtete
Paul Fitts und seine Kollege die Augenbewegung von Piloten während der Flugzeugladung.
Sie untersuchten anhand eines Fotoapparates, welche Bereiche der Cockpit-Steuerung die
Piloten am meistens fokussieren. Diese Studie ist die erste Anwendung einer komplizierteren
Eye-Tracking Methode. In den frühen 1970er Jahren wurde eine Vielzahl von Techniken
entwickelt. Die Augen wurden mit einer Fernsehkamera gescannt und diese Daten wurden
dann mathematisch evaluiert. Die Daten werden elektronisch erfasst und lokal bearbeitet.
Diese Methode ist sehr empfindlich und benötigt hohen Kontrast. [EoB04]
Aktuell verwendet man auch einige neue Techniken, je nach Befestigungsart, Funktionsweise
oder solche Kriterien werden die Techniken klassifiziert. Hier werden drei bekannte Techniken
vorgestellt.
• Elektrookulographie
Die Elektrookulographie(EOG) misst die elektrische Spannung zwischen zwei Elektroden
im Bereich der Netzhaut, die negativ gegenüber der Hornhaut ist. Die Elektroden werden
seitlich auf die Haut der Augen geklebt, somit werden die horizontalen Augenbewegungen
mithilfe der Spannungsänderung zwischen beiden Elektroden gemessen. Die Auf- und Ab-
bewegungen der Augen können genauso durch die auf die ober- und unterhalb der Augen
angebrachten Elektroden gemessen werden. Die Messwerte können durch einen Computer
gespeichert und ausgewertet werden. [EOG]
13
2 Verwandte Arbeiten
Abbildung 2.1: Elektrookulographie [ElN]
• Kontaktlinsenbasierte Systeme
Dieses Verfahren verwendet die Kontaktlinsen, die mit Spulen versehen sind. Die Spulen
können ein externes Magnetfeld beeinflussen. Die Auswirkungen auf dem Magnetfeld können
dann analysiert werden und somit lassen diese erkennen, wie die Augen sich bewegt haben.
Die Nachteile dieses Verfahren sind, dass die Kontaktlinsen für jede Person individuell
maßangefertigt werden müssen und unangenehm zum Tragen sind.
• Videobasierte Systeme
Videobasierte Systeme sind heutzutage die am häufigsten verwendeten Techniken. Eine
Kamera ist auf ein oder beide Augen fixiert und zeichnet die Augenbewegung auf. Die meisten
modernen Systeme benutzen Infrarot oder Nahinfrarot und extrahieren die Pupillenmitte,
um die Hornhautreflexion zu erstellen, damit die Blickrichtung auf den fokussierten Bereiche
berechnet werden kann.
Abbildung 2.2: Videobasierte Eye-Tracking Systeme [VBS]
14
2.2 Eye-Tracking Visualisierung
Eye-Tracking Daten bestehen aus Fixationen auf einzelne Punkte und schnelle, sprunghafte
Bewegungen zwischen den Punkten, nämlich den Sakkaden. Die Augenbewegung kann mit
Absicht oder ohne Absicht sein. Das Eye-Tracking bietet die Möglichkeiten an, das Sehen
eines Probanden zu analysieren und auszuwerten. Oft wird angenommen, dass die Fixationen
mit dem Denkprozess der Testperson stark verbunden sind.
Abbildung 2.3: Ein Beispiel von Fixationen und Sakkaden über einem Text. Dies ist eine
typische Art der Augenbewegung während dem Lesen [EyT]
Mit Eye-Tracking können zum Beispiel Werbungen besser designed und entworfen wer-
den. Es ist leicht herauszufinden, welche Stelle oder Informationen meistens gesucht und
betrachtet werden. Eye- Tracking kann auch validieren, ob den Zuschauern die richtigen und
ausreichenden Informationen schnell mitgeteilt worden sind. Dies kann sich der Designer zu
Nutze machen, um eine verbesserte Darstellung zu erzeugen. Dies wiederum kann dann das
Interesse der Zuschauer wecken und steigern.
2.2 Eye-Tracking Visualisierung
90% der menschlichen Wahrnehmung sind werden über den visuellen Sinn aufgenommen.
Die visuelle Wahrnehmung bedeutet Empfang und Verarbeitung der durch die Augen aufge-
nommen Reizen. Die Verarbeitung relevanter Informationen, Erkennung von Elementen und
die Interpretation werden in Gehirn durch den Vergleich mit bereits gespeicherter Information
durchgeführt. Der Mensch nutzt zum Vergleich deshalb stets Informationen, die er erlebt hat
und somit in seiner Erinnerung liegen.
15
2 Verwandte Arbeiten
Abbildung 2.4: Es zeigt den visuellen dorsalen Strom(grün) und ventralen Strom(lila).Ein
großer Teil der menschlichen Hirnrinde ist an der visuellen Wahrnehmung
beteiligt. [ViP]
Im Gebiet der Baumvisualisierung werden Eye-Tracking Techniken so eingesetzt, dass die
typisch hierarchisch gestellten Explorationsaufgaben für die visuelle Exploration durch Über-
prüfung der statischen Baumstruktur identifiziert werden. Ein Eye-Tracking Experiment un-
tersucht einen Node-Link-Baum mit traditionellen, orthogonalen und radialen Layout-Typen
und vergleicht eine Auswahl von solchen Typen untereinander. Knoten-Kanten-Diagramme
sind eine effektive und beliebte Visualisierungsmethode für die Darstellung von hierarchi-
schen Strukturen und für Objektbeziehungen. Wegen vielen leeren Räumen zwischen den
Verbindungen muss man zwischen der strukturellen Klarheit und der Raumausnutzung
ausgleichen. [AOI13] Knoten-Kanten-Diagramme zeigen hierbei einen hohen Grad an struk-
tureller Klarheit während etwa Treemaps zwar den Raum sehr gut ausnutzen, aber die
strukturelle Klarheit sehr darunter leidet.
Während des Visualisierungsvorgangs liegen zunächst nur die reine Daten vor. Die Daten
werden dem Betrachter durch ausgewählte Visualisierungstechniken, Farbkordierungen und
geometrische Anordnungen so präsentiert, dass die gewünschte Information übertragen
wird. Die sogenannten Stimuli werden den Studienteilnehmern jeweils einzeln nacheinander
in der Studie präsentiert und die Frage nach dem kleinsten gemeinsamen Vorfahren einer
Zahl markierter Blattknoten muss möglichst korrekt beantwortet werden. Hierbei führt der
Betrachter eine Augenbewegung durch, welche für diese Arbeit von besonderem Interesse
ist.
Beim Eye-Tracking werden Aspekte der Human-Computer-Interaktion untersucht, d.h. wie
interagiert ein Betrachter visuell mit dem dargestellten Bild. Diese Interaktion geschieht
jedoch nur einseitig, da nur die Visualisierung einen Einfluss auf die Augenbewegungen hat,
nicht jedoch die Augenbewegungen auf die Visualisierung.
16
2.2 Eye-Tracking Visualisierung
In dieser Diplomarbeit werden Node-Link-Baum Diagramme als Stimuli betrachtet und Heat-
map und Gaze-Plot-Visualisierungstechniken eingesetzt, um eine einfache Sicht auf die Eye
Tracking Daten zu liefern. Danach werden die AOI Rivers verwendet, um eine weitere Sicht
auf die Daten zu erhalten. Zunächst werden die Rohdaten der Eye-Tracking Studie erklärt und
danach werden die bereits existierenden und neu implementierten Visualisierungstechniken
näher beschrieben. Auch die Interaktionstechniken werden detailliert erklärt.
Abbildung 2.5: Visualisierungsprozess [KGV]
2.2.1 Eye-Tracking Daten
Die Rohdaten von Eye-Tracking Systemen werden durch Eye-Tracking Studien gesammelt.
Hier wird die Methode für die Aufnahme der Daten nicht berücksichtigt, sondern nur der
Aufbau des Datenformats wird erläutert.
Die in dieser Diplomarbeit verwendeten Eye-Tracking Daten werden erst nach Klassifizierung
der Stimulitypen auf drei Verzeichnisse verteilt, nämlich ORT für Orthogonal, RAD für Radial
und TRA für Traditional. In jeder Kategorie bestehen wiederum die Daten von 38 Teilnehmern.
Der erste Abschnitt der Datendatei beschreibt die Informationen der Eye-Tracking Systemum-
gebung wie etwa das Betriebssystem, den Benutzername, das Aufnahmedatum und die
Uhrzeit, die Systemauflösung, um nur die wichtigsten Parameter zu nennen. Im zweiten
Abschnitt werden die Testdaten aufgelistet, die aus Medianname, Anfangszeitpunkt, Koor-
dinaten (X-Achsenwerte und Y-Achsenwerte) und der Zeitdauer bestehen und in 5 Spalten
auflistet werden. Der zweite Abschnitt wird auch als einzelne Datei ohne Kopfinformationen
existieren.
17
2 Verwandte Arbeiten
Abbildung 2.6: Eine Beispieldatei für Eye-Tracking Daten
2.2.2 Visualisierungstechniken
• Node-Link-Baum
Eye-Tracking Stimuli sind in Rahmen dieser Arbeit Node-Link-Baumdiagramme. Ein speziel-
les Modell wird verwendet, um eine bestimmte Anzahl von zufälligen Bäumen mit ähnlichen
statistischen Eigenschaften zu erzeugen. Dies ist wichtig, um relevante Aussagen und Hy-
pothesen über die dargestellten Visualisierungen zu treffen und um diese später statistisch
miteinander vergleichen zu können. Die hierarchischen Daten werden mit einem stochas-
tischen Algorithmus generiert, dem sogenannten Barabasi-Albert-Modell. Drei Parameter
spielen hier eine wichtige Rolle, nämlich die maximale Baumtiefe, die maximale Verzweigung
und die maximale Knotenanzahl.
Die Eye-Tracking Studie verwendet drei Arten von Node-Link-Baum Diagrammen: traditional,
orthogonal und radial. Diese drei Arten von Node-Link-Baum Diagrammen werden häufig
verwendet, sind einfach zu implementieren und erlauben eine einfach zu designende Eye-
Tracking Studie.
Beim traditionalen Baumdiagramm werden alle Blattknoten eines Baumes auf einer hori-
zontalen Linie positioniert. Die x-Koordinate der Wurzelknoten jedes Teilbaums wird in der
18
2.2 Eye-Tracking Visualisierung
Mitte des horizontalen Raums positioniert und die y-Koordinate ist nur von der Tiefe des
Wurzelknoten jedes Unterbaumes abhängig. Nach dem rekursiven Durchlauf erhalten wir
dann einen traditionalen Node-Link-Baum. [ETO11]
Abbildung 2.7: Ein Beispiel des traditionalen Node-Link-Baums [ETO11]
Der Aufbau des orthogonalen Node-Link-Baums ist genauso wie beim traditionalen Node-
Link-Baum. Der einzige Unterschied liegt bei den Kanten. Die Kanten zwischen beiden
Knoten sind mit einem neunzig Grad Winkel definiert. Bei gleichen Eye-Tracking Daten haben
orthogonale- und traditionelle Node-Link-Bäume genau die gleichen Koordinaten was ihre
Knotenposition betrifft, nur die Form der Kanten unterscheidet sie voneinander.
Abbildung 2.8: Ein Beispiel des orthogonalen Node-Link-Baumes [ETO11]
19
2 Verwandte Arbeiten
Der radiale Node-Link-Baum verteilt die Knoten auf konzentrischen Kreisen gemäß der Baum-
tiefe. Die Blattknoten werden äquidistant zum Kreisumfang abgebildet. Der Wurzelknoten
jeder Teilbaums befindet sich in der Mitte des entsprechenden Kreissektors.
Abbildung 2.9: Ein Beispiel des radialen Node-Link-Baum [ETO11]
• Heat-Map
Die Heat-Map ist eine graphische Datendarstellung, wobei die einzelnen Werte mit dem
Farbspektrum in einer Matrix dargestellt werden. Die Matrix ist zwei-dimensional und kann
große Datenmengen leicht und übersichtlich repräsentieren. Die verschiedenen Bereiche
werden anhand der Betrachtungshäufigkeit mit verschiedenen Farben abgebildet. Die Farben
sind normalerweise von blau nach rot. Je länger der Bereich betrachtet wird, desto wärmer ist
die Farbe. Abbildung 2.10 zeigt eine typische Heat-Map.
Eine Heat-Map ist eine Visualisierungstechnik für die Analyse der Eye-Tracking Daten. Sie
bietet einen schnellen Überblick über die Verteilung der Eye-Tracking Daten auf einem
Stimulus. Generell werden halbtransparente Farben verwendet, um die Vergleichsmöglichkeit
mit dem Hintergrund (Stimulus) anzubieten. [VoE07]
20
2.2 Eye-Tracking Visualisierung
Mithilfe der Heat-Map können AOIs leicht erkennt werden, d.h. welche Bereiche am häufigs-
ten betrachtet werden. Allerdings lässt die Heat-Map den zeitlichen Verlauf der Eye-Tracking
Daten nicht analysieren, weil sie sowohl über die Studienteilnehmer als auch über die Zeit
aggregiert. Aus diesem Grund wurden beispielsweise animierte Heat-Maps entwickelt, d.h.
der zeitliche Verlauf kann abgespielt werden. Obwohl dies zwar eine Einsicht in die Zeit-
dimension und die fixierten Bereiche liefert, hat eine solche Animation den Nachteil, dass
der Betrachter einzelne Zeitschritte nicht gut visuell vergleichen kann, weil er sich sehr
viel merken muss. Abbildung 2.11 zeigt eine Heat-Map für die Eye-Tracking Daten aus der
Node-Link-Baumdiagramm Studie. Die einzelnen AOIs sind mit schwarzen Rechtecken um-
randet und durchnummeriert. Eine solche Annotation soll im Rahmen dieser Arbeit interaktiv
möglich sein.
Abbildung 2.10: Eine typische Heat-Map: Die häufig betrachteten Bereiche werden mit wär-
merer Farbe markiert. [GSE12]
21
2 Verwandte Arbeiten
Abbildung 2.11: Eine Heat-Map für Eye-Tracking Daten aus einer Benutzerstudie, die ver-
schiedene Knoten-Kanten-Diagramme für Hierarchien untersucht. [ETO11]
• Gaze-Plot
Eine Gaze-Plot-Visualisierung stellt die Fixationspunkte in der Reihenfolge der Betrachtung
dar. Die Aufzeichnung erfolgt durch die Augenbewegung der einzelnen Studienteilnehmer
und spiegelt somit das Ergebnis der Eye-Tracking Studie in Form von farbkodierten Poly-
linien wider. Die einzelnen Fixationspunkte werden als ein Kreis dargestellt. Die Folge der
Blickpunkte wird zusätzlich mit farbigen Linien zwischen aufeinanderfolgenden Punkten
markiert. Abbildung 2.12 zeigt ein Beispiel eines Gaze-Plots aus der Eye Tracking Studie.
Gaze-Plots haben einen großen Nachteil. Sie zeigen zwar die zeitliche Abfolge und die
Fixationspunkte im Raum, sie leiden jedoch unter dem Problem des Visual Clutters, d.h.
viele solcher Polylinien führen zwangsläufig dazu, dass es viele Linienkreuzungen gibt und
somit der Betrachter nicht mehr in der Lage ist, einzelne Probanden zu analysieren. Auch ein
allgemeiner Trend ist nicht mehr erkennbar. Hat man viele Studienteilnehmer und möchte
diese in einem Gaze Plot darstellen, so sieht man letztendlich, wie in einer Heat-Map nur
noch die Hot Spots, d.h. die Bereiche, die von größerem Interesse für die visuelle Analyse
eines Stimulus sind. Aus diesem Grund wurden auch die AOI Rivers entwickelt. Diese
erlauben eine bessere Analyse der zeitbasierten Fixationshäufigkeiten zusammen mit den
dazugehörigen Areas of Interest. Allerdings fehlten bisher geeignete Interaktionstechniken,
um zwischen mehreren Sichten hin- und her zu wechseln, also etwa zwischen einem Gaze-Plot,
dem Stimulus und den AOI Rivers. Diese Lücke soll unter anderem in dieser Diplomarbeit
geschlossen werden.
22
2.3 Theme-River
Abbildung 2.12: Ein Beispiel eines Gaze-Plots [ETO11]: Viele Studienteilnehmer führen dazu,
dass der Gaze-Plot viele übereinandergezeichnete Polylinien enthält, die zu
Visual Clutter führen und somit die Darstellung unbrauchbar machen.
2.3 Theme-River
Es gibt bereits sehr viele Informationsvisualisierungssysteme, wie Envision, BEAD, Lyber-
World and SPIRE, aber solche Systeme konzentrieren sich auf die Änderungen von Dokumen-
ten. Man interessiert sich sehr oft für die thematischen Änderungen im Zeitverlauf innerhalb
einer Sammlung von Dokumenten. Das Ziel der Visualisierung von explorativen Informatio-
nen ist es, alle thematischen Änderungsmerkmale, die bei der Auswertung der Dokumente
von Interesse sind, einfach zu erkennen. Theme-River ist ein Prototypsystem. Das System
wurde von Havre et al. [ThR00] entwickelt. Dieses System visualisiert die thematischen
Variationen im Zeitablauf innerhalb einer großen Sammlung von Dokumenten.
Die zentrale Idee des Theme-Rivers ist dabei die chronologische Wiedergabe der Dokumen-
tensammlung mithilfe der Metapher eines Flusses. Jedes Thema, das im Dokumentenkorpus
enthalten ist, wird dazu als separater Strom dargestellt. Indem alle Ströme symmetrisch um
eine Linie parallel zur x-Achse angeordnet werden, bilden sie zusammen den Gesamtfluss der
Visualisierung. Eine farbliche Trennung der Ströme hilft bei der Unterscheidung der einzelnen
Themenverläufe. Die Anzahl der Dokumente zu einem bestimmten Thema wird durch die
Weite des Stromes an der entsprechenden Stelle des Flusses wiedergegeben. Je nach Häufig-
keit der einzelnen Themen kann die Ausdehnung des Gesamtflusses somit zu verschiedenen
23
2 Verwandte Arbeiten
Zeitpunkten stark variieren und führt letztlich zu der charakteristischen Darstellung einer
ThemeRiver-Visualisierung. [EdT12]
Mit anderen Worten: “River” fließt von links nach rechts im Zeitablauf. D.h. die x-Achse
repräsentiert den zeitlichen Verlauf. Die Darstellung der thematischen Änderungen verändert
sich mit der Zeit bzw. mit der x-Achse. Ein Theme-River besteht aus Strömen. Die Breite
der Ströme ist abhängig von den zeitlichen Veränderungen der dargestellten Häufigkei-
ten. Die zeitlichen veränderten Breiten stellen die thematische Stärke der Änderungen von
zugehörigen Dokumenten dar.
Abbildung 2.13: Ein Beispiel der Theme-River-Visualisierung [ThR00]
Theme-River bietet dem Anwender eine Makro-View auf thematische Änderungen in einer
Sammlung von Dokumenten über eine serielle Dimension. Theme-River liefert eine intuitive
Visualisierung zur Erkennung großer Veränderungen, der sogenannte Macro-View, und ist
unabhängig von der Anzahl der Dokumente.
Die visuelle Metapher des Theme-River ist in dieser Diplomarbeit eine wichtige und zentrale
Visualisierungstechnik für die zeitliche Darstellung der Eye-Tracking Daten. Die Theme-
River sind auch Bestandteil der AOI Rivers, allerdings können AOI Rivers auch Transitionen,
Mergings und Splittings zwischen den einzelnen Flüssen darstellen. Die AOI Rivers Technik
wird im nächsten Abschnitt näher erläutert.
24
2.4 AOI Rivers
2.4 AOI Rivers
Während der Analyse von Eye-Gaze-Trajectories führt eine große Menge Gaze Plots zu
vielen visuellen Clutter. Dies habe ich bereits im vorherigen Kapitel diskutiert. Die Eye-
Tracking Daten zeigen eine komplexe räumliche und zeitliche Struktur, man spricht deshalb
auch von spatio-temporal Daten. Um das Problem des Visual Clutters zu lösen, wird die
sogenannte AOI-Rivers-Technik eingeführt. Das AOI Rivers Werkzeug ist ein interaktives
Visualisierungsverfahren zur Untersuchung der zeitabhängigen Fixationsfrequenzen, der
AOI-Übergänge und der Reihenfolge der Fixationen der Augenbewegungen in Areas of
Interest (AOI) in einem angezeigten Stimulus eines Eye-Tracking Experimentes. [AOI13]
Abbildung 2.14: AOI River Visualisierung [AOI13]
Eine AOI kann auf Verlangen des Benutzer definiert werden. Dies hat dann eine automatische
aktualisierte Darstellung der AOI Rivers zur Folge, die die Anzahl der Fixationspunkte der
AOIs im Zeitablauf zeigt. Da dieses interaktive Feature in der Diplomarbeit von Andreas Kull
noch nicht implementiert wurde, ist auch dies Gegenstand dieser Diplomarbeit. Der Benutzer
kann interaktiv zwischen den Sichten hin- und herwechseln, d.h. AOIs können interaktiv
annotiert werden. Diese werden dann als AOI-Rivers angezeigt. Wählt man einen AOI-River
aus, so wird die zugehörige AOI im Eye Tracking Stimulus zusätzlich hervorgehoben. Dies
erlaubt dem Betrachter eine verbesserte Analyse der Eye-Tracking Daten.
Die AOI-Rivers basieren zunächst auf der Darstellung der Theme-River. Im Vergleich zum
Theme-River können AOI-Rivers geteilt, verschmolzen und auch mit Zuflüssen und Abflüssen
erweitert werden.
25
2 Verwandte Arbeiten
Abbildung 2.15: AOI-Rivers mit Zu- und Abflüssen [AOI13]
Für die Visualisierung der AOI Rivers verwenden wir zuerst eine gestapelte Darstellung
der einzelnen zeitlich variierenden Häufigkeiten. Aus ästhetischen Gründen bilden wir eine
symmetrische Abbildung um eine horizontale in der Mitte platzierten Linie. Danach ver-
wenden wir die in der Datenmenge gegebene Reihenfolge für das Stapeln, d.h. die Zeile
der Übergangsmatrizen. Um einen angeschlossenen gekrümmten Umriss für jede zeitlich
variierende Häufigkeit zu erreichen, wird das Konzept der Interpolation eingesetzt. Neben
einer ästhetischen Qualität der Visualisierung muss auch eine realistische Abbildung der
Daten berechnet werden. [AOI13] Die Grundidee der AOI-Rivers kann in der Diplomarbeit
von Andreas Kull nachgelesen werden. In dieser Arbeit beschäftigen wir uns mit der Erweite-
rung um interaktive Features, wie etwa dem Brushing und Linking, d.h. es gibt verschiedene
Sichten, in denen jeweils Datenpunkte selektiert werden können (Brushing), die dann in
allen anderen Sichten hervorgehoben werden (Linking). Um dies zu gewährleisten, muss
ausgehend von einer AOI Annotation zunächst eine Folge von Transitionsmatrizen berechnet
werden, die dann in entsprechende AOI-Rivers visualisiert werden. Auch eine geeignete Sor-
tierung der AOI-Rivers wird im Rahmen dieser Arbeit erforscht. Als Kriterium wird hierbei
die Minimierung der Flusskreuzungen in den AOI-Rivers zugrunde gelegt.
26
3 Die Aufgabenstellung und das Konzept
Das Ziel dieser Diplomarbeit ist die Erweiterung des AOI Rivers Werkzeugs [EdT12] von
Andreas Kull und die benutzerdefinierter AOIs zu ermöglichen. Dabei soll weitere Funktionen
für die benutzerdefinierter AOIs entwickelt werden.
In diesem Kapital wird zuerst eine kurze Aufgabenstellung dieser Diplomarbeit vorgestellt.
Danach beschreibt die Implementierungskonzepte, wie genau die Aufgaben durchgeführt
werden.
3.1 Aufgabenstellung
Diese Diplomarbeit enthält fünf Aufgabenblöcke:
• Darstellung der weiteren Sichten für die Heatmap, den Gazeplot und den angezeigten
Stimulus
• Ermöglichung der von Benutzer interaktiv definierten AOIs und Aktualisierung der
AOI Rivers
• Entwickelung eines Layout-Algorithmus für Reduzierung der Überkreuzungen in den
AOI Rivers durch geschickte Sortierung
• Realisierung einer Optimierung der Farbzuordnung
• Abspeicherung der benutzerdefinierten ausgeschnittenen Daten
Die ersten drei Aufgaben sind miteinander verbunden und müssen aufeinander entwickelt
werden, weil die Aufgabe 2 das Ergebnis von Aufgabe 1 benötigt und die Aufgabe 3 das
Ergebnis von Aufgabe 2 benötigt. Die Implementierungen sind allerdings für die ersten drei
Aufgaben separat. Die Aufgaben 4 und 5 können einzelne aufgeführt werden, weil sie kein
Einfluss von anderen Aufgaben hat.
Das Konzept für die Implementierung wird im nächsten Abschnitt näher beschrieben.
3.2 Das Implementierungskonzept
Diese Diplomarbeit enthält fünf Aufgaben, somit wird das Implementierungskonzept auch in
fünf Teile aufgeteilt.
27
3 Die Aufgabenstellung und das Konzept
3.2.1 Darstellung der Eye-Tracking Daten als Stimulus, Heatmap und Gazeplot
Für die Darstellung der Eye-Tracking Daten mit Visualisierungswerkzeug werden die von der
Eye-Tracking Studie eingesetzten Eye-Tracker exportierten Dateien verwendet. Die Dateien
sind .tsv (tab-separated values) Datenformat und können durch Excel, SPSS, Texteditor und
Matlab geöffnet werden.
In den Dateien werden die Daten über Systemumgebung von Eye-Tracker und die Augenbe-
wegung gespeichert. Der Header (Siehe Abbildung 3.1 den roten Bereich) der Datei stehen
die Informationen von Systemumgebung und der Body (siehe Abbildung 3.1 den grünen
Bereich) werden pro Zeile ein Gazepoint gespeichert. In der ersten Zeile des Bodys werden
alle Parameter der Augenbewegung aufgezeichnet. Die restliche Zeile stellen die Daten der
Augenbewegung dar. Die Werte sind durch Tabs getrennt. Es existiert parallel eine Datei
mit gleichen Informationen, aber ohne Headerinformationen. Die einzelne Bedeutung der
Parameter wird im Folgenden erläutert.
• Recording name: Der name der von Eye-Tracker exportierten Datei.
• Recording Resolution: Die Auflösung des Eye-Tracking Bereichs. Die Auflösung wird
später bei Implementierung verwendet, um eine Matrix zu erzeugen und die Eye-
Tracking Daten in die Matrix zu speichern und zu analysieren. (Siehe Abbildung 3.1
den lila Bereich)
• Stimuliname: Der Name der Datei, die von Beobachter angeschaut hat. Durch einlesen
aller Namen der Stimulis können Stimulilist aufgelistet werden.
• Timestamp: Der Zeitstempel in Millisekunden ab dem Beginn des Eye-Trackings für
jeden fokussierten Punkt.
• MappedFixationPointX: X-Achsenwert des fokussierten Punktes.
• MappedFixationPointY: Y-Achsenwert des fokussierten Punktes.
• FixationDuration: Die Zeitlänge jedes fokussierten Punktes.
28
3.2 Das Implementierungskonzept
Abbildung 3.1: Beispiel der Eye-Tracking Daten. Der rote Bereich beschreibt die Metainfor-
mation während Eye-Tracking. Der lila Bereich ist die Auflösung des Eye-
Tracking Bereichs. Der untere grüne Bereich enthält die Informationen der
Augenbewegung.
29
3 Die Aufgabenstellung und das Konzept
Um die Heatmap und den Gezeplot für entsprechende Datei zu generieren, soll einen Sti-
muliverzeichnis erzeugt werden. Durch Einlesen aller Dateinamen im Stimuliordner von
Eye-Tracking Daten können Stimuliverzeichnis generiert werden. Das Verzeichnis ist alpha-
betisch geordnet und bietet die Möglichkeit bestimmten Stimulus durch Dropdown-List
auszuwählen.
Abbildung 3.2: Das Konzept für die Darstellung der Eye-Tracking Daten als Stimulus, Heat-
map und Gazeplot.
Durch Auswahl bestimmten Stimulus soll weitere Sichten für das Node-Link- Diagramm, die
Heatmap und den Gazeplot dargestellt werden. Die entsprechenden Node-Link-Diagramme
sind bereits generiert und können direkt durch Aufruf des zugehörigen Stimulus angezeigt
werden. Dabei bietet auch eine Möglichkeit durch Auswahlkästchen die Graphik ein- und
ausblenden.
Für die Erstellung der Heatmap ohne Berücksichtigung der Zeitlänge müssen alle Eye-
Tracking Daten durchgelesen werden. Dabei soll eine Matrix erstellt werden, um die Daten
zu speichern. Die Größe der Matrix entspricht die Auflösung des Eye-Tracking Bereichs. Die
30
3.2 Das Implementierungskonzept
zu dem ausgewählten Stimulus gehöriger Daten werden mit deren X- und Y-Achsenwerte in
Matrix zugeordnet. Bei jede auftretenden Daten wird der Wert zugehöriger Koordination in
Matrix jeweils um eins addiert. Nach erfolgreicher Speicherung der Daten in Matrix wird der
maximale Wert gesucht. Dieser Wert hilft die Farbzuordnung der Heatmap. Jede Koordination
in Matrix wird mit einer Farbe zugeordnet, die durch das Verhältnis zwischen dessen Wert
und den maximalen Wert von Grün bis Rot zugestimmt. Anschließend wird die Matrix auf
den Stimulus anpassend angezeigt.
Bei Heatmap mit Berücksichtigung der Zeitlänge ist der Berechnung fast identisch. Der einzige
Unterschied liegt an die Addition der Werte in Matrix bei der Datenspeicherung jeweils um
den Wert der Zeitlänge.
Gazeplot enthält die Informationen der Reihenfolge von vorkommenden Gazepoint. Für
den Gazeplot muss auch eine Matrix eingerichtet werden. Genauso wie bei der Heatmap
werden alle Eye-Tracking Daten durchgelesen. Die Gazepoint, die zu dem ausgewählten
Stimulus zugehören sind, werden mit einem Kreis in Matrix aufgezeichnet. Alle aufeinander
folgende Punkte werden mit einer farbigen Linie verbunden. Die Farben der Linien sind
zufällig generiert. Anschließende wird alle aufgezeichnete Daten auf den Stimulus anpassend
angezeigt.
Es gibt auch eigenes Auswahlkästchen für die Heapmap und den Gezeplot, damit die Benutzer
die erstellte Graphik ein- und ausblenden kann.
3.2.2 Benutzerdefinierte AOIs
Mit angezeigter Heatmap können die AOIs leicht zu erkennen. Um die Benutzer interaktiv
die AOIs mit dem Visualisierungswerkzeug zu definieren und in FlowRiver zu aktualisieren,
wird das Werkzeug entsprechend erweitert.
Es bietet die Möglichkeiten, auf angezeigten Stimulus beliebige AOIs von Benutzer zu de-
finieren. Die Auswahlkästchen werden auf den Stimulus unterstützt, damit die Benutzer
gewünschte AOIs auszuwählen. Das Kästchen ist quadratisch und jedes Kästchen wird von
Eins laufend nummeriert und rechts unten auf das Kästchen markiert. Die Auswahl des
Kästchens kann durch die Bestätigung der “Cancel” Funktion von rechter Maustaste auf
ausgewähltes Kästchen wieder aufgehoben werden. Es ist auch möglich, weitere Kästchen
erneut auszuwählen. Für jedes Kästchen wird auch eine zufällige Farbe zugeordnet. Diese
Farbe wird mit der Farbe der gleichen Daten, die danach in AOI-River dargestellt werden,
übereinstimmen. Die Nummer des Kästchen wird ebenso mit der Nummer des AOI-River
übereinstimmen, damit die Anwender die AOI-Rivers aus welchen ausgewählten Kästchen
leicht zu erkennen und die Daten zu vergleichen.
Um die ausgewählten AOIs in AOI-River interaktiv zu aktualisieren, werden zwei Dateiformat
eingeführt. Für die Erzeugung der Flussdarstellung und für die Berechnung der einzelnen
Zuflüsse, Abflüsse und Übergänge der Perioden werden zwei Datentypen verwendet. Beide
Datentypen werden deshalb in separaten Dateien gespeichert.
31
3 Die Aufgabenstellung und das Konzept
FlowRiver verwendet .csv (comma-separated values) Datenformat. Um die Dateien von
dem Visualisierungswerkzeug geöffnet werden zu können, müssen die Dateien das Suffix
“csv” angehängt sein. In der ersten Zeile der Datei, werden die Namen der einzelnen Ströme
aufgelistet. Ab der zweiten Zeile werden die Flussdaten der Ströme gespeichert. Der erste
Eintrag einer Zeile ist für einen Bezeichner reserviert und wird von der Anwendung als String
interpretiert. Alle Zeilen besitzen die gleiche Länge. Die Ströme ohne Werte müssen deshalb
“0” eingetragen werden. [EdT12]
Identifier AOI 1 AOI 2 AOI 3 AOI 4 AOI 5 AOI 6 AOI 7
1 2 1 1 0 3 0 3
18 3 1 1 0 6 0 3
35 3 0 4 2 10 0 4
52 7 0 6 2 6 1 3
69 7 0 8 4 4 2 1
86 10 0 12 1 3 3 1
103 10 0 14 2 1 4 0
120 8 0 16 3 1 4 1
Tabelle 3.1: Elektrookulographie [ElN]
Die Daten für die einzelnen Zuflüsse, Abflüsse und die Übergänge einer Periode werden in
DAT-Datenformat für jede Periode jeweils in einer separaten Datei gespeichert. Der Dateiname
muss dabei dem Schema period_ + Periodennummer + .dat entsprechen. Die Zählung der
Perioden beginnt bei null. Alle Periodendaten müssen in dem gleichen Verzeichnis gespeichert
werden, wo die Flussdaten auch liegen. Jede Periodendatei enthält eine quadratische Matrix,
in der alle Übergänge der einzelnen Ströme dieser Periode gespeichert werden. Die Länge
jeder Zeile in der Datei muss dabei mit der Anzahl der Ströme der zugehörigen Flussdaten
übereinstimmen. [EdT12]
AOI 1 AOI 2 AOI 3 AOI 4 AOI 5 AOI 6 AOI 7
2 0 0 0 0 0 0
0 0 0 0 0 0 0
0 0 1 0 1 0 0
0 0 0 0 1 0 0
0 0 0 0 3 0 2
0 0 0 0 0 0 0
0 0 0 0 1 0 0
Tabelle 3.2: Videobasierte Eye-Tracking Systeme [VBS]
Die Spalten der Tabelle stellen den Ausgangsstrom, die Zeilen den Zielstrom eines Übergangs
dar. Die Nummer der Spalten entspricht die Nummer der AusgangsAOI und die Nummer der
32
3.2 Das Implementierungskonzept
Zeile entspricht die Nummer der EingangsAOI. Beispielsweise besteht bei den dargestellten
Daten ein Übergang von dem Strom “AOI 5” zu dem Strom “AOI 7” mit dem Wert 1. Falls
kein Übergang zwischen zwei Strömen besteht, muss der Wert an der entsprechenden Stelle
der Matrix “0” betragen. [EdT12]
Die Eye-Tracking Daten werden durch ausgewählte AOIs gefiltert. Bei der Filterung wird von
Benutzer eine Integerzahl von Zeitintervall eingegeben und die Daten zeitlich verteilt. Die
Einheit der Integerzahl entspricht Millisekunden. Die Daten für die Flussdarstellung waren
in CSV-Datei gespeichert und die Daten für Zuflüsse, Abflüsse und Übergänge der Perioden
werden in DAT-Dateien mit demselben Verzeichnis wie die CSV-Datei gespeichert. Durch
Aufruf der Dateien können die AOI-River angezeigt werden. Die Farbe jedes Flusses ist mit
der Farbe des Kästchens dasselber AOI, die auf das Stilumus ausgewählt wird, identisch.
Dadurch können die Flüsse aus welcher AOIs leicht erkennt werden. Die Abbildung 3.3 zeigt
den Durchlauf für die Generierung der AOI-River aus ausgewählten Eye-Tracking Daten.
Abbildung 3.3: Das Konzept für die Darstellung der benutzerdefinierten AOIs
3.2.3 Minimierung der Flussüberkreuzungen in AOIs
In der Selektion Mode von Visualisierungswerkzeug können die Zuflüsse, Abflüsse und die
Übergänge jeder Perioden angezeigt werden. Bei großen Datenmengen werden die Anzahl
33
3 Die Aufgabenstellung und das Konzept
der Flussüberkreuzungen proportional gestiegen. Die Abbildung 3.4 zeigt die Flussüberkreu-
zungen in AOI-River.
Abbildung 3.4: Beispiel der Flussüberkreuzungen in AOI-River. [EdT12]
Um die Flussüberkreuzungen klar auf dem AOI-River darzustellen, sollte die gesamte Anzahl
der Überkreuzungen aller Perioden möglichst minimieren. Dafür wird ein Algorithmus
eingesetzt.
Das Prinzip des Algorithmus ist zu betrachten, die Anzahl der Flüsse, die von einem AOI zu
einem anderen AOI fließen und die Anzahl der AOIs, die von den Flüssen überquert werden.
In den DAT-Dateien werden genau solche Eigenschaften gespeichert. Jedes Element in der
Matrix beschreibt die Anzahl der Flüsse und die Anzahl der AOIs werden durch den Abstand
zwischen x- und y-Achsenwert dargestellt. Durch Berücksichtigung aller Perioden können
die gesamten Anzahl von Überkreuzungen berechnet werden. Daher haben wir folgendes
Algorithmus definiert:
34
3.2 Das Implementierungskonzept
Seien (x, y) die Koordination der Übergangsmatrix, Mi die Übergangsmatrix für die Periode i,
dann gilt die gesamte Anzahl der Überkreuzungen f :
f =∑|Period|i=0 ∑
|AOI|
x,y=1 |x− y| ∗Mi (x, y)
wobei Period = Anzahl der Periode – 1 und AOI = Anzahl der AOIs.
Durch die Berechnung der gesamten Anzahl von Überkreuzungen für alle Kombination der
AOIs kann die kleinste Anzahl der Überkreuzungen gefunden werden. Die entsprechende
Kombination der AOIs wird in AOI-River dargestellt, somit sind die Flussüberkreuzungen
minimiert. Die Abbildung 3.5 zeigt die Berechnung der minimalen Anzahl der Flussüberkreu-
zungen.
Abbildung 3.5: Das Konzept für die Berechnung der minimalen Anzahl der Flussüberkreu-
zungen
3.2.4 Optimierung der Farbzuordnung
Bisher wird die Farbe für die Flüsse in AOI-River automatisch zugeordnet. Um deutlich
erkennbare Unterschiede zwischen zwei nebeneinander liegenden Farben zu bestehen, ist ein
guter Farbkontrast wahrnehmbar.
35
3 Die Aufgabenstellung und das Konzept
Farbwirkungen können durch Kontrastfarben gesteigert oder auch geschwächt werden. Far-
ben sind in ihrer Wahrnehmung einem stetigen Wechsel unterzogen. Die Farben unterscheiden
sich durch drei grundsätzlich verschiedene Faktoren (Siehe Abbildung 3.6). [Far]
Abbildung 3.6: Drei wichtige Eigenschaften der Farben. [Far]
Alle Farbkontraste beziehen sich auf ein, zwei oder alle drei dieser Faktoren, wobei einer
dominiert. Für die Farbendarstellung der nacheinander liegenden Flüsse muss mindestens
eine von der drei Farbeigenschaften deutlich unterscheiden, um die guter Farbkontrast zu
gewährleisten.
3.2.5 Abspeicherung der benutzerdefinierten ausgeschnittenen Daten
Oft müssen die Eye-Tracking Daten nicht komplett beobachtet werden, da der Benutzer
möchte eventuell nur Teil der Eye-Tracking Daten analysieren oder sogar zu einem späteren
Zeitpunkt wieder verwenden.
In dieser Diplomarbeit bietet die Möglichkeit, die benutzerdefinierten ausgeschnittenen AOI-
River abzuspeichern. Der Benutzer kann den gewünschten Bereich in AOI-River markieren.
Bei der Abspeicherung der ausgewählten Daten eine CSV-Datei erzeugt werden. In der ersten
Zeile wird die Namen aller einzelnen Strömen von der originalen CSV-Datei kopiert. Die
Flussdaten werden aber nur von den ausgewählten Perioden kopiert. Die nicht ausgewählten
Flussdaten werden ignoriert. Die DAT-Dateien, die die Daten der Flussübergänge gespeichert
haben, werden nur die zu den ausgewählten Perioden gehörigen Dateien kopiert, wobei die
Nummer der Periodendateien neu von Null laufend nummeriert werden sollen. Alle erzeugte
Dateien können in einem von Anwender ausgewählten Verzeichinis gespeichert werden und
für spätere Aufrufen zur Verfügung stehen.
36
4 Die Implementierung
In letztem Kapital wurden die Konzepte vorgestellt. Die praktischen Umsetzungen werden in
diesem Kapital näher betrachtet.
4.1 Darstellung der Eye-Tracking Daten als Stimulus, Heatmap und
Gazeplot
Für die Darstellung der Eye-Tracking Daten werden die von Eye-Tracker exportierten Dateien
eingesetzt. Alle Stimuli werden bereits generiert und in dem Verzeichnis “Eye Tracking
Data/Stimuli” gespeichert. Um die Daten für den bestimmten Stimulus zu visualisieren
muss ein Stimuliverzeichnis erstellt werden. Das Stimuliverzeichnis wird durch Einlesen
aller Dateinamen generiert. Der bestimmte Stimulus kann durch Drop-Down-List ausgewählt
werden. Die Abbildung 4.1 zeigt das Stimuliverzeichnis, welches sich links unten auf dem
Visualisierungswerkzeug befindet.
Abbildung 4.1: Stimuliverzeichnis
Durch Stumuliverzeichnis kann einen bestimmten Stimulus ausgewählt werden. Es wird drei
Auswahlkästchen unter dem Stimuliverzeichnis erzeugt und die Auswahlkästchen gelten
die Ein- und Ausblendfunktionen für den Stimulus, die Heatmap und den Gazeplot. Die
zugehörigen Graphiken werden unter den Auswahlkästchen angezeigt.
Die Graphiken für die Heatmap mit Zeitlänge und den Gazeplot werden in demselben Bereich
angezeigt. Bei gleichzeitiger Darstellung aller Graphik wird der Gazeplot am obersten liegen
und der Stimulus als Hintergrund angezeigt. Dabei steht die Heatmap in der Mitte.
Die Abbildung 4.5 zeigt die Benutzeroberfläche für die Darstellung des Stimulus, der Heatmap
und des Gazeplot im Visualisierungswerkzeug.
37
4 Die Implementierung
Abbildung 4.2: Auswahlkästchen für den Stimulus, die Heatmap und den Gazeplot (Roter
Bereich)
Abbildung 4.3: Darstellung eines Stimulus
Abbildung 4.4: Darstellung einer Heatmap
38
4.1
D
arstellung
derE
ye-Tracking
D
aten
als
S
tim
ulus,H
eatm
ap
und
G
azeplot
Abbildung 4.5: Benutzeroberfläche des Visualisierungswerkzeugs
39
4 Die Implementierung
4.2 Darstellung der benutzerdefinierten AOIs in AOI-River
Nach der Darstellung der Heatmap können die AOIs leicht erkennt werden. Um dem Benutzer
die AOIs näher zu beobachten und zu analysieren, wird das Visualisierungswerk so erweitert,
dass die eigene AOIs definieren zu können. Die AOIs können durch Ziehen von Maus auf der
Graphik erzeugt werden. Die ausgewählten AOIs werden mit zufälligen farbigen Kästchen
dargestellt. Das Kästchen ist quadratisch und die Ränder des Kästchen sind 3 Pixel Breite.
Durch Bestätigung der rechten Maustaste auf dem Kästchen können die ausgewählten AOIs
wieder aufheben. Die Abbildung 4.6 zeigt den Auswahlvorgang der AOIs und die Abbildung
4.7 den Aufhebungsvorgang der AOIs.
Abbildung 4.6: Definierung der gewünschten AOIs
Abbildung 4.7: Aufhebung der ausgewählten AOIs
40
4.2 Darstellung der benutzerdefinierten AOIs in AOI-River
Um die benutzerdefinierten AOIs in AOI-River darzustellen, muss noch eine positive In-
tegerzahl in dem Eingabefeld, das sich neben dem Stimuliverzeichinis befindet, eingeben.
Durch Bestätigung der “OK”-Taste werden entsprechende CSV-Dateien und DAT-Dateien
aus Eye-Tracking-Rohdaten und anhand ausgewählter AOIs ausgerechnet und erzeugt und
anschließend werden die AOIs auf der rechten Seite der Benutzeroberfläche dargestellt. Für
jedes Kästchen wird eine zufällige Farbe zugeordnet. Diese Farbe wird mit der Farbe der
gleichen Daten, die in AOI-River dargestellt werden, übereinstimmen. Die Nummer des
Kästchen wird ebenso mit der Nummer des AOI-River übereinstimmen. Die Abbildung 4.8
zeigt die dargestellten AOI-Rivers.
Abbildung 4.8: Die Darstellung der benutzerdefinierten AOIs
Nach der Darstellung der benutzerdefinierten AOIs können zusätzliche AOIs ausgewählt
werden und wieder darzustellen.
41
4 Die Implementierung
Abbildung 4.9: Die erneute Darstellung der benutzerdefinierten AOIs
Die zwischenzeitlich erzeugten CSV-Datei für die Darstellung der AOI-River und DAT-
Dateien für die Darstellung der Flussübergänge werden in dem “AOIData”- Ordner gespei-
chert und durch neue Auswahl eines anderen Stimulus wieder gelöscht.
4.3 Minimierung der Flussüberkreuzungen in AOIs
Bei Großer Datenmenge erscheinen die Flussüberkreuzungen etwas Chaos. Im Kapital 3.2.3
wird ein Algorithmus entworfen, um die Anzahl der Flussüberkreuzungen zu minimieren. In
dem Visualisierungswerkzeug wurde eine Taste “RiverCrossOpt” für diese Funktion hinzu-
fügt. Durch Bestätigung der Taste wird ein Algorithmus für die Berechnung gestartet. Dafür
muss erst alle Kombination der AOIs zu finden, damit die Anzahl der Flussüberkreuzungen
für jede Kombination berechnet werden kann. In Listing 4.1 wurde ein rekursiver Algorithmus
vorgestellt.
Abbildung 4.10: Position der Taste für den Optimierungsalgorithmus
42
4.3 Minimierung der Flussüberkreuzungen in AOIs
Listing 4.1 Alle Kombinationen der AOIs
Permutation(Array1,Array2):
//Array1: n-Element List, n: Anzahl der AOIs
//Array2: Ausgabelist, wobei Am Anfang = null
Arr1=Array1;
Arr2=Array2;
if Arr1 = null then //Die Kombination ist bereits gefunden
print Arr2; //Ausgabe der Kombination
else
count = Arr1.size(); //Anzahl der Element von Arr1
for i := 1 to count do //Alle Möglichkeiten der nächsten Stelle aufsuchen
Arr2.add(Arr1(i)); //Füge die nächste Stelle an Ausgabelist
Arr1.remove(i); //Löse den gefundenen Element
Permutation(Arr1,Arr2); //Rekursiv Aufsuchen der nächsten Stelle
Arr1 := Array1;
Arr2 := Array2; //Initialisierung für nächsten Durchlauf
end for
end if
In diesem Algorithmus wird bei jedem Durchlauf alle Möglichkeiten der ersten Stelle von
Array1 aufgelistet, ausgeschnitten und hinter der letzten Stelle von Array2 angehängt, sobald
Array1 nicht leer ist. Nach der Berechnung werden alle Kombinationen gefunden und in eine
List gespeichert.
Für jede Kombination der AOIs werden DAT-dateien für die Flussübergänge generiert. Hier
müssen die gesamte Anzahl der Flussüberkreuzungen von allen DAT-Dateien einer Kombina-
tion berechnet werden. In Listing 4.2 zeigt den Algorithmus für die Berechnung der Anzahl
von Flussüberkreuzungen.
Listing 4.2 Berechnung der Anzahl der Flussüberkreuzungen
count = 0; //Anzahl der Flussüberkreuzungen
for i := 1 to n loop // n: Anzahl der DAT-Dateien
for j := 1 to s loop // s: Anzahl der AOIs, in jeder DAT-datei ist ein s*s-Matrix
// Durchlauf in x-Achse von Matrix
for k := 1 to s loop // Durchlauf in y-Achse von Matrix
count := count + |j-k| * Mi(j,k); // Mi: Matrix von i-te DAT-Datei
//(j,k): die Koordination von Matrix
end loop
end loop
end loop
In der ersten Schleife werden alle DAT-Dateien durchgelaufen und die inneren zwei Schleifen
bestimmen die x- und y-Achsenwerten und berechnen für jede DAT-Datei die Anzahl der
Flussüberkreuzungen mit vordefiniertem Algorithmus.
Durch Vergleich der Flussüberkreuzungsanzahl von allen Kombinationen kann die minimale
Anzahl der Flussüberkreuzungen gefunden werden. Die entsprechende Kombination der
AOIs wird auf der AOI-River dargestellt und somit ist die Anzahl der Flussüberkreuzungen
reduziert.
43
4 Die Implementierung
4.4 Abspeicherung der benutzerdefinierten ausgeschnittenen Daten
Im Kapital 3.2.5 wurde ein Konzept gegeben, die benutzerdefinierten ausgeschnittenen Daten
für spätere Verwendung zu speichern. In Toolbar des Visualisierungswerkzeug wurde eine
Taste für diese Funktion hinzufügt. In Abbildung 4.11 zeigt die Position der Taste.
Abbildung 4.11: Position der Taste für Abspeicherung der benutzerdifinierten Daten
Durch Aufruf der Taste wird ein Pop-up-Fenster gezeigt und nach dem Zeitintervall ge-
fragt. Das gesamte Intervall ist von 0 bis Ende des Period beschränkkt, wobei durch die
vordefinierten Zeitlänge verteilt wird und über Auswahlliste ausgewählt werden kann.
Abbildung 4.12: Auswahlfenster für benutzerdefiniertes Intervall
44
4.4 Abspeicherung der benutzerdefinierten ausgeschnittenen Daten
Für das Speicherziel muss ein konkretes Datenverzeichnis eingegeben werden. Hier muss
beachtet werden, dass es kein Dateiname eingeben muss. Die Dateinamen werden automatisch
generiert. Die Abbildung 4.13 zeigt beispielweise ein Speicherziel und die Abbildung 4.14
zeigt die generierten Dateien.
Abbildung 4.13: Auswahl des Speicherziels
45
4 Die Implementierung
Abbildung 4.14: Generierte benutzerdefinierte Dateien
Durch Aufladen der generierten Dateien können die benutzerdefinierten ausgeschnittenen
Bereiche wieder als FlowRiver dargastellt werden und analysiert werden.
46
5 Anwendungsbeispiel für AOI-River
In diesem Kapital werden einige Beispiele für mögliche Anwendungen von AOI-River zur
Visualisierung von zeitabhängigen Daten vorgestellt. Danach wird ein Anwendungsbeispiel
für die Darstellung der AOI-River von Eye-Tracking-Daten simuliert.
5.1 Vorstellungen möglicher Anwendungen
In dieser Diplomarbeit wurde die ThemeRiver-Visualisierung auf benutzerdefinierter AOI-
River-Visualisierung erweitert. Obwohl das Visualisierungswerk anhand Eye-Tracking-Daten
weiter entwickelt wurde, kann es grundsätzlich zur Analyse aller zeitabhängigen Daten
eingesetzt werden.
Eine mögliche Anwendung wäre beispielweise die Analyse der Suchergebnisse von Suchma-
schine. Die Ergebnisse einer bestimmten Anfrage werden nach der Berechnung auf der Seite
gelistet. Jedes Suchergebnis entspricht ein AOI. Die Daten über die Benutzer, auf welcher
AOI die Benutzer zuschauen und wie lange ihre Blicke darauf geblieben hatten, könnten
mithilfe der AOI-River-Darstellung visualisiert werden. Mit der Vorgestellten Erweiterung
könnte somit die Suchergebnisse durch die Beobachtungsanzahl und gebliebene Zeitlänge
von AOI-River analysiert und verbessert werden.
Eine weitere Anwendungsmöglichkeit der AOI-River könnte in der Analyse von Studenten-
anzahl eines Landes. Dabei könnte beispielweise die ersten zehn größten Universitäten als
AOIs gewählt werden. AOI-River bietet einen besseren Überblick über die Unterschiede der
Studentenanzahl von verschiedenen Universitäten und wie diese im zeitlichen Verlauf ver-
ändert. Bei einer Berücksichtigung der Gruppe der neuen Studenten und Absolventen wäre
mit der Darstellung der Zu- und Abflüsse deren Einfluss visuell auswertbar. Die Studenten,
die während des Studiums die Universität gewechselt hätten, könnten mit Flussübergänge
kenngezeichnet werden.
In vielen weiteren Anwendungsgebiete könnten auch die AOI-River-Visualisierung eingesetzt
werden. In nächsten Abschnitt wird anhand Eye-Tracking-Daten die entwickelte Erweiterung
durchprobiert und erklärt.
47
5 Anwendungsbeispiel für AOI-River
5.2 Anwendung der Eye-Tracking-Daten in AOI-River
In dem Kapital 2.1 wurden bereits die Geschichte, die Entwickelung und die Anwendungen
von Eye-Tracking-Technik vorgestellt. Im folgende wird ein Anwendungsbeispiel mittels
Eye-Tracking erfassten Daten durchgeführt.
Die Eye-Tracking-Daten sind von einer Eye-Tracking-Studie erfasst. Das Ziel dieser Studie
war, bei dem Lesen der Diagramme auf Effizienz zu untersuchen. Durch die Verwendung der
Eye-Tracking konnten das strategische Verhalten der Teilnehmer analysiert werden.
Die Studie haben 38 Teilnehmer teilgenommen. Dafür verwendeten drei Arten von Stimuli,
die traditionalen Stimuli, die orthogonalen Stimuli und die radialen Stimuli. Die Blattknoten
der Node-Link-Diagramme wurden zufällig farbig markiert. Die Aufgabe für die Teilnehmer
war, der Suche nach den kleinsten gemeinsamen Vaterknoten für die farbigen markierten
Knoten. [ETO11]
Die verschiedenen Node-Link-Diagramme wurden zufällig den Teilnehmer angezeigt. Für
jedes Node-Link-Diagramm wurden die Fixationspunkte von 36 Probanden ausgeliefert.
Die ausgelieferten Eye-Tracking-Daten wurden auf drei Verzeichnisse (ORT_1, RAD_1 und
TRA_1) geteilt und indem auf jeweiligen Studenten gespeichert. Mithilfe der entwickelten
Flow-River-Visualisierungstechnik von Andreas Kull können die Eye-Tracking-Daten in
Flussdarstellung visualisiert werden.
5.2.1 Erstellung der Heatmap und Gazeplot aus den Eye-Tracking-Daten
Als Beispiel wurde eines der in der Studie verwendeten Stimuli ausgewählt. Mit der Erweite-
rung des Visualisierungswerkzeugs von dieser Diplomarbeit können ausgewähltes Stimulus,
deren Heatmap und Gezeplot berechnet und angezeigt werden.
Abbildung 5.1: Darstellung des ausgewählten Stimulus
48
5.2 Anwendung der Eye-Tracking-Daten in AOI-River
Abbildung 5.2: Darstellung der berechneten Heatmap
Abbildung 5.3: Darstellung des berechneten Gazeplot
49
5 Anwendungsbeispiel für AOI-River
Abbildung 5.4: Darstellung aller Visualsierungsmethoden, wobei Gazeplot an der Oberfläche
steht und Stimulus an der Unterfläche steht
5.2.2 Benutzerdefinierte AOIs und die Flussdarstellung
Wie bei der in der Studie durchgeführten Analyse können ebenfalls die AOIs durch erzeugte
Heatmap aus Eye-Tracking-Daten von Anwender definiert werden, um konzentriert auf die
gewünschten Bereiche auszuwerten.
50
5.2
A
nw
endung
derE
ye-Tracking-D
aten
in
A
O
I-R
iver
Abbildung 5.5: Flussdarstellung der benutzerdefinierten AOIs in AOI-River
51
5 Anwendungsbeispiel für AOI-River
In diesem Beispiel wurden 3 AOIs anhand Heatmap ausgewählt. Die “AOI 1” wurde mit
blauer Farbe markiert, die “AOI 2” mit roter Farbe und die “AOI 3” das Gelbe. Danach wurde
beispielweise das Intervall für die gesamten Beobachtungslänge als 100 Millisekunden defi-
niert. Durch die Bestätigung der “OK”-Taste wurde die Eye-Tracking-Daten von ausgewählten
AOIs in AOI-River dargestellt. Die Farbe jeweiliger Fluss wurde mit der Farbe zugehöriger
AOI übereinstimmen, somit können die Daten aus welchem Bereich leicht erkennt werden.
Die Abbildung 5.5 zeigt die Flussdarstellung der ausgewählten AOIs.
Bei der Auswertung der Flussdarstellung können wir herausfinden, dass die “AOI 1” am
Anfang deutlich größer als die anderen AOIs war. Das bedeutet, dass der “AOI 1”-Bereich
zog am Anfang mehr Blicke an und die Anzahl der Zuschauer bis zu 400 Millisekunden
stetig zunahm. Im Vergleich zur “AOI 1” schaute an Anfang Niemand an “AOI 3”. Erst
nach 700 Millisekunden schaute der erste Zuschauer an “AOI 3”. Bis zu 400 Millisekunden
schauten maximal nur 4 Personen an “AOI 2”. Ab 400 Millisekunden explodierte die Anzahl
der Zuschauer bis zu 19 Personen. Nach 1400 Millisekunden verringerte sich die Anzahl der
Zuschauer auf ca. 8 Personen. Am Schluss schaute 8 Personen an “AOI 1” und 7 Personen an
“AOI 2”, wobei die Anzahl der Zuschauer an “AOI 3” nur 4 Personen beträgt.
Da die Eye-Tracking-Studie nicht im Rahmen dieser Diplomarbeit durchgeführt wurde,
können deswegen alle oben gemachten Aussagen nicht verifiziert werden.
5.2.3 Minimierung der Flussüberkreuzungen
Über Select Mode können die Flussüberkreuzungen durch Mausselektion angezeigt werden.
Die Abbildung 5.6 stellt ein Beipiel der Flussüberkreuzungen dar.
Abbildung 5.6: Beispiel der Flussüberkreuzungen
52
5.2 Anwendung der Eye-Tracking-Daten in AOI-River
Abbildung 5.7: FlowRiver-Darstellung vor Optimierung
Abbildung 5.8: FlowRiver-Darstellung nach Optimierung
53
5 Anwendungsbeispiel für AOI-River
Bei diesem Beispiel wurde AOI 4 nach Optimierung der Flussüberkreuzungen auf die ersten
Stelle sortiert, wobei AOI 2, AOI 3 und AOI 4 eine Stelle nach hinten verschoben wurden. Da
das Ergebnis wurde unter Berücksichtigung der ganzen Periode berechnet, ist es daher nicht
möglich, die Richtigkeit für die Veränderung des einzelnen Abschnitt von Flussüberkreuzung
zu beweisen.
54
6 Zusammenfassung und Ausblick
6.1 Zusammenfassung
Heute ist Eye-Tracking ein wichtiges Werkzeug bei den Kognitiven Wissenschaften. Durch
Eye-Tracking können die Interaktionen zwischen Menschen und Computer aufzeichnen und
analysieren. Die Visualisierungstechniken für Eye-Tracking-Daten sind dagegen noch zu
wenig. Meist werden Scan-Path oder Heat-Map- Visualisierungen eingesetzt. Dies bietet ein
schneller Überblick über die Augenbewegungen des Probanden an.
Auf der Basis der Vorarbeit AOI-River Werkzeug von Andreas Kull wurde in dieser Diplomar-
beit eine Erweiterung auf AOI-River-Visualisierung vorgestellt, wobei die Benutzer gewünsch-
te Area-of-Interests auf der Darstellung von Heatmap und Gazeplot aus Eye-Tracking-Daten
selbst definieren können. Die ausgewählten AOIs können mit AOI-River-Visualisierung dar-
gestellt werden und interaktiv aktualisiert werden. Die Farbe einzelner Flusses ist mit der
jeweiligen ausgewählten AOI übereinstimmen, somit bietet es einfachere Erkennung zwischen
benutzerdefinierte AOIs und die AOI-Flüsse. Weiteres wurde ein Algorithmus vorgestellt
und entwickelt, um die Überkreuzungen in den AOI-Rivers durch geschickte Sortierung
reduziert. Es wurde ein Prinzip erklärt, wie ist ein guter Farbkontrast wahrnehmbar. Schließ-
lich bietet die Möglichkeit, benutzerdefinierte Ausschnitte der Daten für spätere Analyse
abzuspeichern.
Alle von Eye-Tracking-Studie erfassten Daten wurden sicher durch verwendete Visualisie-
rungstechnik realistisch repräsentiert. Die Flussdarstellungen entsprechen die ausgewählten
AOIs in zeitlichem Verlauf. Die entwickelte AOI-River-Visualisierung können zur Abbildung
von zeitabhängigen quantitativen Werten eingesetzt werden.
Durch die Durchführung eines Anwendungsbeispiels zeigte die weiteren Sichten für die Dar-
stellung der Eye-Tracking-Daten und die Darstellung benutzerdefinierter AOI-River. Somit
bietet eine neue Möglichkeiten für die Analyse und Auswertung von visuellen Strategien.
6.2 Ausblick
In dieser Diplomarbeit wurden drei Visualisierungstechniken implementiert, jedoch könnten
weitere Visualisierungsmethoden in der Zukunft entwickelt werden.
Bei der Flussdarstellung gibt es nur Informationen über zeitlichen Verlauf und zugehörigen
Bereich, wobei die konkrete Position einzelnes Fixationspunkts geht verloren. In der Zukunft
55
6 Zusammenfassung und Ausblick
könnte eventuell untersucht werden, ob mit der 3D-Visualisierungstechnik die Koordinaten
von Fixationspunkt zusammen mit dem zeitlichen Verlauf visualisiert werden können.
Die Flussdarstellung könnte vielleicht durch weitere Methoden sortiert werden. Zum Beispiel
wären die Sortierung durch durchschnittlichen Flussbreit oder die Flusslänge.
Für einen guten Farbkontrast zwischen zwei nebeneinanderliegenden Flüssen wurde in dieser
Arbeit ein Prinzip erklärt. Leider konnte keine Realisierungsmethode gefunden, insbesondre
für große Anzahl der AOIs. Wie die verschiedenen Farben für die AOIs zugeordnet werden
sollen, könnte auch in weiterer Arbeit untersucht werden.
56
Literaturverzeichnis
[EoB04] Wnek. G., Bowlin G. Encyclopedia of Biomaterials and Biomedical Engineering.
http://sunburst.usd.edu/∼schieber/docs/Richardson%26Spivey2004.pdf, 2004. (Zitiert
auf den Seiten 11 und 13)
[KGV] Kognitive Grundlagen der Visualisierung. http://www.vis.uni-stuttgart.de/for-
schung/interaktive-systeme/kognitive-grundlagen-der-visualisierung.html. (Zitiert
auf den Seiten 6, 11 und 17)
[AOI13] M. Burch, A. Kull, D. Weiskopf: AOI Rivers for Visualizing Dynamic Eye Gaze
Frequencies, Computer Graphics Forum, 2013. (Zitiert auf den Seiten 6, 11, 16, 25 und 26)
[EOG] Elektrookulographie. Klinikum Ingolstadt. https://www.klinikum-ingolstadt.de/
kliniken-und-institute/neurologischeklinik/leistungsangebot/elektrookulographie-
eog-elektronystagmographie-eng. (Zitiert auf Seite 13)
[ElN] Electro nystagmography. http://www.metrovision.fr/mv-po-notice-im18.jpg. (Zitiert
auf den Seiten 6, 8, 14 und 32)
[VBS] A Video-Based System for Tracking Eye and Head Movement. http://vision.arc.nasa.
gov/personnel/jbm/home/projects/osa98/osa98.html. (Zitiert auf den Seiten 6, 8, 14
und 32)
[EyT] Eye Tracking. http://en.wikipedia.org/wiki/File:Reading_Fixations_Saccades.jpg. (Zi-
tiert auf den Seiten 6 und 15)
[ViP] Visual Perception http://en.wikipedia.org/wiki/File:Ventral-dorsal_streams.svg. (Zi-
tiert auf den Seiten 6 und 16)
[ETO11] M. Burch, J. Heinrich, N. Konevtsova, M. Höferlin, D. Weiskopf. Evaluation of
Traditional, Orthogonal, and Radial Tree Diagrams by an Eye Tracking Study. Visus,
University of Stuttgart, Germany, 2011. (Zitiert auf den Seiten 6, 19, 20, 22, 23 und 48)
[GSE12] Google Search Engine Results Eyetracking [HEATMAP], 2012. http://trends.e-
strategyblog.com/2012/08/15/google-search-engine-results-eyetracking-
heatmap/2832. (Zitiert auf den Seiten 6 und 21)
[VoE07] O. Špakov, D. Miniotas. Visualization of Eye Gaze Data using Heat Maps, 2007.
(Zitiert auf Seite 20)
[ThR00] S. Havre, B. Hetzler, L. Nowell. ThemeRiver: Visualizing theme changes overtime.
In Information Visualization, 2000. InfoVis 2000. (Zitiert auf den Seiten 6, 23 und 24)
57
Literaturverzeichnis
[EdT12] A. Kull. Erweiterung der Theme River-Visualisierung um Zu- und Abflüsse. Visus,
University of Stuttgart. Diplomarbeit 2012. (Zitiert auf den Seiten 6, 24, 27, 32, 33 und 34)
[Far] Farbkontraste, Landesakademie für Fortbildung und Personalentwicklung an Schulen.
http://lehrerfortbildung-bw.de/kompetenzen/gestaltung/farbe/kontrast/. (Zitiert auf
den Seiten 6 und 36)
Alle URLs wurden zuletzt am 30. 10. 2013 geprüft.
58
Erklärung
Hiermit versichere ich, diese Arbeit selbstständig verfasst
und nur die angegebenen Quellen benutzt zu haben.
(Changsheng Qian)