Ontwikkeling van een gebruiksvriendelijke visualisatieomgeving voor eyetrackeranalyses

FACULTEIT INDUSTRIELE INGENIEURSWETENSCHAPPEN CAMPUS DE NAYER

Ontwikkeling van een gebruiksvriendelijke visualisatieomgeving voor eyetrackeranalyses

Tim CLEYMANS

Promotor: ing. S. De Beugher Co-promotor: Prof. Dr. Ir. T. Goedemé

Masterproef ingediend tot het behalen van de graad van master of Science in de industriële wetenschappen: elektronica-ICT, afstudeerrichting ICT

Academiejaar 2013-2014

© Copyright KU Leuven Zonder voorafgaande schriftelijke toestemming van zowel de promotor(en) als de auteur(s) is overnemen, kopiëren, gebruiken of realiseren van deze uitgave of gedeelten ervan verboden. Voor aanvragen tot of informatie i.v.m. het overnemen en/of gebruik en/of realisatie van gedeelten uit deze publicatie, wend u tot KU Leuven Campus De Nayer, Jan De Nayerlaan 5, B-2860 Sint-Katelijne-Waver, +32 15 31 69 44 of via e-mail [email protected]. Voorafgaande schriftelijke toestemming van de promotor(en) is eveneens vereist voor het aanwenden van de in deze masterproef beschreven (originele) methoden, producten, schakelingen en programma’s voor industrieel of commercieel nut en voor de inzending van deze publicatie ter deelname aan wetenschappelijke prijzen of wedstrijden.

Ontwikkeling van een gebruiksvriendelijke visualisatie-omgeving voor eye-trackeranalyses Tim Cleymans 12 januari 2014

ii

Voorwoord Graag wil ik, alvorens deze masterproeftekst aan te vangen, van de gelegenheid gebruik maken om een aantal mensen te bedanken die hebben bijgedragen tot de realisatie van deze masterproef. In de eerste plaats gaat mijn dank uit naar mijn promotor ing. Stijn De Beugher, voor zijn hulp, steun en feedback bij deze masterproef. Ook bedrijfspromotor Prof. Dr. Ir. Toon Goedemé wil ik bedanken voor zijn feedback. Het is dankzij deze feedback dat ik in staat ben geweest om het eindproduct te blijven verbeteren. Verder wil ik alle mensen bedanken die hebben deelgenomen aan het onderzoek naar de gebruiksvriendelijkheid van de applicatie en de tijd genomen hebben om de enquête in te vullen. In het bijzonder Geert Brône en Bert Oben voor de feedback en de suggesties. Ook wil ik graag de mensen bedanken die hebben geholpen bij het nalezen van de masterproeftekst. Tot slot wil ik ook mijn ouders en mijn vriendin bedanken, voor hun onvoorwaardelijke steun en hun eindeloos geduld.

iv

Abstract Het gebruik van eye-trackersystemen bij onderzoek is sterk in opmars. Eye-trackers kunnen worden gebruikt in verschillende toepassingsgebieden, onder andere marketing, psychologie en computerwetenschappen. Toch produceren eye-trackers enorme hoeveelheden data, die tot nu toe manueel verwerkt moesten worden, wat zeer tijdrovend en arbeidsintensief is. Om deze verwerking te automatiseren heeft onderzoeksgroep EAVISE in samenwerking met Thomas More Antwerpen een algoritme ontwikkeld dat door middel van object- en personendetecties deze eye-trackerdata automatisch kan verwerken. In deze masterproef ontwikkelen we een gebruiksvriendelijke visualisatie-omgeving om de resultaten van deze detecties voor te stellen. Hiervoor onderzoeken we welke visualisaties gebruikt kunnen worden. Ook onderzoeken we in welke programmeeromgevingen we de interface en de visualisaties zouden kunnen implementeren. Uit dit onderzoek besluiten we dat we de resultaten kunnen voorstellen met enkele statistische voorstellingen, namelijk de barchart, scatterplot en de pie-chart. We kunnen ook gebruik maken van meer grafische voorstellingen, zoals een tagcloud waarin de grootte van de afbeelding overeenkomt met de aandachtsverdeling. Ook kunnen we een tijdlijn voorzien waarin de detecties in chronologische volgorde afgebeeld worden. Uit het onderzoek kunnen we ook besluiten dat we best Qt als programmeeromgeving kunnen gebruiken en programmeren in C++. We kunnen namelijk in Qt gebruik maken van het programma gnuplot, dat kan helpen bij het maken van enkele visualisaties. We realiseerden een applicatie waarin de gebruiker een aantal objects of interest kan selecteren die men gevisualiseerd wil zien. De applicatie voorziet een tabel, barchart, scatterplot, pie-chart, tagcloud en tijdlijn als visualisaties. De tabel, pie-chart, tagcloud en tijdlijn zijn ontworpen in Qt. De barchart en de scatterplot worden getekend door gnuplot en daarna door Qt ingelezen in de interface. Uit een bevraging bij een testpubliek kunnen we besluiten dat onze applicatie zeer gebruiksvriendelijk is en dat er voldoende visualisaties voorhande zijn.

v

Abstract Because of the increasing popularity and the technological progression of eye tracking systems, more and more domains use eye trackers in their research. Eye trackers provide objective data obtained from the visual processes of the user. Eye trackers are used for research in marketing, psychology, computer science and many more. However, eye trackers produce extreme amounts of data which up to now had to be processed manually. Not only is this labor-intensive, but it also requires a fair amount of time. Therefore, a co-operation between EAVISE and Thomas More Antwerp led to the development of an application that uses object and person detection to process eye trackerdata automatically. In this thesis we develop a user-friendly visualisation environment to display the results of these detections. Therefore, we examine which visualisation could be used for these results. We also examine which programming environment is most suitable for designing an interface and the wanted visualisations. Our research shows that we can use statistical visualisations to display the results. We could also use graphical visualisations, where the images of the objects of interest are used. Research also shows that the most suitable programming environment would be Qt, programming in C++. In Qt we can call the program gnuplot, which can design certain visualisations. We developped an application where the user can select a number of objects of interest. The results of these objects are visualised in a table, bar chart, scatter plot, pie chart, tag cloud and timeline. For the bar chart and scatter plot we use gnuplot to generate the visualisations, which are then showed in the interface by Qt. For the other visualisations we use Qt itself. We also performed a questionnaire on some potential end-users of the software. This research showed that we developped a very user-friendly application with a nice variety of visualisations.

vi

Short Summary Background Because of the increasing popularity and the technological progression of eye tracking systems, more and more domains use eye trackers in their research. Eye trackers provide objective data obtained from the visual processes of the user. This data shows where the testperson looked and more, where he fixated his attention. Eye trackers are used for research in marketing, psychology, computer science and many more. However, eye trackers produce extreme amounts of data, which up to now, had to be processed manually. Not only is this labor-intensive, but it also requires a fair amount of time. Therefore, a co-operation between EAVISE and Thomas More Antwerp led to the foundation of a research project with the automatical processing of eye tracker data as main goal. In this research project an algorithm was written that uses object and person detection to process the eye tracker data. The visualisation of these results is limited though. The results are saved in text files. In consultation with user experience agencies, there is need of a graphical visualisation environment that displays the results in an informative but attractive way. This interface must be user-friendly, so that non-experts in image processing can also use the software. In this master thesis, we will develop a user-friendly interface which will display the results of eye tracker analysis in a visual attractive fashion.

Objectives The objective of this master thesis is the development of a user-friendly interface to display the results of object detections. The full concept of how the data should be represented will be examined. The design and functionality of the visualisation environment will happen in agreement with user experience agencies and future users of the software. The demands of these users have to be converted in the interface. In this master thesis we will also examine in what ways the data can be visualised, and what programming environment is the most suited to implement these visualisations.

viii

Literature In our literature we first describe the basic ideas of eye tracking and some of the applications where eye trackers can be used. We then explain the concepts of the already existing algorithm that detects the objects and writes the results to a text file. It is from these text files that our interface must extract the data that needs to be visualised. After our research we can conclude that there are two ways to visualise the data. We can use statistical visualisation such as a bar chart, scatter plot or candlestick chart. Another way to visualise the data is to use a graphical representation in which the object is displayed itself. We could, for example, display every detection in chronological order and create a timeline. We found out that a heat map, a technique often used to display eye tracker data, can’t be used in mobile eye tracking where a person walks around freely. After some research, we decided to use the following visualisations: Table: A table with all the numeric values of the observation scores. Bar chart: A bar chart that displays the attention distribution of the selected objects. Scatter plot: A scatter plot that displays the relation between the number of views and the total length of the observations. Pie chart: A pie chart that displays the attention distribution of the selected objects. Tag cloud: A visualisation in which the images are scaled according to their observation scores. Timeline: A chronological sequence of the observations. After the selection of the visualisations above we examined which programming environment would be the most suitable for creating an interface with these visualisations. We compared several environments and found out that we could best use Qt as environment, and program in C++. Qt is most suitable for creating an interface, but furthermore we could use gnuplot in Qt to implement certain visualisations. Other environments that could’ve been suitable, but weren’t chosen are Java, R programming language, Adobe Flash and HTML5.

Approach We then started to implement in Qt and developped an interface using a functionality called "forms". With drag and drop we created an interface that allowed users to select certain objects they wanted to compare based on observation scores. We implemented ways to read the corresponding text files and process their data. The processed data were also saved in an output file. Each object is also assigned a unique color, that will be used in the visualisations. After the data have been processed we created the different visualisations one by one.

ix We started with the table, that we use to display all information about the observations. We use a QTableWidget to create a custom table and fill in all the data. The user is able to sort the table by clicking one of the column headers. The visualisations of the bar chart and the scatter plot were created by gnuplot. We call gnuplot with a system call from Qt and execute a script. This gnuplot-script creates a visualisation from the data in the output file and saves it as an image. This image is then loaded by Qt in our interface. The implementation of the pie chart was based on the pie chart example in the Qt toolkit. Again, we use the output file as data for the visualisation. The algorithm then displays the data as a pie chart with the same colors that we assigned for each object. The tag cloud uses the images of the selected objects and displays them in different sizes according to their attention score. The user can choose between a line layout and a grid layout. The timeline also uses an output file, in which every observation is described by its first and last frame and the object that was viewed. We sort the contents of this output file chronologically and then display the objects with the time info underneath them. The user is able to zoom in and out to create an overview of the timeline and to zoom in on the images. After all visualisations were created, we enhanced the user-friendliness of the application by adding a tutorial that explains how to use the application, messages in the interface that should guide the user and extra functionality to ease the use of the application. The visualisations can be saved as images, so that they can be added to reports.

Results Figure 1 shows the results of all the visualisations. For more detailed images or the full functionality we refer to chapter 5. From left to right and from top to bottom we show the table, the bar chart, the scatter plot, the pie chart, tag cloud and the overview of the timeline. To find out whether the application was user-friendly and the quality of the visualisations was sufficient, we had our application tested by a group of potential end-users. Most of the feedback was positive, and a major part of the testgroup found the application very user-friendly. The biggest part of the group thought the quantity and quality of the visualisations was very solid. However, from the feedback, we could determine a few pointers that could be used as future expansions to the application. For example, a fair amount of users would like to have the option to change the names of the selected objects. Another comment was the use of more contrasting colors, so that there is less confusion within the visualisations. An important pointer was the need for the possibility to add multiple datasets into one window, so that data from multiple test persons could easily be compared. These pointers will be added to future work, for an eventual update of the application.

x

Figure 1: Overview of all visualisations

Conclusion We conclude this summary by saying that we succeeded in creating a solid base for an application that visualises the results of eye tracking analysis. Results of a user questionnaire shows that we created a user-friendly application that has a wide variety of quality visualisations. A few pointers that could be expanded in the future are the option to change the names of the objects and the possibility to add multiple datasets to one window. This would improve the user-friendliness of the application even further.

Inhoudsopgave 1 Inleiding

1

1.1

Algemene probleemstelling . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

1.2

Organisatie van deze tekst . . . . . . . . . . . . . . . . . . . . . . . . . . .

1

2 Situering en doelstelling

3

2.1

Situering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

Doelstelling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4

3 Literatuurstudie 3.1

3.2

3.3

5

Eye-tracking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

3.1.1

Overzicht van de verschillende eye-tracking technieken

. . . . . . .

5

3.1.2

Verschillende soorten eye-trackers . . . . . . . . . . . . . . . . . . .

7

3.1.3

Toepassingen van eye-trackeranalyses . . . . . . . . . . . . . . . . .

8

3.1.4

Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Algoritme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 3.2.1

Werking van het algoritme . . . . . . . . . . . . . . . . . . . . . . . 11

3.2.2

Opbouw van het output-bestand . . . . . . . . . . . . . . . . . . . . 12

3.2.3

Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Datavisualisatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 3.3.1

Het belang van datavisualisatie . . . . . . . . . . . . . . . . . . . . 14

3.3.2

Heatmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

3.3.3

Tagcloud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

3.3.4

Treemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

3.3.5

Tijdlijn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3.3.6

Pie-chart en barchart . . . . . . . . . . . . . . . . . . . . . . . . . . 21

3.3.7

Scatterplot

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

xii

INHOUDSOPGAVE 3.3.8 3.4

3.5

Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

Programmeeromgevingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 3.4.1

Tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

3.4.2

R . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.4.3

Qt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

3.4.4

Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.4.5

Gnuplot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.4.6

Adobe Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

3.4.7

HTML5 met Google Charts . . . . . . . . . . . . . . . . . . . . . . 28

3.4.8

Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Besluit van de literatuurstudie . . . . . . . . . . . . . . . . . . . . . . . . . 30

4 Methode

31

4.1

Lay-out van de GUI

4.2

Inlezen van de gegevens

4.3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2.1

Inlezen van de objects of interest

. . . . . . . . . . . . . . . . . . . 33

4.2.2

Afbeelden van de objects of interest . . . . . . . . . . . . . . . . . . 34

Verwerken van de gegevens . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 4.3.1

Observatiescores berekenen . . . . . . . . . . . . . . . . . . . . . . . 35

4.3.2

ViewTime-bestand creëren . . . . . . . . . . . . . . . . . . . . . . . 36

4.4

Tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4.5

Barchart en scatterplot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 4.5.1

Barchart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

4.5.2

Scatterplot

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

4.6

Pie-chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.7

Tagcloud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.8

Tijdlijn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

4.9

4.8.1

Normale en gezoomde tijdlijn . . . . . . . . . . . . . . . . . . . . . 42

4.8.2

Overview tijdlijn . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Gebruiksvriendelijkheid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 4.9.1

Informatieberichten in de lay-out . . . . . . . . . . . . . . . . . . . 45

4.9.2

Tutorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4.9.3

Filter bij selectie objects of interest . . . . . . . . . . . . . . . . . . 46

INHOUDSOPGAVE

xiii

4.9.4

Foutmeldingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.9.5

Extra functionaliteit . . . . . . . . . . . . . . . . . . . . . . . . . . 47

4.10 Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 5 Resultaat 5.1

5.2

5.3

5.4

51

Uitzicht van de visualisaties . . . . . . . . . . . . . . . . . . . . . . . . . . 51 5.1.1

Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5.1.2

Tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

5.1.3

Barchart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

5.1.4

Scatterplot

5.1.5

Pie-chart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

5.1.6

Tagcloud . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.1.7

Tijdlijn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie . . . 57 5.2.1

Opstellen van een vragenlijst . . . . . . . . . . . . . . . . . . . . . . 57

5.2.2

Opstellen van een testpubliek . . . . . . . . . . . . . . . . . . . . . 58

Resultaten van het onderzoek . . . . . . . . . . . . . . . . . . . . . . . . . 59 5.3.1

Gebruiksvriendelijkheid . . . . . . . . . . . . . . . . . . . . . . . . . 59

5.3.2

Kwaliteit van de visualisaties . . . . . . . . . . . . . . . . . . . . . 60

Conclusie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

6 Besluit

63

6.1

Eindresultaat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

6.2

Toekomstig werk . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Bibliografie

65

A Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie 67

xiv

INHOUDSOPGAVE

Verklarende lijst van afkortingen en symbolen GUI Graphical User Interface EOG Electro-oculografie ORB Oriented FAST and Rotated BRIEF FAST Features from Accelerated Segment Test BRIEF Binary Robust Independent Elementary Features SIFT Scale Invariant Feature Transform SURF Speeded Up Robust Features ROI Region of Interest SDK Software Development Kit HTML HyperText Markup Language

xvi

INHOUDSOPGAVE

Lijst van figuren 1

Overview of all visualisations

. . . . . . . . . . . . . . . . . . . . . . . . .

x

3.1

Testpersoon die een EOG-meting ondergaat . . . . . . . . . . . . . . . . .

6

3.2

Voorbeeld van een lens met daarin een spoel vastgemaakt . . . . . . . . . .

6

3.3

Het hoofd van de testpersoon is vastgezet in een frame . . . . . . . . . . .

7

3.4

Eerste Purkinje Reflectie . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3.5

Tobii-eye-tracker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8

3.6

Testpersoon met een head-mounted eye-tracker

. . . . . . . . . . . . . . .

8

3.7

Remote eye-tracker aan een computerscherm . . . . . . . . . . . . . . . . .

9

3.8

Rijsimulatie met eye-trackercontrole . . . . . . . . . . . . . . . . . . . . . .

9

3.9

F-patroon in lezen van een website . . . . . . . . . . . . . . . . . . . . . . 10

3.10 Voorbeeld van feature matching . . . . . . . . . . . . . . . . . . . . . . . . 12 3.11 Region of interest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 3.12 Opbouw van het tekstbestand . . . . . . . . . . . . . . . . . . . . . . . . . 13 3.13 Het kwartet van Anscombe . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 3.14 Foutieve visualisatie bij nieuwsbericht en bijbehorende correctie . . . . . . 15 3.15 Visualisatie van het boek On The Road . . . . . . . . . . . . . . . . . . . . 16 3.16 Visualisatie bij een digitaal snelheidsbord . . . . . . . . . . . . . . . . . . . 17 3.17 Voorbeeld van een heatmap . . . . . . . . . . . . . . . . . . . . . . . . . . 17 3.18 Een tagcloud die de wereldbevolking voorstelt . . . . . . . . . . . . . . . . 18 3.19 Infograph van het BBP van Afrikaanse landen . . . . . . . . . . . . . . . . 19 3.20 Treemap van de hoeveelheid hernieuwbare energiebronnen in de wereld . . 20 3.21 Tijdlijn van een customer journey rapport ivm aankoop van een wagen . . 21 3.22 Voorbeeld van een pie-chart . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.23 Voorbeeld van een barchart . . . . . . . . . . . . . . . . . . . . . . . . . . 22 3.24 Voorbeeld van een scatterplot . . . . . . . . . . . . . . . . . . . . . . . . . 23

xviii

LIJST VAN FIGUREN

3.25 Visualisatie in Tableau softwarepakket . . . . . . . . . . . . . . . . . . . . 24 3.26 Standaard plot in R . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 3.27 Voorbeeld van een GUI in Qt . . . . . . . . . . . . . . . . . . . . . . . . . 26 3.28 Voorbeeld van een GUI in Java . . . . . . . . . . . . . . . . . . . . . . . . 27 3.29 Histogram in gnuplot . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 3.30 Website van Waterlife in Flash . . . . . . . . . . . . . . . . . . . . . . . . . 28 3.31 Voorbeeldvisualisaties in Google Charts . . . . . . . . . . . . . . . . . . . . 29 4.1

Form in Qt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4.2

Opbouw van myWidget object . . . . . . . . . . . . . . . . . . . . . . . . . 34

4.3

Inhoud van het viewtime-bestand . . . . . . . . . . . . . . . . . . . . . . . 37

4.4

Lay-out bij opstart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

4.5

Tutorial van de applicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

4.6

Foutmelding bij selecteren van te weinig objects of interest . . . . . . . . . 47

4.7

Foutmelding bij ontbreken van extern bestand . . . . . . . . . . . . . . . . 48

4.8

Opgeslagen afbeelding van de pie-chart visualisatie . . . . . . . . . . . . . 48

5.1

Interface na toevoegen van objecten . . . . . . . . . . . . . . . . . . . . . . 52

5.2

Resultaat van de tabelvisualisatie . . . . . . . . . . . . . . . . . . . . . . . 52

5.3

Resultaat van de barchartvisualisatie . . . . . . . . . . . . . . . . . . . . . 53

5.4

Resultaat van de scatterplotvisualisatie . . . . . . . . . . . . . . . . . . . . 54

5.5

Resultaat van de pie-chartvisualisatie . . . . . . . . . . . . . . . . . . . . . 54

5.6

Resultaat van de tagcloudvisualisatie . . . . . . . . . . . . . . . . . . . . . 55

5.7

Resultaat van de normale tijdlijnvisualisatie . . . . . . . . . . . . . . . . . 56

5.8

Resultaat van de overview tijdlijnvisualisatie . . . . . . . . . . . . . . . . . 56

5.9

Antwoordverdeling bij de enquête rond gebruiksvriendelijkheid . . . . . . . 60

5.10 Antwoordverdeling bij de enquête rond visualisatievoorkeur . . . . . . . . . 61

Hoofdstuk 1 Inleiding 1.1

Algemene probleemstelling

Onderzoeksgroep EAVISE voert in samenwerking met Thomas More Antwerpen een onderzoeksproject uit rond de automatische verwerking van eye-trackerdata. Mobiele eyetrackers produceren een enorme hoeveelheid data waardoor manuele verwerking zeer arbeidsintensief en tijdrovend is. Hierdoor kan het kostenplaatje nogal hoog oplopen. Het doel van dit onderzoeksproject is om object- en persoonsdetectie-algoritmes toe te passen op de beelden afkomstig van de eye-tracker zodat deze analyses in de toekomst automatisch kunnen gebeuren. In de marketingwereld is echter het presenteren van data soms belangrijker dan de data zelf, dus is het noodzakelijk in dit onderzoek een grafische interface te ontwerpen. Deze interface geeft de data op een impressionante maar overzichtelijke manier weer en moet bovendien gebruiksvriendelijk zijn.

1.2

Organisatie van deze tekst

Het vervolg van deze masterthesis is als volgt opgebouwd: we beginnen met een situering en een overzicht van de doelstellingen van deze masterthesis in hoofdstuk 2. In hoofdstuk 3 bevindt zich de literatuurstudie. Hierin wordt een overzicht gegeven van de meest relevante en actuele referenties over het onderwerp. Allereerst wordt een algemeen overzicht gegeven rond eye-tracking. Hierin wordt uitgelegd welke eye-trackers er op de markt zijn, de werking ervan en in welke domeinen ze het meest gebruikt worden. Vervolgens zal het reeds bestaande algoritme toegelicht worden waarin eye-trackerdata geanalyseerd worden op basis van objectdetectie-algoritmes. Daarna onderzoeken we welke visualisatiemethoden geschikt zijn voor het weergeven van eye-trackerresultaten. Tenslotte onderzoeken we welke programmeeromgevingen of -talen geschikt zijn voor implementatie van de volledige interface. In hoofdstuk 4 wordt uitleg gegeven bij het technisch ontwerp van de interface. In hoofdstuk 5 wordt de interface getest en de resultaten besproken. Hoofdstuk 6 bevat een conclusie over deze masterproef en een opsomming van eventueel toekomstig werk. In bijlage vindt u een CD-rom met de broncode en de digitale versie van deze masterthesis.

2

Inleiding

Hoofdstuk 2 Situering en doelstelling 2.1

Situering

De stijgende populariteit en technologische vooruitgang van eye-trackers zorgen ervoor dat meer en meer domeinen zich bezighouden met onderzoek gebaseerd op eye-trackerdata. De eye-tracker voorziet namelijk in objectieve data die verkregen worden uit de visuele processen van de gebruiker. Deze data laten zien waar de gebruiker naar gekeken heeft en waar hij zijn aandacht op gericht heeft. Eye-trackers worden steeds meer gebruikt bij onderzoeken in de marketing, psychologie, computerwetenschappen en geneeskunde (Duchowski, 2002). Deze toepassingen worden later nog uitgebreider behandeld. In Vlaanderen is er vooral interesse naar eye-trackeronderzoek vanuit verscheidene onderzoeksbureaus in de marketing- en user experiencesector. In verkennende gesprekken, user meetings, met deze onderzoeksbureaus werd al gauw duidelijk dat de representatie van deze verwerkte data een grote rol speelt. De onderliggende boodschap van de data moet snel en duidelijk weergegeven worden, zodat er op een efficiënte manier besluiten kunnen getrokken worden. Tot nog toe gebeurde de verwerking van deze eye-trackerdata steeds manueel. Dit is echter zeer arbeidsintensief en tijdrovend aangezien mobiele eye-trackers voor heel wat data zorgen. Het prijskaartje van deze analyses kan daardoor hoog oplopen. Daarom voert onderzoeksgroep EAVISE in samenwerking met Thomas More Antwerpen een onderzoeksproject uit, waarin de automatische verwerking van eye-trackerdata centraal staat. Binnen EAVISE is een dergelijk programma ontworpen waarin gebruik gemaakt wordt van objectdetectie-algoritmes. Dit programma verwerkt automatisch alle data van de eye-trackers en geeft weer hoe lang naar bepaalde objecten werd gekeken en in welke volgorde. Deze software heeft nog maar een beperkte user interface en de resultaten worden enkel in een tekstbestand weergegeven. Op vraag van de onderzoeksbureaus moet de grafische user interface uitgebreid worden, zodat deze ook toegankelijk is voor niet-experts op het vlak van beeldverwerkingsalgoritmes. Ook moeten de resultaten visueel weergegeven worden. Deze masterproef zal zich met het ontwerp van deze interface bezighouden.

4

Situering en doelstelling

2.2

Doelstelling

Het doel van deze masterproef is het ontwikkelen van een gebruiksvriendelijke interface om de resultaten van de objectdetecties weer te geven. Het volledige concept om data voor te stellen zal worden onderzocht en technisch uitgewerkt. Het ontwerp van de lay-out en functionaliteit van de visualisatie-omgeving zal gebeuren in samenspraak met enkele toekomstige eindgebruikers van de software: marketing-researchbureaus en userexperiencebureaus. De eisen van deze gebruikers moeten worden omgezet in de interface. In deze masterproef zal dus onderzocht worden op welke manieren data gevisualiseerd kunnen worden en welke implementatieomgevingen hiervoor het meest geschikt zijn. In essentie zal een antwoord worden gezocht op de volgende onderzoeksvragen: • Wat is de beste (duidelijkste, aantrekkelijkste en gebruiksvriendelijkste) manier om eye-trackerresultaten visueel voor te stellen? • Hoe kan je complexe beeldverwerkingsoperaties begrijpbaar laten bedienen door niet-experts? • Welke programmeertaal of -omgeving is geschikt voor het ontwerp van een gebruiksvriendelijke interface?

Hoofdstuk 3 Literatuurstudie In deze literatuurstudie zullen we overlopen op welke manieren eye-tracking kan gebeuren en de meest gebruikte eye-trackers voorstellen. Ook enkele toepassingen zullen worden besproken. Dit alles zal te lezen zijn in sectie 3.1. Vervolgens zullen we in sectie 3.2 het reeds door EAVISE ontwikkelde algoritme overlopen dat automatisch eye-trackeranalyses uit kan voeren met behulp van objectdetectiealgoritmes. In sectie 3.3 zullen we het achtereenvolgens hebben over het nut van datavisualisatie, enkele interessante visualisatiemanieren en de geschikte visualisatiemanieren voor eye-trackeranalyses. Tenslotte zullen we in sectie 3.4 de verschillende mogelijkheden van programmeeromgevingen voor de interface afwegen tegenover elkaar.

3.1

Eye-tracking

Eye-tracking is het proces waarbij men het zogenaamde gaze-point van een persoon meet. Anders gezegd, het gaze-point is het punt waarnaar deze persoon op een gegeven ogenblik aan het kijken is. Verder kan eye-tracking ook de positie van het oog relatief meten ten opzichte van het hoofd. Om deze zaken te meten, maken we gebruik van een eye-tracker. In deze sectie overlopen we enkele basisgegevens van de eye-tracker. We zullen de verschillende soorten eye-trackingtechnieken toelichten en de meest gebruikte eye-trackers overlopen. Ook zullen we overlopen welke domeinen eye-trackers kunnen gebruiken voor onderzoek.

3.1.1

Overzicht van de verschillende eye-tracking technieken

Een eye-tracker is dus het meetinstrument om oogbewegingen te meten en te bepalen naar waar er gekeken wordt. Er zijn echter verschillende technieken waarop de werking van een eye-tracker gebaseerd is (Duchowski, 2007). Electro-oculografie: Electro-oculografie (EOG) was lange tijd de meest gebruikte meettechniek. Deze techniek maakt gebruik van elektropotentiaalverschillen die aangelegd en gemeten worden rond het oog door middel van elektroden. Het oog werkt

6

Literatuurstudie als een dipool en door het oog te bewegen vindt er een verandering plaats in het potentiaaloppervlak. Op deze manier kan men achterhalen welke beweging het oog maakt. Deze techniek meet de oogbewegingen ten opzichte van het hoofd en is dus niet geschikt voor onderzoek waarbij de positie van het hoofd niet vastgelegd is. In figuur 3.1 zien we een testpersoon bij een EOG-meting.

Figuur 3.1: Testpersoon die een EOG-meting ondergaat

Oogaanhechting: Deze techniek maakt gebruik van, zoals de naam al impliceert, een aanhechting aan het oog. Dit gebeurt door middel van een contactlens met daarin een referentieobject, zoals een spiegelende stof of een soort spoel. In figuur 3.2 zien we een voorbeeld van een dergelijke contactlens met daarin een spoel. Met behulp van een elektromagnetisch veld kan men dan de positie van het oog bepalen aan de hand van het aanhangsel. Deze techniek is één van de meest precieze meetmethoden, maar ook de meest ingrijpende. Het inbrengen van de lens is moeilijk en de lens zelf is niet comfortabel. Ook hier wordt de positie van het oog relatief gemeten ten opzichte van het hoofd.

Figuur 3.2: Voorbeeld van een lens met daarin een spoel vastgemaakt

De bovenstaande technieken zijn zeer handig om oogbewegingen te meten, maar zijn allebei gemeten ten opzichte van de hoofdpositie. Om te kunnen kijken naar waar iemand kijkt, moet de hoofdpositie dus vastgezet worden, bijvoorbeeld met behulp van een frame zoals in figuur 3.3. Bij de volgende techniek is vastzetten van het hoofd niet nodig.

3.1 Eye-tracking

7

Figuur 3.3: Het hoofd van de testpersoon is vastgezet in een frame

Videogebaseerd optisch tracken: Bij optisch tracken wordt het oog zelf gefilmd en wordt er gekeken naar zowel de pupil als naar de corneale reflectie. Corneale reflecties, ook gekend als Purkinje-reflecties, ontstaan als er met (infrarood) licht op het oog wordt geschenen. Een voorbeeld van Purkinje-reflecties is te zien in figuur 3.4. Met behulp van beeldverwerkingsalgoritmes worden de eerste (en tegenwoordig ook de vierde) Purkinje-reflectie en het centrum van de pupil gelocaliseerd. Op basis van deze 2 afzonderlijke punten kunnen oogbewegingen onderscheiden worden van hoofdbewegingen. Het voordeel van deze techniek is dat het hele toestel op het hoofd van de gebruiker kan gemonteerd worden. Op deze manier kan de gebruiker rondlopen met de eyetracker en dus spreken we van een mobiele eye-tracker. In figuur 3.5 zien we de meest recente versie van de mobiele Tobii-eye-tracker.

Figuur 3.4: Eerste Purkinje Reflectie

3.1.2

Verschillende soorten eye-trackers

Nu we de verschillende technieken voor eye-tracking behandeld hebben, kunnen we de bestaande vormen van eye-trackers overlopen. De meest gebruikte eye-trackers kunnen wor-

8

Literatuurstudie

Figuur 3.5: Tobii-eye-tracker

den onderverdeeld in de remote eye-trackers en de mobiele of head-mounted eye-trackers. Tegenwoordig gebruiken ze allebei de techniek van het videogebaseerd optisch tracken. Head-mounted mobiele eye-trackers: Head-mounted eye-trackers zijn eye-trackers waarbij de volledige apparatuur op het hoofd van de testpersoon gezet kan worden. Dit gebeurt meestal in de vorm van een hoofddeksel of een brilmontuur. Figuur 3.6 toont een testpersoon met een eye-tracker verwerkt in een hoofddeksel. De testpersoon kan vrij rondlopen en achteraf kunnen de data overgezet worden op een computer. Dit type eye-trackers is aan te raden bij onderzoek in grote ruimtes, zoals een supermarkt of een museum, of onderzoek waarbij de testpersoon moet rondlopen.

Figuur 3.6: Testpersoon met een head-mounted eye-tracker

Remote eye-trackers: Remote eye-trackers zijn eye-trackers waarbij de eye-tracker op een vaste positie is bevestigd, bijvoorbeeld onder een computerscherm. De testpersoon maakt geen contact met de eye-tracker en ondervindt er dus geen last van. Remote eye-trackers worden vaak gebruikt bij onderzoeken die plaatsvinden achter een computerscherm, bijvoorbeeld het testen van webpagina’s of reclameboodschappen. In figuur 3.7 zien we een testpersoon aan een computerscherm met daarop een eye-tracker gemonteerd.

3.1.3

Toepassingen van eye-trackeranalyses

In dit onderdeel zullen we een overzicht geven van enkele domeinen waar eye-trackingonderzoek gebruikt kan worden. Op deze manier kunnen we een beeld schetsen van de mogelijkheden die eye-trackers en de verwerkingssoftware te bieden hebben.

3.1 Eye-tracking

9

Figuur 3.7: Remote eye-tracker aan een computerscherm

Psychologie: Een eerste toepassingsdomein voor eye-trackers is de psychologie. Zo blijkt uit psychologisch onderzoek dat er een verband bestaat tussen personen met afwijkende oogbewegingen en personen met schizofrenie (Holzman et al., 1988). Door eye-trackingexperimenten uit te voeren kan men dus al vroegtijdig vaststellen of iemand gevoelig is aan het gen voor schizofrenie. Een ander voorbeeld uit de psychologie is het vaststellen van autisme bij kinderen aan de hand van hun gaze-points bij sociale interactie (Spezio et al., 2007). Kinderen met beginnend autisme focussen bij sociale contacten meer op de mond dan op de ogen van de andere persoon. Veiligheidsvoorzieningen: In een ander toepassingsdomein werd gekeken of eye-trackers konden gebruikt worden als veiligheidscontrole bij vrachtwagenchauffeurs. Veel auto-ongelukken gebeuren door een onoplettende of vermoeide chauffeur. Met een remote eye-tracker op het dashboard geplaatst, werd gecontroleerd of de chauffeur zijn aandacht wel op de weg hield. Indien de chauffeur zijn concentratie zou verliezen, of zelfs in slaap zou vallen, werd een alarmsignaal gegenereerd (Ji and Yang, 2002). In figuur 3.8 zien we een experiment waarin een testpersoon in een simulatieomgeving gecontroleerd wordt door de remote eye-tracker die vastgemaakt is onder het scherm.

Figuur 3.8: Rijsimulatie met eye-trackercontrole

Luchtvaart: Ook in de luchtvaart gebruikt men eye-trackingtechnologie om vast te stellen welke bron van informatie in de cockpit de belangrijkste is. De testen zijn

10

Literatuurstudie uitgevoerd in een flightsimulator. De Primary Flight Display wordt door alle piloten als de belangrijkste bron beschouwd. Ook valt op dat de meer ervaren piloten minder naar dit display kijken dan nieuwe piloten (Duchowski, 2002).

Marketing: Eye-tracking kan helpen bij het testen van de effectiviteit van reclameboodschappen. Zowel in geprinte reclame als reclame op televisie kan nagegaan worden welke delen van reclame in het oog springen en welke juist door niemand opgemerkt worden. Veel reclamebureaus gebruiken eye-trackeranalyses dus, alvorens hun advertenties te publiceren. Computerwetenschappen: Zoals bij marketing kunnen ook ontwerpers van websites gebruik maken van eye-trackeronderzoek. Onderzoek toont aan dat een website meestal in een F-patroon gelezen wordt (Shrestha and Lenz, 2006). In figuur 3.9 toont een heatmap aan welke delen van een webpagina het meest gelezen worden. Als webdesigner is het dus aangeraden hier rekening mee te houden.

Figuur 3.9: F-patroon in lezen van een website

3.1.4

Conclusie

In dit hoofdstuk hebben we kort de bestaande eye-trackingtechnieken bestudeerd. De meest gebruikte techniek is deze van het videogebaseerd optisch tracken. Deze maakt gebruikt van de visuele kenmerken van het oog, zoals reflecties van licht en de positie van de pupil. Hierdoor is het niet nodig om de hoofdpositie vast te zetten en is het niet nodig om een speciale lens in te brengen. De meest gebruikte eye-trackers zijn de remote eye-tracker en de head-mounted eye-tracker, die beiden van deze techniek gebruik maken. Voor deze masterproef zullen wij ons beperken tot het gebruik van mobiele head-mounted eye-trackers, omdat het toepassingsveld daarvan groter is. Tenslotte hebben we in dit hoofdstuk een opsomming gegeven van enkele toepassingen van eye-trackeranalyses. Onder meer in de psychologie, marketing en computerwetenschappen wordt al volop gebruik gemaakt van eye-trackers. Dit benadrukt nogmaals het belang van een gebruiksvriendelijke interface, waar iedereen gebruik van kan maken.

3.2 Algoritme

3.2

11

Algoritme

Binnen EAVISE heeft men een algoritme ontwikkeld dat objectdetectie-algoritmes gebruikt om data van eye-trackinganalyses automatisch te verwerken. Het is voor dit algoritme dat een grafische user interface ontwikkeld moet worden in het kader van deze masterproef. Daarom zullen we in dit hoofdstuk de opbouw en de werking van het algoritme bespreken.

3.2.1

Werking van het algoritme

Het algoritme maakt gebruik van de ORB-objectherkenningstechniek. ORB staat voor Oriented Fast and Rotated Brief, wijzend op de twee technieken (FAST en BRIEF) waarop de techniek gebaseerd is. ORB is een nieuwe variant op de meer gekende SIFT en SURFalgoritmes. SIFT staat voor Scale-Invariant Feature Transform en SURF voor Speeded Up Robust Features. Zowel ORB, als SIFT en SURF zijn feature detectors, wat wil zeggen dat ze kenmerkende eigenschappen uit objecten halen. ORB heeft dezelfde efficiëntie als SIFT of SURF maar is nog minder gevoelig voor ruis. ORB is zeer geschikt voor real-time uitvoering aangezien het ook sneller is dan SIFT en SURF (Rublee et al., 2011). De voorgestelde techniek voor automatische analyse van eye-trackerdata kan opgesplitst worden in 2 delen. Als eerste moet er een training plaatsvinden waarin het algoritme "leert"hoe het bepaalde objecten kan herkennen. Hiervoor selecteert het ORB-algoritme features, specifieke kenmerken van een object, vanuit de objects of interest en slaagt deze features op in een databank. Vervolgens kan het eigenlijke experiment met de eye-tracker beginnen en dus de verwerking van de binnengekomen beelden. Ook van deze beelden worden de features bepaald en vergeleken met die van de testbeelden. Op deze manier kan onderzocht worden of twee objecten een overeenkomst hebben. Indien er voldoende overeenkomsten zijn tussen 2 objecten, wordt de objectherkenning aan de gebruiker meegedeeld (De Beugher et al., 2012). In figuur 3.10 zien we een voorbeeld waarin een object of interest herkend wordt aan de hand van features. Rechtsbovenaan zien we het object of interest van een speelkaart. Rechtsonderaan zien we een videofragment waarin een testpersoon dezelfde speelkaart toont aan de camera. De paarse lijnen tonen de overeenkomsten tussen de features van de twee speelkaarten. Het object wordt herkend als de speelkaart op de objects of interest en dit wordt links aan de gebruiker getoond door middel van de groene kader rond de speelkaart. Voor eye-trackeranalyses is het echter niet nodig om de gehele video te vergelijken met de features vanuit de testbeelden. De output van eye-tracker bestaat uit videobeelden en een bijbehorende lijst met gaze-point-coördinaten. Voor elk videoframe is er een bijpassend gaze-point bepaald. Op dat specifieke moment werd er naar die specifieke coördinaat gekeken. Voor elk frame wordt er rond het gaze-point een region of interest (ROI) getrokken. Op deze manier hoeven enkel objecten binnen de region of interest gezocht te worden, omdat naar objecten in de achtergrond niet echt gekeken werd. Dit beperkt eveneens de verwerkingstijd van het algoritme. In figuur 3.11 zien we de region of interest afgestippeld rond het groene gaze-point. Naar de rest van het frame wordt niet gekeken en dus hoeft

12

Literatuurstudie

Figuur 3.10: Voorbeeld van feature matching

enkel de ROI onderzocht worden.

Figuur 3.11: Region of interest

Het doel van het algoritme is het vinden van overeenkomstige features tussen de objects of interest en de videobeelden van de eye-tracker. Een object wordt herkend als er voldoende matches zijn. Het aantal matches bepaalt hoe sterk de overeenkomst is. Deze overeenkomsten tussen testbeelden en eye-trackerdata worden bijgehouden in afzonderlijke tekstbestanden. De opbouw van zo’n tekstbestand wordt in de volgende sectie behandeld.

3.2.2

Opbouw van het output-bestand

De uitvoer van het algoritme wordt bijgehouden in tekstbestanden. Voor elk object of interest wordt een tekstbestand aangemaakt met daarin een overzicht van alle frames en of er al dan niet een detectie heeft plaatsgevonden. In figuur 3.12 ziet u een voorbeeld van een tekstbestand. Dit is het tekstbestand dat hoort bij het tweede object of interest. In de linkerkolom staat het framenummer en in de rechterkolom de score van de detectie.

3.2 Algoritme

13

Het getal 999 maakt duidelijk dat er geen detectie heeft plaatsgevonden. Hoe lager de score in de rechtertabel, hoe nauwkeuriger de detectie is. In frame 6223 heeft dus geen detectie plaatsgevonden van object 2, maar in de frames daarna wel.

Figuur 3.12: Opbouw van het tekstbestand

Het is vertrekkende van deze tekstbestanden dat de grafische user interface moet opgebouwd worden. Heel belangrijk is ook de nuance van deze gegevens. Als er gedurende 50 frames detectie plaatsvindt, dan 1 frame geen detectie en daarna terug 50 frames detectie, dan zal het hoogstwaarschijnlijk om dezelfde detectie gaan. Dit geldt ook zo bij het omgekeerde geval. Ook zou het nuttig zijn moest er een optie aanwezig zijn zodat de gebruiker zelf eventuele foutieve detecties kan verwijderen.

3.2.3

Conclusie

Binnen EAVISE is een algoritme ontwikkeld dat automatisch eye-trackergegevens kan analyseren op basis van objectdetectie-algoritmes. Dit algoritme is gebaseerd op de ORBobjectherkenningstechniek. Het algoritme onderzoekt of er overeenkomsten zijn tussen een aantal op voorhand vastgelegde testbeelden en de data van het eye-trackeronderzoek. Deze informatie wordt opgeslagen in tekstbestanden en het is vanuit deze tekstbestanden dat een grafische user interface moet opgebouwd worden om de resultaten op een visueel aantrekkelijke manier weer te geven. De mogelijke visualisatiemanieren worden in het volgende hoofdstuk geschetst.

14

3.3

Literatuurstudie

Datavisualisatie

Datavisualisatie is de studie rond het voorstellen van informatie door middel van grafische voorstellingen. Onder invloed van technologische vooruitgang en een grote toename van data wordt datavisualisatie steeds belangrijker. De grote kracht van visualisatie is dat het grote hoeveelheden van complexe data kan voorstellen op een manier zodat er snel en efficiënt interne verbanden gelegd kunnen worden. Grafische voorstellingen zijn vaak zeer effectief in het overbrengen van informatie (Chen et al., 2008). Toch gebeuren er vaak fouten bij het maken van grafische voorstellingen, waardoor de informatie verkeerd wordt weergegeven, of waardoor er verkeerde interpretaties van de data kunnen plaatsvinden. Dit kan te wijten zijn aan het feit dat er geen universele afspraken of theorieën te vinden zijn rond datavisualisatie. Toch zijn er voldoende praktische voorbeelden te vinden van geslaagde grafische voorstellingen. In dit hoofdstuk zullen we eerst het belang van correcte datavisualisatie schetsen en vervolgens zullen we enkele concrete voorstellingen overlopen en bepalen of ze geschikt zijn voor het voorstellen van eye-trackerdata.

3.3.1

Het belang van datavisualisatie

Het gebruik van interactieve visuele voorstellingen helpt bij het verwerken van informatie. Het menselijk brein is gespecialiseerd in het herkennen van visuele patronen en daardoor zal een visuele voorstelling sneller begrepen worden door mensen dan een reeks van getallen die dezelfde data voorstellen. Mensen hebben ook een beperkt kortetermijngeheugen, waardoor het noodzakelijk is om een boodschap te illustreren, zodat deze niet zo snel vergeten wordt (Few, 2009). Het belang van grafische voorstellingen van gegevens kan aangetoond worden met het voorbeeld van het kwartet van Anscombe. Dit voorbeeld bevat 4 datasets, die statistisch gezien dezelfde eigenschappen hebben, de gemiddelden en varianties zijn voor alle 4 gelijk. Als we deze datasets echter grafisch voorstellen, valt op dat deze datasets totaal verschillend zijn. In figuur 3.13 is het kwartet van Anscombe zowel statistisch als grafisch voorgesteld. Uit de grafische voorstelling kunnen we afleiden dat de gegevens uit dataset 1 en 3 een lineair verband hebben, terwijl dat in dataset 2 helemaal niet het geval is. Het kwartet van Anscombe toont dus aan dat een grafische voorstelling noodzakelijk is om conclusies te trekken. Verder toont het ook de invloed van uitschieters aan, door de uitschieters in dataset 3 en 4 wordt een foute lineariteit voorgesteld. Het voorbeeld van Anscombe is een voorbeeld waarbij datavisualisatie correct gebruikt wordt en op deze manier bijdraagt aan het verwerken van de gegevens. Toch kan een grafische voorstelling ook gebruikt worden om de waarheid van gegevens te vervormen. In figuur 3.14 zien we links een nieuwsbericht waarin getoond wordt hoeveel de belastingen zouden bedragen nadat de besparingen door president Bush zouden aflopen. In eerste instantie lijkt het alsof er 5 keer zoveel belastingen zouden moeten betaald worden, maar als we beter kijken zien we dat het slechts om een stijging van 4,6% gaat. Doordat de verticale as niet op 0 begint krijgen we een vertekend beeld van de gegevens. Rechts in de figuur wordt de correcte weergave getoond, waar het verschil toch al wat minder beangstigend lijkt.

3.3 Datavisualisatie

15

Figuur 3.13: Het kwartet van Anscombe

Figuur 3.14: Foutieve visualisatie bij nieuwsbericht en bijbehorende correctie

16

Literatuurstudie

Uit de twee voorgaande voorbeelden kunnen we stellen dat we visualisatie kunnen gebruiken als hulpmiddel om informatie, al dan niet op een correcte manier, over te brengen naar anderen. We willen dit op een leuke, esthetische manier doen, zodat de gebruiker deze informatie niet snel vergeet en aangetrokken wordt tot de informatie. Daarom is ook het esthetisch aspect van de visualisatie belangrijk. Maar ook daar kan men ver in gaan. Zo ver zelfs dat visualisatie een vorm van kunst wordt. In figuur 3.15 zien we een grafische voorstelling van het eerste deel van het boek "On the road". Het gaat hier om een kunstproject van Stefanie Posavec. Het boek bestaat uit een aantal hoofdstukken, de hoofdstukken bestaan uit paragrafen en de paragrafen uit zinnen. Deze verdeling wordt weergegeven in een boomstructuur. Esthetisch gezien is dit een zeer mooie visualisatie, maar de informatie die het probeert weer te geven is ver zoek. In dit geval heeft het esthetische aspect meer nadruk gekregen dan het informatieve.

Figuur 3.15: Visualisatie van het boek On The Road

Om dit hoofdstuk af te sluiten geven we nog een voorbeeld van de kracht van visualisatie. Op vele wegen in de bebouwde kom vinden we tegenwoordig digitale snelheidsborden terug. Op deze manier geven de borden feedback naar de autobestuurder over hun snelheid. Als ze onder de maximaal toegelaten snelheid blijven, toont het bord een lachend gezichtje. Rij je echter te snel, laat het bord een droevig gezichtje zien. In figuur 3.16 zien we de werking van zo’n verkeersbord. Hoewel het niet op iedereen de gewenste werking zal hebben, zullen veel automobilisten hun snelheid aanpassen om een lachend gezichtje te zien te krijgen. Op deze manier kan visualisatie ook een overtuigende rol spelen. Als conclusie van deze sectie kunnen we zeggen dat visualisatie enorm belangrijk is voor het voorstellen van data. Dankzij een goede grafische voorstelling zullen de data mak-

3.3 Datavisualisatie

17

Figuur 3.16: Visualisatie bij een digitaal snelheidsbord

kelijker te verwerken zijn voor het menselijk brein. Toch moeten we oppassen dat we niet overdrijven met het esthetisch aspect van deze voorstellingen. De boodschap moet namelijk duidelijk blijven. In de rest van dit hoofdstuk zullen we enkele populaire visualisatiemanieren overlopen en hun geschiktheid voor eye-trackeranalyses bespreken.

3.3.2

Heatmap

Een heatmap is een grafische voorstelling van data die tweedimensioneel kan voorgesteld worden. Een heatmap maakt gebruik van kleuren om de bijbehorende waardes van de variabelen voor te stellen. Daarbij is de warmte van de kleur belangrijk. Een blauwe kleur associëren we met koud, terwijl geel al warmer wordt en oranje of rood enorm heet zijn. Hoe warmer de kleur, hoe hoger de waarde van de variabele. In figuur 3.17 zien we een voorbeeld van een heatmap. Deze heatmap toont aan naar welke delen van een website het meest gekeken wordt. De menu-items links en de zoekvelden rechts eisen veel aandacht op van de gebruiker, maar ook de titel centraal bovenaan wordt vaak bekeken. Naarmate de tekst vordert, haken meerdere lezers af.

Figuur 3.17: Voorbeeld van een heatmap

Het grote voordeel van heatmaps is dat ze zeer eenvoudig te begrijpen zijn. De associatie tussen kleur en warmte is makkelijk te maken en er is dus niet veel moeite nodig om een heatmap te lezen. Ook toont een heatmap enorm veel data. Heatmaps worden daarom vaak gebruikt om het gebruik van een website, of de visuele aandachtsverde-

18

Literatuurstudie

ling voor te stellen (Bojko, 2009). We kunnen dus stellen dat heatmaps ideaal zijn voor eye-trackeranalyses. Hoewel, hier moeten we onderscheid maken tussen het gebruik van remote eye-trackers en mobiele eye-trackers. Bij remote eye-trackers is er een vast tweedimensioneel kader gekend waarbinnen de gebruiker kijkt, bijvoorbeeld een computerscherm. Bij mobiele eye-trackers loopt de gebruiker rond in een ongekende omgeving, waardoor een 3D-voorstelling van een heatmap nodig zou zijn. Tevens zou de volledige plattegrond van de omgeving gekend moeten zijn. Bij remote eye-trackers kan een heatmap dus wel gebruikt worden, omdat verschillende testpersonen naar hetzelfde scherm zitten te kijken. De data kunnen dus voorgesteld worden op datgene dat op dit scherm te zien is. Maar bij mobiele eye-trackers hebben alle testpersonen verschillende paden gevolgd en er is dus geen gemeenschappelijk iets waarop de data in de vorm van een heatmap kunnen worden voorgesteld. Een heatmap is dus niet geschikt voor mobiele eye-trackeranalyses.

3.3.3

Tagcloud

Een tagcloud, ook wel "wordcloud"genoemd, is een grafische voorstelling van woorden of tekst waarbij de grootte en duidelijkheid van het lettertype varieert. Tags zijn sleutelwoorden die gebruikers kunnen ingeven bij webbronnen om deze informatie te organiseren voor zichzelf en anderen. Een tagcloud verzamelt deze tags om zo een beeld te scheppen van de inhoud van de bron. De woorden die vaker gebruikt worden, of links die vaak worden aangeklikt, worden groter en duidelijker voorgesteld. Vaak wordt er ook gebruik gemaakt van kleuren. Op deze manier kan de gebruiker snel een beeld krijgen van welke gegevens er belangrijk of populair zijn (Lohmann et al., 2009). In figuur 3.18 zien we een tagcloud die de bevolking van landen in de wereld voorstelt. Hoe meer inwoners het land heeft, hoe groter de naam van dat land zal afgebeeld worden. Op deze figuur is duidelijk te zien dat China het meeste inwoners heeft.

Figuur 3.18: Een tagcloud die de wereldbevolking voorstelt

3.3 Datavisualisatie

19

Net zoals een heatmap kan een tagcloud veel data op een eenvoudige en begrijpbare manier voorstellen. Een tagcloud is een populaire presentatiemanier die vaak gebruikt wordt op websites. tagclouds zijn niet alleen visuele voorstellingen maar kunnen ook als navigatietool gebruikt worden. De tags zijn dan links die verwijzen naar bijbehorende delen van de website. Voor onze eye-trackeranalyses lijken tagclouds in eerste instantie niet zo geschikt. De bedoeling van de interface is om de objecten voor te stellen en visueel weer te geven hoeveel keer er gekeken is naar dat object. Toch kunnen we elk object vervangen door een gepast woord en deze woorden in een tagcloud weergeven. Bijvoorbeeld bij onderzoek in de supermarkt, waar er gekeken wordt welk merk het populairst is, kunnen we het logo van het merk als object ingeven en de naam van het merk visueel weergeven in een tagcloud. Een andere mogelijkheid zou zijn om de objecten zelf in verschillende groottes naast elkaar, of door elkaar voor te stellen. Een voorbeeld van zo’n voorstelling is te zien in figuur 3.19. Daarin wordt het bruto binnenlandsproduct (BBP) van Afrikaanse landen naast elkaar gezet om te vergelijken.

Figuur 3.19: Infograph van het BBP van Afrikaanse landen

3.3.4

Treemap

Een treemap is een grafische voorstelling die gebruikt maakt van relatieve oppervlakte om hiërarchische data voor te stellen. In theorie wordt een treemap gebruikt om data uit een boomstructuur voor te stellen. Hiervoor beginnen we bij de wortel van de binaire boom en verdelen een rechthoek in evenveel delen als er aftakkingen zijn. Vervolgens verdelen we deze kleinere rechthoeken in evenveel rechthoeken als de bijbehorende node vertakkingen heeft. Op deze manier kunnen we recursief de hele boom afgaan (Johnson and Shneiderman, 1991). In figuur 3.20 zien we een voorbeeld van een treemap. In deze

20

Literatuurstudie

treemap stellen de oppervlaktes de relatieve hoeveelheid hernieuwbare energiebronnen voor per land. In deze treemap stelt de kleur nog een extra parameter voor, namelijk de jaarlijkse procentuele verandering.

Figuur 3.20: Treemap van de hoeveelheid hernieuwbare energiebronnen in de wereld

Een treemap is dus een goede manier om relatieve hoeveelheden voor te stellen. Hoewel de data van een eye-tracker niet hiërarchisch is en dus niet in een boomstructuur moet voorgesteld worden, lijkt deze visualisatietechniek toch uiterst geschikt voor eyetrackeranalyses. In een treemap kunnen de verschillende objecten met elkaar vergeleken worden op basis van hoeveel keer er naar gekeken is. Met de kleur kunnen we eventueel nog een extra parameter voorstellen, bijvoorbeeld de categorie waartoe het object behoort.

3.3.5

Tijdlijn

Een tijdlijn is een grafische voorstelling waarbij de data voorgesteld wordt in functie van de tijd. Op deze manier kan worden duidelijk gemaakt in welke volgorde een opeenvolging van feiten heeft plaatsgevonden. Tijdlijnen worden vaak gebruikt bij customer journey onderzoek. In dit soort onderzoeken wordt onderzocht op welke manier een testpersoon van punt A naar punt B geraakt. Tijdens deze "reis"zal de testpersoon een aantal contactpunten tegenkomen. Aan de hand van deze onderzoeken kunnen organisaties zich in de plaats stellen van hun klanten en zo hun dienstverlening verbeteren (Nenonen et al., 2008). Als voorbeeld nemen we een hotel dat wil nagaan of ze goed bereikbaar zijn vanaf het nabij gelegen station. De testpersoon, in dit geval de bezoeker van het hotel, komt op zijn weg naar het hotel een aantal contactpunten tegen. Zo kunnen er in de nabijheid van het station wegwijzers staan naar het hotel, hij kan het adres hebben opgezocht en ingegeven op zijn smartphone of hij kan hulp gevraagd hebben in het station zelf. Op basis van deze gegevens en in welke volgorde ze plaatsvinden, kan het management van het hotel ingrijpen door extra wegwijzers te voorzien, of op de website een volledige beschrijving te geven. Aangezien eye-trackeranalyses vaak gebruikt worden voor dergelijke customer journeyonderzoeken is het noodzakelijk om een tijdlijn te voorzien in onze interface. In figuur 3.21

3.3 Datavisualisatie

21

zien we een voorbeeld van een tijdlijn. De contactpunten worden weergegeven op de horizontale tijdsas en de verticale as geeft aan of het om een positieve of een negatieve ervaring gaat. De tijdlijn in onze interface zal de objecten die gedetecteerd worden, weergeven in functie van de tijd.

Figuur 3.21: Tijdlijn van een customer journey rapport ivm aankoop van een wagen

3.3.6

Pie-chart en barchart

Een pie-chart, of een taartdiagram, is een grafische voorstelling die de statistische verdeling van de data weergeeft. Hiervoor wordt een cirkel opgedeeld in sectoren die overeenkomen met de waarde van de variabele. In figuur 3.22 zien we een pie-chart die weergeeft op welke manier gebruikers nieuwsberichten lezen via feeds.

Figuur 3.22: Voorbeeld van een pie-chart

Een barchart, of een staafdiagram, is een grafische voorstelling die de statistische verdeling van de gegevens weergeeft aan de hand van verticale staven. In figuur 3.23 zien we een barchart dat weergeeft welke scores studenten behaalden op hun test.

22

Literatuurstudie

Figuur 3.23: Voorbeeld van een barchart

Hoewel pie-charts en barcharts niet langer de populairste visualisatietechnieken zijn, zijn het nog steeds uitstekende manieren om relaties tussen data weer te geven. Indien ze juist gebruikt worden, kunnen ze een meerwaarde zijn tussen de moderne visualisatietechnieken (Unwin et al., 2007).

3.3.7

Scatterplot

Een scatterplot, of een spreidingsdiagram, is een wiskundige voorstelling van gegevens. Deze voorstelling maakt gebruik van een Cartesisch coördinatenstelsel die de data als een punt voorstelt binnen dit stelsel. Voor elke dimensie is er een referentie-as voorzien en deze assen staan onderling loodrecht op elkaar. Elke as stelt een afzonderlijke variabele voor. In figuur 3.24 zien we een scatterplot waarbij de horizontale as het gewicht van een wagen voorstelt en de verticale as de afstand die kan afgelegd worden met een vastgelegde hoeveelheid brandstof. Een scatterplot wordt vaak gebruikt om een relatie tussen verschillende variabelen voor te stellen. In het voorbeeld kunnen we duidelijk aflezen dat het gewicht van de wagen een grote rol speelt bij het verbruik van de wagen. Met een lichte wagen kan men een grotere afstand afleggen dan met een zware wagen met dezelfde hoeveelheid brandstof. Omdat we 2 verschillende variabelen afzonderlijk kunnen voorstellen is een scatterplot een uitermate geschikte visualisatiemanier voor onze probleemstelling.

3.3.8

Conclusie

In onderzoeksbureaus wordt soms gezegd dat de voorstelling van de data belangrijker is dan de data zelf. Hoewel er op esthetisch vlak enkele prachtige visualisatietechnieken bestaan, lijkt het ons toch het belangrijkste dat er nuttige conclusies uit de gegevens kunnen getrokken worden. De visualisatie is slechts een manier om de data op een duidelijke manier aan de gebruiker te tonen. Er zijn veel mogelijkheden qua visualisatie, waarvan de meeste toch afhangen van persoonlijke voorkeur. Toch zullen we in deze masterproef proberen om de meest gekende visuali-

3.4 Programmeeromgevingen

23

Figuur 3.24: Voorbeeld van een scatterplot

saties uit te werken. In dit hoofdstuk hebben we de meest gebruikte visualisatiemethoden onderzocht en gekeken of deze geschikt waren voor het verwerken van eye-trackeranalyses. Hoewel de heatmap bij remote eye-trackers één van de meest populaire grafische voorstellingen is, lijkt deze ons niet geschikt voor mobiele eye-trackers. De tagcloud is dan weer wel geschikt, indien we objecten weergeven in plaats van woorden. Ook met behulp van een scatterplot en een tijdlijn zullen we proberen de data voor te stellen. Tenslotte zullen we ook een variatie op de pie-chart en het barchart proberen te verwezenlijken, omdat deze oude methoden toch nog een meerwaarde kunnen zijn. In het volgende hoofdstuk zullen we onderzoeken welke programmeeromgevingen geschikt zijn om dergelijke visualisatie te construeren. Aan het einde van het hoofdstuk zullen we dan beslissen welke visualisaties we gaan toevoegen aan de interface en in welke programmeeromgeving dit zal gebeuren.

3.4

Programmeeromgevingen

Nu we weten welke visualisatiemethodes het meest geschikt zijn voor eye-trackeranalyses kunnen we gaan onderzoeken in welke programmeeromgeving we onze interface kunnen ontwerpen. Op de themasessie van Leuven Inc. rond informatievisualisatie werden ons enkele omgevingen voorgesteld, zoals R en Tableau. In dit hoofdstuk zullen we een aantal programmeeromgevingen of -talen voorstellen en nagaan welke aan alle eisen voldoen om een degelijke interface te bouwen.

24

3.4.1

Literatuurstudie

Tableau

Tableau is een softwarepakket dat verschillende manieren aanbiedt om data te visualiseren. Volgens hun website helpt Tableau mensen om hun data te bekijken en te begrijpen. Het doel is om op een snelle en dynamische manier data te kunnen analyseren. Tableau is makkelijk te gebruiken en laat toe om data vanuit verschillende standpunten te bekijken. De grafische voorstellingen die gegenereerd worden zien er zeer professioneel en verfijnd uit (Clyman, 2005). Tableau maakt gebruik van VizQL, een query-taal die query’s maakt van ingevoerde data en deze grafisch voorstellen. Deze data kunnen ingevoerd worden vanuit een spreadsheet, maar ook rechtstreeks vanuit een databank. In figuur 3.25 zien we een voorstelling van data in Tableau. Het voordeel van Tableau is dat al deze voorstellingen interactief zijn. De gebruiker kan op elk moment stukken data selecteren, vergelijken met andere data. De gebruiker heeft ook zelf de keuze welke visualisatie de voorkeur heeft. Rechts bevinden zich checkboxes waarin de data kunnen gefilterd worden.

Figuur 3.25: Visualisatie in Tableau softwarepakket

Het softwarepakket van Tableau is ronduit indrukwekkend. De visualisaties ogen enorm professioneel en zijn snel en makkelijk te gebruiken. Een eerste nadeel voor onze interface is dat de tekstbestanden die uit het algoritme van EAVISE voortkomen, niet direct in te voeren zijn in Tableau. De tekstfiles zouden moeten aangepast worden zodat reeds bepaald is hoe lang naar een object gekeken wordt. Dat is op dit moment nog niet het geval. Het grootste nadeel is het prijskaartje, met net geen 2000evoor de professionele versie. Voor deze masterproef zullen we dus geen gebruik maken van Tableau, misschien enkel als voorbeeld van hoe een goede visualisatie-interface eruit kan zien.

3.4 Programmeeromgevingen

3.4.2

25

R

R is een gratis software-omgeving voor statistische berekeningen en voorstellingen. Deze programmeertaal kan gebruikt worden om statistische software en data-analyses te maken. De naam R komt voort uit de namen van de uitvinders, Ross Ihaka and Robert Gentleman. Er zijn veel mogelijkheden op het vlak van statistische analyse, maar grafische voorstellingen zijn niet het belangrijkste doel van R. Toch zijn er inmiddels al veel packages die toelaten om verschillende grafische voorstellingen te gebruiken (Unwin et al., 2013).

Figuur 3.26: Standaard plot in R

In figuur 3.26 zien we een standaard plot in R. Door het gebruik van verschillende packages kunnen er andere visualisaties, zoals een barchart, bekomen worden. Toch maakt dit het programmeerwerk veel moeilijker. Eén van de voordelen van R is dat de objecten die gecreëerd worden in R, gekoppeld kunnen worden aan code geschreven in C++, C of Java. De voornaamste nadelen aan R zijn dat er niet echt veel mogelijkheden van visualisatie zijn en dat het moeilijk is om een interface te maken met menu’s of sliders. R lijkt ons dus meer geschikt voor analytische toepassingen dan voor het ontwerp van een grafische user interface.

3.4.3

Qt

Qt is een C++ framework om grafische user interfaces te ontwikkelen. Het wordt wereldwijd gebruikt voor het ontwerp van software. Het kenmerkende aan Qt is dat het cross-platform is, wat wil zeggen dat de gemaakte software op de meestgebruikte besturingssystemen kan werken, maar hiervoor moet de broncode wel op het gewenste besturingssysteem gecompileerd worden. Hoewel er een betalende versie van Qt is, kan je als gebruiker Qt ook gratis gebruiken op voorwaarde dat je al je veranderingen aan het framework openbaar maakt (Blanchette and Summerfield, 2006). Qt is dus uitermate geschikt voor het creëren van grafische user interfaces. En er bestaan

26

Literatuurstudie

libraries die toelaten om verschillende visualisaties te ontwerpen. Een ander voordeel aan Qt is dat er zowel in de software development kit (SDK) als op het internet een massa voorbeelden te vinden zijn. In figuur 3.27 zien we een voorbeeld van een GUI gemaakt in Qt. In deze GUI is het mogelijk om een logo te ontwerpen voor een applicatie, in dit geval het logo van Qt zelf.

Figuur 3.27: Voorbeeld van een GUI in Qt

Qt is dus zeker geschikt om een user interface te bouwen en laat ons toe om onze eigen visualisaties te ontwerpen. Een extra uitdaging vinden we het feit dat er in C++ gecodeerd wordt, wat in onze opleiding nog niet uitgebreid behandeld is. Toch is C++ één van de meestgebruikte programmeertalen op dit moment. Aangezien ook het algoritme van EAVISE met behulp van Qt geschreven is, lijkt het ons logisch om ook de GUI te ontwerpen in Qt.

3.4.4

Java

Een andere programmeertaal die geschikt is om GUI’s te ontwerpen is Java. Aangezien in onze opleiding Java uitvoerig is behandeld, weten we dat Java geschikt is als programmeertaal voor interfaces. We kunnen namelijk gebruik maken van de Swing-bibliotheek, waarin een aantal voorgedefinieerde klassen zitten voor bijvoorbeeld knoppen, menu-items en panelen te ontwerpen (Barnes and Kölling, 2007). In figuur 3.28 zien we een voorbeeld van een GUI in Java gemaakt met behulp van Swing. Hier worden enkele voorgedefinieerde klassen van swing gebruikt zoals JButton voor de knoppen, JTextField voor de tekstvelden en JRadioButton voor de selectiebolletjes. Ook voor grafische voorstellingen kunnen we eventueel bibliotheken toevoegen. Ook in Java kunnen we cross-platform programmeren en ook hier zijn verschillende grafische voorstellingen mogelijk. Onze voorkennis van Java is groot en we hebben reeds GUI’s in Java geprogrammeerd. Ook Java is dus een mogelijke keuze van programmeertaal.

3.4 Programmeeromgevingen

27

Figuur 3.28: Voorbeeld van een GUI in Java

3.4.5

Gnuplot

Gnuplot is een programma dat gebruikt wordt om data om te zetten in grafische voorstellingen. Het werd oorspronkelijk ontworpen met de bedoeling om wetenschappers en studenten te helpen bij het visueel voorstellen van data. Gnuplot ondersteunt verschillende vormen van visualisatie zoals barchartmen, maar ook 2D en 3D-plots. In figuur 3.29 zien we een barchart gemaakt in gnuplot (Janert, 2009).

Figuur 3.29: Histogram in gnuplot

Gnuplot is een uitstekend programma om verschillende vormen van visualisatie te creëren. Voor onze masterproef kunnen we gebruik maken van het barchart en de scatterplot. Toch is net zoals bij Tableau het ook hier niet mogelijk om een grafische interface te ontwerpen. Maar een ander voordeel van gnuplot is dat het nauw kan samenwerken met Qt. In Qt kan een oproep gebeuren naar gnuplot en de gecreëerde plots kunnen afgebeeld worden in een eigen ontwikkelde grafische interface. We zouden dus onze eigen interface kunnen ontwerpen in Qt en gebruik maken van gnuplot om een aantal visualisaties te maken.

28

3.4.6

Literatuurstudie

Adobe Flash

Adobe Flash is een multimediaplatform voor het ontwerpen van onder andere websites, animaties, games en allerlei applicaties. Het programmeren van Flash gebeurt in de programmeertaal ActionScript en in de omgeving Adobe Flash Professional (Kassenaar, 2009). In figuur 3.30 zien we de website van Waterlife, een voorproefje van de gelijknamige documentaire over het belang van water. Op deze website, gemaakt met behulp van Flash, zien we verschillende topics die elk het belang van water aantonen. Door over de topics te bewegen met de cursor, verandert de positie van de kleine afbeeldingen en wordt er een nieuw groter geheel gemaakt, zoals in dit voorbeeld, een vis.

Figuur 3.30: Website van Waterlife in Flash

De voordelen van Flash zijn talrijk. Het grootste voordeel van Flash is de interactie met de gebruiker. Door te bewegen met de cursor kunnen er allerlei animaties plaatsvinden. De mogelijkheden van de animaties zijn onbeperkt en kunnen een meerwaarde geven aan visualisaties. Toch zijn er ook enkele nadelen van Flash waar we rekening mee moeten houden. Soms kunnen animaties de boodschap niet goed weergeven, of het moeilijk maken om te navigeren in de applicatie. Flash is in veel gevallen niet gebruiksvriendelijk, omdat het zo complex is. Het is belangrijk een evenwicht te vinden tussen animatie en gebruiksvriendelijkheid (Holzinger and Ebner, 2003). Flash is ten zeerste geschikt om animaties te ontwerpen voor de visualisaties. We zouden bijvoorbeeld een deel van de pie-chart groter kunnen laten worden als er met de cursor over bewogen wordt. Ook kunnen we onze barchartmen of tijdlijn al bewegend tot stand laten komen, wat dan weer een esthetisch effect heeft. Toch moeten we er rekening mee houden dat Flash belastend kan zijn voor de processor en kan leiden tot veel frustratie bij de gebruiker. Ook kan het maken van goede Flash-animaties veel tijd in beslag nemen.

3.4.7

HTML5 met Google Charts

HTML5 is de meest recente versie van de HyperText Markup Language-standaard. HTML kan gebruikt worden om webpagina’s te ontwerpen, maar evengoed om applicaties te

3.4 Programmeeromgevingen

29

maken. Deze applicaties hebben broncode in HTML, eventueel gecombineerd met één of meerdere scripttalen, waaronder JavaScript en Perl. We zouden de functionaliteit van onze user interface kunnen schrijven in HTML en gebruik maken van Google Charts voor de visualisaties. Google Charts voorziet een bibliotheek met grafieken, plots en visualisaties, geschreven in JavaScript. Deze scripts kunnen dan toegevoegd en bewerkt worden in een eigen website, of in een (web)applicatie. In figuur 3.31 zien we een greep uit het aanbod van visualisaties van Google Charts.

Figuur 3.31: Voorbeeldvisualisaties in Google Charts

Bijna alle visualisaties die we voor ogen hadden in het vorige hoofdstuk, bevinden zich in de bibliotheek van Google Charts. Enkel de tagcloud is niet voorzien, dus zouden we die zelf moeten ontwerpen in HTML. Ook lijkt het ons beter om de tijdlijn op een andere manier voor te stellen, met de afbeeldingen van de objecten in plaats van gekleurde balken. Hoewel we deze wijzigingen perfect zelf zouden kunnen implemeteren in HTML, lijkt het ons toch beter om een andere programmeertaal te gebruiken.

3.4.8

Conclusie

Er bestaan verschillende programma’s die specifiek ontworpen zijn om data te visualiseren. Tableau en gnuplot zijn zulke programma’s, maar laten niet toe om een bijkomende interface rond de visualisatie te bouwen. Als we programmeertalen gaan onderzoeken, blijkt R één van de beste talen om visualisaties te ontwerpen, maar in deze taal is het zeer complex om een interface te schrijven. We zouden onze applicatie kunnen maken in Flash en gebruik maken van animaties en interactie met de gebruiker. Omdat de meningen verdeeld zijn over Flash en omdat goede animaties maken veel tijd kost, zullen we hiervan geen gebruik maken. Een beter alternatief is HTML5, met de hulp van Google Charts voor de visualisatie. Hoewel er geen echte nadelen verbonden zijn, kiezen we toch liever voor een programmeertaal waar het maken van een interface centraal staat. Zo wordt Qt-creator vaak gebruikt om grafische user interfaces te maken, deze omgeving maakt gebruik van C++. De gewenste visualisaties kunnen zelf geprogrammeerd worden, of met behulp van bestaande bibliotheken. Hetzelfde geldt voor Java, waar we gebruik kunnen maken van de grafische bibliotheek Swing. Hoewel we meer ervaring hebben met

30

Literatuurstudie

Java, gaat onze persoonlijke voorkeur toch uit naar het gebruik van Qt. Een extra reden om voor Qt te kiezen, is dat we gebruik kunnen maken van gnuplot om enkele visualisaties te creëren en weer te geven in onze zelfgemaakte interface.

3.5

Besluit van de literatuurstudie

In deze literatuurstudie hebben we eerst een algemene inleiding gegeven in verband met eye-trackers. We maken onderscheid tussen remote eye-trackers, die vanop afstand werken en mobiele eye-trackers, die op het hoofd van de testperson gemonteerd worden. De meest gebruikte eye-trackingtechniek is het videogebaseerd optisch tracken, waarbij gebruik gemaakt wordt van beeldverwerkingsalgoritmes. Een camera gericht op het oog registreert de oogbeweging en aan de hand van corneale reflecties en de locatie van de pupil, kan men bepalen naar waar er gekeken wordt. Dankzij het videogebaseerd optisch tracken is het niet meer nodig om het hoofd in een frame vast te zetten, of een speciaal aangepaste lens in te brengen. In het tweede hoofdstuk hebben we het reeds ontwikkelde algoritme van EAVISE uitgelegd. Dit algoritme maakt gebruik van het ORB-algoritme. Het algoritme onderzoekt of er overeenkomsten zijn tussen de beelden en enkele referentie-objecten. Deze informatie wordt opgeslagen in tekstbestanden en het is vanuit deze tekstbestanden dat onze grafische interface moet opgebouwd worden. Daarom hebben we in hoofdstuk 3 het belang van correcte datavisualisatie aangekaart en de mogelijke visualisatiemanieren onderzocht. Uit dit onderzoek kunnen we besluiten dat heatmaps niet zo geschikt zijn voor mobiele eye-trackeranalyses, omdat hier het vlak waarnaar gekeken wordt voortdurend verandert. De visualisatiemanieren die wel geschikt waren zijn een aangepaste tagcloud, waarin de grootte van de objecten de frequentie voorstelt, een tijdlijn die toont in welke volgorde de beelden zijn bekeken, een pie-chart of een barchart met daarin de aandachtsverdeling tussen de verschillende objecten en een scatterplot waarin de relatie tussen 2 variabelen kan worden weergegeven. Voor deze masterproef zullen we dus de volgende visualisaties ontwerpen: een barchart, een piechart, een scatterplot, een tagcloud en een tijdlijn. Tenslotte hebben we onderzocht in welke programmeeromgevingen we zulke visualisatietechnieken en een grafische user interface kunnen ontwerpen. Hoewel er verschillende softwareprogramma’s bestaan om data te visualiseren, zoals gnuplot en Tableau, zijn deze niet echt geschikt om een interface te maken. Daarom hebben we onderzocht in welke programmeertalen dit mogelijk zou zijn. R is een goede programmeertaal voor visualisaties, maar het maken van een interface is hier zeer complex. Flash laat het ontwerpen van animaties toe en interactie met de gebruiker. Toch is Flash vaak niet gebruiksvriendelijk en tijdsrovend in het ontwerp. Zowel Java als C++ zijn goede talen voor zowel een interface als een goede visualisatie. Omdat met behulp van Qt zeer makkelijk een goede user interface gebouwd kan worden en omwille van de compatibiliteit met gnuplot dat voor de visualisaties kan zorgen, kiezen we voor het ontwerp van deze masterproef, voor deze programmeeromgeving.

Hoofdstuk 4 Methode Nu we in onze literatuurstudie de nodige beslissingen hebben genomen omtrent de gewenste visualisaties en de keuze van Qt als programmeeromgeving, zullen we in dit hoofdstuk beschrijven welke aanpak we gehanteerd hebben om de vooropgestelde doelen te bereiken. We kunnen onze methode opsplitsen in vier delen: het ontwerpen van een lay-out voor de interface, het inlezen en verwerken van de gegevens, de visualisaties uitwerken en tenslotte de gebruiksvriendelijkheid verbeteren. In de volgende subsecties zal de uitwerking van deze delen verder uitgelegd worden.

4.1

Lay-out van de GUI

Om bij te dragen tot een gebruiksvriendelijke interface speelt de lay-out een belangrijke rol. De structuur van de interface moet logisch zijn opgebouwd en een duidelijk overzicht geven van alle mogelijke functionaliteit van de software. Eén van de redenen waarom we voor Qt als programmeeromgeving hebben gekozen, is dat Qt zich perfect leent voor het ontwerp van een GUI. Om een GUI te ontwerpen in Qt, maken we gebruik van zogenaamde forms. In een form wordt vorm gegeven aan de lay-out van het MainWindow, de hoofdpagina van de GUI. Door middel van een "drag and drop-systeem, kan de ontwerper allerlei elementen toevoegen, widgets genoemd. Enkele voorbeelden van zulke widgets zijn: buttons, labels, textboxes, sliders en scrollbars. Ook zijn er zogenaamde containers beschikbaar, deze kunnen gebruikt worden om meerdere widgets te groeperen. In figuur 4.1 zien we de form van onze GUI in Qt, met links een lijst van alle mogelijke widgets die toegevoegd kunnen worden. Zoals in figuur 4.1 duidelijk te zien is, kiezen we ervoor om het merendeel van onze functionaliteit in één venster te tonen. We maken gebruik van GroupBoxes en TabWidgets om bepaalde functionaliteiten te groeperen. Zo worden de sliders van de instellingen samen in één GroupBox verzameld. Ook de knop Browse en de TextBox zitten gegroepeerd in een GroupBox. Op deze manier kunnen we de gebruiker duidelijk maken welke elementen bij elkaar horen. Verder worden alle visualisaties verzameld in een TabWidget. Op deze manier kan de gebruiker wisselen tussen de verschillende tabbladen, met telkens een

32

Methode

Figuur 4.1: Form in Qt

andere visualisatie. We hebben er voor gekozen om de lay-out zodanig op te bouwen dat de gebruiker de verschillende stappen doorloopt van boven naar onder en van links naar rechts. De eerste stap van de gebruiker zou moeten zijn om de objects of interest in te lezen, dit gebeurt via de knop Browse bovenaan. In de TextBox zal een boodschap verschijnen als dit gelukt is. De geselecteerde objecten zullen daarna te zien zijn in de GroupBox met als bijschrift "Selected Objects". Hierna kunnen de instellingen aangepast worden in de GroupBox links onderaan en tenslotte moet op de knop Visualise gedrukt worden. Hierdoor zullen de visualisaties in het venster rechts verschijnen. De basisfunctionaliteit bestaat er dus uit om objects of interest in te lezen, de instellingen aan te passen en van deze objecten de visualisaties te berekenen. Dit alles is mogelijk door de acties die aan de knoppen gekoppeld zijn. In Qt spreekt men van signals en slots. Een klik op de knop genereert een signaal dat opgevangen wordt door de code in een slot. Op de werking van elke knop zullen we later dieper ingaan. De meer geavanceerde functionaliteit, zoals het openen van een tweede venster, of het opslaan van de visualisaties, kan worden geactiveerd door middel van de menubalk bovenaan. De lay-out is dus voornamelijk gebouwd met het oog op de gebruiksvriendelijkheid. Ook hebben we ervoor gekozen om de ruimte voor de visualisaties groot te houden. Dit doen we omdat de visualisaties toch het belangrijkste element zijn van de interface. Nu we weten op welke manier de lay-out van onze interface is opgebouwd, kunnen we de methode gaan beschrijven van het verwerken van de gegevens en het maken van de visualisaties.

4.2

Inlezen van de gegevens

Het doel van onze applicatie is om de gebruiker een reeks objects of interest te laten selecteren en aan de hand van de bijbehorende tekstbestanden te bepalen hoe de aandacht van de testpersoon tussen de geselecteerde objecten verdeeld is. Dit zullen we doen aan de hand van verschillende visualisaties zoals eerder al beschreven in onze literatuurstudie.

4.2 Inlezen van de gegevens

33

Maar eerst moeten we de gebruiker dus een keuze laten maken tussen verschillende objects of interest. Als dit gebeurd is, zullen we deze objecten afbeelden in het MainWindow, samen met wat basisinformatie. In deze sectie zal beschreven worden hoe dat gebeurt.

4.2.1

Inlezen van de objects of interest

Zoals in sectie 4.1 al gezegd is, maken we gebruik van de knop Browse om objects of interest te selecteren. Indien op deze knop gedrukt wordt ontstaat een signaal dat opgevangen wordt door een slot zoals weergegeven in de code hieronder. 1 2 3 4 5

void MainWindow :: o n _ p u s h B u t t o n _ c l i c k e d () { // Lets user select objects of interest QStringList ls ; ls = QFileDialog :: g e t O p e n F i l e N a m e s ( this , tr (" Select objects of interest (*. ppm ) ") , TrainDir , tr ("*. ppm ") ) ;

6

// Feedback to the user QString tekst = QString (" Number of objects : %1") . arg ( ls . size () ) ; ui - > lineEdit - > setText ( tekst ) ;

7 8 9 10

// Fill in the structure ( lijst ) with basic information vector < resObject > lijst ; lijst = processfiles ( ls ) ;

11 12 13 14

}

We maken gebruik van een QStringList, een lijst van QStrings. QString is een template uit de Qt Template Library (Qtl). Dit valt te vergelijken met een string uit de Standard Library (std), maar is specifiek voor applicaties in Qt. Voor sommige functies is het dus nodig om een QString te geven als argument, soms volstaat een standaard string. In onze code maken we een aantal keer de overgang tussen de twee. In deze QStringList zullen we de padnaam opslaan van de door de gebruiker geselecteerde bestanden. De gebruiker krijgt na een druk op de Browse-knop een dialoogvenster te zien waarin hij naar de juiste map kan gaan en één of meerdere objects of interest kan selecteren. De padnaam wordt dan opgeslagen in de QStringlist. Om te bevestigen dat de objecten zijn opgeslagen, zullen we in de lineEdit een boodschap laten verschijnen met het aantal geselecteerde objecten. Nu we weten welke objects of interest geselecteerd zijn, moeten we informatie verzamelen. Hiervoor maken we een structuur aan die we resObject zullen noemen. In deze structuur zullen we een aantal basisgegevens opslaan zoals de naam van het object, de padnaam naar de afbeelding en het bijbehorende tekstbestand met de detectiegegevens. Ook zullen we voor elk geselecteerd object een willekeurige kleur genereren. Deze zal later gebruikt worden om onderscheid te maken tussen de verschillende objecten. We genereren de kleuren willekeurig, omdat we anders een lijst met voorgedefinieerde kleuren moeten voorzien. Het nadeel van een lijst is dat indien er meer objects of interest zijn dan het aantal voorziene kleuren, er niet voldoende kleuren zullen zijn. Het nadeel van de kleuren willekeurig te generen is dat sommige kleuren moeilijk te onderscheiden zijn. Aangezien we meerdere objecten hebben geselecteerd, hebben we meerdere structuren nodig. Daarom maken we een vector van verschillende resObjecten. Om deze vector in te vullen, roepen we de functie processfiles op. De volledige opbouw van het resObject

34

Methode

en de code achter de functie processfiles kan teruggevonden worden in de broncode op de CD-rom.

4.2.2

Afbeelden van de objects of interest

Op dit moment is de vector met resObjecten deels ingevuld. De scores van de detecties moeten nog verwerkt worden uit de tekstfiles. Dit zullen we pas later doen. Eerst zullen we de geselecteerde objects of interest afbeelden in het MainWindow, zodat de gebruiker kan nagaan of de correcte objecten werden geselecteerd alvorens ze te visualiseren. We zullen deze objecten afbeelden met behulp van een zelf ontworpen widget. We maken een klasse myWidget, waarin we een eigen widget ontwerpen en methodes declareren om de inhoud van deze widget te wijzigen. Figuur 4.2 toont de opbouw van een myWidgetobject. Een myWidget-object bestaat uit 3 QLabels. Het eerste label toont een pixmapafbeelding en heeft de mogelijkheid een achtergrondkleur in te stellen. De andere twee labels worden gebruikt om tekst in weer te geven, zoals in deze figuur de tijd waartussen het object bekeken werd.

Figuur 4.2: Opbouw van myWidget object

Om alle objects of interest en hun bijbehorende naam weer te geven, maken we voor elk object een nieuw myWidget-object. Hiervoor gebruiken we de gegevens uit de vector die we gemaakt hebben. Voor elk resObject maken we een eigen myWidget-object. Als pixmap gebruiken we de objecten waarvan de padnaam staat opgeslagen in de vector. De background stellen we in met de willekeurig gegenereerde kleur. Het linkse label gebruiken we om de naam van het object weer te geven. Al deze informatie vinden we terug in de vector met de resObjecten. Op dit moment hebben we de objects of interest ingelezen die de gebruiker geselecteerd heeft. We hebben een vector van structuren gemaakt waarin de informatie van elk object kan worden ingevuld. Enkele gegevens hebben we al bepaald aan de hand van de padnaam

4.3 Verwerken van de gegevens

35

naar de afbeelding, zoals de naam van het object en het pad naar de tekstbestanden. We genereerden ook een achtergrondkleur en initialiseerden de observatiescores. Daarna hebben we de geselecteerde objecten afgebeeld, zodat ook de gebruiker kan controleren of hij de gewenste objecten gekozen heeft. De volgende stap is het berekenen van de observatiescores, wat in de volgende sectie wordt uitgelegd.

4.3

Verwerken van de gegevens

Alvorens we kunnen overgaan naar het maken van de verschillende visualisaties, moeten we eerst de observatiescores van elk object of interest gaan berekenen. De observatiescores kunnen als volgt omschreven worden: het aantal frames waarin de detectie voldoende nauwkeurig was, het aantal keer dat er gedurende meerdere frames detectie was en het percentage van de aandachtsverdeling tussen de geselecteerde objecten. Deze scores worden berekend aan de hand van de corresponderende tekstbestanden, met daarin de detectiescore per frame, zoals uitgelegd in sectie 3.2.2.

4.3.1

Observatiescores berekenen

We moeten dus voor elk object of interest zijn corresponderende tekstfile gaan openen en nagaan in welke frames de detectie nauwkeurig genoeg was. De gebruiker kan via twee sliders in de interface aangeven hoe nauwkeurig de detecties moeten gebeuren. De waardes van deze sliders worden meegegeven als argumenten in de functie CalculateDetection. De volledige code van deze functie is te vinden op de CD-rom. De werking van deze functie zal in deze sectie uitgelegd worden. Van zodra de gebruiker de gewenste objecten heeft geselecteerd, met de sliders de gewenste gevoeligheid van de detecties heeft ingesteld en op de knop Visualise gedrukt heeft, worden de observatiescores van elk object berekend. Hiervoor wordt opnieuw de volledige vector met resObjecten afgegaan. Voor elk object of interest wordt het corresponderend tekstbestand geopend en lijn per lijn gelezen. Er wordt onderscheid gemaakt tussen objectdetecties en upperbody- of torsodetecties. De tekstbestanden voor upperbody- en torsodetecties hebben namelijk een iets andere opbouw. Het framenummer en de score worden in een tijdelijke variabele opgeslagen. Indien de score lager is dan de treshold die ingesteld is met de sliders, spreken we van een detectie. Met behulp van tellers wordt bijgehouden in hoeveel frames er al detectie is en hoeveel keer er afzonderlijk naar het object is gekeken. Als het volledige tekstbestand is doorlopen, worden de observatiescores ingevuld in de vector. Pas als voor alle objecten de scores zijn berekend en in de vector zijn ingevuld, kan het percentage van de aandachtsverdeling worden berekend. Hiervoor gebruiken we de volgende formule: f ramesi percentagei (%) = Pn 1 f ramesi waarbij:

(4.1)

36

Methode • percentagei : het percentage aandachtsverdeling voor object of interest i • f ramesi : het aantal frames waarbij detectie plaatsvindt van object of interest i • n: het totaal aantal geselecteerde objects of interest

Nu ook het percentage van de aandachtsverdeling bekend is, hebben we alle observatiescores die nodig zijn. Op basis van deze gegevens kunnen op één na alle visualisaties gemaakt worden. Enkel de tijdlijnvisualisatie heeft nog extra gegevens nodig, hoe die bepaald worden wordt uitgelegd in de volgende sectie.

4.3.2

ViewTime-bestand creëren

Om de visualisatie van de tijdlijn te kunnen creëren, hebben we meer gegevens nodig dan enkel de observatiescores. Wanneer de detectie begint moeten we weten hoelang ze duurt en wanneer ze eindigt. Op deze manier kunnen we elke detectiesequentie voorstellen op een tijdlijn. De CalculateDetectionfunctie berekent dus niet alleen de observatiescores, maar schrijft tegelijk ook informatie weg naar het viewtime-bestand. Dit is een tekstbestand dat aangemaakt en ingevuld wordt door de CalculateDetectionfunctie. Als argument van deze functie geven we dan ook de padnaam mee waar deze file zich bevindt, of waar hij aangemaakt moet worden. Elk afzonderlijk object of interest krijgt een eigen indicatienummer, om te kunnen bepalen van welk object de sequentie afkomstig is. De functie gaat dan voor elke detectie na of het al dan niet bij een sequentie hoort, wat het eerste framenummer is van die sequentie en het laatste. Als de sequentie afgebroken wordt, schrijft de functie deze gegevens weg in het viewtime bestand. Ook de achtergrondkleur van de detectie wordt weggeschreven naar het viewtime-bestand, zodat de tijdlijn hier ook gebruik van kan maken. In figuur 4.3 zien we de inhoud van het viewtime-bestand. Met deze gegevens kunnen we later de tijdlijnvisualisatie creëren. Aan de hand van de indicatie weten we om welk object of interest het gaat en aan de hand van het eerste en laatste framenummer kunnen we de tijd berekenen. Met de rood-, groen- en blauwcomponent kunnen we de tijdlijn voorzien van de juiste achtergrondkleuren. Alle gegevens omtrent de objecten zijn terug te vinden in de vector van de resObjecten, of in het ViewTime-bestand. Nu we alle deze gegevens tot onze beschikking hebben, kunnen we beginnen aan het ontwerpen van de visualisaties. De volgende secties zullen beschrijven hoe we tot elk van deze visualisaties gekomen zijn.

4.4

Tabel

Nu alle gegevens berekend en ingevuld zijn, wordt het tijd om ze te visualiseren. In eerste instantie was het niet onze bedoeling om een tabel te voorzien als visualisatie. Om echter te controleren of de verwerking van de gegevens wel correct gebeurde, stelden we de observatiescores voor in een tabel. Achteraf gezien bleek de tabel een meerwaarde voor de onderzoekers die het exacte cijfermateriaal willen gebruiken. Sommige getallen zijn

4.4 Tabel

37

Figuur 4.3: Inhoud van het viewtime-bestand

niet exact af te lezen van de pie-chart of van de barchart en dus leek het ons een goed idee om de tabel te behouden als extra visualisatie. In deze sectie wordt beschreven hoe we tot de tabel gekomen zijn. 1 2 3 4 5 6 7 8

// Setting up the table ui - > tableWidget - > setRowCount ( lijst . size () ) ; ui - > tableWidget - > se tColum nCount (5) ; ui - > tableWidget - > se tColum nWidth (0 ,200) ; QStringList TableHeader ; TableHeader < <" Object " < <" Frames " < < " Length ( ms ) " < <" Views " < <" Percentage "; ui - > tableWidget - > s e t H o r i z o n t a l H e a d e r L a b e l s ( TableHeader ) ; ui - > tableWidget - > h o r i z o n t a l H e a d e r () -> s e t S t r e t c h L a s t S e c t i o n ( true ) ;

9 10 11 12 13 14

// Adding the calculated values to the table for ( int i = 0; i < lijst . size () ; i ++) { ui - > tableWidget - > setItem (i , 0 , new Q t a b l e W i d g e t I t e m ( lijst [ i ]. name ) ) ; ui - > tableWidget - > setItem (i , 1 , new TableItem ( tr ("%1") . arg ( lijst [ i ]. nroFrames ) ));

15

int time = lijst [ i ]. nroFrames * (1000 / FRAMERATE ) ; ui - > tableWidget - > setItem (i , 2 , new TableItem ( tr ("%1") . arg ( time ) ) ) ; ui - > tableWidget - > setItem (i , 3 , new TableItem ( tr ("%1") . arg ( lijst [ i ]. nroViews ) ) ); ui - > tableWidget - > setItem (i , 4 , new TableItem ( tr ("%1") . arg ( lijst [ i ]. percent ) ) ) ;

16 17 18 19 20

}

In het bovenstaande stukje code stellen we eerst de tabel in. Het aantal kolommen wordt vastgelegd en de tabelheader wordt ingesteld. Daarna gaan we per object of interest een rij aan de tabel toevoegen met daarin de naam van het object en de verschillende scoredetecties. Ook berekenen we aan de hand van de ingestelde framerate en het aantal framedetecties hoe lang er naar een bepaald object werd gekeken. Een extra functionaliteit in onze tabel is dat de gebruiker de gegevens per kolom kan sorteren. Omdat we geen integers kunnen toevoegen aan de tabel, moeten we onze gegevens omvormen naar QStrings. Hierdoor worden de waardes echter niet correct gesorteerd.

38

Methode

Om dit te verhelpen implementeren we onze eigen klasse TableItem, die een eigen sorteerfunctie heeft die de QStrings eerst omzet naar integers vooraleer ze te sorteren. Door gebruik te maken van deze klasse kunnen de verschillende objects of interest gesorteerd worden per kolom. Deze functionaliteit en de lay-out van de tabel, kunnen bekeken worden in sectie 5.1.2.

4.5

Barchart en scatterplot

In deze sectie zullen we uitleg geven bij het maken van de visualisaties van de barchart en de scatterplot. Voor deze beide visualisaties maken we gebruik van gnuplot. Zoals in de literatuurstudie al gezegd, is gnuplot een terminalprogramma dat verschillende plots kan maken vanuit een databestand. Qt kan via een systeemoproep gebruik maken van gnuplot en de plots weergeven in de GUI. Om gebruik te kunnen maken van de barchart en scatterplotvisualisatie van onze interface, moet gnuplot geïnstalleerd zijn op het systeem. Het principe voor beide visualisaties is dezelfde. We moeten een databestand maken met daarin de gegevens die geplot moeten worden. We doen een system call naar gnuplot en laden een voorgedefinieerd script in dat uitgevoerd wordt in de system call. Door dit script uit te voeren wordt de plot niet op het scherm getoond maar weggeschreven naar een afbeeldingsbestand. Hierna kunnen we in Qt dit afbeeldingsbestand inladen en weergeven in de interface. We hebben een functie CreateOutputFile geïmplementeerd die als argument de vector met resObjecten heeft. De gegevens die nodig zijn om de barchart en scatterplot te maken worden uit de vector gelezen en weggeschreven naar een output-bestand. Het outputbestand is qua opbouw vergelijkbaar met het viewtime-bestand uit sectie 4.3.2. Het bevat de naam van het object, de observatiescores en de bijbehorende achtergrondkleur van alle objects of interest. De functie returnt vervolgens de padnaam waar het outputbestand zich bevindt. De broncode van de CreateOutputFile functie bevindt zich op de CD-rom. In de volgende secties wordt het gnuplotscript besproken voor de barchart en voor de scatterplot.

4.5.1

Barchart

Vertrekkende van het reeds gemaakte output-bestand, hebben we een script opgesteld voor gnuplot. Dit script leest de data in en schrijft de plot weg naar een barchart.png bestand, in dezelfde map waar het output-bestand zich bevindt. Deze barchart.pngafbeelding lezen we daarna in in onze GUI en geven dit weer in het barchart-tabblad van onze interface. In dit script berekenen we eerst uit de rood-, groen- en blauwcomponenten van de achtergrondkleur de overeenkomstige kleur in gnuplot. Gnuplot hanteert een andere manier van kleurenomzetting, zoals de formule aangeeft in regel 2. Daarna stellen we de plot verder in, zodat de assen correct benoemd worden. Op regel 10 stellen we onze terminal zodanig in dat de plots weggeschreven kunnen worden als .png-bestand. Vanaf regel 12 gebeurt

4.5 Barchart en scatterplot

39

dan het eigenlijke plotten. Regel 12 plot de eigenlijke barchart, als x-waarde gebruiken we de indexwaarde, als y-waarde het percentage van de aandachtsverdeling. De kleur van de staven wordt ingesteld door de variabelen in kolom 9, 10 en 11 van het output-bestand. Dit zijn de r, g en b-waarden van de achtergrondkleur. Op deze manier krijgt elke staaf een andere kleur, corresponderend met de kleur die in de legende (de groupbox met geselecteerde objecten) gebruikt wordt. Regel 13 plot hetzelfde, maar met labels die de naam weergeven van het object of interest op de x-as. Regel 14 plot de labels met de waarden net boven de staven zelf. 1 2 3 4 5 6 7 8 9 10 11 12 13 14

reset rgb (r ,g , b ) = int ( r ) *65536 + int ( g ) *256 + int ( b ) set xlabel " Object of interest " # set x and y label set ylabel " Attention allocation (%) " set ytics 10 set xtics rotate by -55 set style fill solid # set plot style set boxwidth 0.5 unset key # legend not plotted set terminal png set output " barchart . png " plot " output . txt " using 1:3:( rgb ( $9 , $10 , $11 ) ) with boxes lc rgb variable notitle ,\ " output . txt " using 1:3: xticlabels (8) ,\ " output . txt " using 1:( $3 +3) :3 with labels

4.5.2

Scatterplot

Het maken van het script voor de scatterplot is bijna analoog aan dat van de barchart. Voor de scatterplot voorzien we 2 scripts, die enkel verschillen in het al dan niet plaatsen van labels met de naam bij de punten. In onze interface laten we de gebruiker zelf kiezen of hij al dan niet labels bij zijn punten wil. Dit doen we omdat soms de punten zo dicht bij elkaar liggen dat de labels overlappen. Hieronder tonen we het script dat de labels wel toont. 1 2 3 4 5 6 7 8 9 10 11 12

reset rgb (r ,g , b ) = int ( r ) *65536 + int ( g ) *256 + int ( b ) set xlabel " Number of detections (# frames ) " # set x / y label set ylabel " Number of views (# times ) " set style fill solid # set plot style set boxwidth 0.5 unset key # legend not plotted set terminal png size 800 ,600 set output " scatter . png " plot " output . txt " using 4:5:( rgb ( $9 , $10 , $11 ) ) \ with points pt 7 ps 2 lc rgb variable notitle ,\ " output . txt " using ( $4 ) :( $5 -1) :8 with labels

Analoog aan de barchart, berekenen we hier opnieuw de corresponderende achtergrondkleur. Bij de barchart was de x-waarde enkel een indexwaarde, maar hier stelt de x-as het aantal frames met detectie voor. De y-as toont het aantal views. Op deze manier kan de gebruiker afleiden of er een relatie bestaat tussen deze twee variabelen. Op regel 10 plotten we de data in kolom 4 en 5 van het output-bestand en geven het punt de correcte achtergrondkleur mee. Op regel 12 plotten we dezelfde informatie, maar voegen we de labels met de naam er aan toe. De afbeelding scatter.png kan nu worden ingelezen vanuit dezelfde map als het output-bestand en weergegeven worden in het scatterplot-tabblad in onze interface.

40

Methode

Naast de visualisatie van de tabel, hebben we nu dus ook de visualisaties van de barchart en de scatterplot toegevoegd. We gebruiken hiervoor gnuplot, dat we oproepen vanuit een system call. Deze creëert een afbeeldingsplot die we vervolgens inlezen in de interface. Hoe deze visualisatie eruit ziet, kunnen we terug vinden in secties 5.1.3 en 5.1.4. De volgende visualisatie die we zullen voorzien is de pie-chart.

4.6

Pie-chart

Voor het maken van de pie-chart hadden we eerst het idee om gnuplot te gebruiken. Toch heeft gnuplot niet echt een standaardvisualisatie voor een pie-chart. Het was echter wel mogelijk om via een omweg een pie-chart te maken, maar we zijn toch op zoek gegaan naar een betere oplossing. Eén van deze oplossingen was om het pakket KD Charts, een bibliotheek met vele visualisaties, te installeren, aangezien daar een pie-chart-visualisatie aanwezig is. Toch hebben we voor een nog andere oplossing gekozen, in de talrijke voorbeelden in de Qt toolkit bevindt zich namelijk een kant en klare pie-chart waarbij interactie met een tabel mogelijk is. Deze pie-chart leest zijn data in vanuit een apart bestand en is dus ideaal voor onze toepassing. We hebben onze code dus gebaseerd op dit voorbeeld en een aantal kleine wijzigingen aangebracht. Deze code maakt een model aan voor de tabel en pie-chart en stelt deze voor in het door ons aangegeven pie-chart-tabblad. Vervolgens wordt het output-bestand ingelezen en deze gegevens toegevoegd aan het model. De pie-chart wordt in stukken verdeeld naarmate de aandachtsverdeling en de tabel wordt ingevuld. Een extra troef is de geleverde interactie met de gebruiker. Het is mogelijk om delen van de pie-chart te selecteren en deze worden dan aangeduid in de tabel. Ook omgekeerd is deze interactie mogelijk. Indien één of meerdere cellen van de tabel worden geselecteerd, zal deze selectie ook te zien zijn op de pie-chart. Verder is het ook mogelijk om in deze visualisatie de namen te veranderen van de objects of interest, dit laat zich dan ook zien in legende van de pie-chart. In de bestaande code hebben we enkele wijzigingen aangebracht, voornamelijk betreffende de lay-out. Zo hebben we de instelling van de tabelheaders gewijzigd en ook de plaatsverdeling van tabel en pie-chart vastgezet. Verder hebben we de functie openFile lichtjes aangepast zodat de juiste informatie uit het output-bestand wordt geselecteerd. De resultaten van de pie-chart-visualisatie worden overlopen in sectie 5.1.5. Nu we de visualisaties klaar hebben voor barchart, scatterplot en pie-chart kunnen we zeggen dat we alle statistische visualisaties behandeld hebben. We gaan nu over naar de voorstellingen waarbij het object of interest zelf grafisch wordt voorgesteld, namelijk de tagcloud en de tijdlijn.

4.7

Tagcloud

Een eerste visualisatie waarbij het object of interest zelf kan worden weergegeven is de tagcloud. Een tagcloud is zoals gezegd in de literatuurstudie een visualisatie waarbij

4.7 Tagcloud

41

woorden die belangrijker zijn, groter worden voorgesteld. Op dat idee steunend, ontwerpen we een tagcloud waarbij de objecten groter worden voorgesteld naarmate ze meer bekeken worden. Op deze manier zal de gebruiker snel onderscheid kunnen maken tussen de veelbekeken objecten en de weinig bekeken objecten. De beelden die geen detecties opleverden zullen niet worden voorgesteld in de tagcloud. 1 2 3 4

void MainWindow :: maketagcloud2 () { // adding to the tagcloud area QWidget * widget = new QWidget ( ui - > tagcloud ) ;

5 6 7

// Declaring the lay - out QGridLayout * l = new QGridLayout ( widget ) ;

8 9 10 11 12 13

for ( int i =0; i < lijst . size () ;++ i ) { QLabel * lab = new QLabel ; QPixmap pic (( lijst [ i ]. imgPath ) . c_str () ) ; int sizeChange = 50 + (2* lijst [ i ]. percent ) ;

14 15 16 17

lab - > setFixedSize ( QSize ( sizeChange , sizeChange ) ) ; lab - > setPixmap ( pic ) ; lab - > s e t S c a l e d C o n t e n t s ( true ) ;

18 19 20 21

int aantrows = ( int ) ( ceil ( sqrt ( lijst . size () ) ) ) ; int c = ( i % aantrows ) * aantrows ; int r = i / aantrows ;

22 23 24 25 26 27 28 29 30 31

if ( lijst [ i ]. percent != 0) { l - > setAlignment ( Qt :: AlignCenter ) ; l - > addWidget ( lab , r , c ) ; l - > setAlignment ( lab , Qt :: AlignBottom ) ; } } l - > setSpacing (5) ; ui - > tagcloud - > setWidget ( widget ) ;

Voor het maken van de tagcloud zullen we de afbeeldingen van de objecten voorstellen in een lay-out. We laten de gebruiker zelf de keuze of hij de objecten graag netjes naast elkaar wil zetten in een horizontale lay-out, of door elkaar in een roosterlay-out. De code verschilt niet veel en dus zullen we enkel de code weergeven van de roosterlay-out. Voor elk element van de vector met de resObjecten wordt een nieuwe widget aangemaakt. In deze widget voegen we een label toe met daarin de afbeelding van het object of interest. Op regel 13 veranderen we de grootte van het label afhankelijk van het percentage van de aandachtsverdeling. We kiezen ervoor om de minimumgrootte van een label op 50 pixels te houden, anders is de afbeelding niet meer onderscheidbaar. Als maximum kiezen we 250 pixels, omdat anders de afbeelding te groot wordt en het merendeel van het scherm inneemt. De grootte van de objecten komt geometrisch dus niet overeen met de procentuele verdeling. Dit is in principe ook niet echt nodig bij een tagcloud, dat maar een idee wil geven over hoe vaak de objecten bekeken werden. De if-conditie op regel 23 zorgt ervoor dat objecten waarnaar totaal niet gekeken is, niet worden voorgesteld. De code van de tagcloud van de horizontale lay-out is enkel verschillend bij de declaratie van de lay-out op regel 7. Daar maken we gebruik van een QHorizontalLayout. Ook zijn de berekening van de rij en kolomwaardes niet nodig, aangezien we de widget gewoon achter elkaar kunnen toevoegen. Door middel van radiobuttons kan de gebruiker wisselen tussen de roosterlay-out en de horizontale lay-out.

42

Methode

De tagcloud kan dus worden voorgesteld door labels met daarin de afbeelding van het object in grootte te doen veranderen. Er kan gekozen worden tussen een lay-out met de widgets netjes naast elkaar of in een roosterlay-out. De resultaten voor de verschillende lay-outs worden voorgesteld in sectie 5.1.6. De laatste visualisatie die we zullen voorzien is de tijdlijn.

4.8

Tijdlijn

De laatste visualisatie die we zullen ontwerpen is deze van de tijdlijn. De tijdlijn geeft in tegenstelling tot de andere visualisaties niet de aandachtsverdeling of de observatiescores weer, maar wel wanneer er naar welk object of interest wordt gekeken. Zoals in de literatuurstudie uitgelegd, is deze weergave enorm nuttig voor customer journey rapporten. We zullen nu ook voor het eerst gebruik maken van de oorspronkelijke frames uit de film van de testpersoon en niet langer van de afbeeldingen van de objecten (zoals bij de tagcloud). Voor het creëren van de tijdlijn, maken we gebruik van het viewtime-bestand dat we beschreven hebben in sectie 4.3.2. Het viewtime-bestand bevat de informatie van elke sequentie van detecties. De informatie uit dit viewtime bestand wordt opgeslagen in een nieuwe structuur, viewObject genoemd. Dit viewObject bevat de informatie die gebruikt wordt om de tijdlijn op te stellen. Voor elke sequentie wordt dus een viewObject aangemaakt. Al deze viewObjecten worden op hun beurt opgeslagen in een vector. Dit doen we omdat we met behulp van het sorteeralgoritme bubblesort, de sequenties kunnen rangschikken op basis van startframe. Nu we weten in welke volgorde de sequenties hebben plaatsgevonden kunnen we de tijdlijn beginnen tekenen. We willen ervoor zorgen dat de tijdlijn in- en uitgezoomd kan worden, zodat de gebruiker zelf kan beslissen hoeveel informatie hij wil zien. Hiervoor zullen we 3 trappen voorzien. Eerst zullen we een normale tijdlijn voorzien met daarop de afbeeldingen en de achtergrondkleur die overeenkomt met de legende (groupbox selected objects). Ook de tijd waartussen de detectie plaatsvindt zal worden weergegeven. Daarnaast zullen we ook een ingezoomde tijdlijn weergeven waar de afbeelding groter wordt voorgesteld, zodat ze goed bestudeerd kan worden. Hierdoor passen er minder afbeeldingen in één scherm, waardoor er meer gescrold zal moeten worden. Tenslotte voorzien we ook een overview waar geen afbeeldingen worden weergegeven. We maken hier gebruik van gekleurde rechthoeken wiens grootte de duur van de sequentie voorstelt en wiens kleur overeenkomt met het object of interest. Op deze manier krijgt de gebruiker een overzicht van de opeenvolging, met zo weinig mogelijk scrollen tot gevolg.

4.8.1

Normale en gezoomde tijdlijn

De code voor de normale tijdlijn en de ingezoomde versie zijn nagenoeg dezelfde. Ze verschillen enkel in de grootte van de afbeelding en dus de widget. Ook wordt het resultaat in een ander tabblad weergegeven. We zullen hieronder dus enkel de code bespreken voor de normale tijdlijn.

4.8 Tijdlijn

1 2 3 4 5

43

void MainWindow :: m a k e T i m e l i n e N o r m a l ( vector < viewObject > viewlist , string viewtimePath ) { // adding in the tab timeline normal QWidget * widget = new QWidget ( ui - > normal ) ; QHBoxLayout * l = new QHBoxLayout ( widget ) ;

6

for ( int i =0; i < viewlist . size () ; i ++) { myWidget * w = new myWidget () ; w - > setFixedSize ( QSize (200 ,200) ) ; w - > setSize (150) ; char framelocation [200];

7 8 9 10 11 12 13

QString time_first = timeC onvers ion ( viewlist [ i ]. first / FRAMERATE ) ; QString time_last = t imeCon versio n ( viewlist [ i ]. last / FRAMERATE ) ;

14 15 16

if ( viewlist [ i ]. indicator == 666 || viewlist [ i ]. indicator == 333) { string framepath = viewtimePath ; R e p l a c e S t r i n g I n P l a c e ( framepath , "/ ViewTime / ViewTime . txt " , "/ FrameFolder /") ; sprintf ( framelocation ,"% s %08 d % s " , framepath . c_str () , viewlist [ i ]. first ,". ppm ") ; }

17 18 19 20 21 22 23

else {

24 25

string framepath = viewtimePath ; R e p l a c e S t r i n g I n P l a c e ( framepath , "/ ViewTime / ViewTime . txt " , "/ output /") ; sprintf ( framelocation ,"% s % s %05 d % s " , framepath . c_str () ," imgCrop -" , viewlist [ i ]. first ,". ppm ") ;

26 27 28

}

29 30

Mat Img = imread ( framelocation ) ; QPixmap pixmap = ConvertImage ( Img ) ;

31 32 33

w - > setImage ( pixmap , (140) ) ; w - > setBackground ( viewlist [ i ]. color ) ; w - > setFirst ( time_first ) ; w - > setLast ( time_last ) ;

34 35 36 37 38

l - > addWidget ( w ) ;

39

}

40 41 42

ui - > normal - > setWidget ( widget ) ;

43 44

}

De argumenten van deze functie, die de tijdlijn tekent, zijn de vector met de viewObjecten en de padnaam naar de viewtimefile. Deze padnaam wordt gebruikt om de locatie van de framefolder te zoeken, zodat we de afbeeldingen kunnen weergeven zoals ze in de film gedetecteerd werden. We maken dus een nieuwe widget aan voor elke sequentie in de viewlist vector. Via de functie timeConversion zetten we het framenummer om naar de tijd in de film. De volledige code van de functie timeConversion kan gevonden worden op de CD-rom. Vervolgens maken we onderscheid tussen de objects of interest; indien het gaat om een torso- of een upperbodydetectie, gebruiken we het overeenkomstige frame uit de film. Deze frames staan in de map FrameFolder. Op deze manier kan de gebruiker zien om welke torso- of upperbodydetectie het precies gaat. Gaat het om een objectdetectie, dan gebruiken we het overeenkomstige frame uit de map output, waar het object uitgesneden is uit het oorspronkelijke frame van de film. Afhankelijk van de uitkomst van de conditie op regel 17, wordt de padnaam naar de correcte afbeelding aangepast. De afbeelding op deze padnaam wordt vervolgens ingelezen en afgebeeld in een myWidget. Zo een myWidget

44

Methode

hebben we eerder al gebruikt bij het afbeelden van de objecten, zie sectie 4.2. Deze keer passen we de labels aan door de tijd weer te geven waartussen de sequentie plaatsvindt. Ook de achtergrondkleur wordt aangepast zodat deze overeenkomt met de legende. Om de ingezoomde tijdlijn te creëren, gebruiken we een identieke functie als die van de normale tijdlijn. Enkel de locatie waar de widgets moeten toegevoegd worden is anders en de grootte van de widgets is toegenomen.

4.8.2

Overview tijdlijn

In de overview gaan we zelf met behulp van QPainter een tijdlijn tekenen. De bedoeling is om enkel de achtergrondkleur te gebruiken en met de grootte van de rechthoeken de lengte van de sequentie aan te duiden. 1 2 3 4

void MainWindow :: makeTimeline2 ( vector < viewObject > viewlist ) { QPixmap * pixmap = new QPixmap (2000 ,480) ; QLabel * labeltime = new QLabel ;

5

pixmap - > fill ( QColor (" transparent ") ) ;

6 7

int currentX = 20; const int currentY = 220; const int height = 50;

8 9 10 11

QPainter * painter = new QPainter ( pixmap ) ; QPen pen ( Qt :: gray , 2) ; painter - > setPen ( pen ) ;

12 13 14 15

for ( int i = 0; i < viewlist . size () ; i ++) { QBrush brush ( QColor ( viewlist [ i ]. color ) ) ; painter - > setBrush ( brush ) ; painter - > drawRect ( currentX , currentY , viewlist [ i ]. length , height ) ; currentX += viewlist [ i ]. length ; }

16 17 18 19 20 21 22 23

labeltime - > setPixmap (* pixmap ) ; ui - > overview - > setWidget ( labeltime ) ;

24 25 26

}

We vertrekken vanuit een bepaalde positie en gaan de vector viewlist af. We tekenen een rechthoek met een constante hoogte, maar een lengte die bepaald wordt door de lengte van de sequentie. De kleur wordt bepaald door de achtergrondkleur die in de vector opgeslagen staat en komt dus overeen met de achtergrondkleur van het object. Op deze manier krijgen we een overzichtsvisualisatie waarop alle sequenties in een compact beeld te zien zijn. De tijd tussen 2 sequenties wordt hier evenwel niet in rekening gebracht, maar de sequenties volgen direct op elkaar. Indien we de tijd tussen sequenties wel zouden voorstellen, zou de overview enorm groot worden, met slechts hier en daar een gekleurde rechthoek. Het doel van de overview, alle data compact weergeven, zou hiermee verloren gaan. We hebben een tijdlijn geïmplementeerd die in- en uitgezoomd kan worden. Bij de normale tijdlijn en de ingezoomde tijdlijn wordt de afbeelding van het object of interest weergegeven, samen met de tijd waartussen de detectie plaatsvindt. In de overview wordt enkel door middel van de kleur het object voorgesteld, om op deze manier een overzicht

4.9 Gebruiksvriendelijkheid

45

te geven van het aantal en de opeenvolging van sequenties. De resultaten van de tijdlijn staan beschreven in sectie 5.1.7. Nu we de tijdlijn gevisualiseerd hebben, zijn alle visualisaties die we voor ogen hadden afgewerkt. Een laatste stap in het ontwerpen van onze interface, is het verbeteren van de gebruiksvriendelijkheid. Dit wordt in de volgende sectie behandeld.

4.9

Gebruiksvriendelijkheid

Nu alle visualisaties gecreëerd zijn, gaan we onze interface proberen te verbeteren op het vlak van gebruiksvriendelijkheid. Op deze manier zullen gebruikers met minder ervaring in eye-trackeronderzoek of algemene computervaardigheden ook gebruik kunnen maken van onze applicaties. Sommige van de onderstaande verbeteringen zijn noodzakelijk, bijvoorbeeld het genereren van foutberichten, omdat anders de applicatie op onverwachte momenten zonder specifieke reden wordt afgesloten. Andere verbeteringen zijn ontworpen om het proces van het maken van visualisaties te vergemakkelijken.

4.9.1

Informatieberichten in de lay-out

Een eerste verbetering met het oog op gebruiksvriendelijkheid is het gebruik van tekst in de lay-out van de interface. In figuur 4.4 zien we de applicatie zoals deze opgestart wordt.

Figuur 4.4: Lay-out bij opstart

In deze lay-out staan een aantal informatie-boodschappen die de gebruiker moeten helpen bij het creëren van de gewenste visualisaties. In de gebieden waar de visualisaties en de objects of interest gevisualiseerd zouden moeten worden, staan boodschappen die melden dat er nog geen objecten geselecteerd zijn, of dat er geen visualisaties weergegeven kunnen worden. De tabbladen van de verschillende visualisaties zijn ook uitgeschakeld. Aan de

46

Methode

hand van een stappenplan dat aangegeven staat, kan de gebruiker het proces tot een goed einde brengen. Als eerste stap moet de gebruiker op de Browse-knop drukken en testobjecten selecteren. Vervolgens kan de gebruiker de gevoeligheid van de detecties instellen en tenslotte kan hij op de knop Visualise drukken. Hierdoor verdwijnen de eerstgenoemde informatieboodschappen en worden de visualisaties zichtbaar.

4.9.2

Tutorial

Indien het stappenplan nog niet voldoende duidelijk is, kan de gebruiker via het menu een tutorial of een handleiding openen. De tutorial opent zich in een apart venster en kan tegelijk gebruikt worden met de applicatie zelf. In de tutorial staat uitgebreid omschreven hoe de applicatie werkt en hoe de gebruiker testobjecten kan selecteren om tot visualisaties te komen. Dit alles is geïllustreerd met een aantal afbeeldingen. In figuur 4.5 zien we de lay-out van de tutorial.

Figuur 4.5: Tutorial van de applicatie

Deze tutorial werd geïmplementeerd door gebruik te maken van de klasse QWizard, die voornamelijk voor installatiewizards gebruikt wordt. Deze klasse laat toe om pagina’s toe te voegen met daarop labels, afbeeldingen, knoppen en andere widgets zoals gewenst. Deze pagina’s zijn objecten van de klasse QWizardPage.

4.9.3

Filter bij selectie objects of interest

Ook bij het toevoegen van objects of interest maken we gebruik van een hulpmiddel om de gebruiksvriendelijkheid te verhogen. Het type van bestand dat toegevoegd kan worden als object moet namelijk .ppm als extensie hebben. Door in de programmacode bij het

4.9 Gebruiksvriendelijkheid

47

selecteren van de objecten een filter toe te voegen, zorgen we ervoor dat de gebruiker geen bestanden kan toevoegen die niet .ppm als extensie hebben. Op deze manier kan men niet per ongeluk de tekstbestanden van de objecten selecteren. Het laatste argument van de methode getOpenFileNames is de toegepaste filter. In ons geval dus "*.ppm". 1 2 3

QStringList ls ; QString TrainDir = "/"; ls = QFileDialog :: g e t O p e n F i l e N a m e s ( this , tr (" Select objects of interest (*. ppm ) ") , TrainDir , tr ("*. ppm ") ) ;

4.9.4

Foutmeldingen

Om te vermijden dat de applicatie bij een fout zichzelf onverwacht zou afsluiten, hebben we een aantal foutmeldingen toegevoegd. Ook werden er foutmeldingen toegevoegd indien er op een knop gedrukt wordt die nog niet gebruikt kan worden. Indien er geen of slechts één object of interest wordt geselecteerd en daarna op de knop Visualise gedrukt wordt, krijgt de gebruiker de foutmelding te zien in figuur 4.6.

Figuur 4.6: Foutmelding bij selecteren van te weinig objects of interest

Voor enkele visualisaties maken we gebruik van een externe bestand zoals het outputbestand voor pie-chart, barchart en scatterplot. Ook de scripts die moeten ingelezen worden staan in een apart bestand. Indien één van deze bestanden niet kan teruggevonden worden, zal de gebruiker de foutmelding krijgen zoals in figuur 4.7. De visualisatie waar de fout optreedt zal dan niet gemaakt worden, maar de applicatie blijft wel werken.

4.9.5

Extra functionaliteit

Tenslotte voorzien we ook nog extra functionaliteit die in zijn geheel bijdraagt tot de gebruiksvriendelijkheid van de applicatie. Zo zal bij onderzoek vaak meer dan één vergelijking plaatsvinden tussen objects of interest. Hiervoor hebben we de mogelijkheid gecreëerd om een extra venster te voorzien, waarin nieuwe visualisaties gemaakt kunnen worden. Hiervoor creëren we een nieuw MainWindow-object. 1 2 3 4 5

void MainWindow :: o n _ a c t i o n N e w _ t r i g g e r e d () { MainWindow * w = new MainWindow ; w - > show () ; }

48

Methode

Figuur 4.7: Foutmelding bij ontbreken van extern bestand

Een andere optie die zeker ook voorzien moest worden was de mogelijkheid om de visualisaties op te slaan. Hiervoor laten we de gebruiker kiezen welke visualisatie hij wil opslaan, onder welke naam en op welke locatie. Hieronder wordt de code weergegeven die de visualisatie voor de pie-chart opslaat. In figuur 4.8 tonen we de afbeelding die door deze functie opgeslagen wordt. 1 2 3 4 5 6 7 8

void MainWindow :: on_actionSave_pie - c h ar t _t ri g ge re d () { QString saveFilename = QFileDialog :: g et Sa v eF il e Na me ( this , " Save as " , " Choose a filename " , " PNG (*. png ) ;; TIFF (*. tiff *. tif ) ;; JPEG (*. jpg *. jpeg ) ") ; if (! QPixmap :: grabWidget ( ui - > pie - chart ) . save ( saveFilename ) ) { QMessageBox :: warning ( this , " Error " ," File could not be saved " , QMessageBox :: Ok ) ; } }

Figuur 4.8: Opgeslagen afbeelding van de pie-chart visualisatie

Om de gebruiksvriendelijkheid te verhogen voorzien we dus een aantal zaken. Om gebruikers te helpen die minder ervaring hebben met onze applicatie of met eye-trackeranalyses

4.10 Conclusie

49

in het algemeen, voorzien we een tutorial en verschillende informatieberichten in de interface zelf. Om te zorgen dat de applicatie niet onverwachts beëindigd wordt omwille van een fout, voorzien we foutmeldingen. Deze foutmeldingen bieden de gebruiker een oplossing voor het probleem en waarschuwen dat één of meerdere visualisaties niet getoond kunnen worden. Tenslotte voorzien we ook nog extra functionaliteit zoals het openen van extra vensters en de mogelijkheid tot opslaan van de visualisaties om meer gebruiksmogelijkheden te voorzien. Op deze manier kunnen de visualisaties ook verwerkt worden in rapporten en verslagen.

4.10

Conclusie

In dit hoofdstuk hebben we de methode toegelicht waarmee we de applicatie geïmplementeerd hebben. Eerst hebben we toelichting gegeven bij het ontwerp van de lay-out. Hiervoor gebruiken we zogenaamde forms in Qt zelf. Door middel van een click and dragsysteem kunnen allerlei knoppen, labels en velden toegevoegd worden aan de interface. Vervolgens hebben we toegelicht hoe de gegevens konden ingelezen en verwerkt worden. Hiervoor laten we de gebruiker zelf de gewenste objects of interest selecteren in een map en aan de hand van de locatie en de naam van deze objecten, wordt de verdere informatie aangevuld in een vector met daarin alle gegevens van de objecten. De objecten werden vervolgens ook afgebeeld in de interface met behulp van een zelf gedefinieerde widget. De gegevensstructuur werd daarna verder aangevuld met de informatie uit de corresponderende tekstbestanden. Vanuit deze structuur konden de visualisaties gecreëerd worden. Voor de visualisatie van de tabel gebruiken we een voorgedefinieerde template in Qt. Voor de visualisaties van barchart en scatterplot gebruiken we gnuplot. Er wordt een outputbestand gemaakt van de gegevensstructuur en dit bestand wordt ingelezen met behulp van een script voor gnuplot. De plots van gnuplot worden opgeslagen als een afbeelding en daarna ingelezen en afgebeeld door de interface. Voor het maken van de pie-chart lezen we hetzelfde output-bestand in, waardoor rechtstreeks een visualisatie getekend wordt. De tagcloud implementeren we door de verschillende objects of interest voor te stellen in labels waarvan de grootte afhankelijk is van de data zelf. De tijdlijn tenslotte maakt gebruik van een viewtime-bestand waarin alle gegevens van de sequenties staan. Vertrekkende van dit bestand tekenen we dan zelf de widgets die we toevoegen aan de tijdlijn. Tenslotte hebben we ook de gebruiksvriendelijkheid nog wat uitgebreid. We voorzien een tutorial en informatieberichten op de interface zelf om de gebruikers wegwijs te maken in de applicatie. Verder zijn er foutmeldingen zodat de applicatie niet onverwacht afsluit. Ook de functionaliteit werd uitgebreid zodat meerdere vensters geopend kunnen worden en de gemaakte visualisaties worden opgeslagen. In het volgende hoofdstuk zullen we de resultaten weergeven van elke visualisatie en de applicatie in zijn geheel. We zullen ook de resultaten bespreken van de enquête waarin we een testpubliek hun mening vragen in verband met de gebruiksvriendelijkheid en de visualisaties.

50

Methode

Hoofdstuk 5 Resultaat In het vorige hoofdstuk werd uitvoerig de methode besproken waardoor de GUI tot stand is gekomen. In dit hoofdstuk zullen we de resultaten van de interface en de visualisaties bespreken. Om de gemaakte visualisaties en de gebruiksvriendelijkheid te beoordelen, hebben we onze applicatie laten gebruiken door verschillende testpersonen. Na deze testen werd de testpersonen gevraagd een enquête in te vullen. De resultaten van dit onderzoek worden ook in dit hoofdstuk besproken.

5.1

Uitzicht van de visualisaties

In deze sectie zullen we kort het uitzicht en de functionaliteit van de verschillende visualisaties behandelen. Zo krijgt u als lezer van deze masterproeftekst toch een idee hoe de visualisaties eruit zien en welke mogelijkheden er zijn. In de volgende sectie worden de bevindingen van de testpersonen besproken aan de hand van een enquête.

5.1.1

Interface

In sectie 4.9 hebben we al getoond hoe de lay-out eruit ziet bij het opstarten van de applicatie. In figuur 5.1 zien we de interface nadat de gebruiker een aantal objects of interest geselecteerd heeft. De geselecteerde objecten worden afgebeeld in de sectie Selected Objects. Deze objecten worden voorgesteld aan de hand van hun afbeelding, achtergrondkleur en de naam. In de tekstbalk bovenaan wordt samengevat hoeveel objecten geselecteerd werden. De sectie Selected Objects kan vanaf nu gebruikt worden als legende. De gebruikte kleuren in de visualisaties zullen overeenkomen met die in de legende. Op deze manier kan de gebruiker de naam van objects of interest terug gaan opzoeken. De instellingen kunnen gewijzigd worden met de sliders onder de legende. De gebruiker kan de geselecteerde objecten en de instellingen op elk moment wijzigen. Door op de knop Visualise te drukken worden de (nieuwe) visualisaties berekend met de ingestelde gevoeligheid.

52

Resultaat

Figuur 5.1: Interface na toevoegen van objecten

5.1.2

Tabel

De tabel geeft alle numerieke waarden van de observatiescores weer. In figuur 5.2 zien we het resultaat van de geselecteerde objects of interest gevisualiseerd in de tabel. In de tabel wordt achtereenvolgens de volgende informatie weergegeven: Object: Naam van het object of interest. Frames: Aantal frames waarin een detectie heeft plaatsgevonden. Length: Totale tijdsduur van de detecties (berekend aan de hand van het aantal frames). Views: Aantal afzonderlijke views (blokken van aangrenzende detectieframes). Percentage: Percentage van de aandachtsverdeling ten opzichte van de andere objects of interest.

Figuur 5.2: Resultaat van de tabelvisualisatie

5.1 Uitzicht van de visualisaties

53

De gebruiker kan door op een kolomhoofding te klikken de geselecteerde kolom sorteren. Op deze manier kan er snel een idee gevormd worden over welk object of interest het meest of het minst bekeken werd. Het is ook mogelijk om in deze tabel de naam van het objects of interest te wijzigen, maar dit verandert dan wel enkel in deze visualisatie, niet in de andere.

5.1.3

Barchart

De barchart visualiseert de aandachtsverdeling tussen de verschillende objects of interest. In deze visualisatie wordt dus de observatiescore als percentage uitgedrukt. In figuur 5.3 zien we het resultaat van de geselecteerde objects of interest in de barchart.

Figuur 5.3: Resultaat van de barchartvisualisatie

De kleuren van de staven komen overeen met de achtergrondkleur van de objects of interest in de legende. Ook aan de hand van de labels bij de x-as kan de gebruiker onderscheid maken tussen de objects of interest. Boven de staaf wordt een afgeronde waarde van het percentage voorgesteld, als hulpmiddel. Voor de exacte waarde verwijzen we naar de tabel.

5.1.4

Scatterplot

De scatterplot geeft de relatie weer tussen 2 variabelen, elk voorgesteld op een andere as. In dit geval, maken we gebruik van de observatiescore van het aantal frames waar detectie optreedt en van de observatiescore van het aantal views. De resultaten van de scatterplot worden voorgesteld in figuur 5.4. Net zoals bij de barchart stellen de gebruikte kleuren opnieuw de achtergrondkleur van de objects of interest voor. Indien gewenst kan de gebruiker met behulp van de radioButtons bovenaan labels onder de punten laten verschijnen. Op deze manier kan men dan onderscheid maken tussen de verschillende punten. Het nadeel van deze labels is dat indien de punten dicht tegen elkaar liggen, de labels elkaar kunnen overlappen. Dit kan dan voor

54

Resultaat

Figuur 5.4: Resultaat van de scatterplotvisualisatie

een onduidelijk resultaat zorgen. Toch voorzien we deze labels, omdat sommige kleuren niet heel duidelijk te onderscheiden zijn.

5.1.5

Pie-chart

De pie-chart stelt, net zoals de barchart, het percentage van de aandachtsverdeling voor. De waardes van de percentages worden nog eens vermeld in een extra tabel. In figuur 5.5 zien we het resultaat van de pie-chartvisualisatie.

Figuur 5.5: Resultaat van de pie-chartvisualisatie

De kleuren van de pie-chart komen wederom overeen met de achtergrondkleuren in de legende. Met de pie-chart zijn er verschillende vormen van interactie mogelijk. Er kunnen stukken uit de pie-chart aangeklikt worden, hierdoor gaat het overeenkomstige element in de tabel aangeduid worden. Deze interactie werkt ook in de andere richting. Net zoals bij de tabel, is het ook hier mogelijk om de namen van de objects of interest aan te passen. Dit wordt dan opnieuw enkel opgeslagen in deze visualisatie.

5.1 Uitzicht van de visualisaties

5.1.6

55

Tagcloud

Net zoals pie-chart en barchart maakt ook de tagcloud gebruik van het aandachtverdelingspercentage. Afhankelijk van dit percentage wordt de grootte van de objects of interest bepaald. Het resultaat van de tagcloud kan bekeken worden in figuur 5.6.

Figuur 5.6: Resultaat van de tagcloudvisualisatie

In dit voorbeeld is dus duidelijk te zien dat de lift en de personentorso’s het meest bekeken werden van de geselecteerde objects of interest. De gebruiker kan kiezen tussen de lay-out zoals die weergegeven is in figuur 5.6 of een lay-out waarbij de objects of interest in een rooster worden weergegeven. Verdere interactie is niet voorzien.

5.1.7

Tijdlijn

De tijdlijn is een totaal andere visualisatie dan de voorgaande. In de tijdlijn worden de views weergegeven in chronologische volgorde. Hierdoor kan de gebruiker zich een beeld vormen van het kijkproces van de testpersoon. Deze visualisatie is enorm belangrijk voor customer journey rapporten. De tijdlijn kan in- en uitgezoomd worden door de gebruiker. In figuur 5.7 zien we de normale versie van de tijdlijn. Alle objects of interest worden naast elkaar weergegeven en door te scrollen kan de volledige lijst afgegaan worden. De ingezoomde tijdlijn vertoont niet veel verschil met de normale tijdlijn. De opbouw is dezelfde, alleen worden de afbeeldingen van de objects of interest groter weergegeven. De uitgezoomde tijdlijn is dan weer wel verschillend van de andere. Deze tijdlijn toont geen afbeeldingen van de objects of interest, maar maakt alleen gebruik van de achtergrondkleur. De grootte van de rechthoeken bepaalt hoelang er naar het object of interest werd gekeken gedurende de getekende view. In figuur 5.8 zien we de overview-tijdlijn. De overview-tijdlijn is een goed hulpmiddel om op een snelle manier conclusies te trekken over de chronologie van de objects of interest. Eventueel kan er dan in de ingezoomde tijdlijn meer informatie gezocht worden, zoals het exacte tijdstip of de exacte detectie.

56

Resultaat

Figuur 5.7: Resultaat van de normale tijdlijnvisualisatie

Figuur 5.8: Resultaat van de overview tijdlijnvisualisatie

5.2 Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie 57

5.2

Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie

Omdat de gebruiksvriendelijkheid van de applicatie en de kwaliteit van de visualisaties centraal staan in deze masterproef, is het nodig om de resultaten op deze gebieden te beschrijven. Om deze reden hebben we een groep van testpersonen opgesteld. Deze testpersonen hebben de huidige versie van de applicatie getest, zonder ze ooit eerder gebruikt te hebben. Daarna werd de testpersonen een enquête voorgelegd met vragen rond de visualisatie en de gebruiksvriendelijkheid. Op basis van deze enquête voeren we onderzoek naar de kwaliteit van onze applicatie.

5.2.1

Opstellen van een vragenlijst

Elk onderzoek begint met het stellen van vragen (Mortelmans, 2009). Voor we een vragenlijst kunnen opstellen moeten we weten welke antwoorden we willen krijgen. In ons geval voeren we onderzoek naar de gebruiksvriendelijkheid van onze applicatie en de kwaliteit van onze visualisaties. Onze vragen zullen dus moeten opgesteld worden naar deze doelen. We moeten ook uitmaken of we gebruik willen maken van kwalitatief onderzoek of kwantitatief onderzoek. Bij kwalitatief onderzoek wordt het meerendeel van de vragen als open vragen gesteld. Dit wil zeggen dat er geen antwoorden voorzien zijn. Op deze manier krijg je heel specifieke antwoorden, wat leidt tot een betere kwaliteit van het onderzoek. Bij een kwantitatief onderzoek zijn de vragen gesloten gesteld. De testpersoon kan een antwoord omcirkelen of aanduiden. Deze onderzoeken zijn goed indien er een groot testpubliek bevraagd wordt. De verwerking van een kwantitatief onderzoek neemt minder tijd in beslag dan dat van een kwalitatief onderzoek (Bryman, 2012). Toch worden de twee meestal gecombineerd, een combinatie van open en gesloten vragen. Wij kiezen voor een kwalitatief onderzoek, omdat de feedback in verband met de visualisaties enorm belangrijk is. Toch zullen we voor de gebruiksvriendelijkheid voornamelijk gebruik maken van gesloten vragen, omdat dit gedeelte dan sneller verwerkt kan worden. Eerst en vooral willen we weten of de testpersoon gebruik heeft gemaakt van onze voorzieningen om de gebruiksvriendelijkheid te verbeteren. Zoals beschreven in sectie 4.9.5 bestaan deze voorzieningen uit een tutorial, foutmeldingen, de mogelijkheid om nieuwe vensters te openen en de mogelijkheid om bestanden op te slaan. De eerste vragen zullen dan ook geformuleerd worden als volgt: • Hebt u gebruik gemaakt van de tutorial? • Hebt u gebruik gemaakt van de optie om een nieuw venster te openen? • Hebt u gebruik gemaakt van de optie om visualisaties op te slaan? • Bent u foutmeldingen tegen gekomen? Verder willen we ook weten of de mensen het maken van visualisaties of het wijzigen van de instellingen ervaarden als moeilijk?

58

Resultaat • In welke mate vond u het moeilijk om objects of interest toe te voegen? • In welke mate vond u het moeilijk om visualisaties te maken? • In welke mate vond u het moeilijk om de gevoeligheidsinstellingen te wijzigen?

In verband met de visualisaties stellen we voornamelijk vragen over de kwaliteit van de visualisaties en de geleverde interactie. Zo vragen we de kwaliteit aan te geven van de verschillende visualisaties en stellen we een aantal open vragen. • Wat was voor u de meest nuttige visualisatie? • Welke visualisaties had u graag nog extra gezien? • Was er voldoende interactie met de voorziene visualisaties? • Welke visualisatie ontbrak volgens u? • Vond u het gebruik van de kleuren en de legende nuttig? De antwoorden op deze en andere vragen uit de enquête van de testpersonen worden besproken in sectie 5.3. De volledige vragenlijst kan worden teruggevonden in bijlage A.

5.2.2

Opstellen van een testpubliek

Het testpubliek moet representatief zijn voor de doelgroep die de applicatie zal gebruiken. Daarom zijn we op zoek gegaan naar mensen die actief zijn in één van de sectoren die mogelijk gebruik kunnen maken van eye-trackeranalyses. In sectie 3.1.3 worden een aantal van deze sectoren opgesomd. We hebben ook enkele mensen gecontacteerd die al ervaring hadden met eye-trackeranalyses, om zo de kwaliteit van de visualisaties te kunnen inschatten. Ons testpubliek bestond uit 34 personen. Hiervan hadden 5 personen al ervaring met eye-trackeranalyses. Hieronder volgt de verdeling op basis van beroepssector: Marketing: 4 Academisch onderzoek: 7 Computerwetenschappen: 11 Geneeskunde: 7 Andere: 5 We kunnen dus besluiten dat we een goed testpubliek hebben samengesteld. Veel van de bovenstaande domeinen zouden gebruik kunnen maken van eye-trackeronderzoek. Ook is het nuttig dat we mensen kunnen interviewen die al ervaring hebben met eye-trackeronderzoek. In de volgende sectie worden de resultaten van het onderzoek besproken.

5.3 Resultaten van het onderzoek

5.3

59

Resultaten van het onderzoek

De enquête werd voorgelegd aan het testpubliek om de gebruiksvriendelijkheid van de applicatie te onderzoeken samen met de kwaliteit van de visualisaties. Over het algemeen waren de reacties positief over de applicatie. Toch legde het onderzoek nog enkele werkpunten bloot, zaken die in een volgende versie van de applicatie verder uitgebreid moeten worden.

5.3.1

Gebruiksvriendelijkheid

Uit het onderzoek blijkt dat de tutorial bijdraagt tot het verbeteren van de gebruiksvriendelijkheid, maar lieft 62% van de testpersonen maakte gebruik van de tutorial. Het valt op dat mensen die zichzelf een lage score geven op basis van computerervaring, allemaal gebruik maken van de tutorial. Iedereen die gebruik maakte van de tutorial vond deze ook nuttig, met als enige opmerking dat het misschien handig had geweest als de tutorial ook in het Nederlands beschikbaar was. Geen van de testpersonen vond het toevoegen van objecten, of het instellen van de gevoeligheid moeilijk. Uiteindelijk is iedereen er in geslaagd om visualisaties te creëren. 57% van de gebruikers maakte gebruik van de richtlijnen op de interface zelf. Het stappenplan begeleidde hen bij het maken van de visualisaties. Een vaak gehoorde opmerking was dat men niet goed begreep wat het verschuiven van de sliders juist inhield. Daarom is het misschien een goed idee om hierover nog wat uitleg te geven in de tutorial. De optie om de visualisaties op te slaan is voor veel mensen onopgemerkt gebleven. Doordat deze optie in een menu-item verscholen zat en er in de tutorial niets over gezegd werd, wist 43% van de testpersonen niet van het bestaan van deze mogelijkheid. Hetzelfde geldt voor de optie om een extra venster te openen. Een aantal mensen had zelfs als opmerking ingevuld dat het handig zou zijn, moesten de visualisaties geëxporteerd kunnen worden. Deze functionaliteit is er al, maar het kan dus duidelijk geen kwaad om dit ook in de tutorial te vermelden. Over het algemeen was het ganse testpubliek tevreden over de gebruiksvriendelijkheid van de applicatie. In figuur 5.9 zien we de verdeling van de scores voor de algemene gebruiksvriendelijkheid van de applicatie. Hieronder volgen nog een aantal suggesties die gegeven werden door testpersonen om de gebruiksvriendelijkheid te verbeteren: • de mogelijkheid om het scherm te vergroten of verkleinen zou wel handig zijn. • een aantal van de termen zijn voor onervaren gebruikers wat moeilijk. • de taal kan misschien ook instelbaar gemaakt worden? Deze suggesties zullen niet meer in deze versie van de applicatie worden aangepast. Het is echter wel mogelijk dat ze in een volgende versie of een update aangepast of toegevoegd worden.

60

Resultaat

Figuur 5.9: Antwoordverdeling bij de enquête rond gebruiksvriendelijkheid

5.3.2

Kwaliteit van de visualisaties

Het tweede punt in ons onderzoek was de kwaliteit van de visualisaties. We stellen onszelf de vraag of de uitgewerkte visualisaties voldoende informatie geven en van een degelijke kwaliteit zijn. We vragen de testpersonen ook of ze nog ideëen hebben voor andere visualisaties, waarvan zij denken dat ze een meerwaarde kunnen zijn voor de applicatie. Een eerste opvallend verschijnsel valt op bij de vraag wat de testpersoon zelf de meest nuttige visualisatie vindt. De antwoorden zijn hier erg uiteenlopend. Iedere visualisatie heeft zowel voorstanders als tegenstanders. Een aantal testpersonen vindt de tabel niet echt een handige visualisatie, terwijl andere testpersonen telkens terugvallen op de tabel na een visualisatie te hebben bekeken. De pie-chart is bij vele testpersonen een topper, maar dat lijkt te wijten aan de herkenbaarheid van deze visualisatie. Voor veel mensen zijn de tagcloud en de scatterplot ongekende grafieken. Voor de testpersonen die ervaring hadden met eye-trackers is de overview van de tijdlijn overduidelijk de meest geliefde visualisatie. In figuur 5.10 zien we de verdeling van de keuze tussen de meest nuttige visualisatie. Uit dit onderzoek kunnen we dus afleiden dat de voorkeur persoonsgebonden is. Hierdoor is het goed dat we een uitgebreid aanbod voorzien met verschillende visualisaties. Net zoals bij de voorkeur van de visualisatie, waren ook de meningen verdeeld over de kwaliteit van de visualisaties. Een vaak voorkomende opmerking was dat de gebruikte kleuren niet zo goed te onderscheiden zijn. In sectie 4.2.1 leggen we uit dat de kleuren willekeurig geselecteerd worden. Na deze commentaren is het misschien toch de overweging waard om een lijst met kleuren aan te leggen en een begrenzing te voorzien op het aantal toegevoegde objects of interest. Een andere conclusie die we kunnen trekken uit het onderzoek naar de visualisaties is dat men toch graag de mogelijkheid zou hebben om de namen van de objects of interest te kunnen veranderen. Op deze manier verdwijnen de ietwat triviale namen zoals “TrainImg_0008” en komen er logische namen zoals “lift” in de plaats. Hoewel deze optie al

5.4 Conclusie

61

Figuur 5.10: Antwoordverdeling bij de enquête rond visualisatievoorkeur

wel mogelijk is bij de visualisatie van pie-chart en tabel, lijkt het het overwegen waard om dit voor de hele applicatie te voorzien. Bijna alle testpersonen waren het er over eens dat er voldoende visualisaties voorzien waren en dat het aanbod dus ruim genoeg was. Op de vraag welke visualisatie er nog kon toegevoegd worden hebben we slechts één antwoord gekregen. Een leuke toevoeging aan de tijdlijn zou zijn dat elke view wordt weergegeven als een kort filmpje waarbij de detectie van het object of interest aangeduid wordt. Op deze manier kan de gebruiker de context bekijken waarin de detectie plaatsvindt. Deze functionaliteit zullen we niet meer voorzien in de huidige applicatie, maar kan bewaard worden als idee voor een mogelijke uitbreiding. Toch heeft het onderzoek ook een zwak punt van de applicatie aangetoond. Een tweetal testpersonen kwam met de opmerking dat de applicatie telkens maar de gegevens kan berekenen van één testpersoon. Indien er onderzoek zou moeten gebeuren naar de activiteiten van een 30-tal proefpersonen, zou men 30 aparte vensters van de applicatie moeten openen om deze met elkaar te vergelijken. Dit is enorm onpraktisch. Een andere oplossing zou zijn om de visualisaties één voor één op te slaan als afbeelding en deze in een apart bestand te vergelijken. Met het oog op een applicatie die gebruikt kan worden voor uitgebreide eye-trackeranalyses, moet hiervoor toch een betere oplossing geïmplementeerd kunnen worden.

5.4

Conclusie

In dit hoofdstuk hebben we kort alle visualisaties overlopen op basis van hun uitzicht en functionaliteit. Vervolgens hebben we de resultaten toegelicht uit het onderzoek naar de gebruiksvriendelijkheid en de kwaliteit van de visualisaties. Hiervoor hebben we een groep testpersonen de applicatie laten testen en daarna hun bevindingen opgevraagd

62

Resultaat

aan de hand van een enquête. Uit deze enquête is gebleken dat de applicatie als zeer gebruiksvriendelijk werd bevonden en de kwaliteit en het aanbod van de visualisaties ruim voldoende is. Toch moeten we ook concluderen dat er nog een aantal werkpunten zijn. Zo is het de overweging waard om de kleuren niet willekeurig te selecteren, maar een lijst met sterk contrasterende kleuren te voorzien. Ook is er een grote vraag naar het implementeren van een mogelijkheid om de namen van de objects of interest te veranderen. Op dit moment is het niet zo evident om resultaten van verschillende testpersonen met elkaar te vergelijken. Daarvoor moet nu telkens een nieuw venster geopend worden. Een betere oplossing zou zijn om meerdere datasets te selecteren en de resultaten van de tijdlijn bijvoorbeeld onder elkaar weer te geven. Deze werkpunten zullen helaas in deze versie van de applicatie niet meer aangepast worden, maar mogelijk wel in een nieuwere versie of een update.

Hoofdstuk 6 Besluit In dit hoofdstuk zullen we het eindresultaat van de masterproef bespreken. In sectie 6.1 herhalen we de doelstellingen van deze masterproef en geven we een opsomming van de gerealiseerde elementen. In sectie 6.2 geven we een aantal suggesties voor mogelijke uitbreidingen.

6.1

Eindresultaat

De doelstelling van deze masterproef was het ontwikkelen van een gebruiksvriendelijke visualisatie-omgeving voor eye-trackeranalyses. In het kader van een onderzoeksproject rond de automatische verwerking van eye-trackerdata is door EAVISE een algoritme ontwikkeld dat met behulp van object- en personendetecties deze data automatisch verwerkt. Bij aanvang van de masterproef was de gebruikersinterface van deze software onvoldoende gebruiksvriendelijk en werden de resultaten in een tekstbestand opgeslagen. De in deze masterproef ontwikkelde applicatie moet deze resultaten op een gebruiksvriendelijke en grafische manier weergeven. Het eindresultaat van deze masterproef is een applicatie waar de gebruiker objects of interest kan selecteren waarvan men het kijkgedrag wil onderzoeken. De bijbehorende tekstbestanden van deze objects of interest worden ingelezen en verwerkt. Hierna worden de resultaten van deze objecten met elkaar vergeleken en visueel voorgesteld. Hiervoor realiseerden we de volgende visualisaties: Tabel: Een tabel met daarin alle numerieke resultaten die uit de tekstbestanden verwerkt worden. Barchart: Een staafdiagram waar de aandachtsverdeling tussen de geselecteerde objecten wordt weergegeven. Scatterplot: Een spreidingsdiagram waarin de relatie getoond wordt tussen hoelang de objecten worden bekeken en hoeveel keer de objecten worden bekeken. Pie-chart: Een taartdiagram waarbij opnieuw de aandachtsverdeling tussen de geselecteerde objecten wordt weergegeven.

64

Besluit

Tagcloud: Een visualisatiemanier waarbij de grootte van de afbeeldingen aangeeft hoe lang er naar dat object gekeken is. Tijdlijn: Een chronologische weergave van hoe lang en op welk tijdstip elk object bekeken is. De bovenstaande visualisaties kunnen als afbeelding opgeslagen worden en kunnen zo verwerkt worden in rapporten en verslagen rond eye-trackeranalyses. In de applicatie is een tutorial voorzien, zodat personen die de applicatie voor het eerst gebruiken, vooruit geholpen worden. Door middel van deze tutorial en bijkomende berichten in de interface zelf hebben we de gebruiksvriendelijkheid verbeterd. De resultaten van de applicatie kunnen bekeken worden in een videodemo die toegevoegd is op de CD-rom. Om de gebruiksvriendelijkheid en de kwaliteit van de visualisaties te testen, hebben we een testpubliek gevraagd om de applicatie te testen en een aantal vragen te beantwoorden. Daaruit kunnen we besluiten dat we erin geslaagd zijn om een gebruiksvriendelijke applicatie te maken met een ruim aanbod aan visualisatiemanieren. We zijn er dus in geslaagd om de gebruiksvriendelijkheid en de functionaliteit van de software te verbeteren.

6.2

Toekomstig werk

Deze masterproef legt een grondige basis voor een visualisatie-omgeving voor de verwerking van eye-tracker-gegevens. Een aantal zaken die in de toekomst nog verder uitgebreid kunnen worden zijn bijvoorbeeld de interactie met de verschillende visualisaties, of het aantal verschillende visualisatiemanieren. Uit het onderzoek blijkt dat er veel vraag is naar een mogelijkheid om de naam van de objects of interest, die vaak gebruikt wordt in de visualisaties, aan te passen. Op deze manier kunnen de gebruikers een gepaste naam ingeven voor elk object. Een belangrijk werkpunt is de mogelijkheid om meerdere datasets met elkaar te vergelijken. In de huidige applicatie kan dit door een extra venster te openen en daarin een nieuwe visualisatie uit te voeren. Het is wenselijk om in één venster meerdere datasets in te kunnen lezen en de visualisaties onder elkaar weer te geven. Dat zou de gebruiksvriendelijkheid van de applicatie nog verhogen.

Bibliografie Barnes, D. and Kölling, M. (2007), Programmeren in Java met BlueJ, Pearson Education. Blanchette, J. and Summerfield, M. (2006), C++ GUI programming with QT4, Prentice Hall. Bojko, A. (2009), Informative or misleading? Heatmaps deconstructed, Springer Berlin Heidelberg. Bryman, A. (2012), Social Research Methods, Oxford University Press. Chen, C., Härdle, W. and Unwin, A., eds (2008), Handbook of Data Visualization, Springer-Verlag. Clyman, J. (2005), ‘Software: Business – tableau - best of the year’, PCMag.com . De Beugher, S., Ichiche, Y., Brône, G. and Goedemé, T. (2012), Automatic analysis of eye-tracking data using object detection algoritms, in ‘Proceedings of the 2012 ACM Conference on Ubiquitous Computing’, pp. 677–680. Duchowski, A. T. (2002), ‘A breadth-first survey of eye-tracking applications’, Behavior Research Methods, Instruments and Computers 34(4), 455–470. Duchowski, A. T. (2007), Eye Tracking Methodology: Theory and Practice, Springer. Few, S. (2009), Now you see it: simple visualization techniques for quantitative analysis, Analytics Press. Holzinger, A. and Ebner, M. (2003), Interaction and usability of simulation and animations: A case study of the flash technology, in ‘Interact’. Holzman, P., Kringlen, E., Matthysse, S. and et al (1988), ‘A single dominant gene can account for eye tracking dysfunctions and schizophrenia in offspring of discordant twins’, Archives of General Psychiatry 45(7), 641–647. Janert, P. (2009), Gnuplot in Action, Manning Publications. Ji, Q. and Yang, X. (2002), ‘Real-time eye, gaze and face pose tracking for monitoring driver vigilance’, Real-Time Imaging 8(5), 357–377. Johnson, B. and Shneiderman, B. (1991), Treemaps: A space-filling approach to the visualization of hierarchical information structures., in ‘Proceedings of the IEEE Information Visualization’, pp. 275–282.

66

BIBLIOGRAFIE

Kassenaar, P. (2009), Handboek Flash CS4, Duuren Media. Lohmann, S., Ziegler, J. and Tetzlaff, L. (2009), Comparison of tag cloud layouts: Task-related performance and visual exploration, in ‘Human-computer Interaction– INTERACT 2009’, Springer, pp. 392–404. Mortelmans, D. (2009), Handboek kwalitatieve onderzoeksmethoden, acco. Nenonen, S., Rasila, H., Matti, J. and Karna, S. (2008), Customer journey–a method to investigate user experience, in ‘Proceedings of the Euro FM conference, Manchester’. Rublee, E., Rabaud, V., Konolige, K. and Bradski, G. (2011), Orb: An efficient alternative to sift or surf, in ‘International Conference on Computer Vision’. Shrestha, S. and Lenz, K. (2006), ‘Eye gaze patterns while searching vs. browsing a website’, Usability News 9(1). Spezio, M., Adolphs, R., Hurley, R. and Piven, J. (2007), ‘Analysis of face gaze in autism using "bubbles”, Neuropsychologia 45(1), 144–151. Unwin, A., Hofmann, H. and Cook, D. (2013), ‘Let graphics tell the story - datasets in r’, The R Journal 5(1). Unwin, A., Theus, M. and Hofmann, H. (2007), Graphics of Large Datasets: visualizing a million, Springer.

Bijlage A Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie In deze bijlage zullen we de volledige enquête toevoegen. Deze enquête werd voorgelegd aan het testpubliek in het onderzoek naar de gebruiksvriendelijkheid en de kwaliteit van de visualisaties van onze applicatie.

68

Onderzoek naar gebruiksvriendelijkheid en kwaliteit van de applicatie

ENQUÊTE APPLICATIE EYETRACKINGVISUALS Naam: Leeftijd en geslacht: Beroepssector: Deze enquête bestaat uit open vragen en vragen waarbij gevraagd wordt te kiezen uit een schaal tussen 1 (zeer slecht) en 5 (zeer goed). Centraal in deze enquête staat de gebruiksvriendelijkheid van de software, en de kwaliteit van de aangeboden visualisaties. De resultaten van deze enquëte zullen anoniem verwerkt worden en enkel voor dit onderzoek gebruikt worden. Alvast hartelijk bedankt voor uw feedback.

EIGEN ERVARING

Antwoord Geen

weinig

matig

goed

zeer goed

Hoe zou u uw ervaring met computers omschrijven?

1

2

3

4

5

Hoe zou u uw ervaring met statistische voorstellingen (zoals barchart, scatterplot, pie-chart) omschrijven?

1

2

3

4

5

Hoe zou u uw ervaring met eye-trackers en eyetrackeronderzoek omschrijven?

1

2

3

4

5

Enigszins

Erg

4

5

GEBRUIKSVRIENDELIJKHEID

Antwoord Helemaal niet

Niet erg

Hebt u gebruik gemaakt van de tutorial (handleiding)? In welke mate vond u de tutorial nuttig?

Geen mening

JA / 1

2

Bent u geslaagd in het opzet van de software (visualisaties maken van de gewenste beelden?)

NEE 3

JA /

NEE

In welke mate vond u het moeilijk om objects of interest toe te voegen?

1

2

3

4

5

In welke mate vond u het moeilijk om de gevoeligheid te wijzigen?

1

2

3

4

5

Hebt u de richtlijnen in de software gebruikt? (step 1, step2, step3)

JA /

NEE

Bent u foutmeldingen tegen gekomen? Zo ja, welke?

JA /

NEE

Bent u erin geslaagd om de visualisaties op te slaan als afbeeldingen?

JA /

NEE

Hebt u een nieuw venster geopend om nieuwe visualisaties te maken?

JA /

NEE

In welke mate zou u de gebruiksvriendelijkheid van de applicatie omschrijven? (1 = zeer slecht, 5 = zeer goed)

1

2

3

4

5

In welke mate vond u het moeilijk om visualisaties te maken?

1

2

3

4

5

Heeft u nog andere opmerkingen betreffende de gebruiksvriendelijkheid van de software?

69

VISUALISATIES

Antwoord Zeer slecht

slecht

matig

goed

zeer goed

Wat vond u van de kwaliteit van de tabel?

1

2

3

4

5

Wat vond u van de kwaliteit van de barchart?

1

2

3

4

5

Wat vond u van de kwaliteit van de scatterplot?

1

2

3

4

5

Wat vond u van de kwaliteit van de pie-chart?

1

2

3

4

5

Wat vond u van de kwaliteit van de tagcloud?

1

2

3

4

5

Wat vond u van de kwaliteit van de tijdlijn?

1

2

3

4

5

In welke mate vond u het gebruik van de kleuren duidelijk?

1

2

3

4

5

In welke mate vond u de legende duidelijk?

1

2

3

4

5

Wat vond u de meest nuttige visualisatie? (tabel, barchart, scatterplot, pie-chart, tagcloud, tijdlijn)

Ontbraken er visualisaties volgens u? Welke visualisatie(s) had u graag nog gehad?

Wat zou u veranderen aan de bestaande visualisaties? Wat kan volgens u beter?

Vindt u de optie nodig om de objecten een andere naam te geven?

JA

/

NEE

Hebt u nog andere opmerkingen betreffende de visualisaties?

Hebt u nog andere opmerkingen betreffende deze enquête?

Nogmaals bedankt voor uw medewerking.

FACULTEIT INDUSTRIELE INGENIEURSWETENSCHAPPEN CAMPUS DE NAYER (@Thomas More) Jan De Nayerlaan 5 2860 SINT-KATELIJNE-WAVER, België tel. + 32 15 31 69 44 [email protected] www.iiw.kuleuven.be