Visual aesthetics and the user experience

Abstract

User experience is conceptualized as a phenomenon consisting of instrumental and non-instrumental quality perceptions as well as emotional user reactions. Visual aesthetics is defined as one non-instrumental quality and available methods are applied to measure the perception of visual aesthetics of interactive systems. Selected results of two studies are reported that addressed the influence of perceived usability and visual aesthetics on emotional user reactions and consequences of user experience and studied the effect of user characteristics and contextual parameters on these relations. The results show that usability and visual aesthetics can be perceived independently. Furthermore, the relevance of perceived visual aesthetics for emotional user reactions and consequences of user experience is demonstrated. However, the results reveal that the importance depends on user characteristics, e.g. the centrality of visual product aesthetics, and context parameters, e.g. the goaldirectedness of the interaction. @InProceedings{mahlke:DSP:2008:1624, author = {Sascha Mahlke}, title = {Visual aesthetics and the user experience}, booktitle = {The Study of Visual Aesthetics in Human-Computer Interaction }, year = {2008}, editor = {Marc Hassenzahl and Gitte Lindgaard and Axel Platz and Noam Tractinsky }, number = {08292}, series = {Dagstuhl Seminar Proceedings}, ISSN = {1862-4405}, publisher = {Schloss Dagstuhl - Leibniz-Zentrum fuer Informatik, Germany}, address = {Dagstuhl, Germany}, URL = {http://drops.dagstuhl.de/opus/volltexte/2008/1624}, annote = {Keywords: User experience, non-instrumental qualities, visual aesthetics, emotional user reactions} }

Full text

1
Visual aesthetics and the user experience
Sascha Mahlke
Berlin University of Technology
Franklinstrasse 28/29 – FR2-6, 10587 Berlin, Germany
sascha.mahlke@zmms.tu-berlin.de
ABSTRACT
This paper describes the outcomes of a project that focused
on the integration of non-instrumental qualities like
aesthetic and symbolic aspects and emotional user reactions
with traditional, instrumental-focused approaches to users’
experience of interaction. A research framework is
described that conceptualizes user experience as a
phenomenon consisting of instrumental and non-
instrumental quality perceptions as well as emotional user
reactions. Methodological consequences are discussed in
particular for the measurement of visual aesthetics of
interactive systems. Selected results of two studies are
reported that addressed the influence of perceived usability
and visual aesthetics on emotional user reactions and
consequences of user experience and studied the effect of
user characteristics and contextual parameters on these
relations.
Author Keywords
User experience, non-instrumental qualities, visual
aesthetics, emotional user reactions.
ACM Classification Keywords
H5.2. Information interfaces and presentation: user
interfaces: user-centered design.
INTRODUCTION
To date, various approaches to the evaluation of interactive
systems go beyond the notion of efficiency and aim to
better understand how people experience technology. In this
regard, two important concepts have been explored in
particular: emotions and non-instrumental qualities
(Hassenzahl & Tractinsky, 2006).
The term emotional design has received significant
attention (Norman, 2004). For example, Desmet & Hekkert
(2002) presented an explicit model of emotions according
to product perceptions. Zhang & Li (2005) studied the
concept of affective quality as the ability of interactive
systems to cause changes in the user's affective state.
Non-instrumental qualities can be described as quality
aspects that address user needs that go beyond tasks, goals
and their efficient achievement (Hassenzahl, 2006).
Different approaches to non-instrumental qualities can be
found in the literature. Jordan (2000) argued for a
hierarchical organization of user needs and claimed that
along with the functionality and usability of the product,
different aspects of pleasure are important to enhance the
user's interaction with it. Further analyses studied selected
non-instrumental quality aspects of interactive systems in
detail, such as hedonic quality (Hassenzahl, 2003) and
visual aesthetics (Lavie & Tractinsky, 2004).
Visual aesthetics is one important dimension of non-
instrumental qualities. Liu (2003) proposes that a discipline
of engineering aesthetics should address two major
questions: first, how to use engineering and scientific
methods to study aesthetic concepts in system and product
design, and second, how to incorporate engineering and
scientific methods in the aesthetic design and evaluation
process beyond designers’ intuitions.
A few early studies addressed these request. Burmester,
Platz, Rudolph and Wild (1999) have studied the influence
of visual aesthetic design on users’ quality perceptions by
using a traditional version of a user interface and one that
was worked over completely by a designer to find that the
later version received higher rating with respect to quality
impression, apparent usability and superiority. Kleiss and
Enke (1999) conducted a study to identify the visual
appearance attributes of automotive audio systems that
impact users’ judgments. The results reveal specific visual
appearance attributes that contributed separately to the
perception of stylish appearance and to the perception of
quality. Schenkman and Jönsson (2000) have studied users’
first impressions of websites and found that beauty was the
best predictor for the overall judgment.
Other studies focus on specific design dimensions to
improve aesthetic quality. Park, Choi and Kim (2004)
conducted empirical studies with professional web
designers and users to identify critical factors for the visual
aesthetics of websites. They identified thirteen aesthetic
dimensions and instructed designers to design example
websites with respect to selected dimensions. They found
that users rated the quality on a specific aesthetic dimension
higher if the designer had focused on it. Laugwitz (2001)
concentrates on the impact of the use of color on aesthetic
perceptions in the context of software systems and found
interrelations between system properties and users’
judgments. Leder and Carbon (2005) report a study in
which the influence of stimulus properties on the
appreciation of car interiors is investigated. Three design
components (complexity, curvature, and innovativeness),
Dagstuhl Seminar Proceedings 08292
The Study of Visual Aesthetics in Human-Computer Interaction
http://drops.dagstuhl.de/opus/volltexte/2008/1624

Figure 1. User experience research framework.
which were all thought to affect design appreciation, were
combined in a fully factorial design. All dimensions were
confirmed to affect users’ ratings. In particular curvature
and innovativeness affected the attractiveness ratings.
Curved and non-innovative designs were generally
preferred.
These examples demonstrate how to studiy visual aesthetics
in human-technology interaction. The project described in
the following aimed at better understanding users’
experience of interaction and took into account visual
aesthetics as one aspect of user experience. In this paper, I
will demonstrate how visual aesthetics can be incorporated
into a model of user experience, discuss available methods
to measure the perception of visual aesthetics in HCI,
present selected results on the role of aesthetics as part of
user experience and discuss important topics for the
research of visual aesthetics in human-technology
interaction.
THE USER EXPERIENCE RESEARCH FRAMEWORK
In Mahlke & Thüring (2007) we describe an integrated
research approach to the experimental study of emotional
user reactions in consideration of instrumental and non-
instrumental quality perceptions of interactive systems
(Figure 1).
A model is presented that defines instrumental and non-
instrumental quality perceptions as well as emotional
reactions as three central components of the user
experience. Characteristics of the interaction impact these
three components. Interaction characteristics primarily
depend on system properties, but also user characteristics
and context parameters can play an important role. The
actual consequences of the user's experience of an
interaction, meaning the overall judgments of a product,
usage behavior or user preferences are defined as outcomes
of all three central components of the user experience.
Instrumental and non-instrumental qualities are defined in
more detail (Thüring & Mahlke, 2007). Aesthetic aspects of
non-instrumental quality are divided into various
dimensions related to the human senses. Visual, haptic, and
acoustic perceptions are most relevant in human-technology
interaction and therefore stated in the model. Visual
aesthetics of products is defined as the extent to which
sensory (e.g. colors, see Laugwitz, 2001) and formal (e.g.
shapes, see Leder & Carbon, 2005) attributes of a product
provide positive visual experiences for the user (Lang,
1988). Process theories can be used to explain the visual
aesthetic experience in more detail (Lindgaard & Whitfield,
2004; Leder et al., 2004; Reber et al., 2004; Hekkert et al.,
2003).
METHODOLOGICAL ASPECTS
Visual aspects of products have often been stated as most
relevant for users’ aesthetic response (Bloch, 1995).
Various approaches exist to assess the visual aesthetics of
interactive products. For example, Kleiss and Enke (1999)
used 18 pairs of bipolar attributes to assess the visual
appearance of automotive audio systems. Nonetheless, like
in other approaches some of the items also represent
instrumental and symbolic qualities. Schenkman and
Jönsson (2000) used seven variables to assess visual
aesthetics: complexity, legibility, order, beauty,
meaningfulness, comprehension, and overall impression.
However, each variable is only represented by one item and
the names of the concepts seem somehow ambiguous.
Lavie and Tractinsky (2004) present the most validated
approach to the measurement of visual aesthetics in human-
technology interaction. They developed a questionnaire
based on four empirical studies that consists of two main
dimensions of visual aesthetics, which they named
‘classical aesthetics’ and ‘expressive aesthetics’. The
classical aesthetics dimension pertains to aesthetic notions
that emphasize orderly and clear design. The expressive
aesthetics dimension is manifested by the designers’
creativity and originality and by the ability to break design
conventions. To measure each of the dimensions they give a
five-item scale. One weakness of this approach is outlined
by Hassenzahl (2007). He argues that the dimension of
expressive aesthetics measures more symbolic or
motivational aspects that are conveyed by visual attributes
of an interactive product than directly focusing on aesthetic
aspects. Nonetheless, the dimension of classical aesthetics
proposed by Lavie and Tractinsky (2004) can be considered
as one validated dimension to measure visual aesthetics in
human-technology interaction.

3
Overall Ratings
0
0,5
1
1,5
2
usability high usability low
aesthetics high
aesthetics low
Figure 4. Overall ratings for the four conditions.
EMPIRICAL RESEARCH
Selected results of two studies are reported that used the
dimension of classical aesthetics proposed by Lavie and
Tractinsky (2004) to better understand the relation of
perceived visual aesthetics to the perception of usability,
emotional user reactions and consequences of the user
experience.
Study 1
Simulations of portable audio players were designed to
influence the perceptions of instrumental and non-
instrumental qualities experimentally and independently
(Mahlke & Thüring, 2007). To produce two versions with
different impact on perceived instrumental qualities, the
information presentation on the display was varied (the
number of simultaneously discernible menu lines: five
versus two, a scrollbar on the left side as indicator for
available but hidden menu items: given or not, and a cue
about the actual position in the menu hierarchy at the top of
the display: given or not). With respect to system features
that should influence the perception of non-instrumental
qualities, we manipulated the visual aesthetics by creating
two different body designs (symmetry: high and low, color
combination: low and high color differences, and shape:
round and square). The variations resulted in four different
combinations: (a) ‘high usability' and ‘high aesthetics', (b)
‘high usability' and ‘low aesthetics', (c) ‘low usability' and
‘high aesthetics', (d) ‘low usability' and ‘low aesthetics'.
Forty-eight individuals participated in the study. All
participants tested two of the simulations. Five short tasks
were given to the participants for each version. Before
accomplishing the tasks, subjects rated the visual aesthetics
of the version. During task completion, heart rate and
dermal activity as physiological measures as well as an
EMG to assess facial expressions were applied. After
completing each task, participants filled in a scale to
measure subjective feelings. When all tasks were finished,
the usability of the system was rated, and finally the two
system versions were ranked.
The results showed that the variations of usability as well as
aesthetics had the predicted impact on the perception of
both types of qualities (Figure 2). Systems with features
associated with a high degree of usability and attractiveness
received better ratings than their impaired counterparts. No
interaction effect was found for neither of the variables.
The results of the subjective feelings questionnaire revealed
that the effect of usability was greater than the one of visual
aesthetics for both the valence and the arousal of the
subjective feelings. Consequently, the system of high
usability and appealing design was experienced as most
satisfying, while the system of low usability and least
attractiveness was most annoying. Since no statistical
interaction of usability and aesthetics was found, both
factors contributed to these emotions additively (Figure 3).
Finally, the overall judgments pointed in the same direction
as the ratings of perceived qualities and emotions, and
revealed a greater impact of usability on the overall
appraisal of the systems (Figure 4).
usability low / ae
s
thetics low
usability low / aesthetics high
usability high / aesthetics low
usability high / aesthetics high
Figure 3. SAM ratings for the four systems
(squared high vs. round low usability; filled high
vs. unfilled low aesthetics).
Perceived Usability
0
1
2
3
4
5
6
7
8
usability high usability low
Perceived Visual Aesthetics
0
1
2
3
4
5
6
usability high usability low
aesthetics high
aesthetics low
Figure 2. Perceived usability and visual aesthetics
ratings for the four condition
s.

Table 1. Regression analysis of subjective feelings using
usability and visual aesthetics ratings as predictors –
overall, only for hi
gh and only for low CVPA.
Table 2. Regression analysis of subjective feelings using
usability and visual aesthetics ratings as predictors -
overall, only for goal-mode and only for action-mode.
Study 2
In a second study, four similar simulations of portable audio
players were used that differed in usability and visual
aesthetics (Mahlke & Lindgaard, 2007). Furthermore,
contextual parameters were varied. In a goal-mode
participants had to accomplish given tasks, while they had
the same amount of time to explore the system on their own
in an action-mode (Hassenzahl & Ullrich, 2007).
Additionally, data was collected in two cultural settings
(North America and Europe) to address differences in user
characteristics and users’ centrality of visual product
aesthetics (CVPA) was taken into account (Bloch, Brunel &
Arnold, 2003). The same methods as in Study 1 were used
to measure the components of user experience.
Study 2 replicated the results regarding the independence of
the influence of the perception of instrumental (i.e.
usability) and non-instrumental qualities (i.e. visual
aesthetics) and their influence on emotional user reactions
and overall judgments.
Furthermore, Study 2 demonstrated the relevance of user
characteristics and contextual parameters. The influence of
centrality of visual product aesthetics on the interrelations
of user experience components was demonstrated. The
influence of perceived visual aesthetics on subjective
feelings was higher for users with a high CVPA value
(Table 1). A similar effect was found for overall judgments.
The usage situation as an example of context variation
showed additional impact. The influence of perceived
visual aesthetics on subjective feelings was higher for users
in action-mode than in goal-mode (Table 2). Again, a
similar effect was found for overall judgments.
CONCLUSIONS
In the user experience framework, no direct link between
instrumental and non-instrumental quality perceptions is
made, although previous empirical studies have shown an
influence of visual aesthetics on perceptions of usability
(Tractinsky et al., 2000). However, Hassenzahl (2007)
explains these findings as a result of attribute overlap. He
argues that it is possible that already the system attributes
that have been varied to influence visual aesthetics are also
related to usability. Furthermore, other studies have not
replicated these interrelations (Lindgaard & Dudek, 2003).
The findings of Studies 1 and 2 demonstrate that it is
possible to manipulate groups of system properties, which
either influence instrumental or non-instrumental quality
perceptions. In this case, properties that are associated with
information presentation had an impact on the perception of
usability and system properties related to product
appearance determined users’ perceived visual aesthetics.
In this way, it was possible to resolve the problem of
attribute overlap and to demonstrate that instrumental and
non-instrumental quality perceptions occur independently.
Therefore, the suggestion by Tractinsky et al. (2000) who
claim what is beautiful is usable has to be reconsidered.
The studies also show the relevance of perceived visual
aesthetics for emotional user reactions and consequences of
user experience. However, the relation of perceived visual
aesthetics and emotional aspects of user experience have to
be studied further. Various authors discuss a direct
influence of the interaction on affective components of user
experience. For example, Hassenzahl (2006) differentiates
emotions as consequences of product use and affective
reactions. Referring to Zajonc (1980) and Schwarz and
Clore (1983), he describes how affective reactions can
influence the cognitive processing of information about the
interactive product. These affective reactions may in
particular play a role in the perception of aesthetic aspects
since aesthetic appreciation is often described as a partly
affective process (Hassenzahl, 2007).
From my point of view, further challenges regarding visual
aesthetics in human-technology interaction that should be
addressed in the future are the role of inter-individual
differences of aesthetic judgments that seem more
important as for example in comparison to the perception of
usability issues and the consideration of visual aesthetics in
interactive system design projects.
ACKNOWLEDGMENTS
This research was sponsored by the German Research
Foundation (DFG) as part of the Research Training Group
‘Prospective engineering of Human-Technology Interaction'
(no. 1013). The German Academic Exchange Service
(DAAD) supported Study 2.

5
REFERENCES
1. Bloch, P. H. (1995). Seeking the ideal form - product
design and consumer response. Journal of marketing,
59, 16-29.
2. Bloch, P. H., Brunel, F. F. & Arnold, T. J. (2003).
Individual differences in the centrality of visual product
aesthetics: Concept and measurement. Journal of
Consumer Research, 29, 551-565.
3. Burmester, M., Platz, A., Rudolph, U. & Wild, B.
(1999). Aesthetic design - just an add on? In H.-J.
Bullinger & J. Ziegler (Eds.), Human Computer
Interaction: Ergonomics and User Interfaces (pp. 671-
675). Mahwah, NJ: Lawrence Erlbaum.
4. Desmet, P. and Hekkert, P. (2002). The basis of product
emotions. In: W. Green and P. Jordan (eds.), Pleasure
with Products, beyond usability. Taylor & Francis,
London.
5. Hassenzahl, M. and Tractinsky, N. (2006). User
experience - a research agenda. Behaviour &
Information Technology, 25, 91-97.
6. Hassenzahl, M. (2003). The thing and I: Understanding
the relationship between user and product. In: M.
Blythe, C. Overbeeke, A. F. Monk, & P. C. Wright
(eds.), Funology: From Usability to Enjoyment.
Dordrecht: Kluwer Academic Publishers.
7. Hassenzahl, M. (2006). Hedonic, Emotional, and
Experiental Perspectives on Product Quality. In C.
Ghaoui (Ed.), Encyclopedia of Human Computer
Interaction (pp. 266-272). London: Idea Group.
8. Hassenzahl, M. (2007). Aesthetics in interactive
products: Correlates and consequences of beauty. In H.
N. J. Schifferstein & P. Hekkert (Eds.), Product
experience. Amsterdam: Elsevier.
9. Hassenzahl, M. & Ullrich, D. (2007). 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, 19, 429-
437.
10. Hekkert, P., Snelders, D. & van 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,
111-124.
11. Jordan, P. W. (2000). Designing pleasurable products.
Taylor & Francis, London.
12. Kleiss, J. A. & Enke, G. (1999). Assessing Automotive
Audio System Visual Appearance Attributes Using
Empirical Methods. In Human Factors in Audio Interior
Systems, Driving, and Vehicle Seating. Warrendale:
Society of Automotive Engineers.
13. Lang, J. (1988). Symbolic aesthetics in architecture:
toward a research agenda. In J. L. Nasar (Ed.),
Environmental aesthetics (pp. 11-26). New York:
Cambridge University Press.
14. Laugwitz, B. (2001). Experimentelle Untersuchung von
Regeln der Ästhetik von Farbkombinationen und von
Effekten auf den Benutzer bei ihrer Anwendung im
Benutzungsoberflächendesign [Experimental
investigation of the aesthetics of color combinations and
of its impact on users when applied to graphical user
interface design]. Berlin: dissertation.de.
15. Lavie, T. and Tractinsky, N. (2004). Assessing
dimensions of perceived visual aesthetics of web sites.
International Journal of Human-Computer Studies, 60,
269-298.
16. Leder, H. & Carbon, C. C. (2005). Dimensions in
appreciation of car interior design. Applied Cognitive
Psychology, 19, 603-618.
17. Leder, H., Belke, B., Oeberst, A. & Augustin, D. (2004).
A model of aesthetics appreciation and aesthetic
judgments. British Journal of Psychology, 95, 489-508.
18. Lindgaard, G. & Dudek, C. (2003). What is the evasive
beast we call user satisfaction? Interacting with
Computers, 15, 429-452.
19. Lindgaard, G. & Whitfield, T. W. A. (2004). Integrating
aesthetics within an evolutionary and psychological
framework. Theoretical Issues in Ergonomics Science,
2, 73-90.
20. Liu, Y. (2003). Engineering aesthetics and aesthetic
ergonomics: Theoretical foundations and a dual-process
research methodology. Ergonomics, 46, 1273-1292.
21. Mahlke, S. & Lindgaard, G. (2007). Emotional
Experiences and Quality Perceptions of Interactive
Products. In J. Jacko (Ed.) Human-Computer
Interaction, Part I, HCII 2007, LNCS 4550 (pp.164-
173). Berlin: Springer.
22. Mahlke, S. & Thüring, M. (2007). Studying Antecedents
of Emotional Experiences in Interactive Contexts.
Proceedings of CHI ‘07 (pp. 915-918). New York:
ACM Press.
23. Norman, D. A. (2004). Emotional Design: why we love
(or hate) everyday things. Basic Books, New York.
24. Park, S., Choi, D. & Kim, J. (2004). Critical factors for
the aesthetic fidelity of web pages: empirical studies
with professional web designers and users. Interacting
with Computers, 16, 351-376.
25. Reber, R., Schwarz, N. & Winkielman, P. (2004).
Processing fluency and aesthetic pleasure: is beauty in
the perceiver's processing experience? Personality and
Social Psychology Review, 8, 364-382.

26. Schenkman, B. N. & Jönsson, F. U. (2000). Aesthetics
and preferences of web pages. Behaviour & Information
Technology, 19, 367-377.
27. Schwarz, N. & Clore, G. L. (1983). Mood,
misattribution, and judgments of well-being:
Informative and directive functions of affective states.
Journal of Personality and Social Psychology, 45, 513-
523.
28. Thüring, M. & Mahlke, S. (2007). Usability, aesthetics,
and emotions in human-technology-interaction.
International Journal of Psychology, 42, 253-264.
29. Tractinsky, N., Katz, A. S. & Ikar, D. (2000). What is
beautiful is usable. Interacting with Computers, 13, 127-
145.
30. Zajonc, R. B. (1980). Feeling and thinking: Preferences
need no inferences. American Psychologist, 35, 151-
175.
31. Zhang, P. and Li, N. (2005). The importance of affective
quality. Communications of the ACM, 48 (9), 105-108.