Quantification of interface visual complexity

ABSTRACT

Designers strive for enjoyable user experience (UX) and put a significant effort into making graphical user interfaces (GUI) both usable and beautiful. Our goal is to minimize their effort: with this purpose in mind, we have been studying automatic metrics of GUI qualities. These metrics could enable designers to iterate their designs more quickly. We started from the psychological findings that people tend to prefer simpler things. We then assumed visual complexity determinants also determine visual aesthetics and outlined eight of them as belonging to three dimensions: information amount (visual clutter and color variability), information organization (symmetry, grid, ease-of-grouping and prototypicality), and information discriminability (contour density and figure-ground contrast). We investigated five determinants (visual clutter, symmetry, contour density, figure-ground contrast and color variability) and proposed six associated automatic metrics. These metrics take screenshots of GUI as input and can thus be applied to any type of GUI. We validated the metrics through a user study: we gathered the ratings of immediate impressions of GUI visual complexity and aesthetics, and correlated them with the output of the metrics. The output explained up to 51% of aesthetics ratings and 50% of complexity ratings. This promising result could be further extended towards the creation of tLight, our automatic GUI evaluation tool.

References

1. Armstrong, T. and Detweiler-Bedel, B. 2008. Beauty as an emotion: the exhilarating prospect of mastering a challenging world. Review of General Psychology, 12, 4, 305--329.
2. Bauerly, M. and Liu, Y. 2006. Effects of symmetry and number of compositional elements on interface and design aesthetics. In the Human Factors and Ergonomics Society Annual Meeting, 304--308.
3. Bravo, M. J. and Farid, H. 2004. Search for a category target in clutter. Journal of Perception, 33, 6, 643--652.
4. Cyr, D., Head, M., and Larios, H. 2010. Colour appeal in website design within and across cultures: A multi-method evaluation. International Journal of Human-Computer Studies, 68, 1, 1--21.
5. Duncan, J. and Humphreys, G. W. 1989. Visual search and stimulus similarity. Psychological Review, 96, 3, 433--458.
6. Duncan, J. 1984. Selective attention and the organization of visual information. Journal of Experimental Psychology, 113, 4, 501--517.
7. Hall, R. H. and Hanna, P. 2004. The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioral intention. Behaviour & Information Technology, 23, 3, 183--195.
8. Harper, S., Jay, C., Michailidou, E., and Quan, H. 2013. Analysing the visual complexity of web pages using document structure. Behaviors & Information Technology, 32, 5, 491--502.
9. Harper, S., Michailidou, E., and Stevens, R. 2009. Toward a definition of visual complexity as an implicit measure of cognitive load. ACM Transactions on Applied Perception, 6, 2 (February 2009).
10. Harrington, S. J., Naveda, J. F., Jones, R. P., Roetling, P., and Thakkar, N. 2004. Aesthetic measures for automated document layout. the 2004 ACM symposium on Document engineering (October 2004), 109--111.
11. Hasler, D. and Suesstrunk, S. 2003. Measuring Colourfulness in Natural Images. In SPIE/IS&T Human Vision and Electronic Imaging, 87--95.
12. Hekkert, P., Snelders, D., and Wieringen, P. C. 2003. 'Most advanced, yet acceptable': typicality and novelty as joint predictors of aesthetic preference in industrial design. British Journal of Psychology, 94, 1, 111--124.
13. Ivory, M. Y., Sinha, R. R., and Hearst, M. A. 2001. Empirically validated web page design metrics. In Proceedings of the SIGCHI conference on Human factors in computing systems (Seattle 2001), ACM, 53--60.
14. Kootstra, G., Bart de B., and Schomaker, L. R. B. 2011 Predicting eye fixations on complex visual stimuli using local symmetry. Cognitive Computation, 223--240.
15. Kumar, R., Satyanarayan, A., Torres, C., Lim, M., Ahmad, S., Klemmer, S. R., and Talton, J. O. 2013. Webzeitgeist: design mining the web. In the SIGCHI Conference on Human Factors in Computing Systems, ACM, 3083--3092.
16. Levi, D. M. 2008. Crowding---An essential bottleneck for object recognition: A mini-review. Vision Research, 48, 5, 635--654.
17. Lindgaard, G., Dudek, C., Sen, D, Sumegi, L., and Noonan, P. 2011. An exploration of relations between visual appeal, trustworthiness and perceived usability of homepages. Transactions on computer-human interaction, 18, 1, 1--30.
18. Lindgaard, G., Fernandes, G., Dudek, C., and Brown, J. 2006. Attention web designers: You have 50 milliseconds to make a good first impression! Behavior & Information Technology, 25, 2, 115--126.
19. Loy, G. and Eklundh, J. O. 2006. Detecting symmetry and symmetric constellations of features. In Computer Vision -- ECCV 2006. Springer Berlin Heidelberg.
20. Oliva, A., Mack, M. L., Shrestha, M., and Peeper, A. 2004. Identifying the perceptual dimensions of visual complexity of scenes. The 26th Annual Meeting of the Cognitive Science Society (August 2004).
21. Pothos, E. M. and Ward, R. 2000. Symmetry, repetition, and figural goodness: An investigation of the weight of evidence theory. Cognition, 75, 3, B65--B78.
22. Purchase, H. C., Freeman, E., and Hamer, J. 2012 An exploration of visual complexity. Diagrammatic Representation and Inferences, 200--213.
23. Reber, R., Winkielman, P., and Schwarz, N. 1999. Effects of perceptual fluency on affective judgments. Psychological Science, 9, 1, 45--48.
24. Reber, R., Wurtz, P., and Zimmermann, T. D. 2003. Exploring "fringe" consciousness: The subjective experience of perceptual fluency and its objective bases. Consciousness and Cognition, 13, 1, 47--60.
25. Reber, R., Schwarz, N., and Winkielman, P. 2004. Processing fluency and aesthetic pleasure: is beauty in the perceiver's processing experience? Personality and Social Psychology Review, 8, 4, 364--382.
26. Reber, R. 2012. Processing fluency, aesthetic pleasure, and culturally shared taste. In Aesthetic Science: Connecting Minds, Brains, and Experience. Oxford University Press, Oxford.
27. Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J., and Gajos, K. Z. 2013. Predicting users' first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In CHI (Paris 2013), ACM, 2049--2058.
28. Rosenholtz, R., Li, Y., and Nakano, L. 2007. Measuring visual clutter. Journal of Vision, 7, 2, 1--22.
29. Smith-Gratto, K. and Fisher, M. M. 1998-99 Gestalt theory: a foundation for instructional screen design. Journal of Educational Technology Systems, 27, 4, 361--372.
30. Sutcliffe, A. 2009. Designing for user engagement: Aesthetic and attractive user interfaces. Synthesis lectures on human-centered informatics, 2, 1, 1--55.
31. Tractinsky, N., Cokhavi, A., Kirschenbaum, M., and Sharfi, T. 2006. Evaluating the consistency of immediate aesthetic perceptions of web pages. International Journal of Human-Computer Studies, 64, 11, 1071--1083.
32. Treisman, A. 1982. Perceptual grouping and attention in visual search for features and for objects. Journal of Experimental Psychology: Human Perception and Performance, 8, 2, 194--214.
33. Tuch, A. N., Bargas-Avila, J. A., and Opwis, K. 2010. Symmetry and aesthetics in website design: It'sa man's business. Computers in Human Behavior, 26, 6, 1831--1837.
34. Tuch, A. N., Bargas-Avila, J. A., Opwis, K., and Wilhelm, F. H. 2009. Visual complexity of websites: effects on users' experience, physiology, performance, and memory. International Journal of Human-Computer Studies, 67, 703--715.
35. Tuch, A. N., Presslaber, E. E., Stocklin, M., Opwis, K., and Bargas-Avila, J. A. 2012. The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments. International Journal of Human-Computer Studies, 70, 794--811.
36. van den Berg, R., Cornelissen, F. W., and Roerdink, J. B. 2009. A crowding model of visual clutter. Journal of Vision, 9, 4, 1--11.
37. van der Helm, Peter A. 2000. Simplicity versus likelihood in visual perception: From surprisals to precisals. Psychological Bulletin, 126, 5, 770--800.
38. Wertheimer, M. 1938. Laws of Organization in Perceptual Forms (partial translation). In A Sourcebook of Gestalt Psychology. Harcourt Brace.
39. Whittlesea, B. W. and Williams, L. D. 1998. Why do strangers feel familiar, but friends don't? A discrepancy-attribution account of feelings of familiarity. Acta Psychologica, 98, 2, 141--165.
40. Winkielman, P., Schwarz, N., Fazendeiro, T. A., and Reber, R. 2002. The hedonic marking of processing fluency: Implications for evaluative judgment. In The Psychology of Evaluation: Affective Processes in Cognition and Emotion. Psychology Press.
41. Wong, N., Carpendale, S., and Greenberg, S. EdgeLens: 2003. An Interactive Method for Managing Edge Congestion in Graphs. IEEE Symposium on Information Visualization (October 19-21, 2003), 51--58.
42. Wu, O., Chen, Y., Li, B., and Hu, W. 2011. Evaluating the visual quality of web pages using a computational aesthetic approach. In the fourth ACM international conference on Web search and data mining, ACM, 337--346.
43. Zheng, X. S., Chakraborty, I., Lin, J. J. W., and Rauschenberger, R. 2009. Correlating low-level image statistics with users-rapid aesthetic and affective judgments of web pages. In SIGCHI Conference on Human Factors in Computing Systems, ACM, 1--10.

Index Terms

• Human-centered computing

  • Human computer interaction (HCI)

    • HCI design and evaluation methods

    • Interaction paradigms

      • Graphical user interfaces