“Directing user attention via visual flow on web designs” by Pang, Cao, Lau and Chan
Conference:
Type(s):
Title:
- Directing user attention via visual flow on web designs
Session/Category Title: Data Driven Modeling
Presenter(s)/Author(s):
Abstract:
We present a novel approach that allows web designers to easily direct user attention via visual flow on web designs. By collecting and analyzing users’ eye gaze data on real-world webpages under the task-driven condition, we build two user attention models that characterize user attention patterns between a pair of page components. These models enable a novel web design interaction for designers to easily create a visual flow to guide users’ eyes (i.e., direct user attention along a given path) through a web design with minimal effort. In particular, given an existing web design as well as a designer-specified path over a subset of page components, our approach automatically optimizes the web design so that the resulting design can direct users’ attention to move along the input path. We have tested our approach on various web designs of different categories. Results show that our approach can effectively guide user attention through the web design according to the designer’s high-level specification.
References:
1. Boccignone, G., and Ferraro, M. 2004. Modelling gaze shift as a constrained random walk. Physica A: Statistical Mechanics and its Applications 331, 12, 207–218.
2. Bradley, S., 2010. http://speckyboy.com/how-to-control-flow-within-your-web-designs/.
3. Bradley, S., 2013. http://vanseodesign.com/downloads/learn-design-fundamentals/.
4. Bradley, S., 2015. http://www.smashingmagazine.com/2015/04/design-principles-compositional-flow/.
5. Breiman, L. 2001. Random forests. Machine Learning 45, 1.
6. Cao, Y., Chan, A., and Lau, R. 2012. Automatic stylistic manga layout. In ACM SIGGRAPH Asia 2012.
7. Cao, Y., Lau, R., and Chan, A. 2014. Look over here: Attention-directing composition of manga elements. In ACM SIGGRAPH 2014.
8. Ellis, S., and Smith, J. 1985. Patterns of statistical dependency in visual scanning. In Eye Movements and Human Information Processing, 221–238.
9. Eraslan, S., Yesilada, Y., and Harper, S. 2015. Eye tracking scanpath analysis techniques on web pages: A survey, evaluation and comparison. Journal of Eye Movement Research 9, 1–19. Cross Ref
10. Eyequant, 2016. http://www.eyequant.com/.
11. Feng-GUI, 2016. https://feng-gui.com/.
12. Guy, T., 2011. http://uxmag.com/articles/visual-design-and-usability-yellow-brick-road.
13. Hastings, W. 1970. Monte Carlo sampling methods using Markov chains and their applications. Biometrika 57, 97–109. Cross Ref
14. Itti, L., and Koch, C. 2000. A saliency-based search mechanism for overt and covert shifts of visual attention. Vision Research 40, 1489–1506. Cross Ref
15. Jones, B., 2011. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design.
16. Judd, T., Ehinger, K., Durand, F., and Torralba, A. 2009. learning to predict where humans look. In ICCV 2009.
17. Kumar, R., Talton, J., Ahmad, S., and Klemmer, S. 2011. Bricolage: Example-based retargeting for web design. In ACM SIGCHI 2011.
18. Kumar, R., Satyanarayan, A., Torres, C., Lim, M., Ahmad, S., Klemmer, S., and Talton, J. 2013. Webzeitgeist: Design mining the web. In ACM SIGCHI 2013.
19. LeMeur, O., and Coutrot, A. 2016. Introducing context-dependent and spatially-variant viewing biases in saccadic models. Vision Research 121, 7284.
20. Liu, H., Xu, D., Huang, Q., Li, W., Xu, M., and Lin, S. 2013. Semantically-based human scanpath estimation with hmms. In CVPR, 3232–3239.
21. Merrell, P., Schkufza, E., and Koltun, V. 2010. Computer-generated residential building layouts. In ACM SIGGRAPH Asia 2010.
22. Metropolis, N., Rosenbluth, A., Rosenbluth, M., Teller, A., and Teller, E. 1953. Equation of state calculations by fast computing machines. Journal of Chemical Physics 21, 1087–1092. Cross Ref
23. Najemnik, J., and Geisler, W. 2009. Simple summation rule for optimal fixation selection in visual search. Vision Research 49, 10, 1286–1294. Cross Ref
24. Nielsen, J., and Pernice, K. 2009. Eyetracking Web Usability. New Riders Publishing.
25. O’Donovan, P., Agarwala, A., and Hertzmann, A. 2011. Color compatibility from large datasets. In ACM SIGGRAPH 2011.
26. O’Donovan, P., Agarwala, A., and Hertzmann, A. 2014. Learning Layouts for Single-Page Graphic Designs. IEEE TVCG 20, 8, 1200–1213.
27. Schtz, A., Braun, D., and Gegenfurtner, K. 2011. Eye movements and perception: A selective review. Journal of Vision 11, 1–30.
28. Shen, C., and Zhao, Q. 2014. Webpage saliency. In ECCV2014.
29. Wang, W., Chen, C., Wang, Y., Jiang, T., Fang, F., and Yao, Y. 2011. Simulating human saccadic scanpaths on natural images. In CVPR, 441–448.
30. Yu, L., Yeung, S., Tang, C., Terzopoulos, D., Chan, T., and Osher, S. 2011. Make it home: automatic optimization of furniture arrangement. In ACM SIGGRAPH 2011.
