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