1. Computer/Human Interaction Spring 2013 Northeastern University1 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. Computer/Human Interaction Spring 2013 Northeastern University2 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. Computer/Human Interaction Spring 2013 Northeastern University3 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. Computer/Human Interaction Spring 2013 Northeastern University4 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. Computer/Human Interaction Spring 2013 Northeastern University5 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. Computer/Human Interaction Spring 2013 Northeastern University6 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. Computer/Human Interaction Spring 2013 Northeastern University7 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 http://www.sciencedirect.com/science/article/pii/S0306457307001562

8. Computer/Human Interaction Spring 2013 Northeastern University8 Algorithm-page segmentation Pages are classified by Document Object Model (DOM)tree. …. And by hierarchical structure –Ancestors –Children

9. Computer/Human Interaction Spring 2013 Northeastern University9 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. Computer/Human Interaction Spring 2013 Northeastern University10 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. Computer/Human Interaction Spring 2013 Northeastern University11 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. Computer/Human Interaction Spring 2013 Northeastern University12 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. Computer/Human Interaction Spring 2013 Northeastern University13 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. Computer/Human Interaction Spring 2013 Northeastern University14 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*

15. Computer/Human Interaction Spring 2013 Northeastern University15 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.

16. Computer/Human Interaction Spring 2013 Northeastern University16 Limitations More advanced design ideas cause problems for the algorithm Many assumptions and arbitrary rules to make the algorithm work.

17. Computer/Human Interaction Spring 2013 Northeastern University17 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. Computer/Human Interaction Spring 2013 Northeastern University18 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?

19. Computer/Human Interaction Spring 2013 Northeastern University19 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 TvLQ4http://www.youtube.com/watch?v=pei8jL TvLQ4

20. Computer/Human Interaction Spring 2013 Northeastern University20 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. Computer/Human Interaction Spring 2013 Northeastern University21 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?