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