Assessing User Interface Aesthetics based on the Inter-subjectivity of Judgment

"How to assess user interface aesthetics?" remains a question faced by many user interface researchers and designers during the user interface development life cycle since aesthetics positively influence usability, user experience, pleasureability, and trust. Visual techniques borrowed from visual design suggest that the graphical user interface layout could be assessed by aesthetic metrics such as balance, symmetry, proportion, regularity, and simplicity, to name a few. Whereas different formulas exist for computing each aesthetic metric and different interpretations to sum up their results, no consensus exists today on how to consistently evaluate these metrics in a way that is aligned with human judgement, which is intrinsically subjective. In order to address the challenging alignment of human subjectivity with machine objectivity, this paper reports on an experiment comparing the results issued from the inter-subjectivity of judgment of fifteen participants evaluating four main aesthetic metrics on a sample of ten graphical user interfaces and the values of these metrics calculated semi-automatically by a web-based application. The experiment suggests that some metrics, e.g. symmetry, proportion, simplicity, as computed from the formula are actually positively correlated with human judgment, while some other metrics, such as balance, are surprisingly not correlated with the formula computed, thus indicating that another formula or another interpretation should be determined. Therefore, a new formula for computing balance is defined that decomposes balance into horizontal and vertical balances which re-establish a correlation. This paper then provides some new insights on how to rely on these aesthetic metrics and other related metrics, whether they are interpreted manually or computed automatically.

Content

Author and article information

Contributors

Mathieu Zen

Jean Vanderdonckt

Conference

Publication date: July 2016

Publication date (Print): July 2016

Pages: 1-12

Affiliations

[0001]Université catholique de Louvain

Louvain School of Management, LiLab

Place des Doyens, 1 - 1348 Louvain-la-Neuve, Belgium

Article

DOI: 10.14236/ewic/HCI2016.25

SO-VID: 4b68d9c0-10c0-4300-85c8-1cc6bc451304

License:

This work is licensed under a Creative Commons Attribution 4.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/

Conference name: Proceedings of the 30th International BCS Human Computer Interaction Conference

Conference acronym: HCI

Conference number: 30

Conference location: Bournemouth University, Poole, UK

Conference date: 11 - 15 July 2016

Conference sponsor: Electronic Workshops in Computing (eWiC)

Conference theme: Fusion

History

Product

1477-9358 BCS Learning & Development

Self URI (article page): https://www.scienceopen.com/hosted-document?doi=10.14236/ewic/HCI2016.25

Self URI (journal page): https://ewic.bcs.org/

REFERENCES

A. AltaboliY. Lin 2011 January Investigating effects of screen layout elements on interface and screen design aesthetics Adv. in Hum.-Comp. Int 2011 5:1 5:10
T. Ben-BassatJ. MeyerN. Tractinsky 2006 June Economic and subjective measures of the perceived value of aesthetics and usability ACM Trans. Comput.-Hum. Interact 13 2 210 234
F Clay 1908 The origin of the aesthetic emotion Sammelbande der Int. Musik 282 290
T ComberJ. Maltby 1997 Layout complexity: does it measure usability? Human-Computer Interact. INTERACT ’ 97 623 626 Springer US
P CourcouxM. Semenou 1997 Preference data analysis using a paired comparison model Food quality and preference 8 5 353 358
K. DionE. BerscheidE. Walster 1972 What is beautiful is good Journal of personality and social psychology 24 3 285
K.-C. HamborgJ. HülsmannK. Kaspar 2014 January The interplay between usability and aesthetics: More evidence for the“what is usable is beautiful” notion Adv. in Hum.-Comp. Int 2014 15:15 15:15
I. Kant 1987 The Critique of judgment Hackett Publishing
M. KurosuK. Kashimura 1995 Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability Conference companion on Human factors in computing systems 292 293 ACM
G. LindgaardG. FernandesC. DudekJ. Brown 2006 March Attention web designers: You have 50 milliseconds to make a good first impression! Behav Inf. Technol 25 2 115 126
M. MöttusD. LamasM. PajusaluR. Torres 2013 The evaluation of interface aesthetics Proceedings of the International Conference on Multimedia, Interaction, Design and Innovation, MIDI '13 New York, NY, USA 3:1 3:10 ACM
R. MahajanB. Shneiderman 1997 Nov Visual and textual consistency checking tools for graphical user interfaces IEEE Transactions on Software Engineering 23 11 722 735
M. MoshagenM. T Thielsch 2010 Facets of visual aesthetics International Journal of Human-Computer Studies 68 10 689 709
D. NgoJ. Byrne 2001 Another look at a model for evaluating interface aesthetics Int. J. Appl. Math. Comput. Sci 11 2 515 535
D. NgoA. SamsudinR. Abdullah 2000 Aesthetic measures for assessing graphic screens J. Inf. Sci. Eng 16 97 116
D. C. L. NgoL. S. TeoJ. G. Byrne 2003 Modelling interface aesthetics Information Sciences 152 25 46
J. NielsenR. Molich 1990 Heuristic evaluation of user interfaces Proceedings of the SIGCHI conference on Human factors in computing systems 249 256 ACM
D. A. Norman 2005 Emotional design: Why we love (or hate) everyday things Basic books E. PapachristosN. Avouris 2011 Are first impressions about websites only related to visual appeal? Proceedings of the 13th IFIP TC 13 International Conference on Human-computer Interaction - Volume Part I INTERACT ’ 11 Berlin, Heidelberg 489 496 Springer-Verlag
H. C. PurchaseJ. HamerA. JamiesonO. Ryan 2011 Investigating objective measures of web page aesthetics and usability Proceedings of the Twelfth Australasian User Interface Conference 117 AUIC ’ 11 Darlinghurst, Australia, Australia 19 28 Australian Computer Society, Inc.
J. J. Randolph 2005 Free-marginal multirater kappa (multirater k [free]): An alternative to fleiss ’ fixed-marginal multirater kappa Joensuu University Learning and Instruction Symposium
K. ReineckeT. YehL. MiratrixR. MardikoY. ZhaoJ. LiuK. Z. Gajos 2013 Predicting users ’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness Proc. SIGCHI Conf. Hum. Factors Comput. Syst. - CHI ’13 2049
D. RobinsJ. Holmes 2008 Aesthetics and credibility in web site design Information Processing & Management 44 1 386 399
C. SalimunH. C. PurchaseD. R. SimmonsS. Brewster 2010a The effect of aesthetically pleasing composition on visual search performance Proc. 6th Nord. Conf. Human-Computer Interact. Extending Boundaries - Nord. ’10 422
C. SalimunH. C. PurchaseD. R. SimmonsS. A. Brewster 2010b Preference ranking of screen layout principles Proceedings of the 2010 British Computer Society Conference on Human-Computer Interaction, BCS-HCI 2010 Dundee, United Kingdom 6-10 September 2010 81 87
B. N. SchenkmanF U. Jönsson 2000 Aesthetics and preferences of web pages Behaviour & Information Technology 19 5 367 377
a. Sears 1993 July Layout appropriateness: a metric for evaluating user interface widget layout IEEE Trans. Softw. Eng. 19 7 707 719
C. ShenQ. Zhao 2014 Webpage saliency Computer Vision-ECCV 2014 33 46 Springer
A. SondereggerJ. Sauer 2010 May The influence of design aesthetics in usability testing: effects on user performance and perceived usability Appl. Ergon 41 3 403 10
N. Tractinskya.S KatzD. Ikar 2000 December What is beautiful is usable Interact. Comput 13 2 127 145
A. N. TuchE. E. PresslaberM. StöcklinK. OpwisJ. a. Bargas-Avila 2012 November The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments Int. J. Hum. Comput. Stud 70 11 794 811
J. VanderdoncktX. Gillo 1994 Visual techniques for traditional and multimedia layouts Proc. Work. Adv Vis. interfaces 95 104 ACM
J. M. ZainM. TeyY. Goh 2011 Probing a Self-Developed Aesthetics Measurement Application (SDA) in Measuring Aesthetics of Mandarin Learning Web Page Interfaces 8 1

Comments

Comment on this article

[1] A. AltaboliY. Lin 2011 January Investigating effects of screen layout elements on interface and screen design aesthetics Adv. in Hum.-Comp. Int 2011 5:1 5:10

[2] T. Ben-BassatJ. MeyerN. Tractinsky 2006 June Economic and subjective measures of the perceived value of aesthetics and usability ACM Trans. Comput.-Hum. Interact 13 2 210 234

[3] F Clay 1908 The origin of the aesthetic emotion Sammelbande der Int. Musik 282 290

[4] T ComberJ. Maltby 1997 Layout complexity: does it measure usability? Human-Computer Interact. INTERACT ’ 97 623 626 Springer US

[5] P CourcouxM. Semenou 1997 Preference data analysis using a paired comparison model Food quality and preference 8 5 353 358

[6] K. DionE. BerscheidE. Walster 1972 What is beautiful is good Journal of personality and social psychology 24 3 285

[7] K.-C. HamborgJ. HülsmannK. Kaspar 2014 January The interplay between usability and aesthetics: More evidence for the“what is usable is beautiful” notion Adv. in Hum.-Comp. Int 2014 15:15 15:15

[8] I. Kant 1987 The Critique of judgment Hackett Publishing

[9] M. KurosuK. Kashimura 1995 Apparent usability vs. inherent usability: experimental analysis on the determinants of the apparent usability Conference companion on Human factors in computing systems 292 293 ACM

[10] G. LindgaardG. FernandesC. DudekJ. Brown 2006 March Attention web designers: You have 50 milliseconds to make a good first impression! Behav Inf. Technol 25 2 115 126

[11] M. MöttusD. LamasM. PajusaluR. Torres 2013 The evaluation of interface aesthetics Proceedings of the International Conference on Multimedia, Interaction, Design and Innovation, MIDI '13 New York, NY, USA 3:1 3:10 ACM

[12] R. MahajanB. Shneiderman 1997 Nov Visual and textual consistency checking tools for graphical user interfaces IEEE Transactions on Software Engineering 23 11 722 735

[13] M. MoshagenM. T Thielsch 2010 Facets of visual aesthetics International Journal of Human-Computer Studies 68 10 689 709

[14] D. NgoJ. Byrne 2001 Another look at a model for evaluating interface aesthetics Int. J. Appl. Math. Comput. Sci 11 2 515 535

[15] D. NgoA. SamsudinR. Abdullah 2000 Aesthetic measures for assessing graphic screens J. Inf. Sci. Eng 16 97 116

[16] D. C. L. NgoL. S. TeoJ. G. Byrne 2003 Modelling interface aesthetics Information Sciences 152 25 46

[17] J. NielsenR. Molich 1990 Heuristic evaluation of user interfaces Proceedings of the SIGCHI conference on Human factors in computing systems 249 256 ACM

[18] D. A. Norman 2005 Emotional design: Why we love (or hate) everyday things Basic books E. PapachristosN. Avouris 2011 Are first impressions about websites only related to visual appeal? Proceedings of the 13th IFIP TC 13 International Conference on Human-computer Interaction - Volume Part I INTERACT ’ 11 Berlin, Heidelberg 489 496 Springer-Verlag

[19] H. C. PurchaseJ. HamerA. JamiesonO. Ryan 2011 Investigating objective measures of web page aesthetics and usability Proceedings of the Twelfth Australasian User Interface Conference 117 AUIC ’ 11 Darlinghurst, Australia, Australia 19 28 Australian Computer Society, Inc.

[20] J. J. Randolph 2005 Free-marginal multirater kappa (multirater k [free]): An alternative to fleiss ’ fixed-marginal multirater kappa Joensuu University Learning and Instruction Symposium

[21] K. ReineckeT. YehL. MiratrixR. MardikoY. ZhaoJ. LiuK. Z. Gajos 2013 Predicting users ’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness Proc. SIGCHI Conf. Hum. Factors Comput. Syst. - CHI ’13 2049

[22] D. RobinsJ. Holmes 2008 Aesthetics and credibility in web site design Information Processing & Management 44 1 386 399

[23] C. SalimunH. C. PurchaseD. R. SimmonsS. Brewster 2010a The effect of aesthetically pleasing composition on visual search performance Proc. 6th Nord. Conf. Human-Computer Interact. Extending Boundaries - Nord. ’10 422

[24] C. SalimunH. C. PurchaseD. R. SimmonsS. A. Brewster 2010b Preference ranking of screen layout principles Proceedings of the 2010 British Computer Society Conference on Human-Computer Interaction, BCS-HCI 2010 Dundee, United Kingdom 6-10 September 2010 81 87

[25] B. N. SchenkmanF U. Jönsson 2000 Aesthetics and preferences of web pages Behaviour & Information Technology 19 5 367 377

[26] a. Sears 1993 July Layout appropriateness: a metric for evaluating user interface widget layout IEEE Trans. Softw. Eng. 19 7 707 719

[27] C. ShenQ. Zhao 2014 Webpage saliency Computer Vision-ECCV 2014 33 46 Springer

[28] A. SondereggerJ. Sauer 2010 May The influence of design aesthetics in usability testing: effects on user performance and perceived usability Appl. Ergon 41 3 403 10

[29] N. Tractinskya.S KatzD. Ikar 2000 December What is beautiful is usable Interact. Comput 13 2 127 145

[30] A. N. TuchE. E. PresslaberM. StöcklinK. OpwisJ. a. Bargas-Avila 2012 November The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments Int. J. Hum. Comput. Stud 70 11 794 811

[31] J. VanderdoncktX. Gillo 1994 Visual techniques for traditional and multimedia layouts Proc. Work. Adv Vis. interfaces 95 104 ACM

[32] J. M. ZainM. TeyY. Goh 2011 Probing a Self-Developed Aesthetics Measurement Application (SDA) in Measuring Aesthetics of Mandarin Learning Web Page Interfaces 8 1

Celebrating 65 years of The Computer Journal - free-to-read perspectives - bcs.org/tcj65