A Quantitative Approach to Measure Webpage Aesthetics

A Quantitative Approach to Measure Webpage Aesthetics

Ranjan Maity (Indian Institute of Technology Guwahati, Guwahati, India) and Samit Bhattacharya (Indian Institute of Technology Guwahati, Guwahati, India)
Copyright: © 2020 |Pages: 16
DOI: 10.4018/IJTHI.2020040105
OnDemand PDF Download:
No Current Special Offers


Aesthetics measurement is important in determining and improving the usability of a webpage. Wireframe models, the collection of the rectangular objects, can approximate the size and positions of the different webpage elements. The positional geometry of these objects is primarily responsible for determining aesthetics as shown in studies. In this work, the authors propose a computational model for predicting webpage aesthetics based on the positional geometry features. In this study, the authors found that ten out of the thirteen reported features are statistically significant for webpage aesthetics. Using these ten features, the authors developed a computational model for webpage aesthetics prediction. The model works on the basis of support vector regression. The authors rated the wireframe models of 209 webpages by 150 participants. The average users' ratings and the ten significant features' values were used to train and test the aesthetics prediction model. Five-fold cross-validation technique shows the model can predict aesthetics with a Root Mean Square Error (RMSE) of only 0.42.
Article Preview


User interfaces (UI) design has become a vital topic of research due to the massive use of interfaces in the electronic devices like – desktop computers, mobiles, pads etc. Design of interfaces needs the knowledge of people: the way they see, understand and think (Galitz, 1997). Another important aspect of good design is the aesthetics of an interface (Ngo et al., 2003). According to the Oxford dictionary (1984), aesthetics is “concerned with beauty and art and the understanding of beautiful things.” An aesthetically pleasing interface can increase user efficiency and decrease perceived interface complexity which in turn, helps to improve usability, productivity, and acceptability (Tractinsky, 1997). It was reported every dollar invested in usability can return ten to one hundred dollars (IBM, 2001). Cope et al. (1995) found that one graphical window redesigned to be more efficient, can save up to $20,000 of a company during the first year of use. Kurosu et al. (1995) claimed that the usability of an interface is strongly affected by aesthetics. Hence, designing aesthetically pleasing interface is an important task.

The same philosophy is also applicable for webpage design. Webpage elements can be approximated as the contents of a rectangular webpage object (referred to simply “object” in subsequent discussion), as shown in Figure 1. Wireframe model is the representation of a webpage using these objects. A number of such objects, along with their geometric position in the layout may be perceived as complex (Figure 1) by the users (Galitz, 1997). The perceived webpage complexity has a strong relationship with aesthetics. Improvement of aesthetics can help in reducing the perceived complexity of a webpage. This, in turn, contributes to improving the usability and productivity of a webpage (Tractinsky, 2005; Tractinsky et al., 2005).

Design of an aesthetically pleasing webpage is related to the elements present therein. Tables, links and buttons which may be treated as text elements and icons which may be perceived as images, are also integral parts of a webpage apart from the three major components - text, image and video. Therefore, the role of the text features (such as font size, line height and colour contrast), image features (like colour contrast, hue and saturation) and video features (for instance symmetry, balance, motion path and object shape) may have an impact on aesthetics. Along with these, the geometric features of the objects are also important in determining the aesthetics of a webpage. These features include the sizes, positions, and organizations of the objects present in a layout (Ngo et al., 2003).

Figure 1.

A webpage composed of one image and five texts is shown in (a). The corresponding wire frame model is shown in (b), where Object 1 denotes the image component and the five text elements are represented by the Object 2- 6, respectively.


In general, webpage aesthetics is considered to be subjective, because of the variations in the users’ age, geographical position, and culture. As a result, aesthetics measurement becomes a challenging task for the webpage designers. However, aesthetics can be evaluated by means of a computational model (using quantitative measures). These kinds of models can automatically evaluate the aesthetics of a whole webpage as well as its parts (Bansal et al., 2013; Lai et al., 2010; Shyam et al., 2012; Zuffi et al., 2007). Thus, it is possible for the designers to automate the webpage design process, as demonstrated in (Singh et al., 2010).

Complete Article List

Search this Journal:
Volume 18: 4 Issues (2022): 1 Released, 3 Forthcoming
Volume 17: 4 Issues (2021)
Volume 16: 4 Issues (2020)
Volume 15: 4 Issues (2019)
Volume 14: 4 Issues (2018)
Volume 13: 4 Issues (2017)
Volume 12: 4 Issues (2016)
Volume 11: 4 Issues (2015)
Volume 10: 4 Issues (2014)
Volume 9: 4 Issues (2013)
Volume 8: 4 Issues (2012)
Volume 7: 4 Issues (2011)
Volume 6: 4 Issues (2010)
Volume 5: 4 Issues (2009)
Volume 4: 4 Issues (2008)
Volume 3: 4 Issues (2007)
Volume 2: 4 Issues (2006)
Volume 1: 4 Issues (2005)
View Complete Journal Contents Listing