Responsive and Personalized Web Layouts with Integer Programming
0 likes834 views
This document proposes an approach called C-RWD to automate the generation of responsive and personalized web designs using computational methods like integer programming. It describes challenges in responsive web design like designing for multiple screen sizes. C-RWD collects user interaction data and optimization objectives to generate a consistent set of personalized web layouts for different breakpoints that are fully responsive. Two user studies found C-RWD designs were rated higher in quality than original or Masonry-based designs by both end users and designers.
![8
Layout as a Service (LaaS)
Our extensions
Layout Parser
Responsive shape sets
Event Logger
New events and user data
Design Task Generator
Responsive design tasks
Layout Optimizer
Web designs for given breakpoints
Layout Adapter
Fully responsive grid layout
Laine et al. [ICWE 2020]
Overview
A service platform that
enables objective-level
personalization of web layouts](https://image.slidesharecdn.com/eics2021-responsiveandpersonalizedweblayoutswithintegerprogramming-210610070122/85/Responsive-and-Personalized-Web-Layouts-with-Integer-Programming-8-320.jpg)
Responsive and Personalized Web Layouts with Integer Programming
- 1. Responsive and Personalized Web Layouts with Integer Programming Markku Laine, Yu Zhang, Simo Santala, Jussi P.P. Jokinen, Antti Oulasvirta June 9, 2021 EICS 2021
- 2. 2 “Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size.” — Wikipedia What is responsive web design?
- 3. 3 Challenges in responsive web design Design for multiple screen sizes Implement adaptation rules Decide optimal breakpoints Lack of personalization
- 4. ? How to automate the generation of designer-like responsive and personalized web designs? ? ? ? ? 4
- 5. Proposed approach 5 C-RWD (our system) Existing web design Responsive and personalized web design User interactions Optimization objectives and constraints
- 6. 6 Breakpoint web designs smaller larger Screen size Existing web design
- 7. 7 Personalized web designs less more Personalization Existing web design 1 1 2
- 8. 8 Layout as a Service (LaaS) Our extensions Layout Parser Responsive shape sets Event Logger New events and user data Design Task Generator Responsive design tasks Layout Optimizer Web designs for given breakpoints Layout Adapter Fully responsive grid layout Laine et al. [ICWE 2020] Overview A service platform that enables objective-level personalization of web layouts
- 9. 9 Shape set creation Simulated element width infeasible non-ideal ideal narrower wider For each key element
- 10. 10 Layout optimization General benefits of MILP Applicable to a wide range of problems Controllable design outcomes Works without any prior data Offers proofs for solution quality Good computation performance Mixed-Integer Linear Programming model Our optimization objectives Layout similarity Element order Consistency of layouts Layout aesthetics Non-overlapping Non-overflowing Perfectly packed Grid layout (Flexbox) Layout usability Visual saliency Selection time ← controllable ← controllable
- 11. 11 Optimization process 1. Reorder elements 2. Optimize for aesthetics 3. Optimize for usability 4. Optimize for aesthetics and usability New order: Header A2 A3 A1 A4 A5 Footer
- 12. Original web page Retargeted web page 12 Web page retargeting 1803 px 1366 px 12 columns 4 rows Retargeting process Layout conversion Positional layout → Grid layout Dynamic media queries Layout adaptation In real-time Navbar generation Fully responsive Similar style Image cropping Smart cropping Face detection
- 13. 13 Computational responsive web design C-RWD is a novel approach to automated generation, optimization, and personalization of responsive web designs using computational methods.
- 14. 14 Evaluation
- 15. 14 Study 1 Perceived quality by end users Study 2 Perceived quality by designers Evaluation
- 16. 15 Study design • Experiment: online survey • Participants: end users and designers • Task: rate the quality of web designs • Materials: four Bootstrap template based websites • Screen sizes: mobile, tablet, laptop, desktop • Layout-design methods: original, optimized (our approach), Masonry
- 17. 16 Materials
- 19. 18 Study 1 with end users
- 20. 19 86 participants Female 33 Male 53 Age 18–68 years (M = 27.7, SD = 10.4)
- 21. 20 Results Mean end user ratings M = -0.13 M = -0.13 M = -0.09 M = 0.81 M = 0.69 M = 0.69 M = 1.30 M = 1.19 M = 0.71 M = 1.38 M = 1.36 M = 0.59
- 23. 22 64 participants Age 18–58 years (M = 26.2, SD = 8.2) Female 10 Male 52 Other 2 Work experience 0–15 years (M = 2.4, SD = 2.8)
- 24. 23 Results Mean designer ratings M = 0.50 M = 0.41 M = 0.53 M = 1.06 M = 0.91 M = 0.89 M = 1.20 M = 1.18 M = 0.72 M = 1.31 M = 1.20 M = 0.43
- 25. 24 Contributions • A novel approach for automated generation of responsive and personalized web layouts with integer programming • A mixed-integer linear programming model for generating a consistent set of personalized web designs for given breakpoints • Web engineering techniques for collection optimization constraints and adapting the resulting designs at runtime to form a fully responsive grid layout • Results of two ratings-based online studies, with end users (N = 86) and designers (N = 64)
- 26. EICS 2021 25 markku.laine@aalto.fi userinterfaces.aalto.fi/c-rwd/ @mplaine Responsive and Personalized Web Layouts with Integer Programming Markku Laine, Yu Zhang, Simo Santala, Jussi P.P. Jokinen, Antti Oulasvirta