The slides for the ICWE 2020 paper titled "Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts" authored by Markku Laine, Ai Nakajima, Niraj Dayama, and Antti Oulasvirta. In Proceedings of the 20th International Conference on Web Engineering (ICWE 2020). // Project page https://userinterfaces.aalto.fi/laas/ // Abstract To personalize a web page, case-specific rules or templates must be specified that define the visuospatial layout of elements as well as device-specific adaptation rules for an individual. This approach scales poorly. We present LaaS, a service platform for self-optimizing web layouts to improve their usability at individual, group, and population levels. No hand-coded rules or templates are needed, as LaaS uses combinatorial optimization to generate web layouts for stated design objectives. This allows personalization to be controlled via intuitive objectives that affect the full web layout. We present an extensible architecture and solutions for (1) layout generation using integer programming, (2) data abstractions to mediate between browsers and layout generators, and (3) page restructuring. Moreover, we show how LaaS can be easily deployed as part of existing web pages. Results demonstrate that our approach can produce usable personalized web layouts in diverse scenarios. // Keywords Self-adaptive web interfaces, Web-based interaction, Web personalization, Web layouts, Web service architectures

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)

14. Web layout (JSON)

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

21. Design task (JSON)

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)

31. Deployment
v
YOUR
WEBSITE
</>
one line
(script tag)
LAAS
CONTROL
PANEL

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