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.
- 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.Google ScholarCross Ref
- 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.Google Scholar
- Bravo, M. J. and Farid, H. 2004. Search for a category target in clutter. Journal of Perception, 33, 6, 643--652.Google ScholarCross Ref
- 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. Google ScholarDigital Library
- Duncan, J. and Humphreys, G. W. 1989. Visual search and stimulus similarity. Psychological Review, 96, 3, 433--458.Google ScholarCross Ref
- Duncan, J. 1984. Selective attention and the organization of visual information. Journal of Experimental Psychology, 113, 4, 501--517.Google ScholarCross Ref
- 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.Google ScholarCross Ref
- 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. Google ScholarDigital Library
- 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). Google ScholarDigital Library
- 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. Google ScholarDigital Library
- Hasler, D. and Suesstrunk, S. 2003. Measuring Colourfulness in Natural Images. In SPIE/IS&T Human Vision and Electronic Imaging, 87--95.Google Scholar
- 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.Google ScholarCross Ref
- 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. Google ScholarDigital Library
- 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.Google Scholar
- 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. Google ScholarDigital Library
- Levi, D. M. 2008. Crowding---An essential bottleneck for object recognition: A mini-review. Vision Research, 48, 5, 635--654.Google ScholarCross Ref
- 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. Google ScholarDigital Library
- 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.Google Scholar
- Loy, G. and Eklundh, J. O. 2006. Detecting symmetry and symmetric constellations of features. In Computer Vision -- ECCV 2006. Springer Berlin Heidelberg. Google ScholarDigital Library
- 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).Google Scholar
- 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.Google ScholarCross Ref
- Purchase, H. C., Freeman, E., and Hamer, J. 2012 An exploration of visual complexity. Diagrammatic Representation and Inferences, 200--213. Google ScholarDigital Library
- Reber, R., Winkielman, P., and Schwarz, N. 1999. Effects of perceptual fluency on affective judgments. Psychological Science, 9, 1, 45--48.Google ScholarCross Ref
- 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.Google ScholarCross Ref
- 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.Google ScholarCross Ref
- Reber, R. 2012. Processing fluency, aesthetic pleasure, and culturally shared taste. In Aesthetic Science: Connecting Minds, Brains, and Experience. Oxford University Press, Oxford.Google Scholar
- 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. Google ScholarDigital Library
- Rosenholtz, R., Li, Y., and Nakano, L. 2007. Measuring visual clutter. Journal of Vision, 7, 2, 1--22.Google ScholarCross Ref
- 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.Google ScholarCross Ref
- Sutcliffe, A. 2009. Designing for user engagement: Aesthetic and attractive user interfaces. Synthesis lectures on human-centered informatics, 2, 1, 1--55. Google ScholarDigital Library
- 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. Google ScholarDigital Library
- 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.Google ScholarCross Ref
- 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. Google ScholarDigital Library
- 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. Google ScholarDigital Library
- 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. Google ScholarDigital Library
- 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.Google ScholarCross Ref
- van der Helm, Peter A. 2000. Simplicity versus likelihood in visual perception: From surprisals to precisals. Psychological Bulletin, 126, 5, 770--800.Google ScholarCross Ref
- Wertheimer, M. 1938. Laws of Organization in Perceptual Forms (partial translation). In A Sourcebook of Gestalt Psychology. Harcourt Brace.Google Scholar
- 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.Google ScholarCross Ref
- 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.Google Scholar
- 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. Google ScholarDigital Library
- 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. Google ScholarDigital Library
- 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. Google ScholarDigital Library
Index Terms
- Quantification of interface visual complexity
Recommendations
Visual impressions of mobile app interfaces
NordiCHI '14: Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, FoundationalFirst impressions are formed very fast but they last. Consecutive approach-avoidance behavior is formed almost instantly and persists over time. The effect of the first impression of graphical user interfaces (GUIs) of desktop webpages on subsequent ...
Computation of Interface Aesthetics
CHI '15: Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing SystemsPeople prefer attractive interfaces. Designers strive to outmatch competitors, and create apps and websites that stand out. However, significant expenses on design are unaffordable to small companies; instead, they could adopt automatic tools of ...
Visual diversity and user interface quality
British HCI '15: Proceedings of the 2015 British HCI ConferenceLive graphical user interfaces (GUIs) do change responding to user actions, unlike GUI screenshots, which are often used in studies. The user experiences and is affected by transitions between the layouts (e.g., webpages or mobile app screens) of ...
Comments