Eye tracking plays a key role in understanding user behaviours and usability studies. We have previously proposed an algorithm called STA (Scanpath Trend Analysis) that analyses multiple individual scanpaths on a web page to discover their trending path in terms of the areas of interest (AOIs) of the page. It provides a good understanding of how users interact with web pages in general. Our extensive previous work shows that this algorithm provides the most representative path of multiple users as its result is more similar to individual scanpaths in comparison with the results of other algorithms. However, its current implementation has no graphical user interface and provides a sequence of characters that represent AOIs. Some platform and modules should also be installed in advance to run it. To address these limitations, this paper presents a web-based visualisation tool for the STA algorithm called ViSTA. This tool allows researchers and practitioners to visualise individual scanpaths on a particular web page with gaze plots, visually draw AOIs, apply the STA algorithm, and visualise the result of the algorithm with an AOI graph. Our user evaluation shows that the workload is lower with the ViSTA tool compared to the current implementation of the STA algorithm.
O zet. Goz izleme teknolojisi insan davran slar n anlama ve kullan labilirlik cal smalar nda etkin bir rol oynamaktad r. Yapt g m z onceki cal smalarda STA (Scanpath Trend Analysis) algoritmas n onerdik. Bu algoritma bir sayfa uzerindeki bircok kisiye ait tarama guzergah n analiz ederek, sayfa uzerindeki ilgi alanlar cinsinden populer olan tarama guzergah n c kar yor. Bu guzergah kullan c lar n ilgili web sayfas ile genel olarak nas l etkilesim kurdugunu anlamay sagl yor. Onceki cal smalar m z gosteriyor ki literaturdeki benzer algoritmalar ile kars last r ld g zaman, STA algoritmas n n sonucu bireysel tarama guzergahlar na daha cok bezerlik gosteriyor. Fakat, STA algoritmas n n gorsel bir ara yuzu yoktur ve sonucu ise her karakteri sayfa uzerindeki belirli bir alan ifade eden alfanumerik bir karakter dizisi seklindedir. Bu uygulaman n cal st r labilmesi icin ise baz platform ve modullerin onceden yuklenmesi gerekmektedir. Bu bildiri, STA algoritmas n n var olan uygulamas n n s n rlamalar n ortadan kald ran web tabanl gorsel bir uygulama sunmaktad r. Bu gorsel uygulama ile arast rmac lar ve pratisyenler bireysel tarama guzergahlar n bak s gra gi isimli teknik ile gorsellestirebilecek, gorsel olarak sayfa uzerindeki ilgi alanlar n belirleyebilecek, STA algoritmas n uygulayabilecek, ve bu algoritman n sonucunu da yine ilgi alanlar haritas isimli teknik ile gorsellestirilebilecektir. Yapt g m z kullan c degerlendirmeleri bu gorsel uygulaman n STA algoritmas n n uygulanmas icin gerekli is yogunlugunu azaltt g n gostermektedir.
Guzergah, Web Tabanl , Kullan c Ara Yuzu 1
Eye tracking has been commonly used for better understanding of how users
interact with web pages, especially which areas are frequently used and which
paths are usually followed in terms of these areas to complete certain tasks.
Based on the analysis of eye tracking data, web pages can be further processed
to support users in constrained environments for completing their tasks. In
particular, web pages can be re-engineered for these users to allow them to directly
access the most frequently used areas without being distracted by other
inappropriate areas. This is especially useful for visually disabled users who access
the web with their screen readers and have to listen clutter [
While users are interacting with web pages, their eyes make quick movements
called saccades. Their eyes also make xations on certain points. The series of
saccades and xations show their scanpaths on these pages. There are di erent
techniques to visualise individual scanpaths [
To conduct scanpath analysis on the web, web pages are typically divided
into their areas that can interest or attract users (AOIs) and then xations
are represented with their corresponding AOIs. For example, Figure 1 shows
how the home page of the Babylon website is automatically divided into its
AOIs with the extended Vision-based Page Segmentation (VIPS) algorithm [
Even though there are di erent algorithms which aim to detect patterns in
multiple scanpaths or discover a representative scanpath for a group of
scanpaths, their results typically have low similarities to individual scanpaths [
To address the limitations of the current implementation of the STA
algorithm and make it more usable and functional, this paper presents the rst
web-based visualisation tool for this algorithm called Visualisation of Scanpath
Trend Anlaysis or shortly ViSTA (Section 3). This tool does not need any speci c
platform and modules installed. It allows users to upload an eye tracking dataset
and select one of the web pages included in the dataset for further analysis. Since
gaze plots are commonly used to visualise scanpaths, this tool visualises the
in1 STA's current implementation: https://github.com/SukruEraslan/sta
dividual scanpaths on the selected page by using gaze plots [
The ViSTA tool can be used by eye tracking researchers, usability evaluators, data scientists and psychologists. Our user evaluation shows that the STA algorithm can be used with less workload with this tool (Section 4). Although it is mainly designed for visualising the STA algorithm, other such algorithms can also be integrated into this tool. Similarly, other visualisation techniques can also be integrated so that the outputs of the algorithms can be visualised in di erent ways (Sections 5 and 6). 2
A large number of techniques have been proposed in the literature to visualise
eye tracking data on 2D and 3D visual stimuli in context or not in context [
Even though some of these visualisation techniques have a web-based
interface (such as, [
To the best of our knowledge, none of the algorithms which discover a
representative scanpath for multiple scanpaths has a tool to visualise their outputs
on the web platform. This paper presents a web-based visualisation tool for the
STA algorithm which is able to identify the most representative path for multiple
users [
The ViSTA tool3 can be used to upload an eye tracking dataset, visualise individual scanpaths with gaze plots, visually draw AOIs on stimuli, apply the STA algorithm to discover the trending scanpath and then visualise the trending path with an AOI graph. As illustrated in Figure 2, the ViSTA tool is comprised of three main modules explained below which are as follows: (1) Data Processing, (2) Algorithmic Processing and (3) Visualisation Processing. This tool was mainly developed by using jQuery which is a JavaScript library. The current implementation of the STA algorithm was also slightly modi ed by using Flask4 to run it as a server which accepts POST requests from the ViSTA tool. 3.1
The rst module is responsible from taking eye tracking data and converting this data into an internal storage format for further analysis. There should be a di erent data le for each participant that contains the details of their xations (index, timestamp, duration, x and y coordinates and stimuli name). These data les should include web page links as stimuli name since the ViSTA tool is currently designed for scanpath analysis on the web. This tool accesses each page 2 ScanGraph: www.eyetracking.upol.cz/scangraph 3 ViSTA: http://iam.ncc.metu.edu.tr/vistatool/demo/index.html 4 Micro web framework for Python: http://flask.pocoo.org/ by using their links to retrieve some information, especially their titles. When the data les are uploaded and they are converted into an internal storage format, this module becomes ready to send the data to the next module for further processing.
In this tool, two algorithms are currently available: (i) the gaze plot algorithm which further processes the data to visualise individual scanpaths with gaze plots; and (ii) the STA algorithm which further processes the data to identify the trending scanpath. Since the ViSTA tool rstly visualises individual scanpaths with gaze plots, the algorithm parameter is set to the gaze plot algorithm internally here so that individual scanpaths are visualised with gaze plots in the rst round.
The Visualisation Processing module takes the results of the algorithms and visualises them with their visualisation techniques by using vis.js5. In particular,
3.2
When the Algorithmic Processing module takes the data, it further processes the data based on the setted algorithm parameter. If the algorithm parameter is set to the gaze plot algorithm, this module further processes the data to be able to visualise individual scanpaths with gaze plots. However, if the algorithm parameter is set to the STA algorithm, this module further process the data to discover the trending path. Therefore, the algorithm processing modules either prepares the data to be visualised with gaze plots or applies the STA algorithm and prepares the result to be visualised with an AOI graph based on the algorithm parameter. 3.3
when the results of the gaze plot algorithm are received, researchers and practitioners should rstly select which participants' scanpaths on which web pages will be visualised with gaze plots. By default, all the participants are selected. When the participants and the web page are selected, this tool takes a screen shot of the page with html2canvas6 by using its link and the individual scanpaths are visualised on the page with gaze plots. Figure 3 shows how the ViSTA tool visualises individual scanpaths on the home page of the Babylon website with gaze plots. Researchers and practitioners can then visually draw AOIs to be used with the STA algorithm. If no AOI is drawn, the STA algorithm can not be selected for further processing the data because this algorithm discovers the trending scanpath in terms of the AOIs. As an example, Figure 3 also shows three AOIs identi ed by a user on the home page of the Babylon website.
When the STA algorithm is selected after the visualisation of individual
scanpaths with gaze plots and the result of the STA algorithm is received, this
module rstly pre-processes the result for visualisation, and then visualises it by
using an AOI graph. An example of this visualisation is shown in Figure 4. Since
the AOI that includes the link to download the free version of Babylon is the
most frequent AOI in the trending path, its node is larger than other two AOIs'
nodes.
6 Screenshots with JavaScript: https://html2canvas.hertzen.com/
In order to assess the e ectiveness of the VISTA tool, a user study was
conducted with NASA Task Load Index (TLX)7. This metric is widely used to
perform workload assessments for di erent user interfaces and is composed of six
attributes: Mental Demand, Physical Demand, Temporal Demand, Performance,
E ort and Frustration. Each attribute is assessed by the participants by giving
a value between 1 and 20. Higher values represent negative scores. In this study,
our research question was \Does the VISTA tool have better TLX attributes in
comparison with the current implementation of the STA algorithm?"
A detailed description of the dataset used in the user study can be found in [
Procedure: The participants rstly read the information sheet to understand the main objectives of the study and their rights and then they signed a consent form. After that, they were asked to complete a short questionnaire to collect their basic demographic information (gender, age groups, web usage, general computer skills, and departments). A training session was then given to them to illustrate how they can use the current implementation of the STA algorithm and the VISTA tool. This training session mainly used a sample dataset (not the one used in the evaluation). After the training session, they started their evaluation session.
Materials: The original eye tracking dataset includes six web pages with varying level of visual complexities. We used the home page of the Babylon website for the training sessions, and the home page of the Apple website for the evaluation sessions. 4.2
Figure 5 shows the comparison of the current implementation of the STA algorithm and the VISTA tool based on the mean values of the NASA TLX attributes where the error bars illustrate the standard deviation. Besides this, Table 1 shows a detailed descriptive analysis of the NASA TLX attributes for the current implementation of the STA algorithm and the ViSTA tool.
The evaluation shows that the ViSTA tool needs less mental demand, physical demand and temporal demand in comparison with the current implementation of the STA algorithm. The participants also stated that they needed less e ort to complete the given task with the ViSTA tool. Moreover, they were less frustrated when they used the ViSTA tool. However, they stated that they performed slightly better (better satis ed with their performance in achieving the task) with the current implementation of the STA algorithm. Based on the evaluation, we can suggest that the VISTA tool has a lower workload in terms of mental demand, physical demand, temporal demand, e ort and frustration level compared to the current implementation of the STA algorithm. 8 https://humansystems.arc.nasa.gov/groups/TLX/downloads/TLXScale.pdf Tablo 1. Mean, median, standard deviation, maximum and minimum values of the NASA TLX attributes for the current implementation of the STA algorithm and the ViSTA tool The ViSTA tool provides a web-based interface for the STA algorithm. It allows researchers and practitioners to directly access and use the STA algorithm for their studies without installing extra platform and modules on their computers. Similar to other algorithms, the STA algorithm can also be used by di erent researchers in di erent elds. Therefore, it should not be expected that all of these researchers easily manage to download and run their implementations on their computers. With the ViSTA tool, researchers and practitioners can easily upload their eye tracking datasets and visually draw their AOIs to apply the STA algorithm. When the trending path is generated with the algorithm, it is visualised with an AOI graph so that researchers can easily interpret the trending path without the need for remembering which alphanumeric character represents which AOI as they will see the trending AOIs and the order in which the AOIs are used. Our evaluation shows that the VISTA tool decreases the workload of using the STA algorithm. Speci cally, the tool scores better in TLX attributes in terms of mental demand, physical demand, temporal demand, e ort and frustration level compared to the current implementation of the STA algorithm. We evaluated the ViSTA tool with 12 people who were mostly not experienced in eye tracking research and studies. In the future, we can conduct further studies with more, and more experienced users for detailed feedback.
The current version of the VISTA does not include automatic AOI detection
based on xation clusters or the source code of web pages. The tool allows
researchers to visually draw their own AOIs on the y. They may detect AOIs
by using di erent techniques and then they can draw the AOIs in the VISTA
tool. As the tool has an open architecture, it can be easily extended in the
future to support automatic AOI detection. For example, the VIPS algorithm
has been extended and implemented as a web service [
The ViSTA tool currently has only the STA algorithm, apart from the generic
algorithm to pre-process the data for visualising individual scanpaths with gaze
plots. However, it has an open architecture which means that other algorithms
can easily be integrated. For example, the SPAM algorithm has been used to
identify sequential patterns in eye tracking data [
We are still improving this tool by exploring appropriate algorithms and
visualisation techniques to make this tool more functional and usable. In the future,
we are planning to add di erent visualisation techniques to the Visualisation
Module (see Figure 2), such as a time plot [
The main aim of this paper is to introduce the rst web-based interface of the STA algorithm. The STA algorithm is novel in this eld and it is being increasingly used in di erent studies. Its visualisation, called ViSTA, will allow researchers and practitioners to easily use the STA algorithm and understand its output directly without the need of remembering the names of AOIs and relating the AOIs to the output in their minds. Since there is a limited number of web-based tools for analysing eye tracking data, our tool also makes an useful contribution to eye tracking research. This tool is open to be further improved by integrating other algorithms and visualisation techniques.