Paper Presentation - College of Computer and Information Science

Download Report

Transcript Paper Presentation - College of Computer and Information Science 

Computer/Human Interaction
Spring 2013
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
Northeastern University
1
Computer/Human Interaction
Spring 2013
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.
Northeastern University
2
Computer/Human Interaction
Spring 2013
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?
Northeastern University
3
Computer/Human Interaction
Spring 2013
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.
Northeastern University
4
Computer/Human Interaction
Spring 2013
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
Northeastern University
5
Computer/Human Interaction
Spring 2013
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.
Northeastern University
6
Computer/Human Interaction
Spring 2013
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
Northeastern University
7
Computer/Human Interaction
Spring 2013
Algorithm-page segmentation
• Pages are classified by Document Object
Model (DOM)tree.
<html>
<head>
<body>
….
• And by hierarchical structure
– Ancestors
– Children
Northeastern University
8
Computer/Human Interaction
Spring 2013
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).
Northeastern University
9
Computer/Human Interaction
Spring 2013
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)
Northeastern University
10
Computer/Human Interaction
Spring 2013
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
Northeastern University
11
Computer/Human Interaction
Spring 2013
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.
Northeastern University
12
Computer/Human Interaction
Spring 2013
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.
Northeastern University
13
Computer/Human Interaction
Spring 2013
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*
Northeastern University
14
Computer/Human Interaction
Spring 2013
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.
Northeastern University
15
Computer/Human Interaction
Spring 2013
Limitations
• More advanced design ideas cause
problems for the algorithm
• Many assumptions and arbitrary rules to
make the algorithm work.
Northeastern University
16
Computer/Human Interaction
Spring 2013
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.
Northeastern University
17
Computer/Human Interaction
Spring 2013
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?
Northeastern University
18
Computer/Human Interaction
Spring 2013
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=pei8jL
TvLQ4
Northeastern University
19
Computer/Human Interaction
Spring 2013
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
Northeastern University
20
Computer/Human Interaction
Spring 2013
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?
Northeastern University
21