research-article

Quantification of interface visual complexity

Authors:

Aliaksei Miniukovich,

Antonella De AngeliAuthors Info & Claims

AVI '14: Proceedings of the 2014 International Working Conference on Advanced Visual Interfaces

Pages 153 - 160

https://doi.org/10.1145/2598153.2598173

Published: 27 May 2014 Publication History

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.

Digital Library

[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.

Digital Library

[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).

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

[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.

Digital Library

Cited By

S Bhowmick SChen SSrivastava DBarcelo PSanchez-Pi NMeliou ASudarshan S(2024)Cognitive Psychology Meets Data Management: State of the Art and Future DirectionsCompanion of the 2024 International Conference on Management of Data10.1145/3626246.3654682(590-596)Online publication date: 9-Jun-2024
https://dl.acm.org/doi/10.1145/3626246.3654682
Wang CMiniukovich ARen X(2024)An interpretable metric of visual aesthetics for GUI designBehaviour & Information Technology10.1080/0144929X.2024.2325030(1-15)Online publication date: 29-Feb-2024
https://doi.org/10.1080/0144929X.2024.2325030
Bakaev MShirokov M(2024)Algorithm for Mapping Layout Grids in User Interfaces: Automating the “Squint Test”Tools and Methods of Program Analysis10.1007/978-3-031-50423-5_1(3-14)Online publication date: 3-Jan-2024
https://doi.org/10.1007/978-3-031-50423-5_1
Show More Cited By

Index Terms

Quantification of interface visual complexity
1. Human-centered computing
  1. Human computer interaction (HCI)
    1. HCI design and evaluation methods
    2. Interaction paradigms
      1. Graphical user interfaces

Recommendations

Visual impressions of mobile app interfaces
NordiCHI '14: Proceedings of the 8th Nordic Conference on Human-Computer Interaction: Fun, Fast, Foundational

First 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 Systems

People 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 Conference

Live 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

Information & Contributors

Information

Published In

cover image ACM Other conferences

AVI '14: Proceedings of the 2014 International Working Conference on Advanced Visual Interfaces

May 2014

438 pages

ISBN:9781450327756

DOI:10.1145/2598153

General Chair:
Paolo Paolini
Politecnico di Milano (Italy)
,
Program Chair:
Franca Garzotto
Politecnico di Milano (Italy)

Copyright © 2014 ACM.

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].

Sponsors

Centro Cultura Volta: Centro Cultura Volta
Politecnico di Milano: Politecnico di Milano

In-Cooperation

Publisher

Association for Computing Machinery

New York, NY, United States

Publication History

Published: 27 May 2014

Permissions

Request permissions for this article.

Request Permissions

Check for updates

Author Tags

Qualifiers

Research-article

Conference

AVI' 14

Sponsor:

Centro Cultura Volta
Politecnico di Milano

AVI' 14: International Working Conference on Advanced Visual Interfaces

May 27 - 29, 2014

Como, Italy

Acceptance Rates

AVI '14 Paper Acceptance Rate 32 of 112 submissions, 29%;

Overall Acceptance Rate 128 of 490 submissions, 26%

Contributors

Other Metrics

View Article Metrics

Bibliometrics & Citations

Bibliometrics

Article Metrics

44
Total Citations
View Citations
1,102
Total Downloads

Downloads (Last 12 months)131
Downloads (Last 6 weeks)19

Reflects downloads up to 22 Dec 2024

Other Metrics

View Author Metrics

Citations

Cited By

S Bhowmick SChen SSrivastava DBarcelo PSanchez-Pi NMeliou ASudarshan S(2024)Cognitive Psychology Meets Data Management: State of the Art and Future DirectionsCompanion of the 2024 International Conference on Management of Data10.1145/3626246.3654682(590-596)Online publication date: 9-Jun-2024
https://dl.acm.org/doi/10.1145/3626246.3654682
Wang CMiniukovich ARen X(2024)An interpretable metric of visual aesthetics for GUI designBehaviour & Information Technology10.1080/0144929X.2024.2325030(1-15)Online publication date: 29-Feb-2024
https://doi.org/10.1080/0144929X.2024.2325030
Bakaev MShirokov M(2024)Algorithm for Mapping Layout Grids in User Interfaces: Automating the “Squint Test”Tools and Methods of Program Analysis10.1007/978-3-031-50423-5_1(3-14)Online publication date: 3-Jan-2024
https://doi.org/10.1007/978-3-031-50423-5_1
Bakaev MHeil SGaedke M(2023)A Reasonable Effectiveness of Features in Modeling Visual Perception of User InterfacesBig Data and Cognitive Computing10.3390/bdcc70100307:1(30)Online publication date: 8-Feb-2023
https://doi.org/10.3390/bdcc7010030
Lee JLee NJu JChae JPark JRyu HCho Y(2023)Visual Complexity of Head-Up Display in Automobiles Modulates Attentional TunnelingHuman Factors: The Journal of the Human Factors and Ergonomics Society10.1177/0018720823118149666:7(1879-1892)Online publication date: 8-Jun-2023
https://doi.org/10.1177/00187208231181496
Zen MBurny NVanderdonckt J(2023)A Quality Model-based Approach for Measuring User Interface Aesthetics with GraceProceedings of the ACM on Human-Computer Interaction10.1145/35932247:EICS(1-47)Online publication date: 19-Jun-2023
https://dl.acm.org/doi/10.1145/3593224
Ma JS Bhowmick SChoi BTay L(2023)Theories and Principles Matter: Towards Visually Appealing and Effective Abstraction of Property Graph QueriesProceedings of the ACM on Management of Data10.1145/35892771:2(1-26)Online publication date: 20-Jun-2023
https://dl.acm.org/doi/10.1145/3589277
Bakaev MHeil SKhvorostov VGaedke M(2023)How Many Data Does Machine Learning in Human–Computer Interaction Need?: Re-Estimating the Dataset Size for Convolutional Neural Network-Based Models of Visual PerceptionIT Professional10.1109/MITP.2023.326292325:2(23-29)Online publication date: 12-May-2023
https://dl.acm.org/doi/10.1109/MITP.2023.3262923
Zhu Y(2023)A Review of Complexity Metrics for Data Visualization2023 27th International Conference Information Visualisation (IV)10.1109/IV60283.2023.00031(131-135)Online publication date: 25-Jul-2023
https://doi.org/10.1109/IV60283.2023.00031
Kuric EDemcak PKrajcovic MNguyen G(2023)Cognitive abilities and visual complexity impact first impressions in five-second testingBehaviour & Information Technology10.1080/0144929X.2023.2272747(1-28)Online publication date: 7-Nov-2023
https://doi.org/10.1080/0144929X.2023.2272747
Show More Cited By

View Options

Login options

Check if you have access through your login credentials or your institution to get full access on this article.

Full Access

Get this Publication

View options

PDF

View or Download as a PDF file.

eReader

View online with eReader.

Media

Figures

Other

Tables

View Table of Contents