Master seminar - 2019 Fall semester

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

Transcript

1. Research on Visualization Salient Region of Web Page 2019.12.16 Fukazawa Lab. M1 Yuya Inagaki
2. OUTLINE 03 METHOD 04 PLOBLEMS AND SOLUTIONS 01 INTRODUCTION 02 FEATURES OF METHOD 05 CONCLUSION 1 .M O DEL 2 .PRO CEDU RE 
3. 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 
4. 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 
5. 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 
6. 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 
7. 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
8. 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 
9. 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 >
10. 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
11. 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 
12. 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
13. 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 
14. 04 SOLUTIONS  • 30 subjects • 270 webpages (27 categories based on ikesai.com ) • 10seconds per page Investigate tendency caused by the page composition pattern
15. 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 
16. 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
17. [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 
18. 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
19. OUTLINE 01 INTRODUCTION 02 03 04 APPROACH EVALUATION CONCLUSION $ P O G  
20. 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
21. 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
22. 01 INTRODUCTION  Region selection interface   Element selection interface Button suggestions are displayed in a user-specific area Button suggestions related to user-selected elements
23.  Element selection interface Region selection interface 02 APPROACH Interface
24. 02 APPROACH 
25. 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.
26. 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
27. 02 APPROACH  Method Fig: Seed expansion method
28. 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!
29. 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.
30. 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 
31. 03 EVALUATION Fig: Button design comparison based on using the traditional tool, our tool and from the ground truth 
32. 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 
33. 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. 
34. • 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 
35. Thank you for listening!