Beautiful or Usable: What’s important while designing your website?

In releasing our themes, we got lots of reactions about the aesthetics of our themes. Some people found them plain looking, boring or unappealing. Others were very enthusiastic. Of course, there is no accounting for taste. But it made me wonder, how important are the aesthetics of a website? Does a beautiful site convert better? And what is the relation between aesthetics and usability?

What is beautiful is usable?

A much cited article on the matter is ‘What is beautiful is usable’. The main conclusion of this article of Tractinsky, Katz & Ikar (2000) is that a design which people perceive as beautiful leads to a website that people perceive as usable. The main reason for this relation is the halo effect: people attribute the effect of the attractiveness of the website on the validation of other aspects of that website.

Although the article of Tractinsky et al. produced very important and still useful insights, it is very outdated as well. It was published in 2000 and the research was executed a few years before that. In those years, developers did not think about aesthetics at all. Websites were used only by very early internet adopters and for information gaining purposes solely. All designs were simple, style sheets were hardly used and CSS was not supported by any browser (see wikipedia). Aesthetics were just not that important yet. Tractinsky and collegues were so absolutely right in their prediction that aesthetics would become more and more important in websites. But, in 2014 design and aesthetics have a completely different role in websites. The results from the 2000 Tractinsky study cannot be translated in any way to the present situation.

No straight-forward relation between aesthetics and usability

Looking at the results of some recent studies on the importance of aesthetics and usability, results appear very mixed. A lot of studies support the initial notion of Tractinsky that a beautiful design leads to a usable design. However, most studies focus on correlational data solely, which severely limits the explanatory power of these studies (see aside about correlation and causation).

Several (recent) experimental studies show relations between aesthetics and usability (e.g. Lee & Koubek, 2010). A large and impressive study of Tuch et al. (2012) however shows opposite relations. Their findings refute the ‘what is beautiful is usable notion’. Poor usability appeared to lower ratings on perceived aesthetics. If people are frustrated because they can’t seem to find what they want on your site, their approval of the design of your website will become smaller.

Numerous authors argue that the type of website could be of great importance while establishing  the relation between aesthetics and usability. Some websites really need a smooth design because of the products they offer (for instance photographers need nice pictures to promote their abilities), while other websites would benefit more from a slightly outdated design ( for instance second hand shops).

Next to that, the purpose of your audience appears to be a very important factor in the relation between aesthetics and usability (e.g. Sonderegger en Sauer, 2010). For goal-oriented buyers, usability is most important: they want to buy the product and leave your website. For more hedonistic buyers, the experience people have by visiting your website is more important, the aesthetics of your site could well convince them to buy your products (see also one of my previous posts).

What can we do with all this scientific blabla

Your website needs a nice design. It has to have an appeal to your audience. The evidence that aesthetics matter is overwhelming. Make sure your website looks awesome!

However, aesthetics should never interfere with the aim of your website. That is why you should  always have a clear call to action. Also, be aware that although some things look nice,  they have proven to have serious usability issues ( remember our slider-post ;-) ). Avoid these!

In designing our themes, we have focussed on usability AND aesthetics. Our themes were designed with personal blogs and small businesses in mind. Their audiences need clean and simple designs. We are currently designing themes focussing specifically on the aesthetics (amongst them a parallax-theme and themes with portfolio functionality), which will work better for sites of photographers, web designers and larger consultancy firms.

Literature

Lee, S., & Koubek, R. J. (2010). Understanding user preferences based on usability and aesthetics before and after actual use. Interacting with Computers, 22(6), 530–543. doi:10.1016/j.intcom.2010.05.002

Sonderegger, A., & Sauer, J. (2010). The influence of design aesthetics in usability testing: effects on user performance and perceived usability. Applied Ergonomics, 41(3), 403–10. doi:10.1016/j.apergo.2009.09.002

Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable, 13, 127–145.

Tuch, A. N., Roth, S. P., Hornbæk, K., Opwis, K., & Bargas-Avila, J. a. (2012). Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI. Computers in Human Behavior, 28(5), 1596–1607. doi:10.1016/j.chb.2012.03.024

Check out our WordPress SEO Premium plugin

14 Responses

  1. JorisBy Joris on 3 April, 2014

    Great article. We’ve done some panel tests recently with ‘live’ persona’s in which we testen the responsive designs of Coolblue, Bol.com and the AH allerhande website. Pretty much all our testpersons preferred the allerhande website, even while pure functionally seen, it is not persé the best one of the three. However….the looks of it (and ofcourse the great foodpictures) made such a big first impression that it seemed like problems, bugs or a not optimal flow are much much easier forgiven by the users than websites that just look….well plain. So yes, we can confirm…..looks do matter, a lot!

    • Marieke van de RaktBy Marieke van de Rakt on 3 April, 2014

      That is really interesting, Joris. You did not happen to test whether the looks of a website lead to more conversions, did you?

      • JorisBy Joris on 3 April, 2014

        I wish we could measure the conversion of Coolblue and Bol.com websites Marieke ;-) So no, we did not.

        Would you dare make the assumption that a good looking website that consumers fall in love with do convert better in most cases?

        • Marieke van de RaktBy Marieke van de Rakt on 3 April, 2014

          I am afraid that I’m not such a daredevil ;-). I think aesthetics are definitely important in conversion, but we already know that beauty does not per se lead to more conversions. Sliders are a good example of that: they are really nice to look at, but appear to convert terribly. We already are making plans at Yoast to do some testing ourselves in this matter!

          • PanneerBy Panneer on 4 April, 2014

            Though, there are many keywords and topics, but why did you used the Scientific aesthetics!!?

  2. JaniceBy Janice on 4 April, 2014

    The problem with blogging is that there is no real product to sell, so how do you define conversion? Is it engagement? Social shares? Page views? Subscribers?

    • Marieke van de RaktBy Marieke van de Rakt on 5 April, 2014

      without a real product, you have to think hard about the goal of your blogging. Is it to spread the word? Than conversion could be social shares or subscribers. Is it (and there is nothing wrong with that) to increase profits of advertisements. Than pageviews would be the correct conversion-measurement.

  3. Uwe BecherBy Uwe Becher on 4 April, 2014

    Hi Marieke,

    a very helpful article, thanks for the work and the literature. I often ask myself what can I do to understand the clients better and to make my blog / website better or more clear. And if you came to article like yours it will help to work on :)

    @janice,
    good point and I will not overload the blog with commercial like others …

  4. Scott FrangosBy Scott Frangos on 4 April, 2014

    Hello Colleagues –
    Enjoyed the article and enjoying the discussion. You have to try and cost justify the expense of an updated design for established clients, so I appreciate the thoughts about tying that to conversions. We do a lot of A/B testing, and usually it involves value propositions and CTA changes. Sometimes color changes. But this discussion has got be thinking about a pure test on aesthetics. We all agree that looking sharp, up to date, and professional definitely helps.

    But what about different design styles? Different graphic designers often render very different stylistic results… the CSS Zen garden examples come to mind — see all the variations for the exact same page content: http://www.mezzoblue.com/zengarden/alldesigns/ What about photos versus spot illustrations? Hard professional sans-serif fonts (like Arial) versus cursive fonts. Which would convert better? I think I will look at that in some forthcoming A/B tests and look forward to hearing all of your thoughts on this.

  5. Jack ArmstrongBy Jack Armstrong on 4 April, 2014

    Marieke – Thank you, thank you, for including the sidebar “Correlation IS NOT causation”!! Years ago I worked with some of the world’s leading statisticians at the Stanford Research Institute and this fundamental axiom was drummed into me from day one.

    I am appalled daily at the almost universal misunderstanding that correlation implies causation – e.g., “hair growing in ears leads to increased heart attacks”. (Hint: who grows hair in our ears? Men. Who has a higher rate of heart attacks? Guess…

    • Marieke van de RaktBy Marieke van de Rakt on 5 April, 2014

      hahaha…. I had written the sidebar correlation IS NOT causation a long time ago… but I had to have a subject related to this lesson in statistics first… I agree that people make too many (stupid) mistakes based on correlation, I really annoys me too!

  6. carlyBy carly on 9 April, 2014

    I remember back in 1997 when i designed my first 10 page website, it was about making a beautiful layout in PS, then cutting and clipping the image parts to smallest pieces, setting them up in tables with hand written HTML, then going through a simple upload after writing the entire code by hand. It is so much easy.

    And I feel that beauty is nothing, if it is not usable. And usability alone does not leave a lasting impression, both go hand in hand!

  7. Pamela RoleBy Pamela Role on 10 April, 2014

    Pretty great post. I just stumbled upon your blog and wanted to mention that I have really loved browsing your post.

  8. Aric HoekBy Aric Hoek on 12 April, 2014

    You mention at the bottom of the article that you are developing a theme or two that will have a portfolio function. Any idea on when these might be released?