Open access peer-reviewed chapter

Towards an Optimisation of Visual Aesthetics for User Interaction

Written By

Fatima Isiaka

Submitted: 15 May 2019 Reviewed: 13 September 2019 Published: 07 January 2021

DOI: 10.5772/intechopen.89713

From the Edited Volume

Human 4.0 - From Biology to Cybernetic

Edited by Yves Rybarczyk

Chapter metrics overview

490 Chapter Downloads

View Full Metrics

Abstract

Visual aesthetics is a crucial aspect of visual experience, and very few amount of knowledge is distributed to people on how some visual colors are more pronounced than others or why users prefer some colors to others. There are few articles that have written topics on the natural adaptations and how colour can affect people. In this chapter, we lay special emphasis on improving methods on visual aesthetics for user interaction by applying natural valence modelling where color preferences arise from user’s average affective response to visual aesthetics, that is mostly related to objects or things around us. A simple experiment conducted as provided support in respect to this phenomenon. Users like or prefer very strong and sharp colors that attract the eyes and dislike colors that are less sharp or clear to human vision. This natural valence modelling agrees more to the data collected and gives a more plausible or very comprehensive meaning to how users prefer the colors of objects they had viewed.

Keywords

  • visual aesthetics
  • user interaction
  • natural valence modelling
  • optimization
  • color vision
  • empirical experiments

1. Introduction

There are very few things that influence human behaviour, which affect their colour preferences as an important aspect of visual experience, such things could be website design, purchase of electronics or home appliances, and buying of personal thing like clothes, shoes and bags. Most people might not understand why they prefer some colors objects (Figure 1) to others due to this psychological or behavioural experiences demonstrated by most users when involved in certain activities from most scientific studies [1, 2, 3]. Of recent, these explanations have been speculated on how and why users prefer different colours maybe others more preferable than some. Sometimes, colour choices tend to originate from how they are conveyed to humans or users. Most colours attract users at first contact with the eyes while others simple discourage or feel less attractive to approach. Hassenzahl [4] suggested that colour preferences are subconsciously ignited or planted into human memory on a neutral responsive base that are interpreted as some form of support for the biological adaptive theory of colour preferences. The color planted in human memory improves the performance on evolutionary biological phenomena such as how tentative users find some dresses in red more attractive to wear than dresses in brown or green. So to optimise, genetics tune this to behavioural substantial perceptions which resulted in choices of colours for objects rather than colours of their background and free of their original context.

Figure 1.

Colour objects for background user interaction.

1.1 Objectives

The objectives of this chapter are basically three:

  • to exam few literature review on visual aesthetics and its applications;

  • to examine the variations of the colour objects as preferred by users based on visual aesthetics quality; and

  • to compute the average reaction of users to colour objects they preferred.

Advertisement

2. Related work

In the research paper by [5, 6, 7], they described their integrated research approach to the experimental study of emotional user reactions in consideration of the influential and non-influential quality perceptions of the interactive systems. In this chapter, a model is presented that equally defines instrumental and non-instrumental quality perceptions which are the same as the emotional reactions. The interactive features primarily depend on the system properties but also on the user perceptions and context parameters. The main consequence of a users’ perception on visual aesthetics of any color object is based on their behaviour or preferences which are centralised components of user experience. The aesthetics aspect of the non-instrument quality is divided into different dimensions which are related to human senses. The visual, auditory and haptic perception are very important in human emotion-technology interaction and these are stated in [8, 9, 10, 11]. Visual aesthetics of materials and products is defined as the extent of which the sensory and formal colors and shape attributes of the product that provides positive visual experience for the users. The visual aspects of products have often been stated as most relevant for users aesthetic response as stated by [12, 13, 14]. There are various approaches that exist to assess the visual aesthetics of the interactive products presented to users, one of which involve the selected results of two kinds of studies reported in [10], that used the dimension of classical aesthetics proposed by the research work. This is to properly present the relation of perceived visual aesthetics to the perception of the usability, emotional response and consequences of user experience [4, 15, 16]. Research work on overall preference and satisfaction from assess replication to evaluating user reaction (Figure 2), as clearly stated steps torwards control service customisation to aesthetics and object identification.

Figure 2.

Approaches to assess users’ response to visual aesthetics on objects.

Also, it has been argued that the components associated with usability, such as satisfaction, effectiveness, and efficiency, are never a sole forecast for user experience [17, 18]. The inclusion and assessment of hedonic and pragmatic features regarding user experience technology study about interaction based on pleasure, engagement, pleasure, fun, and games. For mobile devices, it is clear that they have a set of features such as GPS, touch screen and cameras over games consoles that allows for different mode of interactions. Few research as [4, 10, 19, 20, 21] stated that aesthetics has demonstrated a positive effect on user perception on mobile system’s ease of use, for enjoyment and usefulness. However, the impact of the degree of visual aesthetic quality, which could be high or low on perceived usability is not clear. [22, 23, 24, 25] conducted an experiment in the e-commerce domain to explore the hedonic and practical motivation and engagement including both functional and pleasurable aspects of user experience and the hedonic qualities of the colour object properties such as practical and entertaining concepts together with efficiency, functional attributes, cost and influential user engagement. Consequently, there are different kinds of study that have been conducted to assess visual aesthetics and user experience in areas of online news, video games and web surfing. These areas examine the quality of information interactions from users’ perspectives. By contrast, perceived aesthetics, usability and focused attention emerged to be typically different from all other visual experience study. Some papers [12, 18] made recommendation on how to make use of fewer constructs in user experience scale on visual aesthetics. Hence, this scale was reduced to four factors which include aesthetics, reward, focused attention and perceived usability. Aesthetics as defined by [19, 20, 26], as the sensuous qualities, the experiences and the emotions that occur while interacting with a colour objects. Visual aesthetics refers to the appearance that user interface depicted, as the top-most visible surface layer of the user experience on user experience modelling [4, 22]. So, perceived usability is defined as the ease of use, goals of efficiency and the practical side of colour object products including satisfaction in specific contextual use of these products. The work we presented tends to use these design goals to shape the way user view objects they observed and how to modify new methods and ways to understand user visual experience on a biologically defined point of view.

Advertisement

3. Methods

The methods used is based on the procedure from [23, 24, 25], where participants took part in the experiment for visual aesthetic based on biological association that include warm and cool colours, heavy and light colours, these are pink, blue, red, green, orange and cyan. The ages of these participants are within the ranges of 5–70 years, with equal number of male and female participants. These participants were picked from three institutions, such as Primary, Secondary and Universities. These participants were picked from three institutions, such as Primary, Secondary and Universities. All participants were screened for colour deficiency and none were found to be colour deficient. This was done by placing three main colours (red, blue and yellow) in front of them from the display monitor. All the participants gave consent and the Human Rights Protection Committee (HRPC) of each institude gave approval of the test protocol.

For the task given on colour preferences, emotion ratings and appearances, the participants were shown given 15 colors each (Figure 3) with each of them presented one at a time in an arbitrary (random) order. The users described how much they prefer each colour shown to them by specifying reasons for their preferences. They are classified as ‘Very much’, ‘Not likely’ and ‘Absolutely not’ (Figure 4) by pressing down on the approval button on the indicators attached to the system and on the display monitor. For each colour, the users rated them as red, pink, blue, light green and cyan. The emotion task is rated as: strong preference, average preference or cool preference and weak preference. For each task the users were allowed five trials each. In addition, the task description was combined to superordinate groups if there exist more or less assignment or exemplars that make the same kind of colour object been identified. These colors objects are in form of a bowl, dress, tin, etc., depending on what is been displayed on the monitor. Based on valence rating task, the users were asked to identify each object presented to them on the monitor screen. They are expected to rate their emotional reaction or response to each object they had identified as an answer to the questions been presented, as they select object of certain colour on the monitor screen. That is they are to state how appealing each colour object is to them based on the above classified emotional and assigned description of the objects state above. The objects with similar color were identified and described by the participants individually. Based on this, the users were asked to rate the degree to which each similar color object is to the last one presented on the colour indicator.

Figure 3.

Colour scale and objects for background user interaction.

Figure 4.

Colour objects preferences based on biological or cognitive reaction.

Advertisement

4. Results

One of the objectives of this paper is to examine the variation of the colour objects as preferred by users based on visual aesthetics quality, which could be either high or low on these colour objects and also user interface influences perceived colour objects usability. The perception of user data was first inspected for normality based on the equation bellow (Eq. (2)), which is a novel approach, considering the younger participants involved. The error plot did not show any extreme outliers or skewness. For the inverted bell-shaped lines, though slight skewed for red, confirmed that the data were normally distributed. During the preliminary analysis, it was observed that the variability or changes in usability apparent for the shape colour visual aesthetics was higher and apparent than the low or less shape colour objects. The number of participants recruited was not large enough, to some of the user data was simulated to obtain the same user generated data as the original. So the total amount of user data obtained amounts to 60 including that for children. The criteria for detecting and determining the kind of colour object most user preferred by users is based on ‘Very likely’, ‘Not likely’ and ‘Absolutely not’. Colour objects was utilised because this would attract younger participants and make the result more methodical and generalised.

Based on the computed results above, the error rate for users’ visual aesthetics is computed using the equation bellow for both emotion reaction and reasons why users prefer a particular colour object. The reasons why this occur is determined by their colour preferences, which is similar to attributing the colour objects to the once they clicked on to observed. This particular study is more interesting to children, since their psychological reasoning is heightened by the colours and their basic love of colour is exploited. Most of the children preferred rather shape colours like red and Orange while adults prefer frail colours like cyan and blue. The divergence in error is only found in red colour objects because women and few girls tend to go for this type of colours and sometimes some red colour tend to feel less appealing to the eye due to the shade in it (high or low). Some users were mostly confused about their chooses or preferences when it comes to red colour objects. The reason is because the red colour objects rather appear either in light or heavy to the eye when observed by the user. The rest of the colours were measured in the same criteria as the mood of preferences to the user, that is, ‘Very likely’, ‘Not likely’, and ‘Absolutely not’ since they appear to be in-line with the entire colour objects based on the error rate (Figure 5).

Figure 5.

Graph indicating error in users’ emotional rating and colour preferences of each objects they viewed. (a) Error rate based on users’ emotional experience, and (b) Error rate based on users’ colour preferences.

In regards to the findings, most webpages and games interface can be tuned to these colours as this would likely attract more users and also children would be more drawn to assess such interfaces with average visual console in appearance.

Upre=NoofUser1001000+UpreE1

and error is calculated based on:

errorrate=Upre1000E2

Figure 6.

The Rate of User Color Preferences based on User Perception.

The table (Table 1) shows the percentage of like and dislike of each colour objects observed by participants based on Eq. (2). This is to reduce the error in computations and predisposition to error in data due the novel approach adopted. The result also showed the variations of usability as well as aesthetics and the predicted impact on the perception of all colour objects (Figure 6). Objects with colours associated with a high degree of usability and attractiveness received better ratings than others. The result also showed that emotions of users as regard to the colour objects, revealed that the effect of usability was greater than the one of visual aesthetics for all the valence and emotional or biological feelings involved. Therefore, the colour objects of high regard and appealing design was experienced as most satisfying, while the colour objects of low regard and least attractiveness was most exasperating for children. Both factors contributed to these emotions additively.

Colour objectVery likely (%)aNot likely b (%)Absolutely not (%)c
Orange413,450321,2104,154,323
Cyan413,460391,210409,324
Red3,953,430243,230406,231
Green3,965,641391,2104,154,323
Yellow41,345,023321,210406,231
Blue413,451,022243,230409,324

Table 1.

The percentage likes and dislike of colour object as preferred by users.

‘Very likely’ denotes how user prefers the object based on its colour.


‘Not likely’ denotes how user dislike an object based on its colour.


‘Absolute not’ denotes how user totally and not likely to choose an object based on its colour.


Advertisement

5. Conclusions

The findings in the paper presented, demonstrated that it is possible to compare and deploy groups of colour object properties, which influences high and low regard of colour objects by users. In addition, properties that are associated with statistical presentation had an impact on the perception of usability of colour object properties related to the appearance of the object as determined by users’ perceived visual aesthetics. So, it is possible to resolve the issue of attribute overlay and also to establish that high and low colour objects quality perceptions occur autonomously. The paper also showed the relevance of perceived visual aesthetics for emotional user reaction and consequences of the user experience to the object they viewed. The relationship of perceived visual aesthetic and emotional aspects of users have also been studied extensively. Further challenges regarding visual aesthetics in human technology interaction that should be addressed in the future are the role of inter-individual modifications of aesthetics judgements that seem more important, as for example in comparison to the perception of usability issues regarding object colour and the consideration of visual aesthetics in interactive system design projects based on visual colour objects project.

Advertisement

Acknowledgments

The author would like to thank Nasarawa State University, for their support and advise regarding the production of this chapter and choice of the software used for result computation and visualisation.

Advertisement

Notes/thanks/other declarations

Many thanks to my family for their support and contritions to this paper.

References

  1. 1. Feijoo C, Gomez-Barroso J-L, Ramos S. An analysis of mobile gaming development: The role of the software platforms. ICIN. 2010;11-14:1-7
  2. 2. Ziefle M. Information presentation in small screen devices: The trade-off between visual density and menu foresight. Applied Ergonomics;41(6):719-730
  3. 3. Rogers EM. Diffusion of Innovations. 5th ed. Free Press Trade Paperback; 2003
  4. 4. Hassenzahl M. The interplay of beauty, goodness, and usability in interactive products. Human Computer Interaction. 2004;19(4):319-349
  5. 5. Oshita M, Ishikawa H. Gamepad vs. touchscreen: A comparison of action selection interfaces in computer games. In: Proceedings of WASA, Workshop at SIGGRAPH Asia; 2012. pp. 27-31
  6. 6. Bloch PH. Seeking the ideal form—Product design and consumer response. Journal of Marketing. 1995;59:16-29
  7. 7. Bloch PH, Brunel FF, Arnold TJ. Individual differences in the centrality of visual product aesthetics: Concept and measurement. Journal of Consumer Research. 2003;29:551-565
  8. 8. Burmester M, Platz A, Rudolph U, Wild B. Aesthetic design—Just an add on. In: Bullinger H-J, Ziegler J, editors. Human Computer Interaction: Ergonomics and User Interfaces. Mahwah, NJ: Lawrence Erlbaum; 1999. pp. 671-675
  9. 9. Desmet P, Hekkert P. The basis of product emotions. In: Green W, Jordan P, editors. Pleasure with Products, Beyond Usability. London: Taylor and Francis; 2002
  10. 10. Schiphorst T. soft(n): Toward a somaesthetics of touch. In: ACM CHI EA ‘09 Extended Abstracts on Human Factors in Computing Systems; Boston, MA, USA; 4-9 April 2009. pp. 2427-2438
  11. 11. Attfield S, Kazai G, Lalmas M, Piwowarski P. Towards a science of user engagement. In: ACM WSDM’11, Workshop on User Modelling for Web Applications; Hong Kong, China; 9-12 February 2011. pp. (n.d.)
  12. 12. Mahlke S. User Experience of Interaction with Technical Systems. Berlin, Germany: The Technishe Universität; 2008
  13. 13. Hassenzahl M, Tractinsky N. User experience—A research agenda. Behaviour & Information Technology. 2006;25:91-97
  14. 14. Hassenzahl M. The thing and I: Understanding the relationship between user and product; 2003
  15. 15. Hassenzahl M. The effect of perceived hedonic quality on product appealingness. International Journal of Human Computer Interaction. 2001;13(4):481-499
  16. 16. Van Schaika P, Ling J. Modelling user experience with web sites: Usability, hedonic value, beauty and goodness. Interacting with Computers. 2008;20(3):419-432
  17. 17. Hassenzahl M, Hedonic H. Emotional, and experimental perspectives on product quality. In: Ghaoui C, editor. Encyclopedia of Human Computer Interaction. London: Idea Group; 2006. pp. 266-272
  18. 18. Hassenzahl M. Aesthetics in interactive products: Correlates and consequences of beauty. In: Schifferstein HNJ, Hekkert P, editors. Product Experience. Amsterdam: Elsevier; 2007
  19. 19. Webster J, Ho H. Audience engagement in multimedia presentations. In: ACM SIGMIS Database: The DATABASE for Advances in Information Systems. Vol. 28, no. 2, 1 Apr 2009. pp. 63-77
  20. 20. Sutcliffe A. Designing for user engagement: Aesthetic and attractive user interfaces. Synthesis Lectures on Human-Centered Informatics. Jan 2009;2(1):1-55
  21. 21. O’Brien HL, Toms EG. What is user engagement? A conceptual framework for defining user engagement with technology. Journal of the American Society for Information Science and Technology. Apr 2008;59(6):938-955
  22. 22. Jacques RD. The Nature of Engagement and its Role in Hypermedia Evaluation and Design. London: South Bank University; 1996
  23. 23. Quesenbery W. Dimensions of usability: Defining the conversation, driving the process. In: Proceedings of the UPA 2003 Conference; Scottsdale, AZ; 23-27 June 2003
  24. 24. Laurel B. Computers as Theatre. MA, USA: Addison-Wesley; 1993. pp. 1-3
  25. 25. Stephen EP, Karen BS, Jonathan S. Visual aesthetics and human preference. Annual Review of Psychology. 2012. DOI: 10.1146/annurev-psych-120710-100504
  26. 26. Hassenzahl M, Ullrich D. To do or not to do: Differences in user experience and retrospective judgments depending on the presence or absence of instrumental goals. Interacting with Computers. 2007;19:429-437

Written By

Fatima Isiaka

Submitted: 15 May 2019 Reviewed: 13 September 2019 Published: 07 January 2021