Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Master seminar - 2019 Fall semester

Yuya Ina
December 16, 2019

Master seminar - 2019 Fall semester

[My theme] Research on Visualization Salient Region of Web Page
[Conference] ButtonTips: Designing Web Buttons with Suggestions

Yuya Ina

December 16, 2019
Tweet

More Decks by Yuya Ina

Other Decks in Research

Transcript

  1. OUTLINE 03 METHOD 04 PLOBLEMS AND SOLUTIONS 01 INTRODUCTION 02

    FEATURES OF METHOD 05 CONCLUSION 1 .M O DEL 2 .PRO CEDU RE 
  2. There are many web pages with good design but low

    usability Is not the intention of the designer exactly reflected? The place where the designer and the user are looking is shifted? Problem 01 INTRODUCTION It tends to lower the quality of service and users tend to leave the page Factor Solution To present a saliency map at the development stage that shows the ease of attracting person's gaze 
  3. 01 INTRODUCTION Saliency map Saliency map Screenshot The degree of

    gaze of each pixel estimated from the image to be analyzed and shown in the figure Bright area high saliency and high visibility Dark area low saliency and inconspicuous Saliency map Natural image 
  4. 01 INTRODUCTION Solution There are few web page specific saliency

    map generation models Existing saliency map model Just looking at the saliency map is difficult to recognize where the important areas are Generating element-by-element saliency maps using web page structure Improve to make it easy to recognize by visualizing important areas with high saliency 1 2 1 2 Web pages have elements that are different from natural images such as web page specific titles and images 
  5. 02 FEATURES OF METHOD Calculate saliency on an element- by-element

    basis to generate a web page-specific saliency region map Generate a summary map that combines high saliency critical areas into one image 1 2 Generation of salient region map Generation of summary map Accurately determine areas of high importance Example of salient region map Example of summary map It leads to shortening of time for page contents grasping Input: WASEDA university HP 
  6. METHOD 03 METHOD Generation of saliency map using model 1

    Tag analysis and position acquisition 2 Calculation of saliency considering weight 3 Visualization of salient region 4  Same as previously described
  7. Generation of saliency map using model 1 Free view Color

    Orientations Intensity Using the saliency map model for natural images by Itti-Koch et al. [2] Getting HTML and screenshot using Selenium WebDriver [1] . 1 Generate a saliency map from captured screenshot 2 03 PROCEDURE 
  8. Tag analysis and position acquisition 2 Tag element : Getting

    position and size of tag element using Selenium WebDriver 1 03 PROCEDURE  < d i v > < h 1 > < h 2 > < h 3 > < s p a n > < i m g >
  9. Calculation of saliency considering weight 3 Get the color average

    of the saliency map of each element area and make it a saliency level top-left bias center bias 1 Weighting of saliency by location information and element size 2 element size [3] Webpage saliency heatmap  03 PROCEDURE
  10. Visualization of salient region 4 Create a ranking of element

    saliency level 1 Create a Salient region map Fill element with lightness corresponding to saliency 2 Create a Summary map Tile 10 elements with a particularly high degree of saliency 3 03 PROCEDURE Test web page Salient region map Summary map 
  11. important 04 PLOBLEMS  No setting bias for weighting of

    saliency 1 Need to experiment with eye tracker 2 Cannot adapt to HTML tag standards 3 top-left bias center bias element size Procedure 03 expensive difficult Eye tracker < d i v > < h 1 > < h 2 > < h 3 > < s p a n > < i m g > < b > < s t r o n g > < a > < u l > < l i > Procedure 02
  12. screenshot Ground truth Saliency map (original) Salient region map (original)

    32px 64px Images with 64px or higher, which is the standard OS icon, display the saliency map as it is 
  13. 04 SOLUTIONS  • 30 subjects • 270 webpages (27

    categories based on ikesai.com ) • 10seconds per page Investigate tendency caused by the page composition pattern
  14. INPUT https://www.python.ambious/ Designer OUTPUT SYSTEM Elements that contain the most

    frequent words Element containing the second occurrence of a word Element containing the third occurrence of a word 04 SOLUTIONS 
  15. 05 CONCLUSION  Salient region map Summary map Future work

    • Make valid weighting to use the gaze dataset currently being collected • There was no reason to set the weight, and it was pointed out as a big problem of my research. Collect gaze data for as many web pages Gaze data set will be useful not only for my research, but also for researchers doing future related research
  16. [1] Selenium. Selenium webdriver. https://www.seleniumhq.org/projects/webdriver/. 2019/1/12. [2] Laurent Itti, Christof

    Koch, and Ernst Niebur. A model of saliency-based visual attention for rapid scene analysis. IEEE Transactions on pattern analysis and machine intelligence, Vol. 20, No. 11, pp. 1254-1259, 1998. [3] Chengyao Shen and Qi Zhao. Webpage saliency. In European conference on computer vision, pp. 33-46. Springer, 2014. Reference 
  17. ButtonTips: Designing Web Buttons with Suggestions Fukazawa Lab. M0 Yuya

    Inagaki D a w e i L i u , Y i n g C a o , R y n s o n W . H . L a u , A n t o n i B . C h a n I E E E I n t e r n a t i o n a l C o n f e r e n c e o n M u l t i m e d i a a n d E x p o 2 0 1 9 $ P O G  2019.12.16
  18. Buttons are fundamental to web design because they often represent

    CTAs that prompt visitors to perform certain actions Effective buttons are important to increase click-through and conversion rates However Creating an effective design is difficult Designer 01 INTRODUCTION  s i z e c o l o r position These tools do not provide suggestions
  19. There are two interfaces for button suggestion 01 INTRODUCTION 

    Propose a new interactive way to support the button design process by making button design suggestions In this research Region selection interface   Element selection interface How professional designers determine ? s i z e c o l o r position By learning regression models
  20. 01 INTRODUCTION  Region selection interface   Element selection

    interface Button suggestions are displayed in a user-specific area Button suggestions related to user-selected elements
  21. 02 APPROACH  Method Button presence prediction 1 Button layout

    suggestion 2 Button color selection 3 Predict button presence for a rough region Button is automatically placed and scaled Button color is automatically selected Leverage professional web design examples to train several machine learning models to perform these steps.
  22. 02 APPROACH  Method Button presence prediction 1 A rectangular

    area widely used in grid-based systems 1 Snapping to other elements which is easy to extract local context for button presence analysis 2 Before designing a button on a webpage, professional web designers often have a rough idea about where to place the button Prior to predicting button attributes, candidate regions that may contain buttons can be detected
  23. 02 APPROACH  Method Button layout suggestion 2 Width and

    Height Position Adjust the height of the button to the left input box (if it exists) 1 2 If there are buttons on the left and right, set same height Visual alignment is more important than accurate position!
  24. 02 APPROACH  Method Button color selection 3 O Donovan,

    P., Agarwala, A. and Hertzmann, A., Color compatibility from large datasets, in ACM TOG, 2011. Capability score Contrast score find the color that maximizes the score.
  25. 03 EVALUATION Quantitative Metrics Rating from Professional Web Designers s

    i z e c o l o r position Jaccard index Assess the quality of the buttons generated by participants using RMSE 12 novice users Traditional drug and drop interface Region selection interface Element selection interface Their system 32 webpages 21 professional web designers 
  26. 03 EVALUATION Fig: Button design comparison based on using the

    traditional tool, our tool and from the ground truth 
  27. 03 EVALUATION Fig: the rating from professional web designers Fig:

    the average time using each interfaces 3 times faster than traditional tools Reduce the gap with professionals 
  28. 03 EVALUATION Fig: Comparison of the traditional tool and their

    tool using different metrics Their tool enables users to design buttons similar to the professional ones than the traditional tool. 
  29. • This method automatically predicting button layout and selecting button

    colors • The goal is to make it easier for the general public to do web design by easily integrating into existing commercial web design tools. [Future work] • They would like to generate button styles using more complex CSS properties for the button layout prediction method. Allows users to easily design high-quality buttons 04 CONCLUSION