How aesthetics / beauty and usability influence each other in web design

download How aesthetics / beauty and usability influence each other in web design

of 79

  • date post

  • Category


  • view

  • download


Embed Size (px)


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 ;-)

Transcript of How aesthetics / beauty and usability influence each other in web design

  • 1. Beauty / aesthetics and usabilityWhat does one have to do with theother?MATTHIAS SCHRECK SENIOR DESIGNER ATLASSIAN @SARDIONERAK

2. Why am I in front ofyou today? 3. Volunteer for IxDA talks Only facts, no opinions Pick a topic, pray for a narrative 4. Why a talk on thistopic? 5. VS.Heidi Klum Jakob Nielsen 6. What you will learntoday 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 aestheticsand 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. Dont worry.!I summarized.!A bit, at least. 10. About academicpapers 11. 1. Original study is wild and out there2. Some researchers run with it3. 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 researchconcept 13. something fulfils itsfunction, its inherentlybeautifulSOCRATES (470-399 BC) - not anactual quotePhilosophical approachObjective perception 14. Beauty is within thesubject, not the objectIMMANUEL KANT(1724-1804) - once again, not a quote, Imjust paraphrasing herePhilosophical approachSubjective perception 15. Empirical - experimental1 beauty property+ 1 beauty property= 2 x the beauties 16. Empirical - exploratoryBeauty as asubjective stimulusof a complete item 17. Where it all began: 18. What is beautiful isgoodDion, Berscheid, Walster1972 19. The study: Preliminary study: 50 stimulus objects rated onunattractive, moderately attractive and attractive 60 participants: rate each stimulus on variouscharacter 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 bias where oneparticular trait, especially goodcharacteristics, influences orextends to other qualities of theperson.Biases ones decision with atendency to focus on the good. 22. Where it began toget interesting for usdesigners 23. Apparent usabilityvs. inherent usabilityKurosu and Kashimura, 1995 24. The study: Generated 26 ATMlayouts. Experts assessedthem as high or lowbeauty and high or lowusability. 252 students were asked:how beautiful are they?how easy are they to use? 25. The outcome: High correlation between apparent usability andapparent beauty This correlation was higher than between beauty andusability as judged by experts Therefore: beauty influences apparent usability morethan actual usability does 26. VS.1 0 27. Go on? 28. Aesthetics and apparentusability - empiricallyassessing cultural andmethodological issuesTractinsky, 1997 29. With guns ablazin Strongly criticised Jakob Nielsen and Don Norman fortheir exclusive focus on usability Are usability tests distracting from what reallyinfluences 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 resultAesthetics strongly affectperceived usability 32. VS.2 0 33. What is beautiful isusableTractinsky, Katz, Ikar, 2000 34. Claims Usability and aesthetics influence each other due to Popular stereotyping Halo effect Affective immediate responseSo 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 byaesthetics Post-use satisfaction = post-use perceived usability+ post-use perceived aesthetics Real usability performance didnt influence post-useassessment in any way. Only aesthetics did. 37. VS.3 0 38. Assessing dimensionsof perceived visualaesthetics of web sitesLavie and Tractinsky, 2003 39. The study: 5-part study series Generate a bunch of reliable scales Test them by applying them and number crunchingthe outcome and see what else he could learn about causality 40. Results about metricsTwo groups that measure aesthetics:Classical aesthetics: aesthetic pleasant clean clear symmetricalExpressive aesthetics: creative using special effects original sophisticated fascinating 41. Results about causality Perceived usability is correlated to classicalaesthetics, not so much to expressive aesthetics Clear design is part of both classical aesthetic andthe general understanding of usability This in turn shows that users struggle to clearlydistinguish between the two concepts 42. Someone, at some point,will do it properly, anddisagree 43. The interplay of beauty,goodness and usabilityon interactive productsHassenzahl, 2004 44. His product modelProduct attributes: features, beauty, goodness, likability, etc.Product character: Pragmatic qualities (PQ) Usability Utility Hedonic qualities Stimulation (HQS) Identification (HQI) 45. AttrakDiff 2questionnaire 46. The study 2 very ugly and 2 very beautiful MP3 skins Study 1: participants looked at them andassessed them with AttrakDiff 2 Study 2: looked at them, assessed them, thenused them, and assessed them again. 47. Overall results Pragmatic qualities (like usability) predictgoodness, but NOT beauty HQI (and a bit of HQS) predicts beauty Beauty is not strongly affected by using theproduct 48. Isnt that contradi Tractinsky had proven that beauty influencedusability Hassenzahl had proven that beauty and usabilitywere completely independent 49. What had happened?Hassenzahl: Tractinskys usability manipulation wasnot successful.Tractinsky: not available for comment 50. VS.3 1 51. because its interesting but doesnt fit into thenarrative cut me some slack. 52. Attention webdesigners: you have 50milliseconds to make agood first impressionLindgaard et al. 2006 53. The study Study 1: Showed ugly and beautiful web sites for500ms each, participants rated them from veryunattractive to very attractive Study 2: showed the same images, but only for50ms 54. The overall result 50ms exposure is enough to form an opinion 50ms opinions are more variable than 500msopinions This opinion can then persist for some time after She claims although the reaction is visceral in theNorman sense, its not visceral beauty because thejudgement is more a I like or I dont like 55. Interestinginterlude>Thank you for your patience 56. Lets wrap this up.!With one more study.!A REALLY BIG ONE. 57. Is beautiful really usable? Towardunderstanding the relationbetween usability, aesthetics andaffect in HCITuch et al. 2012 58. His problems with studies Researchers assume they know the direction ofcausality Manipulating one condition without the other is hard Resarchers used completely different measuringscales Researchers looked for dumb causalities, not forboundary conditions 59. With boundary conditions, we describe thepossibility that different degrees of usabilityand aesthetics manipulation may affect theaesthetics-usability relationship differently.TUCH ET AL., 2012 60. Displayed an onlineshop Tasks were to buy items The fastest would getiPods 61. What made his studydifferent Manipulation of usability: simple IA changes, nochange to aesthetics at all Manipulation of aesthetics: different colours, use ofimagery, no change to usability at all 62. 7questionnairesincluding:SUS, AttrakDiff 2, ASQ,WOOS, SAM, and 3unnamed ones54measuringscales 63. Results 1/3Aesthetics Usability Aesthetics did NOT influence perceived usabilityBEFORE use. No halo effect. Aesthetics did also NOT influence perceived usabilityAFTER use. No what is beautiful is usable effect. Perceived usability was only affected by the actualexperienced usability. 64. Results 2/3Usability Aesthetics Experie