ComputerHuman Interaction Spring 2013 Bricolage ExampleBased Retargeting for

  • Slides: 21
Download presentation
Computer/Human Interaction Spring 2013 Bricolage: Example-Based Retargeting for Web Design Kumar, R. , Talton,

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 Ph. D student, Personal Health Informatics CCIS-Bouve College of Health Sciences Northeastern University 1

Computer/Human Interaction Spring 2013 Take away • It is possible to create an automated

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

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

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

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

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

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/S 0306457307001562 Northeastern University 7

Computer/Human Interaction Spring 2013 Algorithm-page segmentation • Pages are classified by Document Object Model

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

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

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

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

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.

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

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

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

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

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

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.

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=pei 8 j. LTv. LQ 4 Northeastern University 19

Computer/Human Interaction Spring 2013 Take away • Automated process can be an aid to

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

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