Skip to main content
SpringerLink
Log in

Exploring the website object layout of responsive web design: results of eye tracking evaluations

  • Published:
The Journal of Supercomputing Aims and scope Submit manuscript

Abstract

Due to the increasing dependence on mobile devices worldwide, web designers are starting to design websites that are suitable for mobile devices such as smartphones and tablets. The aim of this paper is to find out which structures of interface the mobile commerce websites should implement to meet the user’s viewing visual behaviors. This is achieved through the use of eye tracking technology to record and analyze the content of online booking websites designed by responsive web design rules and to assess whether there was a difference in the location of the attention areas when the webpage presents different object arrangements. The paper finds that there are no significant differences in the number of fixations at the location of the menu icon, and the gaze sequences are also the same. However, participants have significant differences in fixation time on the navigation menu lists with different presentation methods, whereas the gaze sequences are the same; on the other hand, there are no significant differences in the total gaze time when objects are arranged in different positions, but the gaze sequences on the regions of interest are different when the object arrangements are changed.

This is a preview of subscription content, log in via an institution to check access.

Access this article

Log in via an institution

Price excludes VAT (USA)
Tax calculation will be finalised during checkout.

Instant access to the full article PDF.

Institutional subscriptions

Fig. 1
Fig. 2
Fig. 3
Fig. 4
Fig. 5
Fig. 6
Fig. 7
Fig. 8

Similar content being viewed by others

References

  1. Bradley S (2013) Design Fundamentals—Elements, Attributes, & Principles. http://vanseodesign.com/downloads/learn-design-fundamentals/. Accessed 10 May 2016

  2. Boulton J (2014) 100 ideas that changed the web, 1st edn. Laurence King Publishing, London

    Google Scholar 

  3. Chen Y, Xie X, Ma W, Zhang H (2005) Adapting web pages for small screen devices. Internet Comput IEEE 9(50–56):2005

    Google Scholar 

  4. Djamasbi S, Siegel M, Tullis T (2010) Generation Y, web design, and eye tracking. Int J Hum Comput Stud 68(5):307–323

    Article  Google Scholar 

  5. Duchowski AT (2007) Eye tracking methodology: theory and practice, 2nd edn. Springer, New York

    MATH  Google Scholar 

  6. Gregory LR (1997) Eye and brain: the psychology of seeing. Princeton University Press, Hillsdale

    Google Scholar 

  7. Guy T (2011) UX Magazine. http://uxmag.com/articles/visual-design-and-usability-yellow-brick.road. Accessed 10 May 2016

  8. Henderson JM, Hollingworth A (1999) High-level scene perception. Annu Rev Psychol 50(1):243–271

    Article  Google Scholar 

  9. Hewig J, Trippe RH, Hecht H, Straube T, Miltner WHR (2008) Gender differences for specific body regions when looking at men and women. J Nonverbal Behav 32(2):67–78

    Article  Google Scholar 

  10. Ho HF (2014) The effects of controlling visual attention to handbags for women in online shops: evidence from eye movements. Comput Hum Behav 30:146–152

    Article  Google Scholar 

  11. Holmqvist K, Nystrom M, Andersson R, Dewhurst R, Jarodzka H, Weijer J (2011) Eye tracking: a comprehensive guide to methods and measures. OUP, Oxford

    Google Scholar 

  12. Hsieh YC, Chen KH (2011) How different information types affect viewer’s attention on internet advertising. Comput Hum Behav 27(2):935–945

    Article  Google Scholar 

  13. Huang YF, Kuo FY (2011) An eye-tracking investigation of internet consumers’ decision deliberateness. Internet Res 21(5):541–561

    Article  Google Scholar 

  14. Huddleston P, Behe BK, Minahan S, Fernandez RT (2015) Seeking attention: an eye tracking study of in-store merchandise displays. Int J Retail Distrib Manag 43(6):561–574

    Article  Google Scholar 

  15. Just MA, Carpenter PA (1976) Eye fixations and cognitive processes. Cogn Psychol 8:441–480

    Article  Google Scholar 

  16. Lindström A, Berg H, Hordfält J, Roggeveen AL, Grewal D (2016) Does the presence of a mannequin head change shopping behavior? J Bus Res 69(2):517–524

    Article  Google Scholar 

  17. Marcotte E (2010) Responsive web design. Retrieved from http://alistapart.com/article/responsive-web-design

  18. Meiβner M, Pfeiffer J, Pfeiffer T, Oppewal H (2017) Combining virtual reality and mobile eye tracking to provide a naturalistic experimental environment for shopper research. J Bus Res 100:445–458

    Google Scholar 

  19. Minahan SM, Huddleston P, Behe B, Fernandez RT (2013) Conducting field research in retail stores: a meandering path to a successful research project. Int Rev Retail Distrib Consum Res 23(2):189–203

    Google Scholar 

  20. Mintel (2015) Online retailing. https://academic.mintel.com/display/716139/. Accessed 10 May 2016

  21. Musti S, Kashyap V (2013) Responsive design: the time is now

  22. Nielsen J (2006) F-shaped pattern for reading web content. https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/. Accessed 10 May 2016

  23. Nielsen J, Budiu R (2013) Mobile usability, 1st edn. New Riders, Berkeley, pp 7–21

    Google Scholar 

  24. Nielsen J, Pernice K (2009) Eyetracking web usability, 1st edn. New Riders Publishing, Thousand Oaks

    Google Scholar 

  25. Poole A, Ball LJ (2005) Eye tracking in human–computer interaction and usability research: current status and future prospects. In: Ghaoui C (ed) Encyclopedia of human computer interaction, pp 211–219

  26. Roth S, Tuch AN, Mekler ED, Bargas-Avila JA, Opwis K (2012) Location matters, especially for non-salient features—an eye-tracking study on the effects of web object placement on different types of websites. Int J Hum Comput Stud 71(3):228–235

    Article  Google Scholar 

  27. Theeuwes J, Kramer AF, Atchley P (1999) Attentional effects on preattentive vision: spatial precues affect the detection of simple features. J Exp Psychol Hum Percept Perform 25(2):341–347

    Article  Google Scholar 

  28. Tzafilkou K, Protogeros N (2017) Diagnosing user perception and acceptance using eye tracking in web-based end-user development. Comput Hum Behav 72:23–37

    Article  Google Scholar 

  29. Tzanidou E (2003) Eye tracking as a complementary usability evaluation technique for e-commerce sites. In: Proceedings of the Workshop on Exploring the Total Customer Experience (TCE): Usability Evaluations of (B2B) e-commerce Environments, Zurich, Switzerland

  30. Wang Q, Yang S, Liu M, Cao Z, Ma Q (2014) An eye-tracking study of website complexity from cognitive load perspective. Decis Support Syst 62:1–10

    Article  Google Scholar 

  31. Wong W, Bartels M, Chrobot N (2014) Practical eye tracking of the Ecommerce website user experience. In: Proceedings of International Conference on Universal Access in Human–Computer Interaction, pp 109–118

  32. Yeh S, Chen I, De Valois KK, De Valois RL (1996) Figural aftereffects and spatial attention. J Exp Psychol Hum Percept Perform 22(2):446–460

    Article  Google Scholar 

  33. Zhang XB, Liu XL, Yuan SM, Lin SF (2017) Eye tracking based control system for natural human–computer interaction. Comput Intell Neurosci 3:1–9

    Google Scholar 

Download references

Funding

The funding was provided by Ministry of Science and Technology, Taiwan (Grant no. MOST 108-2637-E-025-002).

Author information

Authors and Affiliations

  1. Department of Computer Science and Information Engineering, National Taichung University of Science and Technology, Taichung, Taiwan

    Jason C. Hung

  2. School of Information and Design, Chang Jung Christian University, Tainan, Taiwan

    Chun-Chia Wang

Authors
  1. Jason C. Hung
    View author publications

    You can also search for this author in PubMed Google Scholar

  2. Chun-Chia Wang
    View author publications

    You can also search for this author in PubMed Google Scholar

Corresponding author

Correspondence to Jason C. Hung.

Additional information

Publisher's Note

Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.

Rights and permissions

Reprints and permissions

About this article

Check for updates. Verify currency and authenticity via CrossMark

Cite this article

Hung, J.C., Wang, CC. Exploring the website object layout of responsive web design: results of eye tracking evaluations. J Supercomput 77, 343–365 (2021). https://doi.org/10.1007/s11227-020-03283-1

Download citation

  • Published:

  • Issue Date:

  • DOI: https://doi.org/10.1007/s11227-020-03283-1

Keywords

Search

Navigation