I've gone through a whole list of scientific papers to understand what science knows today about the influence aesthetics / beauty and usability have on each other. I then tried to turn those horrendously boring papers into something that resembles an entertaining format, cut it down to a 20 min presentation and presented it at IxDA Sydney in September 2014. You might even learn something here - so please tread lightly ;-)

1. Beauty / aesthetics and usability
What does one have to do with the
other?
MATTHIAS SCHRECK • SENIOR DESIGNER • ATLASSIAN • @SARDIONERAK

2. Why am I in front of
you today?

3. •Volunteer for IxDA talks
• Only facts, no opinions
• Pick a topic, pray for a narrative

4. Why a talk on this
topic?

5. VS.
Heidi Klum Jakob Nielsen

6. What you will learn
today

7. • A selective timeline of the history of research
• Frustrations with academic papers
• Defining and measuring web site aesthetics
• What we really KNOW today about how aesthetics
and usability influence each other
• How to spell the word “aesthetics”

8. • What is beautiful is good; Dion K., Berscheid, E., Walster, E., 1972
• What is good is beautiful - face preference reflects desired personality; Little, A. C., Burt, D. M., Berrett, D. I., 2006
• Apparent usability vs. inherent usability - Experimental analysis on the determinants of the apparent usability. Kurosu, M. and Kashimura, K., 1995
• Aesthetics and apparent usability: empirically assessing cultural and methodological issues; Tractinsky, N., 1997
• What is beautiful is usable; Tractinsky, N., Katz, A. S., Ikar, D., 2000.
• The Beauty of Simplicity; Karvonen, K., 2000.
• Emotional design; Norman, D., 2003.
• Assessing dimensions of perceived visual aesthetics of web sites; Lavie, T., Tractinsky, N., 2003.
• The Interplay of Beauty, Goodness, and Usability in Interactive Products, Hassenzahl, M., 2004.
• Organizational website usability and attractiveness effects on viewer impressions, Braddy, P. W., Meade A. W., Kroustalis, C. M., 2005.
• Attention web designers: you have 50 milliseconds to make a good first impression; Lindgaard, G. et al., 2006.
• Aesthetics and credibility in web site design; Robins, D. and Holmes, J., 2007.
• The influence of prototype fidelity and aesthetics of design in usability tests: effects on user behaviour, subject evaluation and emotion; Sauer, J. and Sonderegger, A., 2008.
• The influence of design aesthetics in usability testing: Effects on user performance and perceived usability; Sonderegger, A., Sauer, J. 2009.
• Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI; Tuch, A., 2012.
• User interface design and the halo effect: some preliminary evidence; Soper, D. S., 2014
• … and a few others I just leaved through.

9. Don’t worry.
!
I summarized.
!
A bit, at least.

10. About academic
papers

11. 1. Original study is wild and ‘out there’
2. Some researchers run with it
3. Egos arise and fight each other
• Everybody wants to make it simple
• Everybody wants the best headline
• Someone, at some point, will do it properly
• Most use ‘convenience samples’, i.e. their students

12. Beauty as a research
concept

13. http://www.reliefjournal.com/2014/04/07/socratic-dialogue-whats/
If something fulfils its
function, it’s inherently
beautiful
”
SOCRATES (470-399 BC) - not an
actual quote
“
Philosophical approach
Objective perception

14. “ ”
Beauty is within the
subject, not the object
IMMANUEL KANT(1724-1804) - once again, not a quote, I’m
just paraphrasing here
Philosophical approach
Subjective perception
http://upload.wikimedia.org/wikipedia/commons/4/43/Immanuel_Kant_(painted_portrait).jpg

15. Empirical - experimental
1 beauty property
+ 1 beauty property
= 2 x the beauties

16. Empirical - exploratory
Beauty as a
subjective stimulus
of a complete item

17. Where it all began:

18. What is beautiful is
good
Dion, Berscheid, Walster
1972

19. The study:
• Preliminary study: 50 ‘stimulus objects’ rated on
‘unattractive’, ‘moderately attractive’ and ‘attractive’
• 60 participants: rate each stimulus on various
character traits

20. The outcome:
Attractive people:
• had more socially desirable traits
• were expected to get better jobs
• have happier marriages
• were possibly NOT better parents for some reason

21. The halo effect
http://www.tutor2u.net/blog/images/uploads/6a00d83451b74a69e20120a5dbb520970c.jpg
Cognitive bias where one
particular trait, especially good
characteristics, influences or
extends to other qualities of the
person.
Biases one’s decision with a
tendency to focus on the good.

22. Where it began to
get interesting for us
designers

23. Apparent usability
vs. inherent usability
Kurosu and Kashimura, 1995

24. The study:
• Generated 26 ATM
layouts. Experts assessed
them as high or low
beauty and high or low
usability.
• 252 students were asked:
how beautiful are they?
how easy are they to use?

25. The outcome:
• High correlation between apparent usability and
apparent beauty
• This correlation was higher than between beauty and
usability as judged by experts
• Therefore: beauty influences apparent usability more
than actual usability does

26. VS.
1 0

27. “Go on…?”

28. Aesthetics and apparent
usability - empirically
assessing cultural and
methodological issues
Tractinsky, 1997

29. With guns ablazin’
• Strongly criticised Jakob Nielsen and Don Norman for
their exclusive focus on usability
• Are usability tests distracting from what really
influences purchase decisions and user acceptance?

30. The study:
• Adjusted the Japanese ATM layouts for Israeli audience
• Ran them past some folks in Israel in 3 study setups

31. Overall result
Aesthetics strongly affect
perceived usability

32. VS.
2 0

33. What is beautiful is
usable
Tractinsky, Katz, Ikar, 2000

34. Claims
• Usability and aesthetics influence each other due to
• Popular stereotyping
• Halo effect
• Affective immediate response
So his questions were:
• Is anything else influenced apart from usability?
• What happens after actually testing it?

35. The study
• 9 ATM layouts and 3 scales (‘aesthetics’, ‘ease of use’,
‘amount of information on screen’)
• Participants rated, then tested, and then rated again

36. Result
• ‘Real’ usability performance was not influenced by
aesthetics
• Post-use satisfaction = post-use perceived usability
+ post-use perceived aesthetics
• Real usability performance didn’t influence post-use
assessment in any way. Only aesthetics did.

38. VS.
3 0

39. Assessing dimensions
of perceived visual
aesthetics of web sites
Lavie and Tractinsky, 2003

40. The study:
• 5-part study series
• Generate a bunch of reliable scales
• Test them by applying them and number crunching
the outcome
• … and see what else he could learn about causality

41. Results about metrics
Two groups that measure aesthetics:
Classical aesthetics:
• aesthetic
• pleasant
• clean
• clear
• symmetrical
Expressive aesthetics:
• creative
• using special effects
• original
• sophisticated
• fascinating

42. Results about causality
• Perceived usability is correlated to classical
aesthetics, not so much to expressive aesthetics
• ‘Clear design’ is part of both ‘classical aesthetic’ and
the general understanding of ‘usability’
• This in turn shows that users struggle to clearly
distinguish between the two concepts

43. Someone, at some point,
will do it properly, and
disagree

44. The interplay of beauty,
goodness and usability
on interactive products
Hassenzahl, 2004

45. His product model
Product attributes: features, beauty, goodness, likability, etc.
Product character:
• Pragmatic qualities (PQ)
• Usability
• Utility
• Hedonic qualities
• Stimulation (HQS)
• Identification (HQI)

46. AttrakDiff 2
questionnaire
http://www.isti.tu-berlin.de/fileadmin/fg41/pictures/projekte/joy_of_use/attrakdiff_word_pairs_k.gif

47. The study
• 2 very ugly and 2 very beautiful MP3 skins
• Study 1: participants looked at them and
assessed them with AttrakDiff 2
• Study 2: looked at them, assessed them, then
used them, and assessed them again.

49. Overall results
• Pragmatic qualities (like usability) predict
‘goodness’, but NOT beauty
• HQI (and a bit of HQS) predicts beauty
• Beauty is not strongly affected by using the
product

51. Isn’t that contradi…
• Tractinsky had proven that beauty influenced
usability
• Hassenzahl had proven that beauty and usability
were completely independent

52. What had happened?
Hassenzahl: Tractinsky’s usability manipulation was
not successful.
Tractinsky: not available for comment

53. VS.
3 1

54. <Interesting
interlude>
…because it’s interesting but doesn’t fit into the
narrative… cut me some slack.

55. Attention web
designers: you have 50
milliseconds to make a
good first impression
Lindgaard et al. 2006

56. The study
• Study 1: Showed ugly and beautiful web sites for
500ms each, participants rated them from ‘very
unattractive’ to ‘very attractive’
• Study 2: showed the same images, but only for
50ms

57. The overall result
• 50ms exposure is enough to form an opinion
• 50ms opinions are more variable than 500ms
opinions
• This opinion can then persist for some time after
• She claims although the reaction is ‘visceral’ in the
Norman sense, it’s not ‘visceral beauty’ because the
judgement is more a “I like or I don’t like”

58. </ Interesting
interlude>
Thank you for your patience

59. Let’s wrap this up.
!
With one more study.
!
A REALLY BIG ONE.

60. Is beautiful really usable? Toward
understanding the relation
between usability, aesthetics and
affect in HCI
Tuch et al. 2012

61. His problems with studies
• Researchers assume they know the direction of
causality
• Manipulating one condition without the other is hard
• Resarchers used completely different measuring
scales
• Researchers looked for dumb causalities, not for
boundary conditions

62. With boundary conditions, we describe the
possibility that different degrees of usability
and aesthetics manipulation may affect the
aesthetics-usability relationship differently.
TUCH ET AL., 2012
”
“

63. • Displayed an online
shop
• Tasks were to buy items
• The fastest would get
iPods

64. What made his study
different
• Manipulation of usability: simple IA changes, no
change to aesthetics at all
• Manipulation of aesthetics: different colours, use of
imagery, no change to usability at all

66. 7
questionnaires
including:
SUS, AttrakDiff 2, ASQ,
WOOS, SAM, and 3
unnamed ones
54
measuring
scales

68. Results 1/3
Aesthetics Usability
• Aesthetics did NOT influence perceived usability
BEFORE use. No halo effect.
• Aesthetics did also NOT influence perceived usability
AFTER use. No ‘what is beautiful is usable’ effect.
• Perceived usability was only affected by the actual
experienced usability.

69. Results 2/3
Usability Aesthetics
• Experienced usability DID influence perceived
aesthetics AFTER use, particularly HQI and classical
aesthetics. So it’s ‘What is usable is beautiful’.
• Experienced usability did NOT impact HQS or
expressive aesthetics after use

70. Results 3/3
Pre and post test comparison
• Pre and post perceived usability ratings are not
related
• Usability only affects aesthetics AFTER use

71. … but …
• The change in the usability condition was strong,
while the aesthetic change might have been weak
• They used a goal-oriented task in a pressure
situation. What if:
• Goal-directed pressure tasks put emphasis on
usability?
• Open, ‘relaxed’ tasks put emphasis on
aesthetics?

72. VS.
3 2

73. or rather

74. VS.
? ?

75. So, what have we learned
• In cognitive psychology, boundary conditions for phenomena are more likely than
simple causalities
• Be aware of task bias:
• Goal-oriented tasks = participants put more attention on usability
• Open tasks = participants put more attention on aesthetics
• Usability influences overall perception of the product, but so does affective
response to good (or bad) aesthetics - so improve both!

76. And some things to
remember in general

77. • When you’re testing usability, you probably also test
aesthetics
• When you ask about aesthetics, you probably also get
answers about usability
• When you ask about overall experiences, you get a
mix of both and people will not be able to distinguish
properly

78. Thank you!
MATTHIAS SCHRECK • SENIOR DESIGNER • ATLASSIAN • @SARDIONERAK
!
SLIDES AVAILABLE AT WWW.SLIDESHARE.NET/MATTYSCHRECK

79. Image resources
Confused dog: http://i.huffpost.com/gen/1575677/thumbs/o-SHOCK-COLLAR-facebook.jpg
Atomic explosion: http://img2.wikia.nocookie.net/__cb20130921014959/fabianpedia/images/5/5a/20080321033750!Explosion.jpg
Confused cat: http://www.coophlm.org/wp-content/uploads/2014/09/grumpy-confused-cat.jpg