=Paper=
{{Paper
|id=Vol-2068/wii2
|storemode=property
|title=Effect of Slideshows in Websites on Information Search Based on Gaze Data
|pdfUrl=https://ceur-ws.org/Vol-2068/wii2.pdf
|volume=Vol-2068
|authors=Yutaka Matsushita,Makoto Kanda
|dblpUrl=https://dblp.org/rec/conf/iui/MatsushitaK18
}}
==Effect of Slideshows in Websites on Information Search Based on Gaze Data==
https://ceur-ws.org/Vol-2068/wii2.pdf
Effect of Slideshows in Websites on Information Search
Based on Gaze Data
Yutaka Matsushita Makoto Kanda
Kanazawa Institute of Technology Nachi-Fujikoshi Corporation
Kanazawa, Japan Toyama, Japan
yutaka@neptune.kanazawa-it.ac.jp b6501585@planet.kanazawa-it.ac.jp
ABSTRACT
This paper examines the effect of menu items placed
around a slide, in the center of a webpage, on searching for
information; the goal is to improve website page design.
First, we show that most visitors direct their gaze away
from the center slide and that when visitors move their eyes
in the direction opposite to the side on which the target
information is, the search time increases. Second, a (a) Mixed-type (b) Slide-independence type
probabilistic model is developed according to each initial Figure 1. Two types of football club landing pages
gaze direction such that the search time can be inferred
from each visitor’s eye movement. From this model, we The ratios of landing pages of a slide-independence type to
study behavioral properties of visitors whose search times all landing pages of clubs in the J1 and J2 Leagues are
are either long or short. Finally, we suggest that menu items 66.7% and 54.5%, respectively. Large clubs, having many
should not be placed on both sides of a slide. supporters, seem to reflect the recent trend. However, since
many clubs still adopt mixed-type landing pages, it is
Author Keywords worthwhile clarifying issues on information search.
Bayesian network; eye movement; website; slideshow;
information search. Our pilot study showed that the search time increased when
the target information was placed at a particular position
ACM Classification Keywords
around a slideshow. This indicates that slideshows might
H.3.3. Information search and Retrieval; Search process;
cause visitors trouble in searching for information in a
I.6.5 Model Development.
mixed-type landing page. The aim of this paper is to clarify
INTRODUCTION the effect of slideshows on an information search and
The Japanese style [1] of designing landing pages on propose a landing page design reflecting our findings. We
websites appears to have drastically changed after 2008. As will use gaze data to achieve this aim.
shown Figure 1(a), (b), before 2008, a general trend was
landing pages of a mixed-type in which several menu items Recently, many studies utilizing gaze data to improve
were laid out around a screen to provide various pieces of website design have appeared. Indeed, important
information. Since 2008, landing pages of a slide- information [2, 3] about the specific layout of links and
independence type in which only a single screen is in the menus was gathered. Moreover, it was found [4] that
center has begun to prevail in order to deliver concepts of entertainment and utility were necessary to make website
companies and associations. Recently, the center screen has contents memorable. However, few studies have tried to
been equipped with a slideshow that provides regularly clarify the information search process through gaze data. In
changing information to prevent visitor’s boredom. This this study, we develop a probabilistic inference model
style is particularly common in Japan Professional Football based on gaze data that allows one to analyze behavioral
League (J-League) club websites because they are highly properties of visitors, in particular, those whose search time
concerned with providing supporters with their information. is long. With this approach, the Bayesian network [5, 6] is
a useful analytical method for the following reasons. First,
an information search structure can be explicitly expressed
by a graph structure. Second, the marginalization of
conditional probabilities enables us to easily exclude
uninteresting explanatory variables from consideration.
EXPERIMENT
In this experiment, we recorded gaze data in a situation
©2018. Copyright for the individual papers remains with the authors. where visitors would search for desired information on the
Copying permitted for private and academic purposes. landing page of a website. The experiment stimulus was
WII’18, March 11, 2018, Tokyo, Japan created based on the landing page (of the mixed-type) on
8
7
Slide
Search Time (sec)
L 6
5
4
BL 3
2
Figure 2. Experiment stimulus 1
0
the web site of a football club belonging to the J2 League. L BL
As shown in Figure 2, a slideshow moving from the right to
Figure 3. Average search time according to position
the left direction at two second intervals was placed in the
center, and menu items were laid out on both sides and at
Direction Total Number Details
the bottom of the slideshow (12 positions). Either
information on “mass media” or information on “match Right 24 dR 14 bR 10
ticket” was chosen as the search target. The search target Left 42 dL 17 bL 25
was presented at either the left (L) position or the bottom
left (BL) position. The remaining 10 pieces of information Table 1. Number of subjects in each initial direction
placed in the menu items were chosen from information
p<0.01
that supporters indicated a high interest in questionnaires.
8
Subjects were asked to search for the target only once by 7
being restricted to one of the search tasks in which the
Search Time (sec)
6
target was presented at the two positions (L and BL). 5
Subjects were not given any information that would aid in 4
the search before the experiment. While subjects were 3
2
exposed to the stimulus, the coordinates of fixation points 1
were assessed for each subject via an eye tracker (Tobii Pro 0
X2-30). The experiment was conducted as follows: Right
右方向 Left
左方向
1. Calibrate the coordinates of fixation points. Figure 4. Average search time according to initial
eye movement direction
2. Present the target (information on mass media or match
ticket) in the center of the slide for 0.5 seconds. eyes to the left. The number of subjects belonging to the
3. Have subjects click on the mouse after finding the target. former or latter group was 24 or 42, respectively. Second,
The second step is a means to ensure that subjects gaze at the subjects in each group were further divided into two
the slide initially. It also prevents subjects from starting to subgroups: one group consisting of subjects who moved
search for the target before eye movement recording begins. their eyes directly to the right or left direction (dR or dL),
and the other group consisting of subjects who moved their
A fixation is defined as maintaining the gaze at a single eyes first below and then to the right or left direction (bR or
spot for more than 100 msec. The number of fixations is the bL). Table 1 shows the number of subjects belonging to
total number of fixations throughout the experiment. The each subgroup (case). Twenty-one subjects were excluded
average duration of fixation is the sum of the durations because their eye movements were inconclusive. The eye
divided by the number of fixations. The average eye movements of the excluded subjects were as follows: ten
movement velocity means the average of eye movement subjects moved their eyes to both sides repeatedly, five
velocities through the experiment. subjects kept their eyes on the center screen, and six
All the subjects were students in Kanazawa Institute of subjects moved their eyes irregularly.
Technology. The total number was eighty-seven. Figure 4 shows the average search time according to the
RESULTS OF THE EXPERIMENT initial eye movement direction (right or left). The vertical
Figure 3 shows the average search time according to the axis indicates the search time, and the horizontal axis
target position (L or BL). The vertical axis indicates the denotes the eye movement direction. Analysis of variance
search time, and the horizontal axis denotes the position. shows that the difference was significant at a level of 1%;
Analysis of variance shows that there was no significant the search time is faster when moving to the left than to the
difference in search times between the L and BL positions. right. This is an intuitive result because if the eyes move
initially to the right, the gaze moves away from the target,
Initial eye movements tell us that there were four gaze thereby lengthening the distance of gaze movement. Hence,
patterns. First, many subjects fell into one of two groups, it is very important to prevent the eyes from moving initially
those who moved their eyes to the right in order to avoid to the right when the target is on the left. This suggests that
the movement of the slideshow, and those who moved their menu items should not be laid out to the right of the slide.
We consider the case where the eyes moved initially to the Gaze Gaze
direction
right. Table 2 shows the difference in search time between direction
the L and BL positions in each of the dR and bR cases. It is
seen from the table that in the dR case, the search time was Movement
velocity
Duration of
fixation
Movement
velocity
Maximum
distance
Duration of
fixation
a little longer in the L position than in the BL position. It is
likely that in this case, after the initial gaze, the subsequent
gaze advanced below along the right menu items and then Search time Search time
moved from the right to left in the bottom menu items.
Conversely, Table 2 shows that in the bR case, the search
time was longer in the BL position than in the L position. (a) Right direction (b) Left direction
Hence, it is inferred that in this case, the subsequent gaze Figure 5. Graph structure for each movement direction
advanced from the center to the right, rose over the right
menu items, and crossed the slide to reach the target. Case L position BL position Details
From the above discussion, the conclusion might be that dR 6.0 sec 5.8 sec N. S.
only the left menu items should remain in the layout. We bR 5.5 sec 7.1 sec p < 0.08
will now consider the validity of this conclusion. Assume
that the target is placed at the bottom right. It will be seen Table 2. Search times of L and BL positions
from symmetry of the experiment that if gaze moves
initially to the left direction, then the result can be similar to by that of all samples. Given the requirement that the
the BL case in which the eyes moved initially to the right. accuracy rate of all three categories (S, M, L) of the search
Hence, the above-mentioned conclusion is incorrect, and it time be greater than or equal to 0.5, the optimal model was
turns out that the menu items should be removed from both structured as a graph satisfying the requirement and
sides completely, i.e., not only from the right side but also possessing the smallest AIC. Figure 5 shows the optimal
from the left side. model regarding each case of the right (Figure 5(a)) and left
(Figure 5(b)) directions (for the initial gaze movement).
INFERENCE BY BAYESIAN NETWORK
The numbers of parameters of the nodes in the right and left
Choice of Explanatory Variables
direction models were 45 and 121, respectively. From the
Using a Bayesian network, we develop a probabilistic
figure, it is seen that the gaze direction (i.e., dR vs. bR or
model that can infer the search time from eye movement
dL vs. bL), the average eye movement velocity (movement
data according to each initial eye movement. For this
velocity), the average duration of fixation (duration of
purpose, it is crucial to choose appropriate quantities among
fixation), and the maximum distance of eye movement
the eye movement data. Candidates for explanatory
(maximum movement distance) were essential variables to
variables was decided based on the condition that they were
the search time. We examined the predictive capability of
not properties (e.g., the total duration of fixation) that were
the model for each of the initial gaze movement directions
directly related to the search time but were average
by leave-one-out cross-validation [7]. As a result, the
properties per one eye movement. Note that these data were
accuracy rates were more than 0.6 in both models, which
continuous except for the gaze direction, which were of two
implies that both models were highly likely to be correct.
levels: dR vs. bR or dL vs. bL. Hence, they had to be
discretized to evaluate probability values in a discrete form. Inference of occurrence probability for the event where
Each of the data sets was divided into three categories: S the search time is long or short
(small), M (medium), and L (large), such that the Under the graph structure of Figure 5(a), we calculated a
frequencies were similar. Using the eye movement data conditional probability in the case where the eyes moved to
(transformed into discrete data) as explanatory variables, the right. Figures 6 and 7 show the conditional probabilities
and the search time (also transformed into discrete data) as that the search time was equal to L given the movement
objective variables, we chose a set of optimal explanatory velocity and the duration of fixation, for the dR and bR
variables through the use of the analytical software Bayonet. cases, respectively. The vertical axis indicates the
conditional probability that the search time was equal to L,
An optimal graph structure was selected on the basis of the and the horizontal axis denotes the duration of fixation.
Akaike Information Criterion (AIC) and the accuracy rate. Three types of lines correspond to the three category values
AIC is expressed as of the movement velocity. In the following consideration,
AIC = −2×MLL+2×(the number of probability parameters), we will utilize the conclusion of Toda et al. [8] that was
derived from an investigation into the relationship between
where MLL refers to a maximum log-likelihood and the
the duration of fixation and behavioral patterns of subjects
number of probability parameters denotes the total number
through a search experiment:
of probability values running freely through the inference
model. An inferred result is deemed a correct answer if it When the duration of fixation is long, subjects tend to
proves compatible with the observation. The accuracy rate make a judgment on the compatibility of their found
is defined as the division of the number of correct answers information with wanted information.
From Figure 6, the probability that the search time was M velocity = S M velocity = M M velocity = L
equal to L increased monotonically as the duration of 1
fixation became longer, independently of the value of the
0.8
movement velocity. Since, in the dR case, subjects had to
Probability
review many menu items, according to the conclusion of 0.6
Toda et al., it is seen that the search time was longer if they
0.4
tried to take in the information accurately. Meanwhile, from
Figure 7, in the bR case, the probability that the search time 0.2
was equal to L was small if the duration of fixation was less
than or equal to M accompanied by a fast movement 0
S M L
velocity or if the duration of fixation was L together with a
Duration of fixation
slow movement velocity. The conclusion of Toda et al.
implies that in the bR case, if subjects could skim through Figure 6. Probability that search time was L in dR case
each menu item or judge the compatibility of information
with certainty, they had reached the target comparatively M velocity = S M velocity = M M velocity = L
quickly; otherwise, they reached the target slowly. 1
We also calculated the conditional probability from the 0.8
Probability
graph structure of Figure 5(b) in the case where the eyes 0.6
moved to the left. Figures 8 and 9 show the conditional
probabilities that the search time was equal to S given the 0.4
movement velocity and maximum movement distance, for 0.2
the dL and bL cases, respectively. The vertical axis
0
indicates the conditional probability that the search time S M L
equaled S, and the horizontal axis denotes the maximum
Duration of fixation
movement distance. Three types of lines correspond to the
three category values of the movement velocity. Figure 7. Probability that search time was L in bR case
Figure 8 implies that in the dL case, the probability that the
search time was equal to S became large if the maximum M velocity = S M velocity = M M velocity = L
movement distance was M and the movement velocity was 1
more than or equal to M. Since the distance between the 0.8
target and the center of the slide belongs to the category M,
Probability
0.6
it follows that if subjects moved their eyes quickly over this
distance, then the search time would be short. It can 0.4
therefore be expected that this happened entirely by chance.
0.2
However, Figure 9 suggests that in the bL case, the
probability that the search time was equal to S was always 0
below 0.5 regardless of the values of the maximum S M L
movement distance and movement velocity. Hence, in this Maximum movement distance
case, there is no single way of browsing to make the search
time short. Figure 8. Probability that search time was S in dL case
CONCLUSION
M velocity = S M velocity = M M velocity = L
This study considered the effect of a slideshow on the 1
search time for information based on gaze data. In
particular, using a probabilistic inference model based on a 0.8
Probability
Bayesian network, behavioral properties were analyzed in 0.6
each of the cases where subjects moved their eyes initially
0.4
to the right and to the left. We found that menu items laid
out at both sides of the slide drew the subjects' gaze to 0.2
judge the compatibility and caused them to scan for the
0
target information, leading to increased information search S M L
time. We concluded that there should be no menu items on Maximum movement distance
either side of the slide, i.e., neither the right nor the left side.
ACKNOWLEDGMENTS Figure 9. Probability that search time was S in bL case
This work was supported by JSPS KAKENHI Grant
Number 17K00392.
REFERENCES
1. Anzai, T., Oya, T., and Kasuya, T. 2014. Consideration
of the Transition in Mitsubishi Electric Corporate
Website Design - Transition in Response to
Environmental Change and Record through the Case of
Corporate Website Design Examples -, International
Journal of Affective Engineering. Vol. 13, No. 2, pp.
391-402. (in Japanese).
2. Chu, S., Paul, N., and Ruel, L. 2009. Using eye
tracking technology to examine the effectiveness of
design elements on news websites. Information Design
Journal. 17(1), pp. 31-43.
3. Nakamichi, N., Sakai, M., Shima, K., and Matsumoto,
K. 2003. Empirical Study on Evaluating Web Usability
with Eye Information. IPSJ SIG Technical Report.
2003-SE-143(1), pp. 1-8. (in Japanese).
4. Sakamaki, R., Someya, S., and Okamoto, K. 2009. An
Analysis of Relationship between Evaluation Structure
and Memorized Information Quantity on the Web-site.
Bulletin of Japanese Society for the Science of Design
55(6), pp. 59-66. (in Japanese).
5. Ji, Q., Lan, P., and Looney, C. 2006. A probabilistic
framework for modeling and real-time monitoring
human fatigue, IEEE Trans. Syst., Man, Cybern.-Part
A. Vol. 36, No. 5, pp. 862-875.
6. Matsushita, Y., and Maeda, S. 2013. Bayesian network
model that infers purchase probability in an online
shopping site. J. of Advanced Computational
Intelligence and Intelligent Informatics. Vol. 17, pp.
221–226.
7. Stone, M. 1974. Cross-validation and multinomial
prediction, Biometrica. Vol. 61, No. 3, pp. 509-515.
8. Toda, K., Nakamichi, N., Shima, K., Ohira, M., Sakai,
M., and Matsumoto, K. 2005. An information
exploration model based on eye movements during
browsing web pages, IPSJ SIG Technical Report.
2005-HI-113(6), No. 52, pp. 35-42. (in Japanese).