Computer/Human Interaction Spring 2013 Northeastern University 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
21
Embed
Computer/Human Interaction Spring 2013 Northeastern University1 Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S.,
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Computer/Human Interaction Spring 2013
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.
Computer/Human Interaction Spring 2013
Northeastern University 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?
Computer/Human Interaction Spring 2013
Northeastern University 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.
Computer/Human Interaction Spring 2013
Northeastern University 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
Computer/Human Interaction Spring 2013
Northeastern University 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.
• Bricolage algorithm to incorporate these patterns using machine learning.
• Image source: Wan, Yang & Xiao (2008), http://www.sciencedirect.com/science/article/pii/S0306457307001562
Computer/Human Interaction Spring 2013
Northeastern University 8
Algorithm-page segmentation• Pages are classified by Document Object
Model (DOM)tree.<html>
<head><body>
….
• And by hierarchical structure–Ancestors–Children
Computer/Human Interaction Spring 2013
Northeastern University 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).
Computer/Human Interaction Spring 2013
Northeastern University 10
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)
Computer/Human Interaction Spring 2013
Northeastern University 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
Computer/Human Interaction Spring 2013
Northeastern University 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.
Computer/Human Interaction Spring 2013
Northeastern University 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.
Computer/Human Interaction Spring 2013
Northeastern University 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• It’s fast-approximately 1 second for
mappings. • Allow exploration of diverse designs*
Computer/Human Interaction Spring 2013
Northeastern University 15
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.
Computer/Human Interaction Spring 2013
Northeastern University 16
Limitations• More advanced design ideas cause
problems for the algorithm• Many assumptions and arbitrary rules to
make the algorithm work.
Computer/Human Interaction Spring 2013
Northeastern University 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.
Computer/Human Interaction Spring 2013
Northeastern University 18
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?
Computer/Human Interaction Spring 2013
Northeastern University 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?
v=pei8jLTvLQ4
Computer/Human Interaction Spring 2013
Northeastern University 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
Computer/Human Interaction Spring 2013
Northeastern University 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?