# Do Animation Direction and Position of Progress Bar Affect Selections?

Kota Yokoyama, Satoshi Nakamura, Shota Yamanaka

► To cite this version:

Kota Yokoyama, Satoshi Nakamura, Shota Yamanaka. Do Animation Direction and Position of Progress Bar Affect Selections?. 18th IFIP Conference on Human-Computer Interaction (INTER-ACT), Aug 2021, Bari, Italy. pp.395-399, 10.1007/978-3-030-85607-6_45. hal-04291271

HAL Id: hal-04291271

https://inria.hal.science/hal-04291271v1

Submitted on 17 Nov 2023

**HAL** is a multi-disciplinary open access archive for the deposit and dissemination of scientific research documents, whether they are published or not. The documents may come from teaching and research institutions in France or abroad, or from public or private research centers.

L'archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion de documents scientifiques de niveau recherche, publiés ou non, émanant des établissements d'enseignement et de recherche français ou étrangers, des laboratoires publics ou privés.

<figure><img src="image_1.png" /></figure>

Distributed under a Creative Commons CC BY 4.0 - Attribution - International License
<figure><img src="image_2.png" /></figure>

ifip

International Federation for Information Processing

This document is the original author manuscript of a paper submitted to an IFIP
conference proceedings or other IFIP publication by Springer Nature. As such, there
may be some differences in the official published version of the paper. Such
differences, if any, are usually due to reformatting during preparation for publication or
minor corrections made by the author(s) during final proofreading of the publication
manuscript.
# Do Animation Direction and Position of Progress Bar Affect Selections?

Kota Yokoyama<fnref n="1" />, Satoshi Nakamura<fnref n="1" /> and Shota Yamanaka<fnref n="2" />

**Abstract.** Web sites and applications show visual feedback such as a progress bar or a throbber to signal that users should wait. These moving objects guide the eye. We hypothesized that users would end up looking near the end position of the visual feedback after waiting. As a result that users might be more likely to select an object near the end position of the visual feedback. This study focused on using a progress bar as visual feedback for waiting and on the design to influence the users' subsequent choice. We tested our hypotheses using a progress bar with different display positions and animation directions. The results suggest that changing the progress bar's position on a display or the animation's direction may bias the subsequent selection position.

**Keywords:** Choice behavior, Visual feedback, Progress bar, Fairness

## 1 Introduction

People usually face situations where they have to make various choices. Past research has shown that human habits and psychological effects influence their choices. Therefore, when users make choices, systems need to be adapted to handle various intentions. For example, in Web-based questionnaires, if a factor causes bias in the selection, the survey's reliability is also affected. Therefore, identifying the factors that cause bias in selection is crucial because such factors may affect the survey's credibility.

When customers use a computer, they sometimes have to wait while reading media files and layout designs displayed on the screen. This waiting time always exists even if the computer's processing speed and the Internet's communication speed are excellent. A long waiting time may annoy the user to make him/her misrecognize it as an error [1]. Bouch et al. [2] clarified that a feeding back extended users' time that they would be willing to wait. In particular, many users prefer a progress bar to be used in Web sites and applications [3] because they can easily estimate the time in which a task is completed. However, because such visual feedback may induce a users' line of sight, it may affect their behavior when making a selection after the waiting period is over.

Previous studies researched the relationship between the user gaze and selection behavior. Simonson [4] suggested that users tended to complete the selection process

<footnote n="1">¹ Meiji University, Nakano-ku, Tokyo, Japan</footnote>

<footnote n="2">² Yahoo Japan Corporation, Chiyoda-ku, Tokyo, Japan
cs212018@meiji.ac.jp</footnote>
when they found the appropriate product. Shimojo et al. [5] found that users tended to prefer choices with long gaze time. These results suggest that if a progress bar guides a user's gaze and changes the order of viewing and gazing time for each option, the option near the end of the progress bar animation will be the one more likely to be selected.

In this study, we focus on the effect of the progress bar animation before presenting a user interface for selections. We also speculate that gender differences may exist in the effects of animated progress bars because a previous study [6] reported that men were more sensitive to moving objects and rapid changes than women. Therefore, we hypothesized the following.

* Hypothesis 1: When a system presents a progress bar before the user interface, the user may be more likely to choose near the animation's end.

* Hypothesis 2: The effect of hypothesis 1 would be more pronounced by men than women.

In this study, we prepared two animation directions (leftward or rightward) and two positions (upper or lower) of the progress bar and compared their effects on the location of users' selection. In addition, we implemented an experimental system to test these effects in crowdsourcing platforms.

## 2 Experiment

In this study, we designed the experiment based on online shopping on the Internet to clarify the relationship between the design of the progress bar and the users' selection behavior after the waiting period ends.

We recruited participants for this experiment using Yahoo! Crowdsourcing, a major crowdsourcing platform in Japan. This experiment was limited to PC users. Our system asked each participant to select one of eight options after a waiting period. Our system repeated this selection process nine times and asked participants to answer questionnaires after the experiment.

We prepared five types of waiting screens (see Fig. 1). Four conditions combined the display position of the progress bar (upper, lower) and the animation's direction (rightward, leftward). One condition involved the background color changing from black (RGB value: 55) to white (RGB value: 255) without displaying the progress bar. We prepared three kinds of waiting times of 2 seconds, 5 seconds, and 10 seconds and experimented with three times for each condition. We also prepared nine product categories (vacuum cleaners, water, mice, dumbbells, Web cameras, teacups, chairs, tissues, and batteries) for the selections. In addition, we prepared eight kinds of product images for each category.

Fig. 1 shows one trial example in which a participant assigned to each condition to select a bottle of water. Product images were randomly placed in 2 (rows) by 4 (columns) squares each time. The system first instructed participants not to look away from the screen while waiting and asked the questionnaire after the experiment how long they looked away.
<figure><img src="image_3.png" /><figcaption>Fig. 1. Examples of one trial in each condition to select a bottle of water.</figcaption></figure>

# 3 Results and Discussion

We recruited 1,000 participants (500 men and 500 women). Among them, we excluded 380 participants who did not follow the instructions and whose data were incorrect. Finally, we obtained 620 participants’ data (330 men, 290 women) to analyze. The results enabled us to collect at least 909 selection data in each condition.

Fig. 2 shows the selection rate at each position in each condition. Fig. 3 shows the men's selection rate, and Fig. 4 shows the women's selection rate at each position in each condition. These figures correspond to 2 (rows) by 4 (columns) squares in which the choices were displayed in the experiment. The arrows in these figures indicate the animation direction of the progress bar and its display position. Fig. 2 showed no trend in selection at the end of the animation. Therefore, hypothesis 1 was not well-supported at this stage. Fig. 3 and 4 revealed no trend like that of hypothesis 1, so hypothesis 2 was also rejected.

However, in the lower-rightward, lower-leftward, and upper-rightward display conditions, the selection rate of the center two rows tended to be high. Because the product images' arrangement was random, the deviation should not have arisen in the selected position unless other factors caused it. Therefore, we analyzed the degree to which bias was substantial in the selection rate in each condition. As a result, we found that the lower-rightward, lower-leftward, and upper-rightward display conditions may have specifically caused bias in the selected position. We did the same analysis in accordance with the time condition. The result suggests that the 10-second condition may not affect the bias of the selected position under any waiting screen conditions.

These results suggest that when designers incorporate a progress bar into a survey site, they may want to apply the progress bar on the upper side and the direction of the animation leftward to obtain fair results.
<figure><img src="image_4.png" /><figcaption>Fig. 2. Results of the selection rate at each position in each condition.</figcaption></figure>

<figure><img src="image_5.png" /><figcaption>Fig. 3. Results of the selection rate at each position in each condition for men.</figcaption></figure>

<figure><img src="image_6.png" /><figcaption>Fig. 4. Results of the selection rate at each position in each condition for women.</figcaption></figure>

4 Conclusion

In this work, we investigated the effect of the design of a progress bar on the selecting behavior after a waiting period ended by concluding the experiment test. In the future, we will investigate how the difference in the shape or the difference in the animation speed affects users’ selections after the waiting period ends.

References

1. Nah, F.: A study on tolerable waiting time: how long are Web users willing to wait? *Behavior & Information Technology* 23(3), 153–163 (2004).

2. Bouch, A., Kuchinsky, A., and Bhatti, N.: Quality is in the eye of the beholder: Meeting users' requirements for internet quality of service. *Proceedings of the SIGCHI Conference on Human Factors in Computing Systems*. ACM, The Hague, The Netherlands (2000).

3. Branaghan, R. J., Sanchez, C. A.: Feedback Preferences and Impressions of Waiting. *Human factors* 51(4), 528–538 (2009).

4. Simonson, I.: The effect of product assortment on buyer preferences. *Journal of Retailing* 75(3), 347–370 (1999).

5. Shimojo, S., Simion, C., Shimojo, E., & Scheier, C.: Gaze bias both reflects and influences preference. *Nature Neuroscience* 6(12), 1317–1322 (2003).

6. Abramov, I., Gordon, J., Feldman, O., Chavarga, A.: *Sex & vision I: Spatio-temporal resolution*. *Biology of sex differences* 3(1), 20 (2012).