Computer/Human Interaction Spring 2013 Northeastern University1 Bricolage: Example-Based Retargeting...

Computer/Human Interaction Spring 2013

Northeastern University 1

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

Stephen FlahertyPhD student, Personal Health InformaticsCCIS-Bouve College of Health SciencesNortheastern University



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.



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?



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.



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



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.



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/S0306457307001562



Algorithm-page segmentation• Pages are classified by Document Object

Model (DOM)tree.<html>

<head><body>

….

• And by hierarchical structure–Ancestors–Children



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).



Algorithm- say what?• Optimal mapping approximation uses a

“Boltzmann-like objective function.”

• Ludwig Boltzmann 1844-1905Austrian physicist developedstatistical mechanics to explainhow the properties of atomsdetermine the visible properties of matter. ( source: Wikipedia.org)



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



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.



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.



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• It’s fast-approximately 1 second for

mappings. • Allow exploration of diverse designs*



Limitations• Authors note that the Web is diverse

and there are countless design ideas out there to be explored…yet create an arbitrary structured mapping system which reduces that space.

• Human mapping outperforms algorithm.



Limitations• More advanced design ideas cause

problems for the algorithm• Many assumptions and arbitrary rules to

make the algorithm work.



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.



What’s 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?



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?

v=pei8jLTvLQ4



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



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?

Computer/Human Interaction Spring 2013 Northeastern University1 Bricolage: Example-Based Retargeting...

Documents

Transcript of Computer/Human Interaction Spring 2013 Northeastern University1 Bricolage: Example-Based Retargeting...