Computer/Human Interaction Spring 2013 Northeastern University1 Bricolage: Example-Based Retargeting for Web Design Kumar, R.,Talton, J.O., Ahmad, S.,

Slides:



Advertisements
Similar presentations
Data Mining and the Web Susan Dumais Microsoft Research KDD97 Panel - Aug 17, 1997.
Advertisements

Web Mining.
Pseudo-Relevance Feedback For Multimedia Retrieval By Rong Yan, Alexander G. and Rong Jin Mwangi S. Kariuki
Improvements and extras Paul Thomas CSIRO. Overview of the lectures 1.Introduction to information retrieval (IR) 2.Ranked retrieval 3.Probabilistic retrieval.
KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
M2 – Explain the tools and techniques used in the creation of an interactive website. By Arturas Vitkovskij.
Introducing new web content management tools for Priority...
Mastering the Internet, XHTML, and JavaScript Chapter 7 Searching the Internet.
Visual Programming Via The Squeak Car Demo Dan Grossman University of Washington CS4HS July 11-13, 2008.
Usability 2004 J T Burns1 Usability & Usability Engineering.
1 Matching DOM Trees to Search Logs for Accurate Webpage Clustering Deepayan Chakrabarti Rupesh Mehta.
Dreamweaver 8 Concepts and Techniques Introduction Web Site Development and Macromedia Dreamweaver 8.
What is Web Design The term “web design” has come to encompass a number of disciplines, including: Visual (graphic) design User interface and experience.
WEB SCIENCE: SEARCHING THE WEB. Basic Terms Search engine Software that finds information on the Internet or World Wide Web Web crawler An automated program.
Accessible Word Document Training Microsoft Word 2010.
Creating an Online Portfolio Creating your Electronic Portfolio.
Web Design Process CMPT 281. Outline How do we know good sites from bad sites? Web design process Class design exercise.
How Search Engines Work General Search Strategies Dr. Dania Bilal IS 587 SIS Fall 2007.
What is a BLOG..?? What are the steps on Making a BLOG site.. ??
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
All About Creating a Website. How the SIR Websites are Built. SIR Branch 116 Phil Goff July 21, 2011.
Kansas State University Department of Computing and Information Sciences CIS 830: Advanced Topics in Artificial Intelligence From Data Mining To Knowledge.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
Adobe Dreamweaver CS5 Introduction Web Site Development and Adobe Dreamweaver CS5.
1 Designing Need-based Internet Web Sites in Counseling and Career Services James P. Sampson, Jr. Florida State University Copyright 2002 by James P. Sampson,
I Didn’t Know You Could Do That in Articulate Quizmaker! Debbie Richards Creative Interactive Ideas Samples and Resources:
Aardvark Anatomy of a Large-Scale Social Search Engine.
Chapter 7 Web Content Mining Xxxxxx. Introduction Web-content mining techniques are used to discover useful information from content on the web – textual.
Website Accessibility Testing. Why consider accessibility People with disabilities – Visual, Hearing, Physical, Cognitive (learning, reading, attention.
Neal Stublen Course Road Map  Create web page layouts using CSS  Manage CSS  Test website validity  Create navigation menus using.
MOOD FOOD. PROMOTIONAL WEBSITE Front end of a cross-module project between Advanced Rich Internet Applications and Advanced Client Side Scripting. Promotional.
1 A Graph-Theoretic Approach to Webpage Segmentation Deepayan Chakrabarti Ravi Kumar
Patterns, effective design patterns Describing patterns Types of patterns – Architecture, data, component, interface design, and webapp patterns – Creational,
Ontology-Driven Automatic Entity Disambiguation in Unstructured Text Jed Hassell.
윤언근 DataMining lab.  The Web has grown exponentially in size but this growth has not been isolated to good-quality pages.  spamming and.
INTRODUCTION TO HTML5 Semantic Layout in HTML5.  The new semantic layout in HTML5 refers to a new class of elements that is designed to help you understand.
Lesson 19: Site Development with FrontPage 2003 – Advanced Features.
Css. Definition Cascading style sheet (CSS)  It is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Presenter: Shanshan Lu 03/04/2010
The Anatomy of a Large-Scale Hyper textual Web Search Engine S. Brin, L. Page Presenter :- Abhishek Taneja.
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using.
Image Classification for Automatic Annotation
HTML 5 The Future of Web Development. What is HTML5? “HTML5 is a specification of how the web’s core language, HTML, should be formatted and utilized.
Today’s Lesson….. 1.Formative Assessment Given Back – Go through Answers. 2.Webpage Design.
Guided Practice Let’s Brainstorm an Idea. Step 1: Let’s relax and have some fun.
Markus Müller Software Engineering for Business Information Systems (sebis) Department of Informatics Technische Universität München, Germany.
By Ishaq Shinwari.  Designing a web site needs careful thinking and planning  The most important thing is to KNOW YOUR AUDIENCE  You Must Design website.
Learning Aim C.  Once the website is complete, you should test it using the test plan you created at the design stage.
- WE’LL LOOK AT THE POSITION PROPERTY AND HOW CSS RESOLVES CONFLICTS BETWEEN STYLING INSTRUCTIONS The position property; CSS specificity hierarchy.
Learning Aim B.  It is a good idea to think carefully about the design of a website before you try to implement it.
Understanding Web-Based Digital Media Production Methods, Software, and Hardware Objective
Web Design Terminology Unit 2 STEM. 1. Accessibility – a web page or site that address the users limitations or disabilities 2. Active server page (ASP)
STYLING WITH THEMES Active server pages (ASP.NET) 1 Chapter-5.
Using Web 2.0 to Increase Effectiveness of Staff Training Brian C. Gray Case Western Reserve University Kelvin Smith Library Head of Reference & Engineering.
Frompo is a Next Generation Curated Search Engine. Frompo has a community of users who come together and curate search results to help improve.
Searching the Web for academic information Ruth Stubbings.
Getting Started with HTML
Search Engine Optimization
Working with Cascading Style Sheets
Objective % Select and utilize tools to design and develop websites.
Web Site Development and Macromedia Dreamweaver 8
Warm Handshake with Websites, Servers and Web Servers:
Based on Menu Information
Programming by a Sample: Rapidly Creating Web Applications with d.mix
Objective % Select and utilize tools to design and develop websites.
Web Data Extraction Based on Partial Tree Alignment
Objective % Explain concepts used to create websites.
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

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

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.

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 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 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.

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

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.

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),

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

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).

Computer/Human Interaction Spring 2013 Northeastern University10 Algorithm- say what? Optimal mapping approximation uses a “Boltzmann-like objective function.” Ludwig Boltzmann Austrian physicist developed statistical mechanics to explain how the properties of atoms determine the visible properties of matter. ( source: Wikipedia.org)

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

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.

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.

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*

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.

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.

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.

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?

Computer/Human Interaction Spring 2013 Northeastern University minute demo Rapid web prototyping software demo. Looks to be useful for developing mobile sites from existing content. TvLQ4http:// TvLQ4

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

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?