Abstract
In this paper we present an empirical study among 40 participants which investigates the relationship between various factors of user interface aesthetics on the one hand, and the influence of the user interface attributes, symmetry, colorfulness as well as visual complexity on user interface aesthetics on the other hand. The user interface aesthetics will be classified in intuitive aesthetics (1st impression with a presentation time of 500 ms) and reflective aesthetics (reflective long-term impression after a longer presentation). Reflective aesthetics is further classified in classical aesthetics (common attractiveness) as well as expressive aesthetics (creativity). For this study we have set up a corpus of 30 websites which are used as stimulus material. In a multi-step lab experiment, participants rate aesthetics and their subjective impression concerning user interface attributes using questionnaires. We are able to show that the intuitive aesthetic judgment correlates strongly with the reflective judgment. The symmetry of a website positively correlates with all definitions of aesthetics, especially with the classical or traditional interpretation in the sense of attractiveness. Visual complexity can be seen as the strongest predictor for the aesthetic judgement of users and it negatively correlates with all definitions. Concerning colorfulness, a preference for websites of a medium degree of colorfulness for the intuitive as well as the classical aesthetics can be stated. Concerning expressive aesthetics, websites of moderate to high colorfulness receive the best judgments. The relationships which we have found are finally discussed in the context of previous research and some implications for future user interface design are given.
1 Introduction
Aesthetics of user interfaces (UI) gains importance in human computer interaction (HCI). In most cases, aesthetics will be set equivalent with subjective attractiveness of the user interface in HCI [31], [32]. Aesthetics has a positive influence on important factors in HCI (see Chapter 2). However, recommendations for the design of aesthetic user interfaces are in most cases quite informal and have rarely been the subject of scientific investigations. In order to be able to formulate empirically valid recommendations for the aesthetic design of user interfaces, various attributes of user interfaces have been identified in empirical studies, which carry a relationship with aesthetics. Relevant predictors can be symmetry [27], the colorfulness or variety of colors [20], [25] as well as the visual complexity [3], [4], [20], [24], [36] of a user interface.
In this study, these relationships will be investigated from different perspectives. This is given by classifying aesthetics in intuitive as well as reflective aesthetics. The intuitive aesthetic influence of the user interface is seen as a spontaneous reaction on the aesthetics after 500 ms (first impression). Reflective aesthetics is seen as a reflected reaction after a longer viewing of a user interface. Going along with a taxonomy developed by Lavie and Tractinsky [15], reflective aesthetics will further be classified in classical or traditional and expressive aesthetics. The classical aesthetics is equivalent – according to this taxonomy – with the common concept of attractiveness, while expressive aesthetics comprises creativity as well as expressiveness of a user interface. In this study we look at how these aesthetics variables interact among each other as well as with the user interface attributes introduced above. We would like to generate specific and empirically validated recommendations for the design of user interfaces. At the same time, we want to learn more about the working of aesthetics in the context of user interfaces. Thus, we also want to contribute to the modeling and development of computer-based prediction of user interface aesthetics [20], [24].
2 Related Work
The concepts of aesthetics have been discussed in various disciplines and have been defined, for example, in philosophy [5], [14], in psychology [10], in information aesthetics [6], in evolutionary biology [8] and in the neurosciences [40].
2.1 Aesthetics in Human Computer Interaction
In human computer interaction aesthetics has often be interpreted in quite pragmatic ways and in everyday language terms as the subjective attractiveness and visual beauty of a user interface as seen from the users’ perspective [31]. The aesthetics of user interface has been shown to have an influence on important factors in human computer interaction: studies showed that an aesthetically designed user interface leads to a higher, subjective recognition of usability [31], [34]. Moshagen, Musch & Göritz [21] could show an additional positive influence with respect to objective usability metrics like error rate or task completion time for more attractive user interfaces. In a literature analysis, Thielsch [29] elaborated that in most cases aesthetics has a positive influence on actual performance when users have to perform tasks with a user interface. Attractive user interfaces also lead to a more positive emotional state (e. g. users feel more happy and delighted) [26], as well as to a higher enjoyment [37] during usage. More abstract factors, which are also influenced by user interface aesthetics are credibility [1], trust [16] or the intention to buy something in the case of e-commerce applications [11].
In order to formulate empirically founded design recommendations based on various experimental studies, several attributes of user interfaces have been identified which have an influence on aesthetics. Symmetry, colorfulness as well as visual complexity will be examined as influence factors for aesthetic cognition in this study. In the following, we discuss research on these three factors in the context of UI aesthetics in more detail. However, we will not formulate a clear definition of these UI factors, since we are rather interested in perceived symmetry, colorfulness, and visual complexity as seen from the users’ perspective. In this study, we also want to examine how users perceive these abstract concepts and which UI characteristics they associate with different degrees of these UI factors. We will discuss this point of view in more detail in chapter 3.1. Results concerning how users perceive these UI attributes according to our data are presented in chapter 5.2.
2.2 Symmetry
Bauerly and Liu [3], [4] showed for abstract as well as for concrete website-oriented stimuli a positive influence of axis symmetry on attractiveness ratings. Zheng et al. [41] proved for real websites that symmetry correlates with judgments which rate websites as compelling and attractive. Tuch, Bargas-Avila & Opwis [35] manipulated the symmetry of websites by hand and showed that a positive effect on intuitive, classical, as well as expressive aesthetics can be reached. Seckler and Tuch [27] were able to show that there is a strong positive influence of bilateral symmetry on categories of the aesthetics questionnaire VisAWI [22]. Miniukovich and De Angeli [20] used symmetry in their algorithmic prediction model for user interface aesthetics. They also show that there is a positive correlation of symmetry with aesthetics ratings.
2.3 Colorfulness
In human computer interaction, the influence of colors and the influence of colorfulness on aesthetic cognition has rarely been looked at. Textbooks give informal recommendations for using colors [30, pp. 160–213]. In empirical HCI research, color perception or the perception of color combinations has been investigated with respect to differences between different user groups. Especially the influence of cultural backgrounds [2], [7], [24] and the influence of sex [23], [24] have been pointed out. Seckler and Tuch [27] were able to show that there is an influence of hue, luminance and saturation on the judgment of aesthetic design. Colorfulness as an influence factor in human computer interaction can be found when aesthetic perception is operationalized using questionnaires [15], [22] and in models for algorithmic prediction of user interface aesthetics [20], [24]. In both cases [20], [24], complex algorithms based on color metrics were developed to predict the aesthetics of user interfaces. Put in a simplified way, these algorithms are based on the number of different colors and the intensity of these colors. Reinecke and Gajos [24] were able to show that the user interface attribute colorfulness follows an inverted U-shape concerning judgments of aesthetics for their colorfulness algorithms. This means that websites of a medium degree of colorfulness were perceived as most attractive.
2.4 Visual complexity
As the third and final user interface attribute, visual complexity has also been investigated in this study. Harper, Michailidou and Stevens [13] approached a user centered definition of visual complexity using qualitative methods. Following their results, both, quantity of elements as well as diversity of information constitute visual complexity of websites in the users’ perspective. The relationship of these or similar concepts and aesthetics have been analyzed in various studies: The number of elements in a user interface is an important aspect of visual complexity and it has been shown that it also influences aesthetic judgment. Bauerly and Liu [3] gave a linear negative relationship for abstract stimuli and, in a follow-up study, gave an inverted U-shape [4]. Michailidou, Harper and Bechhofer [19] confirmed a negative linear relationship for the number of elements on real websites. Tuch at al. [36] showed in an empirical study that there is a large negative influence of visual complexity on aesthetic judgments of website stimuli for presentation times as short as up to 17 ms. Harper et al. [12] as well as Wu, Hu and Shi [39] developed a primarily quantitatively oriented algorithm which predicts visual complexity of websites on the basis of the number of elements. They were able to successfully validate this predictive algorithm. In a similar fashion, Reinecke and Gajos [24] tried to algorithmically calculate visual complexity. They could show with their metrics that there is a relationship of an inverted U-shape with aesthetics ratings. Miniukovich and De Angeli [20] were able to explain 49 % of the variance of aesthetic’s ratings with their metrics of visual complexity. Overall, it is still unclear, if users prefer low or moderately visual complex UIs concerning the aesthetics.
2.5 The Temporal Dimension in Aesthetics Perception
Studies looking at the temporal dimension of aesthetics perception have demonstrated that the intuitive and immediate aesthetic impression of user interfaces has great importance. Lindgaard, Fernandes, Dudek and Brown [18] showed that users construct a consistent aesthetic judgment within the first 50 ms, which will not be different from judgments based upon much longer presentation times for a user interface. Tractinsky et al. [33] were able to replicate these results when comparing presentation times of 500 ms (short term) and 10 seconds (long term). Lindgaard et al. [18] assumed that there is a strong halo-effect of aesthetics, which manifests itself by the user at a very early point in time during user interface usage. Following this hypothesis, Lindgaard et al. [17] could elaborate that there is an influence of earlier aesthetic judgments on users’ perceived trust and usability. These results have led to a more differentiated analysis of aesthetic ratings in various studies by using different presentation times [20], [28]. By using a short presentation time for UIs, the influence of content and other factors will be limited as they cannot be recognized as fast as basic aesthetic parameters [25], [41] which further validates results concerning aesthetics.
3 Research Questions
3.1 Variables and Research Objects
In order to gain a more differentiated insight into the influence of UI aesthetics, we classify it as intuitive, classical, and expressive aesthetics. Intuitive aesthetics is understood as the first and immediate aesthetic judgment of a user interface (in our case, after 500 ms presentation time). The reflective aesthetic judgment follows the taxonomy of Lavie and Tractinsky [15] – they suggest a classification of aesthetics in two categories: classical aesthetics as well as expressive aesthetics. Classical aesthetics is defined as the attractiveness and visual beauty of an UI. Expressive aesthetics refers to aesthetic creativity, expressiveness and innovativeness of a user interface. We describe the specific operationalization of these concepts in further detail in Chapter 4. Using this taxonomy, all questions can be looked at with sufficient degree of detail. Especially research on expressive aesthetics is rare so far.
We have chosen websites as stimuli and as UI examples. Websites are easy to acquire and many similar studies use the same type of stimulus [24], [19], [20], [27], [28], [35], [36] which facilitates comparisons.
In order to define the concept of symmetry, colorfulness and visual complexity we refer to Edmonds [9]. Edmonds maintained that complexity only makes sense as a concept which is understood in relationship to a subjective user. In this study, this argumentation will be transferred to colorfulness and symmetry as well. This means that we do not make use of an objective definition and valuation of user interface attributes. The interpretation of the concepts as well as the judgment for the respective feature values will be completely left to the user and her and his subjective judgment. Symmetry, colorfulness as well as visual complexity of websites were operationalized as the users’ subjective judgment with respect to these attributes (see ch. 4 for further details). The UI attributes of the websites were operationalized in this study as an interpretation of an attribute relative to subjective observers, i. e. the participants of our study. Thus, we used subjective, not objective judgments. This type of operationalization using subjective judgments of participants is often employed in similar studies on aesthetics [3], [4], [36]. In studies on algorithmic prediction of these metrics, subjective judgments by users are used as a benchmark as well [25] which can be seen as an additional argument in favor of our approach.
3.2 Hypotheses
Based on these variables and derived from the literature hypotheses have been set up, which shall be answered in this study. The hypotheses of the study are formulated as collective hypotheses and will be accepted or repudiated based on the variable values for aesthetics.
H1: There is a positive relationship between intuitive aesthetic judgment and reflective aesthetic judgment concerning [classical aesthetics | expressive aesthetics].
This hypothesis is formulated as a direct positive relationship as current research suggests this correlation. Van Schaik and Ling [38] as well as Lindgaard et al. [17], [18] have been able to show that the judgment of very short presentation times correlates strongly with judgments which are based on much longer presentation times. However, for the specific taxonomy chosen here, including classical and expressive aesthetics, Tractinsky et al. [33] were not able to show that there is a consistent and significant relationship. These results shall be revalidated in this study.
With hypothesis H2–H5 the influence of UI Attributes on different aesthetics variables shall be examined.
H2: There is a positive relationship between the [intuitive aesthetic judgment | (reflective) classical aesthetics | expressive aesthetics] and the symmetry of websites.
Tuch et al. [35] showed this relationship for intuitive aesthetics, although they do not control the temporal aspect. They just advised users for one round of judgments to make an intuitive visceral decision without actually controlling the presentation time of stimuli. In this study we wanted to overcome this disadvantage regarding the temporal dimension by setting a restriction for the time to judge intuitive aesthetics to 500 ms. For classical/traditional aesthetics Tuch et al. [35] showed a strong relationship. The influence of symmetry on concepts which are analogous to traditional aesthetics has already been discussed (see chapter 2.2). For expressive aesthetics Tuch et al. [35] identified a positive relation as well. With this hypothesis, the relationships mentioned above shall be re-evaluated with slight methodical adaptations.
H3: There is a negative relationship between the [intuitive aesthetic judgment | (reflective) classical aesthetics | expressive aesthetics] and the colorfulness of websites.
In studies on algorithmic prediction, diverging relationships regarding colorfulness have been identified. Some findings suggested a negative linear relationship [20], [25]. However, Reinecke and Gajos [24] showed that there is a preference for user interfaces of average colorfulness. This kind of relationship has been referred to as an inverted U-shape. A study which examines colorfulness in the context of the taxonomy of classical and expressive aesthetics as given above is not known to the authors. Results presented by Lavie and Tractinsky [15] suggest that there is a special relationship between colorfulness and expressive aesthetics which runs against the formulated hypotheses. In a first step, these hypotheses shall be used to analyze a linear relation. Given the results of Reinecke and Gajos [24], we performed – independent from the formulated hypotheses – an additional test for the inverted U-shape using group-based comparisons of means (ANOVA). This shall help in clarifying the exact type of relationship given here.
H4: There is a negative relationship between the [intuitive aesthetic judgment | (reflective) classical aesthetics | expressive aesthetics] and the visual complexity of websites.
The hypotheses of H4 have a negative direction given research so far. For traditional interpretations of attractiveness this relationship has been already shown in empirical studies (see Chapter 2.4). Especially for very short presentation times the negative influence of visual complexity is strong [36]. Just as for colorfulness diverging results with respect to the precise relationship between aesthetics and visual complexity may be found which has in some studies been described as a linear relationship [3], [20], [25]. Other studies describe this relationship again as an inverted U-shape [4], [19], [24]. For this reason, this variable was analyzed using a group-based comparison of means as well, thus going beyond the formulation of the hypotheses. With respect to the difference between classical and expressive aesthetics, H4 has rarely been looked at in research so far. Against the formulation of the hypotheses H4 given above, Michailidou et al. [19] have been able to show that more complex pages make a “more interesting” impression. The concept “interesting” is quite close to the concept of expressive aesthetics. In this study, this relationship was looked upon directly.
Besides the statistical analyses, experts have looked at the different websites with regard to the users’ judgements for the different UI attributes. The aim in doing so was to get an impression of how websites are perceived from the users’ perspective with regard to the UI attributes and whether patterns can be recognized. We wanted to analyze which specific UI characteristic are associated with the varying degrees of the UI factors in the eye of the users. We refer to this process as website corpus analysis. The insights gained are used together with the results of the statistical analysis in order to develop empirically founded design recommendation for aesthetic UI design. The method as well as the results are described in Chapter 5.2.
4 Study Design
The following sections describe how our corpus of websites has been developed. At the same time, we give information on our study design.
4.1 Website Corpus
Examples from the website corpus.
Our corpus of websites is made up of 30 screenshots of homepages of different websites. These stimuli have been collected in a multi-step procedure, which has been performed by three experts. The experts were graduate students in the media informatics M. Sc. degree program at Regensburg University. All three of them have expertise in the area of aesthetics research in human computer interaction. In a first phase each expert, independently from each other, selected around thirty screenshots of homepages of different websites. The websites were selected from different sources, their content had to be written in English and should not contain animations or other dynamic elements. In addition, the websites selected shouldn’t be too well-known, which was verified by traffic analysis. In order to answer the research questions in an adequate way, the experts took care that in their selection a high variance in the values for attractiveness, symmetry, colorfulness as well as visual complexity was present. In a second step each website was judged independently by the experts using a three-valued scale for attractiveness (high, moderate, low attractiveness). For the final round of selection only websites were accepted for which the three experts had a consistent aesthetic judgment. Finally, the websites for the experiments were selected in a discussion of the experts, again paying attention to achieving a proper distribution of the different manifestations of attractiveness, symmetry, colorfulness and visual complexity. The websites chosen represent actual homepages without further editing, which ensures the ecological validity of our stimuli. We hope that this decision will render an added value to existing research for hypotheses which have already been examined using different procedures like the manipulation of websites by hand [28], [35], [36].
The final corpus consists of 30 screenshots with a resolution of 1920×1080 pixels in 32 bit color depth. All stimuli are given as PNG-files. Following the experts’ judgment, the corpus consists of 10 unattractive, 10 neutral, as well as 10 attractive websites. The following figure shows two examples from our corpus. The left website is an example of an unattractive website, the right hand website shows an attractive website as judged by the experts. The later analyses also shows that the left hand website is very asymmetric, colorful as well as visually complex, while the right hand website is symmetric, achromatic as well as not visually complex. It is important to note that the attractiveness ratings of the experts were not further used in this study. The actual operationalization of the variables for the aesthetics is described in the next chapter.
Visualization of the test sequence for one single stimulus.
Visual analog scale for giving aesthetic judgments using a slider (0.00 ugly–1.00 beautiful).
4.2 Test Procedures
The actual test consisted of multiple phases: After a short introduction, test persons were instructed concerning test procedures and a declaration of acceptance that data gained during the test may be used for research purposes was signed. The test persons sat in front of a laptop for performing the test phases. The test supervisor guided the test persons step-by-step during the experiment and answered questions but refrained from interrupting test persons during critical phases of the experiments.
4.2.1 Phase 1 – Intuitive Aesthetics
In the first phase each participant was randomly shown each screenshot for 500 ms. By using this temporal limitation, the intuitive impression of the website can be registered. This temporal dimension is often used for measuring intuitive aesthetic impression [18], [20], [24], [25], [34]. A common masking procedure was used: for each stimulus a fixation cross was shown for one second, then the stimulus (the homepage) was shown for 500 ms and finally, a so called mask was shown for another 500 ms. The mask consisted of a random arrangement of black-and-white pixels (see Figure 2). This procedure is quite common in this kind of research (see [36]) to precisely control the presentation time of the screenshot. After the mask has been presented, participants judged the intuitive aesthetic impression on a visual analog-scale (VAS, see Figure 3). This scale ranges from ugly (0.00) to beautiful (1.00) and has 100 different values. Because users expressed their value using a slider, this kind of scale is very apt for intuitive and visceral judgments. Participants could take as much time as they wanted for providing their rating which means that they were able to reposition the slider as often as they wanted, while the actual numerical value of the judgment was not shown so users chose their ratings more intuitively and visceral. The value in this scale represents the variable for the intuitive aesthetics of a website. The whole procedure was trained in a training phase for five randomly selected websites which are not part of the corpus and each participant had to perform this training first. This first phase was realized with the open-source software Psychopy (http://www.psychopy.org/).
Descriptive statistics for all aesthetics variables.
| mean | median | minimum | maximum | standard deviation | variance | |
| intuitive aesthetics | 0.494 | 0.51 | 0.00 | 1.00 | 0.252 | 0.063 |
| classical aesthetics | 4.029 | 4 | 1 | 7 | 1.711 | 2.929 |
| expressive aesthetics | 3.465 | 3.33 | 1 | 7 | 1.554 | 2.416 |
4.2.2 Phase 2 – Reflective Aesthetics and UI Attributes
In the second phase, the variables for reflective aesthetics were collected. Each participant had to answer questions concerning each website using a paper-based questionnaire. Participants could look at the websites as long as they wanted while filling out the questionnaire lying in front of them. Again, websites were presented in a random order. Participants could choose for themselves when to switch to the next website stimulus. For each website participants received a new questionnaire.
Following Lavie and Tractinsky [15], reflective aesthetics is classified in classical as well as expressive aesthetics. Just like Tuch et al. [35], we also have employed the shortened version of the questionnaire given by Tractinsky et al. [34]. The questionnaire consists of three statements for both dimension each. Participants had to state their level of agreement for each statement. For classical aesthetics the three statements are: The website has a clean/pleasant/aesthetic design. For expressive aesthetics the three statements are: The website has a sophisticated/creative/fascinating design. The statements were translated into German and reformulated to improve the understanding in German. Each statement was rated using a seven item Likert-scale ranging from one (I do not agree at all) to seven (I perfectly agree). The judgments for the statements concerning classical as well as expressive aesthetics were summed up, and an average was calculated. These average values will be used for the variables representing classical and expressive aesthetics in the following.
In addition to these questions, all participants were asked to judge the aesthetic attributes symmetry, colorfulness as well as visual complexity. For each of these three attributes participants used a nine-point scale ranging from one (asymmetric/not colorful at all/not visually complex at all) to nine (symmetric/very colorful/very visually complex) to judge the statement “The website is …”. Each of the statements discussed above maps the variables for the different UI attributes on a numerical value ranging from 1 to 9. The entire test took 45 minutes on average.
Descriptive statistics for all UI attributes.
| mean | median | minimum | maximum | standard deviation | variance | |
| symmetry | 5.25 | 5 | 1 | 9 | 2.262 | 5.116 |
| colorfulness | 5.2 | 5 | 1 | 9 | 2.146 | 4.604 |
| visual complexity | 5.23 | 5 | 1 | 9 | 2.159 | 4.663 |
4.3 Sample
40 persons took part in this study. The age range starts with 15 and ends with 52 years (
Examples of a very symmetrical and a very asymmetrical website.
5 Results
In the next two sections we present the main results of our study. Every participant rated all of the 30 Websites. Therefore, we collected altogether 1200 ratings concerning aesthetics and UI attributes. First, we report some basic descriptive statistics for all important variables. Second, we test the hypotheses and carry out further statistical analysis to identify special relationships between variables. All analyses have been done using the IBM SPSS statistics software.
5.1 Descriptive Statistics
Tables 1 and 2 show measures of central tendency and measures of dispersion for all variables of aesthetics.
The means and medians of all variables reside exactly or close to the middle of the scale. The measures of dispersion point to an appropriate and evenly distribution concerning the participants’ judgements of the aesthetics of the websites. It can be shown that the website corpus consists of ugly, moderately beautiful and very beautiful websites in equal measure. This legitimizes the construction of the corpus by the experts (see chapter 4.1) and ensures the usefulness of the corpus for the proposed research questions and research methods.
Table 2 displays descriptive statistics for the judgements concerning the manifestations of the UI attributes of the websites.
Similar to the aesthetics variables the measures of central tendency and dispersion show that the corpus consists of websites with varying degrees of symmetry, colorfulness and visual complexity and is therefore suitable to address the hypotheses and research questions.
5.2 Website Corpus Analysis
To formulate specific design recommendations for web design based on our data it was necessary to understand how users perceive different degrees of the UI attributes and which specific UI characteristics they associate with varying degrees of these abstract concepts. With this information we can describe, for example, how more or less symmetrical/colorful/visual complex websites have to look like concerning the actual design and, furthermore, based on the results of our statistical analysis, how websites have to look to be perceived as attractive. To gain these insights we carried out an in-depth analysis of the website corpus and the judgments for the UI attributes. For every UI attribute we calculated the means for all single websites. With this means we developed ordered website-rankings for all UI attributes to precisely identify which websites are on average perceived as more or less symmetrical, colorful or visual complex. For every category we collected the 10 extremes of every scale, e. g. the 10 most symmetrical and the 10 most asymmetrical websites. These websites where analyzed during a group discussion by three experts (see chapter 4.1 above). Adjectives as well as more complex descriptions were collected to describe the constitution and reoccurring design-patterns of the different websites-clusters. In the following sections some informative examples of websites of the corpus are given and design patterns informally summarized.
On the left side of Figure 4 the most symmetrical website of the corpus, according to the test persons’ ratings is shown (
Examples of a very colorful and a very achromatic website.
The two examples in Figure 5 represent two extremes for colorfulness, on the left side a very colorful homepage (
Examples of very visual complex and a non-complex website.
For the last UI attribute, the left screenshot in Figure 6 shows a very visually complex website (
5.3 Inference Statistics
All hypotheses were tested using Spearman’s rank correlation coefficient (Spearman’s Rho). Since Spearman’s Rho tests specifically for linear relationships we carried out some further data analysis to find deviations from linear relationships. Based on the research, we performed this analysis for the variables colorfulness and visual complexity (H3, H4) to identify relationships that follow an inverted U-shape more so than a linear relationship. Therefore, we were able to get a more detailed understanding of several relationships. The data concerning these variables was transformed to carry out a one factor analysis of variance (ANOVA). The ordinal values for colorfulness and visual complexity have been nominalized using three values. As a nine-value scale has been used in the experiment, for both variables nominal groups with low, medium, and high colorfulness/visual complexity were constructed (values 1–3: low, 4–6: medium, 7–9: high). Thus, a one factor analysis of variance using the aesthetics variables as the independent variables was performed in order to compare these three degrees of colorfulness and visual complexity. For post hoc comparisons, the Tukey HSD test was used.
Note that we analyzed all three UI Attributes and all three aesthetics variables separately without paying attention to possible Interactions. We discuss this potential deficit in chapter 6.
5.3.1 H1: Relationship Between Intuitive and Reflective Aesthetics
The rank correlation coefficient rho shows a significant relationship for classical as well as expressive aesthetics with the intuitive aesthetic judgment (
5.3.2 H2: Relationship Between Aesthetics and Symmetry
Table 3 summarizes the correlation results for H2.
Correlations between aesthetics and symmetry.
| Attribute pairs | r | p |
| Intuitive aesthetics – symmetry | 0.225 | <0.001 |
| Traditional aesthetics – symmetry | 0.442 | <0.001 |
| Expressive aesthetics – symmetry | 0.258 | <0.001 |
The subjective symmetry of the websites correlates positively as well as significantly with all aesthetic variables, in different degrees (for all correlations
5.3.3 H4: Relationship Between Aesthetics and Colorfulness
Correlations between aesthetics and colorfulness.
| Attribute pairs | r | p |
| Intuitive aesthetics – colorfulness | −0.114 | <0.001 |
| Traditional aesthetics – colorfulness | −0.127 | <0.001 |
| Expressive aesthetics – colorfulness | 0.168 | <0.001 |
Using Spearman’s Rho, weak negative but significant correlations between colorfulness and intuitive (
In addition, the different relationships have been further analyzed with a one factor analysis of variance using the groups of low/medium/high colorfulness for an in-depth analysis of the precise type of the relationship. The results of the tests as well as descriptive statistics concerning the aesthetic judgements under the different conditions of colorfulness are reported in Table 5.
Descriptive Statistics of aesthetic judgements for degrees of colorfulness and results of analysis of variance (**
| Aesthetic variable | Degree of colorfulness | Mean | Standard deviation | 95 % Confidence interval for mean | Results of analysis of variance [F (2, 1197)] | |
|
|
||||||
| Lower bound | Upper bound | |||||
| Intuitive aesthetics | low | 0.494 | 0.25 | 0.467 | 0.522 | 16.725** |
| medium | 0.531 | 0.23 | 0.512 | 0.55 | ||
| high | 0.432 | 0.286 | 0.402 | 0.461 | ||
| Classical aesthetics | low | 4.049 | 0.991 | 3.854 | 4.244 | 16.313** |
| medium | 4.276 | 0.067 | 4.407 | 4.407 | ||
| high | 3.609 | 0.099 | 3.414 | 3.805 | ||
| Expressive aesthetics | low | 3.013 | 0.084 | 2.848 | 3.18 | 19.302** |
| medium | 3.57 | 0.062 | 3.447 | 3.692 | ||
| high | 3.713 | 0.091 | 3.534 | 3.892 | ||
The ANOVA shows a significant effect of the degree of colorfulness on all three of the aesthetic judgements (
Line graph – mean values of intuitive aesthetics ratings per degree of colorfulness.
Interpreting the graph, the relationship points to a slight inverted U-shape. The best aesthetic judgment with regard to intuitive aesthetics is given for websites of medium colorfulness (
A similar constellation is given for classical aesthetics. The graph for classical aesthetics follows the same shape as for expressive aesthetics: websites of medium (
Judgments for expressive aesthetics give different relationships using one factor analysis of variance when compared with the other aesthetics variables. The weak positive correlation is reaffirmed. Websites with a high colorfulness (
5.3.4 H4: Relationship Between Aesthetics and Visual Complexity
For the perceived visual complexity, negative and highly significant relationships are given for all three definitions of aesthetics (for all correlations
Correlations between aesthetics and visual complexity.
| Attribute pairs | r | p |
| Intuitive aesthetics – visual complexity | −0.338 | <0.001 |
| Classical aesthetics – visual complexity | −0.458 | <0.001 |
| Expressive aesthetics – visual complexity | −0.147 | <0.001 |
Descriptive Statistics of aesthetic judgements for degrees of visual complexity and results of analysis of variance (**
| Aesthetic variable | Degree of visual complexity | Mean | Standard deviation | 95 % Confidence interval for mean | Results of analysis of variance [F (2, 1197)] | |
|
|
||||||
| Lower bound | Upper bound | |||||
| Intuitive aesthetics | low | 0.583 | 0.239 | 0.557 | 0.61 | 64.048** |
| medium | 0.518 | 0.227 | 0.499 | 0.538 | ||
| high | 0.384 | 0.256 | 0.358 | 0.410 | ||
| Classical aesthetics | low | 4.845 | 1.648 | 4.663 | 5.028 | 137.647** |
| medium | 4.291 | 1.409 | 4.169 | 4.415 | ||
| high | 2.983 | 1.628 | 2.818 | 3.148 | ||
| Expressive aesthetics | low | 3.613 | 1.572 | 3.439 | 3.787 | 14.550** |
| medium | 3.634 | 1.428 | 3.510 | 3.759 | ||
| high | 3.110 | 1.646 | 2.943 | 3.277 | ||
Similar to colorfulness we performed a one factor analysis of variance for groups of low/medium/high visual complexity concerning the aesthetics variables. The measures of central tendency and dispersion of the three complexity groups as well as the results of the ANOVAs are presented in Table 7.
All three tests show that there is a significant effect of visual complexity on the different aesthetic judgements (
Line graph – mean values of expressive aesthetics ratings per degree of visual complexity.
For expressive aesthetics it is shown that websites of medium complexity (
6 Discussion
In interpreting the results, some limitations of this study have to be addressed. We have a fairly small sample for generating universal statements. At the same time, the sample is quite homogeneous as students make up the majority of study participants. In a similar fashion, the size of the website corpus may be criticized. Future studies could employ a larger and more diverse sample as well as more websites in the corpus in order to come to results that are more valid and/or expressive. Additionally, it should be noted that we have analyzed all UI attributes and the influence on the different aesthetics variables separately and neglected potential interactions. This most certainly doesn’t reflect the reality of the websites since every website consists of all the UI attributes in different degrees and complex interactions between those attributes and influences on the different aesthetic perceptions are probable. The analysis of more sophisticated interdependencies of the individual UI attributes with each other and aesthetics can be focused in future research.
We were able to show that the first intuitive impression strongly correlates with the reflective judgment for classical as well as expressive aesthetics. A good or positive first aesthetic impression is of high importance for the later judgment of attractiveness as well as of the aesthetic creativity. Aesthetic judgments remain fairly stable when short time (500 ms) and long-term presentation are compared independently from the different aesthetic definitions. Another remarkable fact is that all aesthetic variables strongly correlate with each other. This means that a specific design recommendation differentiating between good values for classical or expressive aesthetics does not appear to make a lot of sense. Pages which are judged as being highly aesthetic are in most cases also judged as creative, and vice versa. Based on the proven importance of intuitive aesthetics for the later aesthetic impressions, we recommend to have a close look at the relationships between UI attributes and in particular intuitive aesthetics.
The positive influence of symmetrical UI design on the first impression as well as on reflective aesthetics was reconfirmed and is in line with research so far [35]. This relationship is strongest for classical aesthetics. For the first impression the relationship is much weaker. Based upon the data of our study the influence of symmetry only unfolds considerably when stimuli are presented long term. For expressive aesthetics the same positive relation is present, but much weaker. After analyzing the design of websites which have been judged as highly symmetric, we are able to identify that the user’s interpretation of symmetry can be seen as axial symmetry concerning the element layout on the website. Designers who aim specifically at traditional or classical aesthetics (common attractiveness) should care especially for this aspect of their design.
Weak linear correlations between aesthetic variables and the colorfulness of websites have been identified. The relationship is weak and negative for intuitive and classical aesthetics and positive for expressive aesthetics. The comparison of means yields a better picture of this relationship: for intuitive as well as for classical aesthetics, a preference for homepages of medium and low colorfulness is given. This relationship follows – analogous to [24] – an inverted U-shape with a special dislike for stimuli of high colorfulness. However, the inverted U-shape is not very distinct according to our data. Websites of low and medium colorfulness yield similar positive ratings. Again, the subjective interpretation of colorfulness by the test persons was looked upon by analyzing pages which had been judged as very colorful and very achromatic. From this analysis, we recommend designers who aim at high values for intuitive and classical aesthetics that they should employ a moderate number of colors only, and should at the same time avoid blaring and loud colors. Note that the same relationship cannot be assumed for expressive aesthetics. For this definition of aesthetics, it could be shown that very colorful and moderately colorful pages receive the best judgments. If designers aim at creating explicitly creative and innovative pages, a much higher level of colorfulness can be recommended. However, given the strong influence of intuitive and traditional aesthetics on UI usage, a moderate usage of colors is recommended as well. Nevertheless, colorfulness was the only user interface attribute that indicated nonlinear relations with intuitive and classical aesthetics. Further, we could examine that the relationship with expressive aesthetics points to a different shape that’s rather linear and positive. Therefore, the relationship between colorfulness has led to the only rejection of a previously formulated hypothesis of ours. The influence of colorfulness on different forms of user interface aesthetics seems to be more varied and complex. We recommend further research concerning this user interface factor and the relationship with the impression of attractiveness and creativity.
The known strongly negative relationships between visual complexity of a user interface [25], [36] and aesthetics have been reaffirmed in this study. It is the strongest predictor for intuitive and classical aesthetics and analysis of variance does not confirm an inverted U-shape, but states a strong linear relationship and thus a preference for websites which are not visually complex. With regard to the subjective interpretation of visual complexity by the test persons this means that web designers should restrict the number of elements on a page. Small text and images should be employed and distances between elements should be inserted. For expressive aesthetics a weak negative relationship between visual complexity and aesthetics judgments can be shown, in this case, with a slightly inverted U-shape. A preference for websites with low and medium visual complexity can be stated. In general, even for expressive aesthetics, websites with low visual complexity are on average rated as good as websites with medium complexity. This means that a differentiation of design recommendations for classical and expressive aesthetics concerning visual complexity does not make a lot of sense. However, similar to colorfulness, we could identify an increase in the acceptance and preference of more complex stimuli in regard to expressive aesthetics. Designers who aim to achieve an impression of creativity can therefore craft more visual complex and colorful websites.
Summing up, the study shows that by combining qualitative and quantitative methods, we were able to analyze the interaction of aesthetics and UI attributes precisely and formulate a first set of design recommendations for website design based on our empirical findings. Although we only found few data to argue for a differentiation between various aesthetic definitions, we still see benefits for research in gaining a better and more accurate understanding of the perception of UI aesthetics. Especially the concept of expressive aesthetics seemed to produce results that differ from traditional definitions of aesthetics based on the simple concept of attractiveness. The validation of existing models as well as the development of additional ones based on the current state of research are helpful steps for the development of the research area. Furthermore, our selection of UI attributes is rather limited. Future research should analyze the perception and influence of other UI attributes on the aesthetic perception as well as the more complex interaction of these attributes. Other areas that need to be addressed are group-specific aesthetic preferences in UI design (e. g. gender, nationality) as well as research about UI types other than websites.
About the authors
Thomas Schmidt has a Master of Science in media informatics from the University of Regensburg. Since the end of 2017, he is research assistant at the chair of media informatics at the University of Regensburg. His main research interests are sentiment analysis, information behavior, digital humanities, usability engineering and the empirical analysis of aesthetics and UI-Design.
Prof. Dr. Christian Wolff has been professor for media informatics at the University of Regensburg since 2003. After his Ph. D. thesis, in which he designed an interactive retrieval frontend for factual data (1994, University of Regensburg), he worked as an assistant professor at the Computer Science Department of the University of Leipzig from 1994 to 2001. In 2002, he became professor for media informatics at the Chemnitz University of Technology. As an information and computer scientist, he has a long record of research in electronic publishing, information retrieval and HCI. Currently, there is a strong focus on new interaction technologies like eye tracking or multitouch and gestural interaction in his group.
References
[1] Alsudani, F. & Casey, M. (2009). The Effect of Aesthetics on Web Credibility. In: 23rd British HCI Group Annual Conference on People and Computers: Celebrating People and Technology (pp. 512–519). London: British Computer Society.Search in Google Scholar
[2] Barber, W. & Badre, A. (1998). Culturability: The merging of culture and usability. In: Conference on Human Factors and the Web. Retrieved from http://zing.ncsl.nist.gov/hfweb/att4/proceedings/barber/.Search in Google Scholar
[3] Bauerly, M. & Liu, Y. (2006). Computational modeling and experimental investigation of effects of compositional elements on interface and design aesthetics. International Journal of Human-Computer Studies, 64(8), 670–682.Search in Google Scholar
[4] Bauerly, M. & Liu, Y. (2008). Effects of Symmetry and Number of Compositional Elements on Interface and Design Aesthetics. International Journal of Human-Computer Interaction, 24(3), 275–287.Search in Google Scholar
[5] Baumgarten, A. G. (1750/2007). Aesthetica – Ästhetik: Lateinisch-deutsche Ausgabe. Paderborn: Fink, Wilhelm.Search in Google Scholar
[6] Bense, M. (1969). Einführung in die informationstheoretische Ästhetik. Rheinbeck: Rohwohlt.Search in Google Scholar
[7] Cyr, D., Head, M. & 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.Search in Google Scholar
[8] Dutton, D. (2003). Aesthetics and evolutionary psychology. The oxford handbook for aesthetics, 693–705.Search in Google Scholar
[9] Edmonds, B. (1995). What is complexity? The philosophy of complexity per se with application to some examples in evolution. In: Heylighen, F. & Aerts, D. (eds.), The evolution of complexity (pp. 1–18). Dordrecht: Kluwer Academic.Search in Google Scholar
[10] Fechner, G. T. (1860/2011). Elemente der Psychophysik Volume V.1. Berlin: Nabu Press.Search in Google Scholar
[11] Geissler, G. L., Zinkhan, G. M. & Watson, R. T. (2006). The influence of home page complexity on consumer attention, attitudes, and purchase intent. Journal of Advertising, 35(2), 69–80.Search in Google Scholar
[12] Harper, S., Jay, C., Michailidou, E. & Quan, H. (2012). Analysing the Visual Complexity of Web Pages Using Document Structure. Behaviour & Information Technology, 32(5), 491–502.Search in Google Scholar
[13] Harper, S., Michailidou, E. & Stevens, R. (2009). Toward a definition of visual complexity as an implicit measure of cognitive load. ACM Transactions on Applied Perception, 6(2), 1–18. https://doi.org/10.1145/1498700.1498704.Search in Google Scholar
[14] Kant, I. (1790/2015). Kritik der Urteilskraft. Köln: Anaconda Verlag.Search in Google Scholar
[15] Lavie, T. & Tractinsky, N. (2004). Assessing dimensions of perceived visual aesthetics of web sites. International Journal of Human-Computer Studies, 60(3), 269–298.Search in Google Scholar
[16] Li, Y. M. & Yeh, Y. S. (2010). Increasing trust in mobile commerce through design aesthetics. Computers in Human Behavior, 26(4), 673–684.Search in Google Scholar
[17] Lindgaard, G., Dudek, C., Sen, D., Sumegi, L. & Noonan, P. (2011). An Exploration of Relations Between Visual Appeal, Trustworthiness and Perceived Usability of Homepages. ACM Trans. Comput.-Hum. Interact., 18(1), 1:1–1:30.Search in Google Scholar
[18] Lindgaard, G., Fernandes, G., Dudek, C. & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, 25(2), 115–126.Search in Google Scholar
[19] Michailidou, E., Harper, S. & Bechhofer, S. (2008). Visual complexity and aesthetic perception of web pages. In: SIGDOC ’08 Proceedings of the 26th Annual ACM International Conference on Design of Communication (pp. 215–224). New York: ACM.Search in Google Scholar
[20] Miniukovich, A. & De Angeli, A. (2015). Computation of Interface Aesthetics. In: CHI ’15 Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems (pp. 1163–1172). New York: ACM.Search in Google Scholar
[21] Moshagen, M., Musch, J. & Göritz, A. S. (2009). A blessing, not a curse: experimental evidence for beneficial effects of visual aesthetics on performance. Ergonomics, 52(10), 1311–1320.Search in Google Scholar
[22] Moshagen, M. & Thielsch, M. T. (2010). Facets of visual aesthetics. International Journal of Human-Computer Studies, 68, 689–709.Search in Google Scholar
[23] Moss, G., Gunn, R. & Heller, J. (2006). Some men like it black, some women like it pink: Consumer implications of differences in male and female website design. Journal of Consumer Behaviour, 5(4), 328–341.Search in Google Scholar
[24] Reinecke, K. & Gajos, K. Z. (2014). Quantifying Visual Preferences Around the World. In: CHI ’14 Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 11–20). New York: ACM.Search in Google Scholar
[25] Reinecke, K., Yeh, T., Miratrix, L., Mardiko, R., Zhao, Y., Liu, J. & Gajos, K. Z. (2013). Predicting users’ first impressions of website aesthetics with a quantification of perceived visual complexity and colorfulness. In: CHI ’13 Proceedings of the SIGCHI Conference on Human Factorsin Computing Systems (pp. 2049–2058). New York: ACM.Search in Google Scholar
[26] Sauer, J., & Sonderegger, A. (2009). The influence of prototype fidelity and aesthetics of design in usability tests: Effects on user behaviour, subjective evaluation and emotion. Applied Ergonomics, 40(4), 670–677.Search in Google Scholar
[27] Seckler, M. & Tuch, A. N. (2012). Linking objective web-design factors to facets of subjective aesthetic perception. In: Proceedings of the 7th Nordic Conference on Human-Computer Interaction: Making Sense Through Design (pp. 809–810). New York: ACM. https://doi.org/10.1145/2399016.2399159.Search in Google Scholar
[28] Strebe, R. (2016). Aesthetics on the web: effects on approach and avoidance behaviour. Behaviour & Information Technology, 35(1), 4–20.Search in Google Scholar
[29] Thielsch, M. T. (2016). Effekte von ästhetischen Designs auf die User Performance. Mensch und Computer 2016-Tagungsband.Search in Google Scholar
[30] Thissen, F. (2003). Kompendium Screen-Design. Effektiv informieren und kommunizieren mit Multimedia. Berlin: Springer.Search in Google Scholar
[31] Tractinsky, N. (1997). Aesthetics and apparent usability: Empirically assessing cultural and methodological issues. In: Conference on Human Factors in Computing Systems (pp. 115–122).Search in Google Scholar
[32] Tractinsky, N. (2004). Toward the study of aesthetics in information technology. ICIS 2004 Proceedings, Paper 62. Retrieved from http://aisel.aisnet.org/icis2004/62/.Search in Google Scholar
[33] Tractinsky, N., Cokhavi, A., Kirschenbaum, M. & Sharfi, T. (2006). Evaluating the consistency of immediate aesthetic perceptions of web pages. International Journal of Human–Computer Studies, 64, 1071–1083.Search in Google Scholar
[34] Tractinsky, N., Katz, S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145.Search in Google Scholar
[35] Tuch, A. N., Bargas-Avila, J. A., & Opwis, K. (2010). Symmetry and aesthetics in website design: It’s a man’s business. Computers in Human Behavior, 26(6), 1831–1837.Search in Google Scholar
[36] Tuch, A. N., Presslaber, E. E., Stöcklin, M., Opwis, K., & 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(11), 794–811.Search in Google Scholar
[37] Van der Heijden, H. (2003). Factors influencing the usage of websites: The case of a generic portal in The Netherlands. Information and Management, 40(6), 541–549.Search in Google Scholar
[38] Van Schaik, P. & Ling, J. (2009). The role of context in perceptions of the aesthetics of web pages over time. International Journal of Human-Computer Studies, 67(1), 79–89.Search in Google Scholar
[39] Wu, O., Hu, W. & Shi, L. (2013). Measuring the Visual Complexities of Web Pages. ACM Transactions on the Web, 7(1), 1–34. Retrieved from http://dl.acm.org.prx.library.gatech.edu/citation.cfm?id=2435215.2435216.Search in Google Scholar
[40] Zeki, S. (2001). Artistic creativity and the brain. Science, 293(5527), 51–52.Search in Google Scholar
[41] Zheng, X. S., Chakraborty, I., Lin, J. J.-W. & Rauschenberger, R. (2009). Correlating low-level image statistics with users – rapid aesthetic and affective judgments of web pages. In: Proceedings of the 27th International Conference on Human Factors in Computing Systems – CHI 09 (pp. 1–10).Search in Google Scholar
© 2018 Walter de Gruyter GmbH, Berlin/Boston
