research-article

Directing user attention via visual flow on web designs

Authors:

Rynson W. H. Lau,

Antoni B. ChanAuthors Info & Claims

ACM Transactions on Graphics (TOG), Volume 35, Issue 6

Article No.: 240, Pages 1 - 11

https://doi.org/10.1145/2980179.2982422

Published: 05 December 2016 Publication History

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.

Supplementary Material

ZIP File (a240-pang.zip)

Supplemental file.

Download
14.76 MB

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.

Digital Library

[6]

Cao, Y., Chan, A., and Lau, R. 2012. Automatic stylistic manga layout. In ACM SIGGRAPH Asia 2012.

Digital Library

[7]

Cao, Y., Lau, R., and Chan, A. 2014. Look over here: Attention-directing composition of manga elements. In ACM SIGGRAPH 2014.

Digital Library

[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.

[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.

[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.

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[21]

Merrell, P., Schkufza, E., and Koltun, V. 2010. Computer-generated residential building layouts. In ACM SIGGRAPH Asia 2010.

Digital Library

[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.

[23]

Najemnik, J., and Geisler, W. 2009. Simple summation rule for optimal fixation selection in visual search. Vision Research 49, 10, 1286--1294.

[24]

Nielsen, J., and Pernice, K. 2009. Eyetracking Web Usability. New Riders Publishing.

Digital Library

[25]

O'Donovan, P., Agarwala, A., and Hertzmann, A. 2011. Color compatibility from large datasets. In ACM SIGGRAPH 2011.

Digital Library

[26]

O'Donovan, P., Agarwala, A., and Hertzmann, A. 2014. Learning Layouts for Single-Page Graphic Designs. IEEE TVCG 20, 8, 1200--1213.

Digital Library

[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.

Digital Library

[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.

Digital Library

Cited By

Jackson JRitsos PButcher PRoberts J(2025)Path-Based Design Model for Constructing and Exploring Alternative VisualisationsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345632331:1(1158-1168)Online publication date: Jan-2025
https://doi.org/10.1109/TVCG.2024.3456323
Yao Y(2024)Coordination analysis of layout and visual color difference in responsive web design based on PS softwareApplied Mathematics and Nonlinear Sciences10.2478/amns-2024-17499:1Online publication date: 9-Jul-2024
https://doi.org/10.2478/amns-2024-1749
Zhang YWu NLin CWetzstein GSun Q(2024)GazeFusion: Saliency-Guided Image GenerationACM Transactions on Applied Perception10.1145/369496921:4(1-19)Online publication date: 6-Sep-2024
https://dl.acm.org/doi/10.1145/3694969
Show More Cited By

Index Terms

Directing user attention via visual flow on web designs
1. Computing methodologies
  1. Computer graphics
    1. Graphics systems and interfaces
      1. Perception

Recommendations

The influence of internet experience on the judgment of mobile web design
HCI '18: Proceedings of the 32nd International BCS Human Computer Interaction Conference

Web design is a key factor in the success of e-commerce websites. Research has shown that it can be leveraged to achieve positive outcomes in online transaction and user behavior. However, there is limited knowledge on how internet experience influences ...
Study on personalised web design for user based on visual communication

Traditional web design has the problems of poor visual communication effect and high cost. This paper proposes a personalised web design method based on visual communication. The personalised web requirements of users are analysed, and the personalised ...
Do we need eye trackers to tell where people look?
CHI EA '06: CHI '06 Extended Abstracts on Human Factors in Computing Systems

We investigated the validity of two low-cost alternatives to state-of-the-art eye tracking technology: 1) prompting users to report from memory on their own eye movements, and 2) asking experienced web designers to predict the eye movements of a typical ...

Comments

Information & Contributors

Information

Published In

cover image ACM Transactions on Graphics

ACM Transactions on Graphics Volume 35, Issue 6

November 2016

1045 pages

ISSN:0730-0301

EISSN:1557-7368

DOI:10.1145/2980179

Issue’s Table of Contents

Copyright © 2016 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected]

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 05 December 2016

Published in TOG Volume 35, Issue 6

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Funding Sources

the Research Grants Council of the Hong Kong SAR, China

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

51
Total Citations
View Citations
1,610
Total Downloads

Downloads (Last 12 months)143
Downloads (Last 6 weeks)28

Reflects downloads up to 25 Dec 2024

Other Metrics

View Author Metrics

Citations

Cited By

Jackson JRitsos PButcher PRoberts J(2025)Path-Based Design Model for Constructing and Exploring Alternative VisualisationsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2024.345632331:1(1158-1168)Online publication date: Jan-2025
https://doi.org/10.1109/TVCG.2024.3456323
Yao Y(2024)Coordination analysis of layout and visual color difference in responsive web design based on PS softwareApplied Mathematics and Nonlinear Sciences10.2478/amns-2024-17499:1Online publication date: 9-Jul-2024
https://doi.org/10.2478/amns-2024-1749
Zhang YWu NLin CWetzstein GSun Q(2024)GazeFusion: Saliency-Guided Image GenerationACM Transactions on Applied Perception10.1145/369496921:4(1-19)Online publication date: 6-Sep-2024
https://dl.acm.org/doi/10.1145/3694969
Jiang YGuo ZRezazadegan Tavakoli HLeiva LOulasvirta A(2024)EyeFormer: Predicting Personalized Scanpaths with Transformer-Guided Reinforcement LearningProceedings of the 37th Annual ACM Symposium on User Interface Software and Technology10.1145/3654777.3676436(1-15)Online publication date: 13-Oct-2024
https://dl.acm.org/doi/10.1145/3654777.3676436
Li YChen JBai YCheng JLei JSerra ESpezzano F(2024)Design Element Aware Poster Layout GenerationProceedings of the 33rd ACM International Conference on Information and Knowledge Management10.1145/3627673.3679557(1296-1305)Online publication date: 21-Oct-2024
https://dl.acm.org/doi/10.1145/3627673.3679557
Wang YBâce MBulling A(2024)Scanpath Prediction on Information VisualisationsIEEE Transactions on Visualization and Computer Graphics10.1109/TVCG.2023.324229330:7(3902-3914)Online publication date: 1-Jul-2024
https://dl.acm.org/doi/10.1109/TVCG.2023.3242293
Hajj Chehade SSiby STroncoso C(2024)SINBAD: Saliency-informed detection of breakage caused by ad blocking2024 IEEE Symposium on Security and Privacy (SP)10.1109/SP54263.2024.00199(258-276)Online publication date: 19-May-2024
https://doi.org/10.1109/SP54263.2024.00199
Mazaheri AKamkar S(2024)Webpage Saliency Prediction Using a Single Layer Support Vector Regressor2024 10th International Conference on Artificial Intelligence and Robotics (QICAR)10.1109/QICAR61538.2024.10496639(80-83)Online publication date: 29-Feb-2024
https://doi.org/10.1109/QICAR61538.2024.10496639
Chen LJing QZhou YLi ZShi LSun L(2024)Element-conditioned GAN for graphic layout generationNeurocomputing10.1016/j.neucom.2024.127730591:COnline publication date: 28-Jul-2024
https://dl.acm.org/doi/10.1016/j.neucom.2024.127730
Qin YZhao NYang JPan SSheng BLau R(2024)UrbanEvolver: Function-Aware Urban Layout RegenerationInternational Journal of Computer Vision10.1007/s11263-024-02030-w132:9(3408-3427)Online publication date: 1-Sep-2024
https://dl.acm.org/doi/10.1007/s11263-024-02030-w
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Article

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Issue’s Table of Contents