D tour baskar-rethinasabapathi_presenter

  • View

  • Download

Embed Size (px)

Text of D tour baskar-rethinasabapathi_presenter

  • 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 dont 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


  • 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


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