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).