A novel webpage layout aesthetic evaluation model for quantifying webpage layout design

Abstract It is widely accepted that webpage layout is important for website aesthetics. However, knowledge is limited about which kind of webpage layout is aesthetic. In this paper, we conduct a large-scale analysis of 13,017 real webpages with different aesthetic levels. The results demonstrate that there are significant differences between aesthetic webpages and non-aesthetic webpages in several aspects of layout design, such as the position of objects and the average number of objects. In order to identify whether the web layout is aesthetic, we propose a novel Webpage Layout Aesthetic Evaluation model (WLAE) based on an improved Adaboost algorithm to automatically predict the aesthetics of a webpage layout. Experimental results show that our WLAE model is significantly better than other existing methods. Based on the feature analysis of 13,017 real-world webpages and the contribution of each feature to webpage aesthetic prediction, we have summarized 4 webpage design principles for webpage designers. Besides, a large number of real webpages collected by our team can be used for further research on webpage layout aesthetic design and/or related research.

[1]  David Mease,et al.  Explaining the Success of AdaBoost and Random Forests as Interpolating Classifiers , 2015, J. Mach. Learn. Res..

[2]  Rafael Jaron,et al.  User Evaluation of Websites: From First Impression to Recommendation , 2014, Interact. Comput..

[3]  Ahamed AlTaboli,et al.  Investigating Effects of Screen Layout Elements on Interface and Screen Design Aesthetics , 2011, Adv. Hum. Comput. Interact..

[4]  Zhi-Hua Zhou,et al.  Ensemble Methods: Foundations and Algorithms , 2012 .

[5]  Alexandre N. Tuch,et al.  Is It Still Where I Expect It? - Users' Current Expectations of Interface Elements on the Most Frequent Types of Websites , 2016, Interact. Comput..

[6]  Mohsen Fayyaz,et al.  A novel approach for website aesthetic evaluation based on convolutional neural networks , 2016, 2016 Second International Conference on Web Research (ICWR).

[7]  Gitte Lindgaard,et al.  Attention web designers: You have 50 milliseconds to make a good first impression! , 2006, Behav. Inf. Technol..

[8]  Ole Winther,et al.  Bayesian Inference for Spatio-temporal Spike-and-Slab Priors , 2015, J. Mach. Learn. Res..

[9]  Paul van Schaik,et al.  The role of context in perceptions of the aesthetics of web pages over time , 2009, Int. J. Hum. Comput. Stud..

[10]  Guoqing Wu,et al.  Software Defect Prediction Based on Cost-Sensitive Dictionary Learning , 2019, Int. J. Softw. Eng. Knowl. Eng..

[11]  Dianne Cyr,et al.  Modeling Web Site Design Across Cultures: Relationships to Trust, Satisfaction, and E-Loyalty , 2008, J. Manag. Inf. Syst..

[12]  Stephen A. Brewster,et al.  Preference ranking of screen layout principles , 2010, BCS HCI.

[13]  Marti A. Hearst,et al.  Empirically validated web page design metrics , 2001, CHI.

[14]  Yunfei Chen,et al.  Evaluating the visual quality of web pages using a computational aesthetic approach , 2011, WSDM '11.

[15]  Kuo-Wei Hsu.  Heterogeneous AdaBoost with stochastic algorithm selection , 2017, IMCOM.

[16]  Katharina Reinecke,et al.  Quantifying visual preferences around the world , 2014, CHI.

[17]  Bo N. Schenkman,et al.  Aesthetics and preferences of web pages , 2000, Behav. Inf. Technol..

[18]  Mehryar Mohri,et al.  Deep Boosting , 2014, ICML.

[19]  David Chek Ling Ngo,et al.  Formalising guidelines for the design of screen layouts , 2000 .

[20]  Gitte Lindgaard,et al.  An exploration of relations between visual appeal, trustworthiness and perceived usability of homepages , 2011, TCHI.

[21]  Yili Liu,et al.  Effects of Symmetry and Number of Compositional Elements on Interface and Design Aesthetics , 2006, Int. J. Hum. Comput. Interact..

[22]  Katharina Reinecke,et al.  Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness , 2013, CHI.

[23]  Pheng-Ann Heng,et al.  Webthetics: Quantifying webpage aesthetics with deep learning , 2019, Int. J. Hum. Comput. Stud..

[24]  Sean Bechhofer,et al.  Visual complexity and aesthetic perception of web pages , 2008, SIGDOC '08.

[25]  N. Tractinsky,et al.  What is beautiful is usable , 2000, Interact. Comput..

[26]  Paul Hekkert,et al.  Unity in Variety in website aesthetics: A systematic inquiry , 2017, Int. J. Hum. Comput. Stud..

[27]  Noam Tractinsky,et al.  Evaluating the consistency of immediate aesthetic perceptions of web pages , 2006, Int. J. Hum. Comput. Stud..

[28]  Wen Chen,et al.  Understanding the Aesthetic Evolution of Websites: Towards a Notion of Design Periods , 2017, CHI.

[29]  Katharina Reinecke,et al.  A Case for Design Localization: Diversity of Website Aesthetics in 44 Countries , 2018, CHI.

[30]  David Chek Ling Ngo,et al.  Modelling interface aesthetics , 2003, Inf. Sci..

[31]  Alexandre N. Tuch,et al.  Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI , 2012, Comput. Hum. Behav..

[32]  Yuan Yan Tang,et al.  ISABoost: A weak classifier inner structure adjusting based AdaBoost algorithm - ISABoost based application in scene categorization , 2013, Neurocomputing.

[33]  Lars Kai Hansen,et al.  Neural Network Ensembles , 1990, IEEE Trans. Pattern Anal. Mach. Intell..

[34]  Ruijun Feng,et al.  A novel ensemble deep learning model with dynamic error correction and multi-objective ensemble pruning for time series forecasting , 2021, Inf. Sci..

[35]  Klaus Opwis,et al.  Aesthetics in Context - The Role of Aesthetics and Usage Mode for a Website's Success , 2018, Interact. Comput..

[36]  Hans van der Heijden,et al.  Factors influencing the usage of websites: the case of a generic portal in The Netherlands , 2003, Inf. Manag..

[37]  Mingzhe Liu,et al.  Fuzzy rough sets and fuzzy rough neural networks for feature selection: A review , 2021, Wiley Interdiscip. Rev. Data Min. Knowl. Discov..

[38]  Yoav Freund,et al.  A decision-theoretic generalization of on-line learning and an application to boosting , 1997, EuroCOLT.

[39]  Xu Yu,et al.  Ensemble learning based on approximate reducts and bootstrap sampling , 2021, Inf. Sci..

[40]  Ahamed AlTaboli,et al.  Objective and Subjective Measures of Visual Aesthetics of Website Interface Design: The Two Sides of the Coin , 2011, HCI.

[41]  Morten Moshagen,et al.  A blessing, not a curse: Experimental evidence for beneficial effects of visual aesthetics on performance , 2009, Ergonomics.

[42]  Ayhan Demiriz,et al.  Linear Programming Boosting via Column Generation , 2002, Machine Learning.

[43]  Kyaw Kyaw Htike,et al.  Efficient determination of the number of weak learners in AdaBoost , 2017, J. Exp. Theor. Artif. Intell..

[44]  R. Schapire.  The Strength of Weak Learnability , 1990, Machine Learning.

[45]  Gerrit Hirschfeld,et al.  High and low spatial frequencies in website evaluations , 2010, Ergonomics.

[46]  Xun Wang,et al.  Review on mining data from multiple data sources , 2018, Pattern Recognit. Lett..

[47]  Antonella De Angeli,et al.  Investigating attractiveness in web user interfaces , 2007, CHI.