MATTHIAS SCHRECK • SENIOR DESIGNER • ATLASSIAN • @SARDIONERAK

Beauty / aesthetics and usability

What does one have to do with the other?

Why am I in front of you today?

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

Why a talk on this topic?

VS.

Heidi Klum Jakob Nielsen

What you will learn today

• 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”

• 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.

Don’t worry. !

I summarized. !

A bit, at least.

About academic papers

• 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

1. Original study is wild and ‘out there’2. Some researchers run with it3. Egos arise and fight each other

Beauty as a research concept

http://www.reliefjournal.com/2014/04/07/socratic-dialogue-whats/

If something fulfils its function, it’s inherently beautifulS O C R AT E S ( 4 7 0 - 3 9 9 B C ) - n o t a n a c t u a l q u o t e

”

“

Philosophical approachObjective perception

Beauty is within the subject, not the objectI M M A N U E L K A N T ( 1 7 2 4 - 1 8 0 4 ) - o n c e a g a i n , n o t a q u o t e , I ’ m j u s t p a r a p h r a s i n g h e re

”“

Philosophical approachSubjective perception

http://upload.wikimedia.org/wikipedia/commons/4/43/Immanuel_Kant_(painted_portrait).jpg

Empirical - experimental

1 beauty property + 1 beauty property = 2 x the beauties

Empirical - exploratory

Beauty as a subjective stimulus of a complete item

Where it all began:

What is beautiful is good

Dion, Berscheid, Walster 1972

The study:• Preliminary study: 50 ‘stimulus objects’ rated on

‘unattractive’, ‘moderately attractive’ and ‘attractive’• 60 participants: rate each stimulus on various

character traits

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

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.

Where it began to get interesting for us

designers

Apparent usability vs. inherent usability

Kurosu and Kashimura, 1995

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?

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

VS.

1 0

“Go on…?”

Aesthetics and apparent usability - empirically

assessing cultural and methodological issues

Tractinsky, 1997

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?

The study:

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

Overall result

Aesthetics strongly affect perceived usability

VS.

2 0

What is beautiful is usable

Tractinsky, Katz, Ikar, 2000

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?

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

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.

VS.

3 0

Assessing dimensions of perceived visual

aesthetics of web sites

Lavie and Tractinsky, 2003

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

Results about metricsTwo groups that measure aesthetics:

Classical aesthetics:• aesthetic• pleasant• clean• clear• symmetrical

Expressive aesthetics:• creative• using special effects• original• sophisticated• fascinating

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

Someone, at some point, will do it properly, and

disagree

The interplay of beauty, goodness and usability on interactive products

Hassenzahl, 2004

His product modelProduct attributes: features, beauty, goodness, likability, etc.Product character:

• Pragmatic qualities (PQ)• Usability• Utility

• Hedonic qualities• Stimulation (HQS)• Identification (HQI)

AttrakDiff 2 questionnaire

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

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.

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

• Tractinsky had proven that beauty influenced usability

• Hassenzahl had proven that beauty and usability were completely independent

Isn’t that contradi…

What had happened?

Hassenzahl: Tractinsky’s usability manipulation was not successful.Tractinsky: not available for comment

VS.

3 1

<Interesting interlude>

…because it’s interesting but doesn’t fit into the narrative… cut me some slack.

Attention web designers: you have 50 milliseconds to make a good first impression

Lindgaard et al. 2006

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

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”

</ Interesting interlude>

Thank you for your patience

Let’s wrap this up. !

With one more study. !

A REALLY BIG ONE.

Is beautiful really usable? Toward understanding the relation

between usability, aesthetics and affect in HCI

Tuch et al. 2012

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

With boundary conditions, we describe the possibility that different degrees of usability and aesthetics manipulation may affect the aesthetics-usability relationship differently.T U C H E T A L . , 2 0 1 2

”

“

• Displayed an online shop

• Tasks were to buy items• The fastest would get

iPods

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

7questionnaires

including: SUS, AttrakDiff 2, ASQ,

WOOS, SAM, and 3 unnamed ones

54measuring

scales

Results 1/3

• 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.

Aesthetics Usability

Results 2/3

• 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

Usability Aesthetics

Results 3/3

• Pre and post perceived usability ratings are not related

• Usability only affects aesthetics AFTER use

Pre and post test comparison

… 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?

VS.

3 2

or rather

VS.

? ?

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!

And some things to remember in general

• 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

Thank you!

MATTHIAS SCHRECK • SENIOR DESIGNER • ATLASSIAN • @SARDIONERAK !

SLIDES AVAILABLE AT WWW.SLIDESHARE.NET/MATTYSCHRECK

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

Image resources