d tour baskar-rethinasabapathi_presenter
Post on 11-Jul-2015
208 Views
Preview:
TRANSCRIPT
d.tour: Stylebased Exploration ofDesign Example Galleries
Baskar Rethina-saba-pathi
Problem at hand
Beginning a design work Design conceptualization is usually abstract
Need example designs to adapt / refer / copy
Existing methods
Keyword-only web search Difficult to articulate exact keywords
Results based on content, not style
Search through template designs Difficult to measure the usability
Prior work
Rough layout Sketch
Designers don’t have concrete ideas to start with
Cannot explore non-layout dimensions
Comprehensive design gallery
Limited only to browsing ? search, recommendation, filtering, exploration
Answer is d-tour
https://www.youtube.com/watch?v=g4ggoccLOyI
d-tour
What is it ?
an exploration tool for web designs
search by example design or keyword + various parameters
from a curated database of webpages
Key aspect
Matches the stylistic similarity
Feature Selection
Which feature Based on discussions with designers and from design literature
How
Global features directlyfrom DOM tree
Bento page Segmentationfor local features
Feature mapping
Bricolage Algorithm ( other paper)
Map DOM trees of source and target pages
Define ‘Stylistic Distance’ as cost
Build a ‘Design Vector’ of costs
Alternative approach?
Why not treat entire webpage as one image?Vision based approach?
Example: Google Image Search
CBIR techniques
Arguments
CBIR techniques more suited for natural images Scene recognition
Object recognition
Difficult to capture style and structure Needs manual annotation again
Critique on Query Processing Traditional Vector space model
Assumes equal weights for all features (?) If I query “blue + boxed”, who gets more importance – color or structure?
Features treated orthogonal No check for interdependence “Clumsy” can mean scattered text as well as non- agreeable colors
Use of space + Use of color
Text/Keyword Search
TF-IDF model - Uses Document’s text content
Assumes query and document content to be same I say “grey”, but what I really mean is “neutral”
Activity
Describe the design aspects of the websiteIn terms of style tags . E.g – large font, colorful etc.
Exchange your style tags (not the website)
Find the site matching the style tags (or a similar looking site)
Style Tags used in d-tour
Evaluation of d-tour
40 Participants – 20 Univ Studs + 20 Mturk Workers
Task Give example websites for a ‘School Science Education Program’
Randomly assigned either to use Web search or d tour
Write Why you chose this?
Critique on Evaluation method
d tour users Feedback was generally positive with a few suggestions
Shown a tutorial of how to use d-tour Probably used the same style tags to search
Results are from a collection of best examples (ilovetypography.com, sixrevisions.com, and the Alexa Top100 )
Style biasing relevance ?
Web search users restricted to topic based search
Can attach an image + keyword in Google Image Search Do thumbnails better describe the webpage?
No School Students reviewed the results
Discussion
1. Building effective databaseCrowd inputs help, but need decent database to attract crowd
2. Taste for designs – User specific?A good design to me is not even a design to youTrusting Ranking methods
3. Machine based approachNeed some image processing/machine learning to refine the process?
4. Extensive DOM dependency
top related