A Model to Compute Webpage Aesthetics Quality Based on Wireframe Geometry

  • Ranjan MaityEmail author
  • Samit Bhattacharya
Conference paper
Part of the Lecture Notes in Computer Science book series (LNCS, volume 10515)


Computational models of web page aesthetics prediction are useful for the designers to determine the usability and to improve it. Positional geometry of webpage objects (wireframe) is an important factor for determining the webpage aesthetics as shown in studies. In this paper, we propose a computational model for predicting webpage aesthetics based on the positional geometry. We have considered 13 features of positional geometry that affect aesthetics, as reported in literature. By varying these 13 features, we have designed 52 interfaces’ wireframes and rated them by 100 users in a 5 point rating scale. Our 1 dimensional ANOVA study on users’ rating shows, 9 out of the 13 features are important for webpage aesthetics. Based on these 9 features, we created a computational model for webpage aesthetics prediction. Our computational model works based on Support Vector Machine (SVM). To judge the efficacy of our model, we considered 10 popular webpages’ wireframes, and got them rated by 80 users. Experimental results show that our computational model can predict webpage aesthetics with an accuracy of 90%.


Computational model Aesthetics Features Empirical study Classification ANOVA Support vector machine 



We are thankful to all the participants who volunteered for the empirical studies.


  1. 1.
    Bansal, D., Bhattacharya, S.: Semi-supervised learning based aesthetic classifier for short animations embedded in web pages. In: Kotzé, P., Marsden, G., Lindgaard, G., Wesson, J., Winckler, M. (eds.) INTERACT 2013. LNCS, vol. 8117, pp. 728–745. Springer, Heidelberg (2013). doi: 10.1007/978-3-642-40483-2_51 CrossRefGoogle Scholar
  2. 2.
    Cope, M.E., Uliano, K.C.: Cost-justifying usability engineering: a real world example. In: Proceedings of the Human Factors Society 39th Annual Meeting, vol. 39, no. 4, pp. 263–276. Human Factors Society, Santa Monica (1995)Google Scholar
  3. 3.
    Cortes, C., Vapnik, V.: Support-vector networks. Mach. Learn. 20(3), 273–297 (1995)zbMATHGoogle Scholar
  4. 4.
    Datta, R., Joshi, D., Li, J., Wang, J.Z.: Studying aesthetics in photographic images using a computational approach. In: Leonardis, A., Bischof, H., Pinz, A. (eds.) ECCV 2006. LNCS, vol. 3953, pp. 288–301. Springer, Heidelberg (2006). doi: 10.1007/11744078_23 CrossRefGoogle Scholar
  5. 5.
    Galitz, W.O.: The Essential Guide to user Interface Design: An Introduction to GUI Design Principles and Techniques. Wiley, New York (1997)Google Scholar
  6. 6.
    Hill, A.: Readability of screen displays with various foreground/background color combinations, font styles, and font types. In: Proceedings of 11th National Conference on Undergraduate Research, vol. 2, pp. 742–746 (1997)Google Scholar
  7. 7.
    Lai, C.Y., Chen, P.H., Shih, S.W., Liu, Y., Hong, J.S.: Computational models and experimental investigations of effects of balance and symmetry on the aesthetics of text-overlaid images. Int. J. Hum. Comput Stud. 68, 41–56 (2010)CrossRefGoogle Scholar
  8. 8.
    Legge, G.E., Bigelow, C.A.: Does print size matter for reading? A review of findings from vision science and typography. J. Vis. 11(5), 8 (2011)CrossRefGoogle Scholar
  9. 9.
    Maity, R., Uttav, A., Verma, G., Bhattachariya, S.: A non-linear regression model to predict aesthetics ratings of on-screen images. In: OZCHI 2015, Melbourne, Australia, pp. 44–52 (2015)Google Scholar
  10. 10.
    Maity, R., Madrosia. A., Bhattachariya, S.: A computational model to predict aesthetics quality of text elements of GUI. In: IHCI 2015, Allahabad, India, pp. 152–159 (2015)Google Scholar
  11. 11.
    Miniukovich, A., Angeli, D. Computation of interface aesthetics. In: CHI 2015, Seoul, Republic of Korea, pp. 1163–1172 (2015)Google Scholar
  12. 12.
    Ngo, D.C.L., Teo, L.S., Byrne, J.G.: Modeling interface aesthetics. Inf. Sci. 152, 25–46 (2003)CrossRefGoogle Scholar
  13. 13.
    Shyam, D., Bhattacharya, S.: A model to evaluate aesthetics of short videos. In: APCHI, Matsue, Japan, pp. 315–324 (2012)Google Scholar
  14. 14.
    Singh, N., Bhattacharya, S.: A GA-based approach to improve web page aesthetics. In: Proceedings of 1st international conference on Intelligent Interactive Technologies and Multimedia (IITM 2010), pp. 29–32. IIIT Allahabad, India (2010)Google Scholar
  15. 15.
    Tractinsky, N.: Aesthetics and apparent usability: empirically assessing cultural and methodological issues. In: CHI 1997, New York (1997)Google Scholar
  16. 16.
    International Business Machines (IBM). Cost Justifying Ease of Use (2001)Google Scholar
  17. 17.
  18. 18.
    [CIT Kokrajhar]
  19. 19.
    [IIT Guwahati]
  20. 20.
  21. 21.
    [Sound cloud]
  22. 22.
  23. 23.
  24. 24.
    [State Bank of India]
  25. 25.
  26. 26.
  27. 27.

Copyright information

© IFIP International Federation for Information Processing 2017

Authors and Affiliations

  1. 1.Department of Computer Science and EngineeringIndian Institute of Technology, GuwahatiGuwahatiIndia

Personalised recommendations