Responsive and Personalized Web Layouts with Integer Programming

Over the past decade, responsive web design (RWD) has become the de facto standard for adapting web pages to a wide range of devices used for browsing. While RWD has improved the usability of web pages, it is not without drawbacks and limitations: designers and developers must manually design the web layouts for multiple screen sizes and implement associated adaptation rules, and its "one responsive design fits all" approach lacks support for personalization. This paper presents a novel approach for automated generation of responsive and personalized web layouts. Given an existing web page design and preferences related to design objectives, our integer programming -based optimizer generates a consistent set of web designs. Where relevant data is available, these can be further automatically personalized for the user and browsing device. The paper includes presentation of techniques for runtime adaptation of the designs generated into a fully responsive grid layout for web browsing. Results from our ratings-based online studies with end users (N = 86) and designers (N = 64) show that the proposed approach can automatically create high-quality responsive web layouts for a variety of real-world websites.

[1]  Ai Nakajima,et al.  Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts , 2020, ICWE.

[2]  Yuanzhen Li,et al.  Feature congestion: a measure of display clutter , 2005, CHI.

[3]  Christof Lutteroth,et al.  Automatic Generation of User Interface Layouts for Alternative Screen Orientations , 2017, INTERACT.

[4]  Antti Oulasvirta,et al.  Individualising Graphical Layouts with Predictive Visual Search Models , 2019, ACM Trans. Interact. Intell. Syst..

[5]  Jeffrey Nichols,et al.  Rico: A Mobile App Dataset for Building Data-Driven Design Applications , 2017, UIST.

[6]  Peter Brusilovsky,et al.  From adaptive hypermedia to the adaptive web , 2002, CACM.

[7]  Alfred Kobsa,et al.  The Adaptive Web, Methods and Strategies of Web Personalization , 2007, The Adaptive Web.

[8]  A. Acquisti,et al.  Beyond the Turk: Alternative Platforms for Crowdsourcing Behavioral Research , 2016 .

[9]  Luca Chittaro,et al.  Tailoring Web Pages for Persuasion on Prevention Topics: Message Framing, Color Priming, and Gender , 2016, PERSUASIVE.

[10]  Anton Riabov,et al.  ModelingWeb Services using Semantic Graph Transformations to aid Automatic Composition , 2007, IEEE International Conference on Web Services (ICWS 2007).

[11]  Christof Lutteroth,et al.  Domain Specific High-Level Constraints for User Interface Layout , 2008, Constraints.

[12]  Antti Oulasvirta,et al.  It's time to rediscover HCI models , 2019, Interactions.

[13]  Mike Jones,et al.  Responsive Web Design , 2012 .

[14]  Alexandre N. Tuch,et al.  Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI , 2012, Comput. Hum. Behav..

[15]  Scott Klemmer,et al.  Towards responsive retargeting of existing websites , 2014, UIST'14 Adjunct.

[16]  Rares Vernica,et al.  AERO: An Extensible Framework for Adaptive Web Layout Synthesis , 2015, DocEng.

[17]  Moira C. Norrie,et al.  Responsive Design and Development: Methods, Technologies and Current Issues , 2013, ICWE.

[18]  Ranjitha Kumar,et al.  Bricolage: example-based retargeting for web design , 2011, CHI.

[19]  Peter Brusilovsky.  From Adaptive Hypermedia to the Adaptive Web , 2003, Mensch & Computer.

[20]  Krzysztof Z. Gajos,et al.  SUPPLE: automatically generating user interfaces , 2004, IUI '04.

[21]  Antti Oulasvirta,et al.  GRIDS: Interactive Layout Design with Integer Programming , 2020, CHI.

[22]  Antonella De Angeli,et al.  Guideline-Based Evaluation of Web Readability , 2019, CHI.

[23]  Krzysztof Z. Gajos,et al.  Preference elicitation for interface optimization , 2005, UIST.

[24]  Luis A. Leiva,et al.  Adapting User Interfaces with Model-based Reinforcement Learning , 2021, CHI.

[25]  Fabrice Matulic,et al.  Adaptive layout template for effective web content presentation in large-screen contexts , 2011, DocEng '11.

[26]  Jaideep Srivastava,et al.  Automatic personalization based on Web usage mining , 2000, CACM.

[27]  Paul De Bra,et al.  Challenges in User Modeling and Personalization , 2017, IEEE Intelligent Systems.

[28]  Robert Bringhurst,et al.  The Elements of Typographic Style , 1992 .

[29]  Jean Vanderdonckt,et al.  Model-Driven Engineering of User Interfaces: Promises, Successes, Failures, and Challenges , 2008 .

[30]  Morten Moshagen,et al.  Facets of visual aesthetics , 2010, Int. J. Hum. Comput. Stud..

[31]  Cristina Conati,et al.  Adaptive Content Presentation for the Web , 2007, The Adaptive Web.

[32]  Nishant Sinha,et al.  Responsive designs in a snap , 2015, ESEC/SIGSOFT FSE.

[33]  Jean Vanderdonckt,et al.  A Unifying Reference Framework for multi-target user interfaces , 2003, Interact. Comput..

[34]  Fabio Paternò,et al.  Automatic reverse engineering of interactive dynamic web applications to support adaptation across platforms , 2012, IUI '12.

[35]  Stefan Palan,et al.  Prolific.ac—A subject pool for online experiments , 2017 .

[36]  Christof Lutteroth,et al.  Constraint solving for beautiful user interfaces: how solving strategies support layout aesthetics , 2012, CHINZ '12.

[37]  Oren Etzioni,et al.  Adaptive Web Sites: Automatically Synthesizing Web Pages , 1998, AAAI/IAAI.

[38]  Antti Oulasvirta,et al.  Combinatorial Optimization of Graphical User Interface Designs , 2020, Proceedings of the IEEE.