Beautiful or Usable: What�s important while designingyour website?

In releasing our themes, we got lots of reactions about the aesthetics of our themes. Some peoplefound them plain looking, boring or unappealing. Others were very enthusiastic. Of course, there isno 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 effectThe halo effect is a cognitive process in which people attribute all kinds of characteristics to aperson based on a first impression or one characteristic. The attractiveness or the beauty of a personhas been found to produce a halo effect. When you meet someone you find attractive, chances arehigher you will think they are nicer and more intelligent than when you meet someone you do notfind attractive.

In the literature concerning aesthetics of websites, this halo effect on the base of attractiveness isresearched. The theoretical notion in these studies is that as people perceive a website as verybeautiful, 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 articleof Tractinsky, Katz & Ikar (2000) is that a design which people perceive as beautiful leads to awebsite that people perceive as usable. The main reason for this relation is the halo effect: peopleattribute the effect of the attractiveness of the website on the validation of other aspects of thatwebsite.

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

No straight-forward relation between aesthetics and usabilityCorrelation IS NOT causationA 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 differencebetween a relation or a correlation and a causal relation? When - if ever -Â can we be sure that acausal relationship truly exists? Establishing a causal relation is ONLY possible if the study usessome 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 isthe dependent variable). So, the variation in website-design is entered before the increase takesplace.

3. We have to be absolutely sure that there does not exist any other explanation for the relationbetween X and Y. It should be excluded that another variable, for example a promotion of your newwebsite 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, resultsappear very mixed. A lot of studies support the initial notion of Tractinsky that a beautiful designleads to a usable design. However, most studies focus on correlational data solely, which severelylimits 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 ratingson perceived aesthetics. If people are frustrated because they can't seem to find what they want onyour 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 becauseof 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 handshops).

Next to that, the purpose of your audience appears to be a very important factor in the relationbetween 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 morehedonistic buyers, the experience people have by visiting your website is more important, theaesthetics of your site could well convince them to buy your products (see also one of my previousposts).

What can we do with all this scientific blablaYour website needs a nice design. It has to have an appeal to your audience. The evidence thataesthetics 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 haveproven 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 designedwith 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 aparallax-theme and themes with portfolio functionality), which will work better for sites ofphotographers, web designers and larger consultancy firms.

Literature

Lee, S., & Koubek, R. J. (2010). Understanding user preferences based on usability and aestheticsbefore 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 onuser 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 reallyusable? 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

https://yoast.com/beautiful-usable-important-design-ng-website/?utm_source=rss&utm_medium=rss&%23038;utm_campaign=beautiful-usable-important-designing-website