Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts

358 views

Published on

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

Published in: Science
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Layout as a Service (LaaS): A Service Platform for Self-Optimizing Web Layouts

  1. 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. 2. designing a web layout is laborious and challenging
  3. 3. given user interface elements can be laid out in numerous different ways vv v design 1 design 2 design 3
  4. 4. v user 1 user 2 user 3 v v one design does not fit all due to different user interests
  5. 5. v user 1 user 2 user 3 v v device-specific adaptation rules must be added, often by hand </> </> </>
  6. 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. 7. ?How to adapt full web layouts to individuals without predefined rules or templates?
  8. 8. Layout as a Service A Service Platform for Self-Optimizing Web Layouts
  9. 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. 10. How does it work?
  11. 11. Layout as a Service end-to-end pipeline and core components
  12. 12. Layout as a Service end-to-end pipeline and core components
  13. 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. 14. Web layout (JSON)
  15. 15. Layout as a Service end-to-end pipeline and core components
  16. 16. Layout as a Service end-to-end pipeline and core components
  17. 17. • Captures user interactions like clicks and page views on a web page • Extendable architecture Event logger EVENT LOGGER JSON event web page
  18. 18. Layout as a Service end-to-end pipeline and core components
  19. 19. Layout as a Service end-to-end pipeline and core components
  20. 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. 21. Design task (JSON)
  22. 22. Layout as a Service end-to-end pipeline and core components
  23. 23. Layout as a Service end-to-end pipeline and core components
  24. 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. 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. 26. well-aligned layouts layout alignment (phase 2) Well-formed layouts
  27. 27. User-stated design objectives original web layout functional layout (phase 3) target selection time target optimize for visual saliency target both target
  28. 28. Layout as a Service end-to-end pipeline and core components
  29. 29. Layout as a Service end-to-end pipeline and core components
  30. 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. 31. Deployment v YOUR WEBSITE </> one line (script tag) LAAS CONTROL PANEL
  32. 32. Demo & Results example app: WebNews
  33. 33. ORIGINAL LAYOUT
  34. 34. OPTIMIZED LAYOUT
  35. 35. original web layout Example results selection time visual saliency both optimization results
  36. 36. Example results original web layout optimization results complex scenario mobile screen continued… continued…
  37. 37. • Highly dynamic web applications • Lacks predictive models of user interests • Holistic system evaluation Limitations & Future work
  38. 38. Contributions toward objective-level web layout personalization
  39. 39. Contributions LaaS service architecture data abstractions JSON design task JSON web layout MILP model LAYOUT GENERATOR
  40. 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

×