Abstract
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 via an institution to check access.
Similar content being viewed by others
References
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
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
Baeza-Yates RR (1999) Modern information retrieval. ACM Press, Addison-Wesley, New York, Harlow
Bates MJ (1989) The design of browsing and berrypicking techniques for the online search interface. Online Rev 13(5):407–424
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
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
Chemero A (2003) What is an affordance? Ecol Psychol 15(2 April 2013):107–114. https://doi.org/10.1207/S15326969ECO1502
Cooper A, Reimann R, Cronin D, Noessel C (2014) About face: the essentials of interaction design, 4th edn. Wiley, New York
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
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
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
Gibson JJ (1982) Reasons for realism: selected essays of James J. Gibson. Resources for ecological psychology. L. Erlbaum, Hillsdale, NJ
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
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
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
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
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
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
Munzner T (2014) Visualization analysis and design, 1st edn. A K Peters/CRC Press
New York times online. https://www.nytimes.com/. Accessed 30 Mar 2018
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
Norman DA (2002) The design of everyday things. Basic Books, New York
Our experiment style. https://va.tech.purdue.edu/lilly/AffordanceExp/style_7.php. Accessed 30 Mar 2018
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
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
Spence R (2007) Information visualization: design for interaction, 2nd edn. Prentice-Hall Inc, Upper Saddle River
Tang J, Zhao Y, Zhang P (2011) Perceived affordances of web advertisements: implications for information artifacts design, pp 1–5
Toms EG (2000) Understanding and facilitating the browsing of electronic text. Int J Hum Comput Stud 52(3):423–452
Tubik Studio (2018) UX design glossary: how to use affordances in user interfaces
W3School. Css cursor property. https://www.w3schools.com/cssref/pr_class_cursor.asp. Accessed 30 Mar 2018
Washington post online. https://www.washingtonpost.com/. Accessed 30 Mar 2018
Weinschenk S (2011) 100 Things every designer needs to know about people, 1st edn. New Riders Publishing, Thousand Oaks
Wikipedia. Fisher’s exact test. https://en.wikipedia.org/wiki/Fisher%27s_exact_test. Accessed 30 Mar 2018
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
Author information
Authors and Affiliations
Corresponding author
Additional information
Publisher's Note
Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
Rights and permissions
About this article
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
Received:
Accepted:
Published:
Issue Date:
DOI: https://doi.org/10.1007/s12650-019-00603-3