Springer Nature is making Coronavirus research free. View research | View latest news | Sign up for updates

Click or not: different mouseover effects may affect clicking-through rate while browsing interactive information visualization

  • 61 Accesses


Given the thriving of information visualization systems, rich interactivity is expected and essential for users to acquire further and insightful information. Mouseover has been widely used to hint interactivity or details about the hovered elements. However, in a mouseover-click visualization system we designed based on a hierarchical Sankey diagram, we have observed that a mouseover effect interfered users from clicking items and hence reduced the efficacy of the interaction and hid the information in the next levels. This paper examined this situation and studied the effectiveness of different mouseover hints on affordance for inviting clicks. We identified four types of perceived affordances and created seven designs, adopting Mechanical Turk to measure the effectiveness. Results showed that five out of the seven designs significantly improved users’ click-through rate, whereas more than 60% of users failed to click the hovered elements for revealing the next level of information without proper affordance hints, even after they brushed over these elements for multiple times. By comparing the performance of different designs, we proposed guidelines that support the reliability and motivate the interactivity of visualization design.

Graphic Abstract

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

Fig. 1
Fig. 2
Fig. 3
Fig. 4


  1. Anwar R, Abidin SZ, Hassan OH (2015) A pattern in formgiving design: giving priority to a principle solution in industrial design situation. Springer, Berlin, Heidelberg

  2. Baecker R, Small I, Mander R (1991) Bringing icons to life. In: Proceedings of the SIGCHI conference on human factors in computing systems, CHI ’91. ACM, New York, pp. 1–6. https://doi.org/10.1145/108844.108845

  3. Baeza-Yates RR (1999) Modern information retrieval. ACM Press, Addison-Wesley, New York, Harlow

  4. Bates MJ (1989) The design of browsing and berrypicking techniques for the online search interface. Online Rev 13(5):407–424

  5. Boy J, Eveillard L, Detienne F, Fekete JD (2016) Suggested interactivity: seeking perceived affordances for information visualization. IEEE Trans Vis Comput Graph 22(1):639–648. https://doi.org/10.1109/TVCG.2015.2467201

  6. Buxton WAS (1990) A three-state model of graphical input. In: INTERACT ’90 proceedings of the IFIP TC13 third international conference on human-computer interaction, pp 449–456

  7. Chemero A (2003) What is an affordance? Ecol Psychol 15(2 April 2013):107–114. https://doi.org/10.1207/S15326969ECO1502

  8. Cooper A, Reimann R, Cronin D, Noessel C (2014) About face: the essentials of interaction design, 4th edn. Wiley, New York

  9. Elmqvist N, Fekete J-D (2010) Hierarchical aggregation for information visualization: overview, techniques, and design guidelines hierarchical aggregation for information visualization: overview, techniques and design guidelines. IEEE Trans Vis Comput Graph 16(3):439–454. https://doi.org/10.1109/TVCG.2009.84

  10. Fekete J, Plaisant C (2002) Interactive information visualization of a million items. In: Proceedings of IEEE symposium on information visualization, vol 2002. Elsevier Science (USA). https://doi.org/10.1016/B978-1-55860-915-0.50034-2

  11. Gaver WW (1991) Technology affordances. In: Proceedings of the SIGCHI conference on human factors in computing systems reaching through technology—CHI ’91, pp 79–84. https://doi.org/10.1145/108844.108856

  12. Gibson JJ (1982) Reasons for realism: selected essays of James J. Gibson. Resources for ecological psychology. L. Erlbaum, Hillsdale, NJ

  13. Harrison C, Hsieh G, Willis K, Forlizzi J, Hudson S (2011) Kineticons: using iconographic motion in graphical user interface design. In: Proceedings of the 2011 annual conference on Human factors in computing systems, pp 1999–2008. https://doi.org/10.1145/1978942.1979232

  14. Hartson HR (2003) Cognitive, physical, sensory, and functional affordances in interaction design. Behav Inf Technol 22(5):315–338. https://doi.org/10.1080/01449290310001592587

  15. Jung H, Wiltse H, Wiberg M, Stolterman E (2017) Metaphors, materialities, and affordances: hybrid morphologies in the design of interactive artifacts. Des Stud 53:24–46. https://doi.org/10.1016/j.destud.2017.06.004

  16. Lee B, Plaisant C, Parr CS, Fekete J-D, Henry N (2006) Task taxonomy for graph visualization. In: Proceedings of the 2006 AVI workshop on beyond time and errors novel evaluation methods for information visualization—BELIV ’06, p 1. https://doi.org/10.1145/1168149.1168168

  17. Li M, Wu W, Zhao J, Zhou K, Perkis D, Bond TN, Mumford K, Hummels D, Chen Y (2018) Careervis: hierarchical visualization of career pathway data. IEEE Comput Graph Appl 38:96–105. https://doi.org/10.1109/MCG.2018.2874514

  18. Liu C, White RW, Dumais S (2010) Understanding web browsing behaviors through Weibull analysis of dwell time. Proceeding of the 33rd international ACM SIGIR conference on Research and development in information retrieval - SIGIR ’10, p. 379. https://doi.org/10.1145/1835449.1835513

  19. Munzner T (2014) Visualization analysis and design, 1st edn. A K Peters/CRC Press

  20. New York times online. https://www.nytimes.com/. Accessed 30 Mar 2018

  21. Nielsen J (2011) How long do users stay on web pages? https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/. Accessed 30 Mar 2018

  22. Norman DA (2002) The design of everyday things. Basic Books, New York

  23. Our experiment style. https://va.tech.purdue.edu/lilly/AffordanceExp/style_7.php. Accessed 30 Mar 2018

  24. Postolovski N (2014) What is the most underrated word in web design? [Online]. Available: https://www.smashingmagazine.com/2014/06/affordance-most-underrated-word-in-web-design/. Accessed 30 Mar 2018

  25. Shneiderman B (2003) The eyes have it: a task by data type taxonomy for information visualizations. The craft of information visualization, pp 364–371. https://doi.org/10.1016/B978-155860915-0/50046-9

  26. Spence R (2007) Information visualization: design for interaction, 2nd edn. Prentice-Hall Inc, Upper Saddle River

  27. Tang J, Zhao Y, Zhang P (2011) Perceived affordances of web advertisements: implications for information artifacts design, pp 1–5

  28. Toms EG (2000) Understanding and facilitating the browsing of electronic text. Int J Hum Comput Stud 52(3):423–452

  29. Tubik Studio (2018) UX design glossary: how to use affordances in user interfaces

  30. W3School. Css cursor property. https://www.w3schools.com/cssref/pr_class_cursor.asp. Accessed 30 Mar 2018

  31. Washington post online. https://www.washingtonpost.com/. Accessed 30 Mar 2018

  32. Weinschenk S (2011) 100 Things every designer needs to know about people, 1st edn. New Riders Publishing, Thousand Oaks

  33. Wikipedia. Fisher’s exact test. https://en.wikipedia.org/wiki/Fisher%27s_exact_test. Accessed 30 Mar 2018

  34. Ziemkiewicz C, Kosara R (2010) Implied dynamics in information visualization. In: Proceedings of the international conference on advanced visual interfaces, AVI’10. ACM, pp 215–222

Download references

Author information

Correspondence to Yingjie Chen.

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

Verify currency and authenticity via CrossMark

Cite this article

Zhou, K., Wu, W., Zhao, J. et al. Click or not: different mouseover effects may affect clicking-through rate while browsing interactive information visualization. J Vis 23, 157–170 (2020). https://doi.org/10.1007/s12650-019-00603-3

Download citation


  • Affordance
  • Visualization
  • Interaction