ProvenanceWidgets: A Library of UI Control Elements to Track and Dynamically Overlay Analytic Provenance
Pages 1235 - 1245
Abstract
We present ProvenanceWidgets, a Javascript library of UI control elements such as radio buttons, checkboxes, and dropdowns to track and dynamically overlay a user's analytic provenance. These in situ overlays not only save screen space but also minimize the amount of time and effort needed to access the same information from elsewhere in the UI. In this paper, we discuss how we design modular UI control elements to track how often and how recently a user interacts with them and design visual overlays showing an aggregated summary as well as a detailed temporal history. We demonstrate the capability of ProvenanceWidgets by recreating three prior widget libraries: (1) Scented Widgets, (2) Phosphor objects, and (3) Dynamic Query Widgets. We also evaluated its expressiveness and conducted case studies with visualization developers to evaluate its effectiveness. We find that ProvenanceWidgets enables developers to implement custom provenance-tracking applications effectively. ProvenanceWidgets is available as open-source software at https://github.com/ProvenanceWidgets to help application developers build custom provenance-based systems.
References
[1]
W. Aigner, S. Hoffmann, and A. Rind. Evalbench: A software library for visualization evaluation. In Computer Graphics Forum, vol. 32, pp. 41–50. Wiley Online Library, 2013. 1,2.
[2]
J. Alexander, A. Cockburn, S. Fitchett, C. Gutwin, and S. Greenberg. Revisiting read wear: analysis, design, and evaluation of a footprints scrollbar. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 1665–1674, 2009. 2.
[3]
Angular. https://angular.io. Accessed: March 31,2024. 4.
[4]
Angular Material. https://material.angular.io, 2024. 1,2.
[5]
E. Arroyo, T. Selker, and W. Wei. Usability tool for analysis of web designs using mouse tracks. In CHI'06 extended abstracts on Human factors in computing systems, pp. 484–489, 2006. 2.
[6]
S. K. Badam, Z. Zeng, E. Wall, A. Endert, and N. Elmqvist. Supporting Team-First Visual Analytics through Group Activity Representations. In Graphics Interface, pp. 208–213, 2017. 2.
[7]
P. Baudisch, D. Tan, M. Collomb, D. Robbins, K. Hinckley, M. Agrawala, S. Zhao, and G. Ramos. Phosphor: explaining transitions in the user interface using afterglow effects. In Proceedings of the 19th annual ACM symposium on User interface software and technology, pp. 169–178, 2006. 2,3,6,7.
[8]
L. Bavoil, S. P. Callahan, P. J. Crossno, J. Freire, C. E. Scheidegger, C. T. Silva, and H. T. Vo. Vistrails: Enabling interactive multiple-view visualizations. In VIS 05. IEEE Visualization, 2005., pp. 135–142. IEEE, 2005. 2.
[9]
A. F. Blackwell, C. Britton, A. Cox, T. R. Green, C. Gurr, G. Kadoda, M. S. Kutar, M. Loomes, C. L. Nehaniv, M. Petreet al., Cognitive dimensions of notations: Design tools for cognitive technology. In Cognitive Technology: Instruments of Mind: 4th International Conference, CT 2001 Coventry, UK, August 6–9, 2001 Proceedings, pp. 325–341. Springer, 2001. 7.
[10]
J. E. Block, S. Esmaeili, E. D. Ragan, J. R. Goodall, and G. D. Richardson. The Influence of Visual Provenance Representations on Strategies in a Collaborative Hand-off Data Analysis Scenario. IEEE Transactions on Visualization and Computer Graphics, 29(1): 1113–1123, 2023. 1,2.
[11]
Bootstrap. https://getbootstrap.com, 2024. 1,2.
[12]
R. E. Boyatzis. Transforming Qualitative Information: Thematic Analysis and Code Development. Sage Publications, 1998. 8.
[13]
S. P. Callahan, J. Freire, E. Santos, C. E. Scheidegger, C. T. Silva, and H. T. Vo. VisTrails: visualization meets data management. In Proceedings of the 2006 ACM SIGMOD international conference on Management of data, pp. 745–747, 2006. 1, 2.
[14]
D. Cernea, C. Weber, A. Ebert, and A. Kerren. Emotion scents: a method of representing user emotions on gui widgets. In Visualization and Data Analysis 2013, vol. 8654, pp. 168–181. SPIE, 2013. 3.
[15]
G. K. Chung. Guidelines for the design and implementation of game telemetry for serious games analytics. Serious games analytics: Methodologies for performance measurement, assessment, and improvement, pp. 59–79, 2015. 3 2.
[16]
Z. Cutler, K. Gadhave, and A. Lex. Trrack: A library for provenance-tracking in web-based visualizations. In 2020 IEEE Visualization Conference (VIS), pp. 116–120. IEEE, 2020., 2, 3, 7.
[17]
Y. Ding, J. Wilburn, H. Shrestha, A. Ndlovu, K. Gadhave, C. Nobre, A. Lex, and L. Harrison. reVISit: Supporting Scalable Evaluation of Interactive Visualizations. In 2023 IEEE Visualization and Visual Analytics (VIS), pp. 31–35, 2023. 2.
[18]
A. Drachen. Behavioral telemetry in games user research. Game user experience evaluation, pp. 135–165, 2015. 2.
[19]
A. Drachen, M. Seif El-Nasr, and A. Canossa. Game analytics-the basics. Game analytics: Maximizing the value of player data, pp. 13–40, 2013. 2.
[20]
Draw.io. https://www.draw.io. Accessed: March 31, 2024. 3.
[21]
C. Dunne, N. Henry Riche, B. Lee, R. Metoyer, and G. Robertson. Graph-Trail: Analyzing large multivariate, heterogeneous networks while sup-porting exploration history. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 1663–1672, 2012. 2.
[22]
K. Eckelt, K. Gadhave, A. Lex, and M. Streit. Loops: Leveraging Prove-nance and Visualization to Support Exploratory Data Analysis in Note-books. OSF Preprint, 2023.
[23]
W. Epperson, D. Jung-LinLee, L. Wang, K. Agarwal, A. G. Parameswaran, D. Moritz, and A. Perer. Leveraging analysis history for improved in situ visualization recommendation. In Computer Graphics Forum, vol. 41, pp. 145–155. Wiley Online Library, 2022. 2.
[24]
M. Feng, C. Deng, E. M. Peck, and L. Harrison. Hindsight: Encouraging exploration through direct encoding of personal interaction history. IEEE Transactions on Visualization and Computer Graphics, 23(1):351–360, 2017. 1,2.
[25]
FullStory. https://www.fullstory.com. Accessed: June 15, 2024. 2.
[26]
A. R. Gagné, M. S. El-Nasr, and C. D. Shaw. A deeper look at the use of telemetry for analysis of player behavior in rts games. In International Conference on Entertainment Computing, pp. 247–257. Springer, 2011. 2.
[27]
Google Analytics. https://marketingplatform.google.com/about/analytics. Accessed: June 15,2024. 2.
[28]
Google Scholar. https://scholar.google.com, 2024. 10.
[29]
C. Gutwin. Traces: Visualizing the immediate past to support group interaction. In Graphics interface, pp. 43–50. Citeseer, 2002. 2.
[30]
J. Heer, M. Agrawala, and W. Willett. Generalized selection via interactive query relaxation. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 959–968, 2008. 1,7, 8.
[31]
J. Heer, J. Mackinlay, C. Stolte, and M. Agrawala. Graphical histories for visualization: Supporting analysis, communication, and evaluation. IEEE Transactions on Visualization and Computer Graphics, 14(6):1189–1196, 2008. 2.
[32]
J. Hill and C. Gutwin. Awareness support in a groupware widget toolkit. In Proceedings of the 2003 international ACM SIGGROUP conference on Supporting group work, pp. 258–267, 2003. 2.
[33]
W. C. Hill, J. D. Hollan, D. Wroblewski, and T. McCandless. Edit wear and read wear. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 3–9, 1992. 2.
[34]
Hotjar. https://www.hotjar.com. Accessed: June 15, 2024. 2.
[35]
L. Jacob, E. Clua, and D. de Oliveira. Oh Gosh!! Why is this game so hard? Identifying cycle patterns in 2D platform games using provenance data. Entertainment Computing, 19:65–81, 2017. 2.
[36]
jQuery UI. https://jqueryui.com, 2024. 1,2.
[37]
D. A. Keim. Information visualization and visual data mining. IEEE Transactions on Visualization and Computer Graphics, 8(1):1–8, 2002. 9.
[38]
T. C. Kohwalter, F. M. de Azeredo Figueira, E. A. de Lima Serdeiro, J. R. da Silva Junior, L. G. P. Murta, and E. W. G. Clua. Understanding game sessions through provenance. Entertainment Computing, 27:110–127, 2018. 2.
[39]
T. C. Kohwalter, L. G. Murta, and E. W. Clua. Provchastic: Understanding and predicting game events using provenance. In International Conference on Entertainment Computing, pp. 90–103. Springer, 2020. 2.
[40]
T. C. Kohwalter, L. G. P. Murta, and E. W. G. Clua. Capturing game telemetry with provenance. In 2017 16th Brazilian Symposium on Computer Games and Digital Entertainment (SBGames), pp. 66–75. IEEE, 2017. 2.
[41]
C.-U. Lim and D. F. Harrell. Toward telemetry-driven analytics for un-derstanding players and their avatars in videogames. In Proceedings of the 33rd Annual ACM Conference Extended Abstracts on Human Factors in Computing Systems, pp. 1175–1180, 2015. 2.
[42]
Z. Liu and J. Heer. The effects of interactive latency on exploratory visual analysis. IEEE Transactions on Visualization and Computer Graphics, 20(12):2122–2131, 2014. 2.
[43]
K. Madanagopal, E. D. Ragan, and P. Benjamin. Analytic provenance in practice: The role of provenance in real-world visualization and data analysis environments. IEEE Computer Graphics and Applications, 39(6):30–45.2019. 2.
[44]
Material-UI. https://material-ui.com, 2024. 1,2.
[45]
L. McInnes, J. Healy, and J. Melville. Umap: Uniform manifold ap-proximation and projection for dimension reduction. arXiv preprint arXiv:1802.03426, 2018. 8.
[46]
S. A. Melo, T. C. Kohwalter, E. Clua, A. Paes, and L. Murta. Player behavior profiling through provenance graphs and representation learning. In Proceedings of the 15th International Conference on the Foundations of Digital Games, pp. 1–11, 2020. 2.
[47]
G. A. Miller. The magical number seven, plus or minus two: Some limits on our capacity for processing information. Psychological review, 101(2):343,1994. 2.
[48]
Mixpanel. https://mixpanel.com. Accessed: June 15, 2024. 2.
[49]
Mouseflow. https://mouseflow.com. Accessed: June 15, 2024. 2.
[50]
A. Narechania, A. Coscia, E. Wall, and A. Endert. Lumos: Increasing Awareness of Analytic Behavior during Visual Data Analysis. IEEE Transactions on Visualization and Computer Graphics, 28(1):1009–1018, 2022. 1, 2, 9.
[51]
A. Narechania, A. Karduni, R. Wesslen, and E. Wall. vitaLITy: Promoting Serendipitous Discovery of Academic Literature with Transformers & Visual Analytics. IEEE Transactions on Visualization and Computer Graphics, 28(1):486–496, 2022. 10.
[52]
New Relic. https://newrelic.com. Accessed: June 15,2024. 2.
[53]
J. Nielsen and K. Pernice. Eyetracking web usability. New Riders, 2010. 2.
[54]
C. Nobre, D. Wootton, Z. Cutler, L. Harrison, H. Pfister, and A. Lex. reVISit: Looking under the hood of interactive visualization studies. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, pp. 1–13, 2021. 2.
[55]
C. North, R. Chang, A. Endert, W. Dou, R. May, B. Pike, and G. Fink. Analytic provenance: process+ interaction+ insight. In CHI’ 11 Extended Abstracts on Human Factors in Computing Systems, pp. 33–36. 2011. 1,2.
[56]
M. Okoe and R. Jianu. Graphunit: Evaluating interactive graph visual-izations using crowdsourcing. In Computer Graphics Forum, vol. 34, pp. 451–460. Wiley Online Library, 2015. 1. 2.
[57]
J. R. Paden, A. Narechania, and A. Endert. BiasBuzz: Combining Visual Guidance with Haptic Feedback to Increase Awareness of Analytic Behavior during Visual Data Analysis. In Extended Abstracts of the CHI Conference on Human Factors in Computing Systems, pp. 1–7, 2024. 1.
[58]
Primeng https://www.primefaces.org/primeng, 2024. 1, 2.
[59]
E. D. Ragan, A. Endert, J. Sanyal, and J. Chen. Characterizing provenance in visualization and data analysis: an organizational framework of provenance types and purposes. IEEE Transactions on Visualization and Computer Graphics, 22(1):31–40, 2016.,2.
[60]
React. https://reactjs.org, Accessed:March 31, 2024. 4.
[61]
React Bootstrap. https://react-bootstrap.github.io, 2024. 1,2.
[62]
R. C. Roberts, R. S. Laramee, G. A. Smith, P. Brookes, and T. D'Cruze. Smart brushing for parallel coordinates. IEEE Transactions on Visual-ization and Computer Graphics, 25(3):1575–1590, 2019. 9.
[63]
A. Sarvghad and M. Tory. Exploiting analysis history to support col-laborative data analysis. In Proceedings of the 41st Graphics Interface Conference,pp. 123–130, 2015. 2.
[64]
A. Satyanarayan, D. Moritz, K. Wongsuphasawat, and J. Heer. Vega-lite: A grammar of interactive graphics. IEEE Transactions on Visualization and Computer Graphics, 23(1):341–350, 2017. 6.
[65]
Serebii.net. http://serebii.net. Accessed: March 31,2024.8.
[66]
B. Shneiderman. Dynamic queries for visual information seeking. IEEE software, 11(6):70–77, 1994. 7,8.
[67]
B. Shneiderman. The eyes have it: A task by data type taxonomy for information visualizations. In The craft of information visualization, pp. 364–371. Elsevier. 2003. 3.
[68]
C. T. Silva, E. Anderson, E. Santos, and J. Freire. Using vistrails and provenance for teaching scientific visualization. In Computer Graphics Forum, vol. 30, pp. 75–84. Wiley Online Library, 2011. 2.
[69]
A. Skopik and C. Gutwin. Improving revisitation in fisheye views with visit wear. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 771–780, 2005. 2.
[70]
F. Sperrle, A. Jeitler, J. Bernard, D. Keim, and M. El-Assady, Co-adaptive visual data analysis and guidance processes. Computers & Graphics, 100:93–105, 2021. 9.
[71]
A. Strauss and J. Corbin. Basics of Qualitative Research: Techniques and Procedures for Developing Grounded Theory. Sage Publications, 1998. 8.
[72]
SvelteKit UI. https://kit.svelte.dev, 2024. 1, 2.
[73]
P. Vaithilingam, E. L. Glassman, J. P. Inala, and C. Wang. DynaVis: Dynamically Synthesized UI Widgets for Visualization Editing. In Proceedings of the CHI Conference on Human Factors in Computing Systems, CHI '24, article no. 985, 17 pages. Association for Computing Machinery, New York. NY. USA. 2024. 1, 3.
[74]
Vue.js, https://vuejs.org. Accessed: March 31, 2024. 4.
[75]
Vuetify. https://vuetifyjs.com, 2024. 1, 2.
[76]
E. Wall, A. Narechania, A. Coscia, J. Paden, and A. Endert. Left, Right, and Gender: Exploring Interaction Traces to Mitigate Human Biases. IEEE Transactions on Visualization and Computer Graphics, 28(1):966–975, 2022. 1, 2.
[77]
A. Wattenberger. Footsteps for VS Code. https://marketplace.visualstudio.com/items?itemName=Wattenberger.footsteps, 2021. 2.
[78]
W. Willett, J. Heer, and M. Agrawala. Scented Widgets: Improving navigation cues with embedded visualizations. IEEE Transactions on Visualization and Computer Graphics, 13(6):1129–1136, 2007. 1,2,3,4,6,7.
[79]
C. Williamson and B. Shneiderman. The Dynamic HomeFinder: Evaluating dynamic queries in a real-estate information exploration system. In Proceedings of the 15th annual international ACM SIGIR conference on Research and development in information retrieval, pp. 338–346, 1992.,7.
Index Terms
- ProvenanceWidgets: A Library of UI Control Elements to Track and Dynamically Overlay Analytic Provenance
Index terms have been assigned to the content through auto-classification.
Recommendations
UI Fin: a process-oriented interface design tool
IUI '09: Proceedings of the 14th international conference on Intelligent user interfacesEven though over the years a multitude of user interface design tools have been created, designers in practice find themselves limited to a small set of realistic options. These options include interface builders that are attached to development ...
UI X-Ray: Interactive Mobile UI Testing Based on Computer Vision
IUI '17: Proceedings of the 22nd International Conference on Intelligent User InterfacesUser Interface/eXperience (UI/UX) significantly affects the lifetime of any software program, particularly mobile apps. A bad UX can undermine the success of a mobile app even if that app enables sophisticated capabilities. A good UX, however, needs to ...
Comments
Please enable JavaScript to view thecomments powered by Disqus.Information & Contributors
Information
Published In
1077-2626 © 2024 IEEE. Personal use is permitted, but republication/redistribution requires IEEE permission. See https://www.ieee.org/publications/rights/index.html for more information.
Publisher
IEEE Educational Activities Department
United States
Publication History
Published: 09 September 2024
Qualifiers
- Research-article
Contributors
Other Metrics
Bibliometrics & Citations
Bibliometrics
Article Metrics
- 0Total Citations
- 0Total Downloads
- Downloads (Last 12 months)0
- Downloads (Last 6 weeks)0
Reflects downloads up to 11 Dec 2024
Other Metrics
Citations
View Options
View options
Login options
Check if you have access through your login credentials or your institution to get full access on this article.
Sign in