Directing User Attention via Visual Flow on Web Designs
Xufang Pang* Ying Cao* Rynson W.H. Lau Antoni B. Chan
(* Joint first authors)
City University of Hong Kong
ACM Trans. on Graphics (Proc. ACM SIGGRAPH Asia 2016)
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.
Paper
Xufang Pang, Ying Cao, Rynson W. H. Lau, and Antoni B. Chan. 2016. Directing user attention via visual flow on web designs. ACM Trans. Graph. 35, 6, Article 240 (November 2016), 11 pages.
[PDF (32M)] [SupplementalMaterial (8M)] [Video (19M)] [Slide (28M)] [Model (8M)] [Data (230M)]
Xufang Pang, Ying Cao, Rynson W. H. Lau, and Antoni B. Chan. 2016. Directing user attention via visual flow on web designs. ACM Trans. Graph. 35, 6, Article 240 (November 2016), 11 pages.
[PDF (32M)] [SupplementalMaterial (8M)] [Video (19M)] [Slide (28M)] [Model (8M)] [Data (230M)]
Bibtex
@article{Pang:2016,
author = {Pang, Xufang and Cao, Ying and Lau, Rynson W. H. and Chan, Antoni B.},
title = {Directing User Attention via Visual Flow on Web Designs},
journal = {ACM Trans. Graph.},
issue_date = {November 2016},
volume = {35},
number = {6},
month = nov,
year = {2016},
pages = {240:1--240:11},
numpages = {11},
}
@article{Pang:2016,
author = {Pang, Xufang and Cao, Ying and Lau, Rynson W. H. and Chan, Antoni B.},
title = {Directing User Attention via Visual Flow on Web Designs},
journal = {ACM Trans. Graph.},
issue_date = {November 2016},
volume = {35},
number = {6},
month = nov,
year = {2016},
pages = {240:1--240:11},
numpages = {11},
}