Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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