{"id":169,"date":"2013-06-11T23:00:00","date_gmt":"2013-06-11T23:00:00","guid":{"rendered":"http:\/\/measuringu.com\/visual-appeal\/"},"modified":"2022-03-21T18:09:04","modified_gmt":"2022-03-22T00:09:04","slug":"visual-appeal","status":"publish","type":"post","link":"https:\/\/measuringu.com\/visual-appeal\/","title":{"rendered":"Measuring The Visual Appeal of Websites"},"content":{"rendered":"<p><a href=\"http:\/\/www.shutterstock.com\/gallery-235897p1.html?cr=00&amp;pl=edit-00\"><img decoding=\"async\" style=\"float: left; padding: 10px; margin-right: 20px;\" title=\"Website Beauty Contest: Photo by Andrey Bayda\" src=\"https:\/\/measuringu.com\/images\/beauty-contest.jpg\" border=\"0\" \/><\/a>Is a beautiful website more usable?<\/p>\n<p>Psychological literature has discussed, for some time, the <a href=\"http:\/\/www.psychwiki.com\/wiki\/What_is_Beautiful_is_Good_Stereotype_and_the_Halo_Effect\">&#8220;what is beautiful is good<\/a>&#8221; phenomenon.<\/p>\n<p>That is, we ascribe positive attributes to things that are more attractive.<\/p>\n<p>This applies to people and likely to products and websites, as well. But does that positive halo also carry over to our impressions of website usability?<\/p>\n<p>It&#8217;s a bit of an open research question, but first, we need to consider: how reliable are impressions of website beauty?<\/p>\n<h2>Forming Impressions Early<\/h2>\n<p>We form impressions of the visual appeal of websites in a fraction of a second. Gitte Lindgaard and her team at the appropriately named HOT Laboratory (Human Oriented Technology) found that participants in their studies could form reliable impressions of website visual appeal in as little as 50 milliseconds (Lindgaard et al 2006)! It takes 250 milliseconds to blink! They also found participants&#8217; ratings of the same 100 homepages were consistent over time (typically R-Square of ~94%). That is, if users think a webpage has low attractiveness at one point in time, they feel the same way at a future point.<\/p>\n<h2>How to Measure Visual Appeal<\/h2>\n<p>In reviewing the literature on rating aesthetics, beauty and visual appeal, researchers often generate their own set of questions and scales to measure these somewhat fuzzy and overlapping constructs. There&#8217;s nothing wrong with creating new scales, but without any validation, there&#8217;s a risk that the way the items are worded may generate misleading or less accurate results than those from scales which have been subjected to psychometric validation.<\/p>\n<p>One such questionnaire that was subjected to the appropriate validation was developed by Lavie and Tractinsky (Lavie and Tractinsky 2004). They found the following items generated the most reliable and valid measure of &#8220;classic aesthetics.&#8221; Participants rate them on a five-point, agree-disagree scale:<\/p>\n<ul>\n<li>Aesthetic<\/li>\n<li>Symmetrical<\/li>\n<li>Pleasant<\/li>\n<li>Organized<\/li>\n<li>Clean<\/li>\n<\/ul>\n<p>They also proposed another set of &#8220;expressive&#8221; aesthetics; <a href=\"http:\/\/citeseerx.ist.psu.edu\/viewdoc\/summary?doi=10.1.1.101.8129\">see the research paper<\/a> for more details.<\/p>\n<p>Scales by Hazzenzahl (2004) provide pairs of anchored questions (translated from German) into a questionnaire called Attracdiff, which measures Hedonic Quality:<\/p>\n<ul>\n<li>takes me distant from people -brings me closer to people<\/li>\n<li>gaudy \u2013 classy<\/li>\n<li>cheap \u2013 valuable<\/li>\n<li>noninclusive \u2013 inclusive<\/li>\n<li>isolating \u2013 integrating<\/li>\n<li>amateurish \u2013 professional<\/li>\n<li>unpresentable \u2013 presentable<\/li>\n<\/ul>\n<p>Participants rate them on seven-point scales, with each item labeled on opposite end-points. Hazzenzahl has written extensively on beauty, aesthetics and hedonic quality and has additional pairs of items to consider. His research also found that perceptions of usability are affected by usability problems (as expected), but perceptions of beauty remain stable over time (Hazzenzahl, 2004).<\/p>\n<p>In the Lindgaard et al., study they measured attractiveness using a Visual Analogue scale, anchored with Very Unattractive to Very Attractive labels. Visual analogue scales allow participants to rate a stimulus by having them draw a line between two points. Such scales tend to provide slightly more discrimination than traditional seven or nine-point rating scales. The <a href=\"https:\/\/measuringu.com\/blog\/interval-ordinal.php\">Subjective Mental Effort Questionnaire<\/a> (SMEQ) is one such scale, and we have successfully used an online version.<\/p>\n<p>They found, though, that the simpler-to-administer, nine-point rating scale with the same anchors obtained very similar and reliable results. This is consistent with results <a href=\"https:\/\/measuringu.com\/papers\/Sauro_Dumas_CHI2009.pdf\">Joe Dumas and I found a few years ago<span style=\"color: #ff0000;\">[pdf]<\/span><\/a>. So having users rate the attributes using 7 to 11-point scales will generate reliable results for single items (and fewer points are necessary when rating multiple items).<\/p>\n<p>Similar to the Hazzenzahl and Lavie and Tractinsky studies, Lindgaard also found pairs of words (using a nine-point scale) predicted the single-item attractiveness scores reliably. A combination of the following five items predicted 94% of visual appeal ratings for the 100 website homepages:<\/p>\n<ul>\n<li>interesting \u2013boring<\/li>\n<li>good use of color \u2013 bad use of color<\/li>\n<li>well designed \u2013 poorly designed<\/li>\n<li>good layout \u2013 bad layout<\/li>\n<li>imaginative \u2013 unimaginative<\/li>\n<\/ul>\n<p>She found the following two pairs did not predict the visual appeal as well.<\/p>\n<ul>\n<li>clear \u2013 confusing<\/li>\n<li>simple \u2013 complex<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>SUPR-Q<\/h3>\n<p>Much of the research we performed when developing an instrument to measure website effectiveness took into account the premium that is placed on more attractive websites. The SUPR-Q (<a href=\"http:\/\/www.suprq.com\">Standardized User Experience Percentile Rank-Questionnaire<\/a>) has two items which make up the appearance factor.<\/p>\n<ul>\n<li>I found the website to be attractive.<\/li>\n<li>The website has a clean and simple presentation.<\/li>\n<\/ul>\n<p>These items were selected from about a dozen other questions about attractiveness and tended to generate the most reliable and consistent results. Participants are asked to rate these items on a five-point, strongly-disagree to a strongly-agree scale. We have ratings on over <a href=\"https:\/\/measuringu.com\/products\/suprq\">200 websites across several industries<\/a>. So, for example, Apple.com, 1800-Flowers, Amazon.com and Zappos all have scores in the top 5% for appearance. The NY State Government website, Fidelity.com and Frys.com for example have appearance scores in the bottom 5%.<\/p>\n<p>The SUPR-Q also has factors of usability, loyalty and trust and in general we do see strong correlations between each aspect (R-squares of between 73% for usability, 49% for loyalty, and 46% for trust). Appearance, when considered along with usability, tends to have a bigger impact on attitudes of trust and credibility of websites.<\/p>\n<p>This finding is consistent with earlier research which found strong associations between appearance and trust\/credibility (Karvonen et al., 2000; Robins and Holmes, 2007). In other words, users tend to trust attractive websites more than unattractive ones\u2014meaning appearance isn&#8217;t just a beauty contest, it likely results in more sales.<\/p>\n<p>The correlation between usability and trust is the strongest. This strong association may lend credence to the idea that what is beautiful is usable. But, like all correlations, we can&#8217;t make solid conclusions about causation. It could be the case that users find more usable websites beautiful.<\/p>\n<h2>What is Usable is Beautiful<\/h2>\n<p>We&#8217;ve seen evidence for strong associations between visual appeal and usability, and impressions of beauty do form quickly and are stable over time. How does this impact the usability of a website (both actual usability and the perception of usability)?<\/p>\n<p>Researchers in Europe recently conducted an experiment wherein they manipulated both the usability and visual appeal of an online ecommerce website (Tuch, Roth, Hornb\u00e6k, Opwisa, &amp; Bargas-Avilaa, 2012). They essentially took one website, made the navigation intuitive or not intuitive, and then changed the colors and contrast to be appealing or unattractive.<\/p>\n<p>They used task-based measures of usability (completion rates, clicks, and the ASQ, a three-item <a href=\"https:\/\/measuringu.com\/blog\/seq10.php\">variant of the SEQ<\/a>) and several post-test measures of usability, including the <a href=\"https:\/\/measuringu.com\/sus.php\">System Usability Scale (SUS)<\/a>.<\/p>\n<p>To measure website beauty, they used the longer set of aesthetic items from Lavie and Tractinsky and Hedonic measures from Hazzenzahl. They found, somewhat to their surprise, that it was NOT the more attractive website that increased usability scores, but rather it was the more usable websites that tended to increase measures of beauty! In short they did NOT find that <i>what is beautiful is usable<\/i>, but rather that <i>what is usable is beautiful<\/i>\u2014an important difference in the causation from earlier studies which found correlations between measures of beauty and usability.<\/p>\n<h2>What Questions to Use<\/h2>\n<p>It can be overwhelming to the researcher and respondent to rate dozens of items in order to judge visual appearance. We can narrow down the items to the ones that performed the best (best predicted visual appeal ratings) or were not affected by manipulations in usability.<\/p>\n<p>As an overall measure of website attractiveness, simply having participants rate the website (or homepage) on a five, seven or nine-point scale from Very Unattractive to Very Attractive appears sufficient. This is the same scale that worked for the Lindgaard et al. study and the one used in the SUPR-Q. The advantage to the SUPR-Q item is that you can compare the average score from the database and determine the relative standing of the appearance to 200 other websites.<\/p>\n<p>To generate more specific measures of aesthetics, having users rate the following three items on a one to seven scale from strongly disagree to strong agree provides additional measures not affected by attitudes of usability:<\/p>\n<ul>\n<li>Aesthetic<\/li>\n<li>Symmetrical<\/li>\n<li>Pleasant<\/li>\n<\/ul>\n<p>These items are from the classic aesthetics scale and were not affected by changes in usability in the experiment by Tuch et al. (2012). The terms &#8220;gaudy&#8221; and &#8220;takes me distant from people&#8221; from the Hedonic Quality scale were also not affected by usability changes and may be good candidates to consider (although I find the latter might have lost some clarity in translation).<\/p>\n<h2>What Elements Drive Visual Appeal?<\/h2>\n<p>So what about the webpage causes low and high ratings of visual appeal? It turns out this isn&#8217;t an easy question to answer. In the Lindgaard et al. study, two experts identified 89 properties across the websites but only agreed on nine! This supports the conventional notion that beauty is in the eye of the beholder. They recommend future researchers try another approach proposed by Kim et al. (2003), which did have more success in attributing design elements to measures of visual appeal.<\/p>\n<p>Fortunately, in most cases, I think designers know their websites well and know which elements they want feedback on. One approach, then, is to identify the elements of interest to participants. This could be the layout of particular pages, the amount of content vs. the amount of white space, the color of buttons, the contrast of navigation elements to content, and so forth.<\/p>\n<p>This works especially well when participants can rate multiple design options (for example different button styles). It may take some pretesting and experimenting to determine which elements and phrasing work best to evaluate.<\/p>\n<p>These lower-level page element ratings can then be used to see how well they explain overall ratings of appearance using multiple regression analysis (also called a Key Driver Analysis). Using this approach, you can identify which elements have a bigger impact on overall ratings and which ones don&#8217;t\u2014something we do <a href=\"https:\/\/measuringu.com\/blog\/ux-changes-nps.php\">when predicting customer loyalty<\/a>. This moves the design discussion from one based on opinions about which color, button, or element is &#8220;better&#8221; to one based on data. Of course, don&#8217;t expect your users to be your designers. Participants in any study can only rate what you present them.<\/p>\n<p>There will always be a need for talented designers to create a more visually appealing website. The judgment of that website will continue to be an important aspect to measure as visual appeal appears to play an important role in judgments of trust and credibility, both of which contribute to brand perceptions and the likelihood that users will recommend a website to a friend.<\/p>\n<h2>References<\/h2>\n<ul class=\"bulletsimple\">\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">Hassenzahl, M. (2004). <a href=\"http:\/\/dl.acm.org\/citation.cfm?id=1466561\">The Interplay of Beauty, Goodness, and Usability in Interactive Products<\/a>. Human-Computer Interaction, 19 (4), 319-349.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">Karvonen, K., Cardholm, L., &amp; Karlsson, S. (2000). <a href=\"http:\/\/www.tml.tkk.fi\/Research\/TeSSA\/Papers\/Karvonen\/Karvonen_Cardholm_Nordsec_final.pdf\">Cultures of trust: a cross-cultural study on the formation of trust in an electronic environment<\/a>. Paper presented at: Proceedings of the Nordic Workshop on Secure IT Systems, Reykjavik, Iceland.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">KIM, J., LEE, J., &amp; CHOI, D. (2003). <a href=\"http:\/\/www.sciencedirect.com\/science\/article\/pii\/S1071581903001320\">Designing emotionally evocative homepages: An empirical study of the quantitative relations between design factors and emotional dimensions<\/a>. International Journal of Human \u2013 Computer Studies, 59 (6), 899 \u2013 940.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">Lavie, T., &amp; Tractinsky, N. (2004). <a href=\"http:\/\/citeseerx.ist.psu.edu\/viewdoc\/summary?doi=10.1.1.101.8129\">Assessing dimensions of perceived visual aesthetics of web sites<\/a>. International Journal of Human-Computer Studies 60 (3), 269{298.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">Lindgaard G., Fernandes G. J., Dudek C., &amp; Brown, J. (2006). <a href=\"http:\/\/www.anaandjelic.typepad.com\/files\/attention-web-designers-2.pdf\">Attention web designers: You have 50 milliseconds to make a good first impression!<\/a> Behaviour and Information Technology, 25 (2), 115 \u2013 126.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\"><span style=\"font-size: small;\">Robins, D., &amp; Holmes, J. (2007). <a href=\"http:\/\/dl.acm.org\/citation.cfm?id=1315064\">Aesthetics and credibility in web site design<\/a>. Information Processing and Management, 44 (1), 386-399.<\/span><\/span><\/li>\n<li><span style=\"font-size: small;\">Tuch, A., Roth, S., Hornb\u00e6k, K., Opwisa, K., &amp; Bargas-Avilaa, J. (2012). <a href=\"http:\/\/www.mmi-basel.ch\/download\/pictures\/cf\/8682k9s5be3eui6n560befvd7uy0uo\/2012_tuch_chb.pdf\">Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI<\/a>. Computers in Human Behavior, 28 (5), 1596\u20131607<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Is a beautiful website more usable? Psychological literature has discussed, for some time, the &#8220;what is beautiful is good&#8221; phenomenon. That is, we ascribe positive attributes to things that are more attractive. This applies to people and likely to products and websites, as well. But does that positive halo also carry over to our impressions [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"default","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"_price":"field_56e41332a1ae5","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"Tribe__Tickets_Plus__Commerce__WooCommerce__Main","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[70],"tags":[72,109],"acf":[],"ticketed":false,"_links":{"self":[{"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/posts\/169"}],"collection":[{"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":1,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":31945,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/posts\/169\/revisions\/31945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/media\/1303"}],"wp:attachment":[{"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/measuringu.com\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}