Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts
1 like805 views
The document presents 'Layout as a Service' (Laas), a platform designed to dynamically optimize web layouts without the need for hand-coded rules or templates. It employs combinatorial optimization and an end-to-end pipeline to adapt web designs according to user interactions and specified design objectives like selection time and visual saliency. Laas aims to enhance user experience by generating personalized layouts through a mixed integer linear programming model.
Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts
- 1. www.markkulaine.com/laas/ Layout as a Service A Service Platform for Self-Optimizing Web Layouts Markku Laine, Ai Nakajima, Niraj Dayama, Antti Oulasvirta Aalto University, Finland LaaS original web layout optimized web layout
- 2. designing a web layout is laborious and challenging
- 3. given user interface elements can be laid out in numerous different ways vv v design 1 design 2 design 3
- 4. v user 1 user 2 user 3 v v one design does not fit all due to different user interests
- 5. v user 1 user 2 user 3 v v device-specific adaptation rules must be added, often by hand </> </> </>
- 6. Related Work Familiariser Todi et al. (TiiS ’19) AERO Vernica and Venkata (DocEng ’15) GRIDS Dayama et al. (CHI ’20) examples of related research on web personalization and layout generation
- 7. ?How to adapt full web layouts to individuals without predefined rules or templates?
- 8. Layout as a Service A Service Platform for Self-Optimizing Web Layouts
- 9. • Adapts the full layout of a web page • No hand-coded rules or templates are needed • Uses combinatorial optimization to generate web layouts for stated design objectives: ✓ Selection time ✓ Visual saliency
- 10. How does it work?
- 11. Layout as a Service end-to-end pipeline and core components
- 12. Layout as a Service end-to-end pipeline and core components
- 13. • Parses the web page structure and styles • Detects and labels key elements • Precomputes permissible element shapes • Done only once per-user web layout Layout parser LAYOUT PARSER JSON ORIGINAL layout ORIGINAL web page HTML + CSS ORIGINAL web page (hidden) (shown)
- 15. Layout as a Service end-to-end pipeline and core components
- 16. Layout as a Service end-to-end pipeline and core components
- 17. • Captures user interactions like clicks and page views on a web page • Extendable architecture Event logger EVENT LOGGER JSON event web page
- 18. Layout as a Service end-to-end pipeline and core components
- 19. Layout as a Service end-to-end pipeline and core components
- 20. • Specifies various design objectives and constraints on a web layout to be generated • Computes per-element importance values based on collected user behavior data and settings Design task generator DESIGN TASK GENERATOR JSON design task JSON JSON layout events JSON settings
- 22. Layout as a Service end-to-end pipeline and core components
- 23. Layout as a Service end-to-end pipeline and core components
- 24. Layout generator LAYOUT GENERATOR JSON OPTIMIZED layout • Based on a Mixed Integer Linear Programming (MILP) model • Ensures well-formed layouts • Optimizes for user-stated design objectives JSON JSON design task layout
- 25. Well-formed layouts non-overlapping elements width & height constraints element size validity non-overflowing grid element position validity layout sanctity (phase 1) x & y constraints
- 26. well-aligned layouts layout alignment (phase 2) Well-formed layouts
- 27. User-stated design objectives original web layout functional layout (phase 3) target selection time target optimize for visual saliency target both target
- 28. Layout as a Service end-to-end pipeline and core components
- 29. Layout as a Service end-to-end pipeline and core components
- 30. • Adapts the web page according to given optimized layout • Repositions and resizes elements without changing the original tree structure Layout adapter LAYOUT ADAPTER JSON OPTIMIZED layout OPTIMIZED web page HTML + CSS OPTIMIZED web page (hidden) (shown)
- 32. Demo & Results example app: WebNews
- 33. ORIGINAL LAYOUT
- 34. OPTIMIZED LAYOUT
- 35. original web layout Example results selection time visual saliency both optimization results
- 36. Example results original web layout optimization results complex scenario mobile screen continued… continued…
- 37. • Highly dynamic web applications • Lacks predictive models of user interests • Holistic system evaluation Limitations & Future work
- 38. Contributions toward objective-level web layout personalization
- 39. Contributions LaaS service architecture data abstractions JSON design task JSON web layout MILP model LAYOUT GENERATOR
- 40. www.markkulaine.com/laas/ Layout as a Service A Service Platform for Self-Optimizing Web Layouts Markku Laine, Ai Nakajima, Niraj Dayama, Antti Oulasvirta Aalto University, Finland LaaS original web layout optimized web layout