Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S., Klemmer, S.R. (CHI 2011) Stanford University HCI Group, Dept of Comupter Science - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S., Klemmer, S.R. (CHI 2011) Stanford University HCI Group, Dept of Comupter Science

Description:

Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S., Klemmer, S.R. (CHI 2011) Stanford University HCI Group, Dept of Comupter Science – PowerPoint PPT presentation

Number of Views:93
Avg rating:3.0/5.0
Slides: 22
Provided by: Stephen1000
Learn more at: http://www.ccs.neu.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S., Klemmer, S.R. (CHI 2011) Stanford University HCI Group, Dept of Comupter Science


1
Bricolage Example-Based Retargeting for Web
Design Kumar, R.,Talton, J.O., Ahmad, S.,
Klemmer, S.R. (CHI 2011) Stanford University HCI
Group, Dept of Comupter Science
  • Stephen Flaherty
  • PhD student, Personal Health Informatics
  • CCIS-Bouve College of Health Sciences
  • Northeastern University

2
Take away
  • It is possible to create an automated process for
    mapping content and layout between web page
    designs.
  • Can be used as a design aid to rapidly map among
    many different styles to aid in the development
    process.
  • Human matching of content and layout is still
    superior to automated system.

3
Basic Paper Recap
  • Content on the Internet is exploding rapidly
    more than 1 trillion unique URLs indexed by
    Google in 2008.
  • Impossible to manually sample anything beyond a
    small subset of possible designs.
  • Can an algorithm be developed to allow developers
    to utilize potentially any website as a template?

4
Paper Recap continued
  • Typical retargeting strategies only work with
    highly structured environments.
  • Hypothesis a more general retargeting scheme
    could be created by training a machine learning
    algorithm on a set of human generated webpage
    mappings.

5
Study design
  • Goal compare results of Bricolage algorithm with
    human mappings.
  • 39 participants recruited for online study.
  • Online repository of 50 popular websites created.
  • Authors selected focus set of 8 page pairs

6
Methods
  • Each participant asked to map areas from one
    page to another in the focus set of 8 page pairs.
  • Also map pages from focus set to randomly
    selected pages from remainder of selected
    websites.
  • Provide comments on their mapping rationale.

7
Methods
  • Analysis of human mappings identified patterns
  • Semantic
  • Positional
  • Structural
  • Visual
  • Hierarchical
  • Bricolage algorithm to incorporate these patterns
    using machine learning.
  • Image source Wan, Yang Xiao (2008),
    http//www.sciencedirect.com/science/article/pii/S
    0306457307001562

8
Algorithm-page segmentation
  • Pages are classified by Document Object Model
    (DOM)tree.
  • lthtmlgt
  • ltheadgt
  • ltbodygt
  • .
  • And by hierarchical structure
  • Ancestors
  • Children

9
Algorithm-Now the fun begins!
  • Lots of advanced set theory to show why we should
    care about
  • Total edge mapping cost
  • Exact edge cost
  • Bounding edge cost
  • Approximating the optimal mapping
  • Many assumptions and adjustments to make all
    the math work (as far as I can tell).

10
Algorithm- say what?
  • Optimal mapping approximation uses a
    Boltzmann-like objective function.
  • Ludwig Boltzmann 1844-1905
  • Austrian physicist developed
  • statistical mechanics to explain
  • how the properties of atoms
  • determine the visible properties of matter.
  • ( source Wikipedia.org)

11
Content Transfer
  • Cost model fed to matching algorithm to predict
    mappings between pages.
  • Use these mapping to move content from nodes in
    one design to nodes in another.
  • HTML of page reprocessed into inline CSS and
    embedded URLs converted

12
Results
  • Online mapping showed consistency of 78 for
    study participants.
  • Bricolage demonstrated 69 consistency.
  • Algorithm mappings overlap 78 with nearest human
    neighbor.
  • 88 of Bricolage edge mappings appear in some
    human mapping.

13
Results
  • Content transfer is performed based on mapping
    models.
  • Works well for many pages.
  • However, advanced web design techniques employing
    CSS, Flash, Silverlight, etc., may not render
    properly after transfer.
  • Embedded scripts do not work after transfer.

14
Why we should care-really!
  • The algorithm can be used to quickly transfer
    content between multiple designs in rapid
    prototyping.
  • Easily retarget designs to mobile layouts
  • Its fast-approximately 1 second for mappings.
  • Allow exploration of diverse designs

15
Limitations
  • Authors note that the Web is diverse and there
    are countless design ideas out there to be
    exploredyet create an arbitrary structured
    mapping system which reduces that space.
  • Human mapping outperforms algorithm.

16
Limitations
  • More advanced design ideas cause problems for the
    algorithm
  • Many assumptions and arbitrary rules to make the
    algorithm work.

17
Limitations
  • Not clear how matches are found when using the
    algorithm in practice-is the whole web searched
    for matches or is a chosen subset used?
  • Authors note refinement needed on performance and
    handling of advanced features.

18
Whats missing
  • A real-world test with users trying to come up
    with alternate designs for web pages.
  • User feedback on aesthetics of designs chosen by
    algorithm-
  • Do they like the pages selected?
  • Would they have picked something similar?
  • Was there diversity?
  • Did they find something novel?

19
3-4 minute demo
  • Rapid web prototyping software demo.
  • Looks to be useful for developing mobile sites
    from existing content.
  • http//www.youtube.com/watch?vpei8jLTvLQ4

20
Take away
  • Automated process can be an aid to prototyping
    and development.
  • Comes with restrictions.
  • Advanced web design not supported well.
  • Human mapping outperforms algorithm

21
Questions
  • Does the artifice of automating the design
    process take the creativity out?
  • How diverse can the options shown to the user be
    if there are so many rules?
About PowerShow.com