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

How important are the aesthetics of a website? Does a beautiful site convert better? And what is the relation between aesthetics and usability? In this post, I try to answer these questions

What is beautiful is usable?

The halo effect

The halo effect is a cognitive process in which people attribute all kinds of characteristics to a person based on a first impression or one characteristic. The attractiveness or the beauty of a person has been found to produce a halo effect. When you meet someone you find attractive, chances are higher you will think they are nicer and more intelligent than when you meet someone you do not find attractive.

In the literature concerning aesthetics of websites, this halo effect on the base of attractiveness is researched. The theoretical notion in these studies is that as people perceive a website as very beautiful, they will also think that it is very usable.

For a clear (and entertaining) explanation of the halo effect, watch this short video:

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.

New to SEO? Get quick wins to make your site rank higher with our FREE SEO for beginners course! »

Free SEO training: SEO for beginners Info

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

Read more: The importance of typography »

No straight-forward relation between aesthetics and usability

Correlation IS NOT causation

A causal relationship implies that one thing (e.g. an improved interface) will lead to another thing (e.g. more sales). A correlation solely implies that two things relate.  What exactly is the difference between a relation or a correlation and a causal relation? When – if ever – can we be sure that a causal relationship truly exists? Establishing a causal relation is ONLY possible if the study uses some kind of experimental design. There are three conditions to specify a causal relationship:

1. We can determine a relationship between two variables X and Y (e.g. a variation in website design relates to an increase in visitors on your website).

2. The variable X which is seen as the cause of the relation is prior in time to the variable Y (which is the dependent variable). So, the variation in website-design is entered before the increase takes place.

3. We have to be absolutely sure that there does not exist any other explanation for the relation between X and Y. It should be excluded that another variable, for example ,a promotion of your new website design on another blog could be the true causation of the relation we found.

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.


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

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

  1. Aric Hoek
    Aric Hoek  • 4 years ago

    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?

  2. Pamela Role
    Pamela Role  • 4 years ago

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

  3. carly
    carly  • 4 years ago

    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!

  4. Jack Armstrong
    Jack Armstrong  • 4 years ago

    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 Rakt

      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!

  5. Scott Frangos
    Scott Frangos  • 4 years ago

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

  6. Uwe Becher
    Uwe Becher  • 4 years ago

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

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

  7. Janice
    Janice  • 4 years ago

    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 Rakt

      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.

  8. Joris
    Joris  • 4 years ago

    Great article. We’ve done some panel tests recently with ‘live’ persona’s in which we testen the responsive designs of Coolblue, 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 Rakt

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

      • Joris
        Joris  • 4 years ago

        I wish we could measure the conversion of Coolblue and 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 Rakt

          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!

          • Panneer
            Panneer  • 4 years ago

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

Check out our must read articles about Analytics

Tools to improve your online marketing campaign

Take your online marketing to the next level with these easy-to-use and insightful online marketing tools to help you optimize your site!

Read article »

Tracking your SEO with Google Analytics: a how-to

How do you start tracking your SEO? In this how-to guide, we'll explain how to track your SEO with Google Analytics!

Read article »

Twitter Analytics: stats for your tweets

Twitter Analytics can help you set up and maintain the right Twitter strategy. We'll explain what can be learned from Twitter Analytics.

Read article »