Aesthetic-Usability Effect: Can beauty become the key to usability in online retail?

Retailers we have a problem.

iPerception’s 2016 report shows that less than 25% of people who intended to make a purchase ended up actually buying something. That’s a huge leak in the buying funnel.

Why did 75% of people leave?

Using iPerception’s report from 2009 the top #1 and #3 reasons are usability-related:

Lesson: Fix your site’s usability issues.

But the problem is even more severe when you realise that this statistic talks about those who stayed on the website.

The second biggest leak is people who didn’t even stay on the website. The average bounce rate for e-commerce is reported to be somewhere between 35 and 57%.

According to a study by Chao Liu and colleagues from Microsoft Research, there is a 10-20 second window where a user decides whether a website is worth giving a chance or not.

What happens during those 20 seconds that makes people leave?

Research led by B.J. Fogg shows that many factors affect people’s trust towards a website, but the most prominent issue is design.

Lesson: Make your website visually appealing.

But here’s something interesting.

It appears that a website’s aesthetics and usability aren’t independent.

Research shows that users find visually attractive websites easy to use, even when actual ease to use is poor. In one usability study, on average, users failed to complete more than half of the required tasks successfully. When they worked with visually appealing websites they still rated their user experience highly.

So, maybe you could kill 2 birds with one stone: by improving aesthetics you might not only convince more visitors to stay, but also increase the chance that they will put up with your usability issues, ultimately buying.

This principle is known as the aesthetic-usability effect.

In the context of e-commerce, the aesthetic-usability effect is when users perceive more aesthetically pleasing websites to be easier to use than less aesthetically pleasing websites.

This means that better aesthetics can result in:

• More people choosing your website over other sites
• People putting up with your usability issues, making them more likely to reach the end of the buying funnel and purchase

(With that said, there are studies that show that severe usability problems will force users to judge usability independently of aesthetics. Regardless of how great your visuals are, if a user can’t find a product, she won’t buy.)

We saw the aesthetic-usability effect work not only in academic labs, but in real-life business, too. For example, one experiment we ran was solely focused on improving the design of a check-out form. This test resulted in a +3.6% uplift. Additional revenue from that uplift is estimated at €450,000+ per year.

Some of the most important areas to apply that thinking are:

Top Landing Pages.

A landing page is the first page that users see when they come to your website. It’s crucial because this is where users form a positive first impression of your website. How well those pages look thus determines whether users will stay or leave, and what’s their level of tolerance with your usability issues.

Each website’s situation is different, but in retail most often visitors enter through your homepage, your category pages or your product pages.

As an example, let’s look at a traffic report for PC World, a British chain of computer superstores.

Based on the limited data that Semrush can provide me with, I can see that their homepage gets the most traffic. Equally, their category pages are right at the top:

Checkout Flow.

Checkout Flow is the stage where people start to open their wallets. Not everyone does though with 69% of users abandoning the process. At least 2 of the top 10 reasons why people abandon could be mitigated by the aesthetic-usability effect:

As we already know, making this stage visually appealing can enhance users’ perception of the funnel being easy to complete and drive them to make a purchase.  

A website needs to be attractive, but how do we make it happen? After all, it’s subjective. You might like your website, but do your users think the same way?

There are 2 approaches to answering those questions:

• Customer research (aka ask your customers)
• Heuristic analysis (aka ask experienced UX designers)

I’m going to show you how you can apply both approaches, looking at examples of PC World’s homepage (customer research) and NET-A-PORTER’s mobile checkout flow (heuristic analysis).

PC World’s Homepage.

To understand if users perceive PC World’s homepage as visually attractive, we ran a small-scale survey, asking visitors to rate different aspects of that page.

For research we used VisAWI, an 18-question survey that was specifically designed for evaluating website aesthetics. The results of the survey showed that overall the website is visually pleasing. It scored 4.47 points out of 7. The benchmark for e-commerce is 4.05. This shows that PC World’s homepage is better than average:

In particular, users highly rated PC World’s layout as being “easy-to-grasp” and “well-structured”, indicating that it met their expectations as an ecommerce store. Overall, the majority agreed that the site is designed with care and looks professional.

But findings also highlight a number of areas that could be improved.

• 49% of users agreed that the layout is “too dense”
• 40% of users agreed that the choice of colours looks “botched”
• 47% of users agreed that the design of the site “lacks a concept”

49% of users agreed that the layout is “too dense”

Some of the reasons why users might think so are:

Lack of whitespace

Text-heavy sections

The “reasons to shop” section is very crowded which adds to the denseness of the page. This is further complicated by how text-heavy this section is, which could leave users perceiving it as overwhelming:

40% of users agreed that the choice of colours look “botched”.

This might be because PC World’s color harmony is disturbed. According to color harmony theory, bright blue and red colors that they use for their promo campaign wouldn’t necessarily match their main brand color, purple.

The theory of color harmony tells us that PC World would be better off following Hulk’s example…

In other words, using green as a complementary color to purple (potentially alongside a more saturated red):

There are 5 types of color harmonies, and depending on the one you choose, you’ll find other matches. Here’s another one suggested by Paletton.com, a tool for creating complementary color combinations:

To me personally (feel free to disagree), it seems that there is their branded color scheme. When seen in isolation its colors match well:

There is the promo-campaign color scheme. Again, when seen in isolation its colors match well:

It’s combining the two together that creates a challenge, and might have resulted in some people feeling that colors look “botched”.

47% of users agreed that the design of the site “lacks a concept”

When users say that the design of the site lacks a concept this might mean that a page doesn’t form a complete and pleasing whole. Gestalt theory of psychology suggests that we look at an object as a whole first and zoom in on its individual parts next.

When we have difficulty making sense of objects, we tend to perceive them as less beautiful.

As we’ve already observed with the colour scheme, the page doesn’t form a unified whole as two separate colour scheme do not match each other.

Similarly, the product catalog is chaotically organised. This makes it more difficult for people to group the objects together:

How about grouping those objects by a unified theme? For example, one row of laptops, one row of game-related products, one row of home office equipment. This would’ve made it easier for users to make sense of the page.

Finally, the page doesn’t seem to have a unified purpose. Yes, the main theme is the promo-campaign, but what action should users take next?

With so many competing calls-to-actions this isn’t clear:

Every page should have a dominant call-to-action (CTA). (As you should know from our article on the paradox of choice when there is no dominant option users are likely to get overwhelmed and quit).

Their “summer mega deals” banner takes the most space. So, I assume this was meant to be their dominant CTA. The problem is it looks like an image, not a clickable element which is why people might have been confused as to what they should do next on the page.

If this is the dominant purpose of this page, PCWorld would have been better off designing their “Shop Now” CTA not as text, but as a button.

Look at what Maplin is doing:

While technically, this banner is one single image, the call-to-action was designed to look like a button, so it’s clear to people that they can click it.

If PCWorld did the same and made that button as prominent as the rest of the banner, it would be easier for users to identify the main CTA.

To show you an example of how heuristic analysis can be applied to improve aesthetics, we’re going to look at NET-A-PORTER, a luxury fashion store.

Our designer, Josh Lenz, quickly identified a number of problems:

1. Lack of whitespace. Margins are too narrow and grey background overtakes the whole screen. Research shows that perception of simplicity is critical not only for general aesthetics, but also for creating a perception of luxury.
2. Forms look outdated. They don’t reflect the previous stages of the user experience. This inconsistency with the brand and design could diminish trust and credibility.
3. Third step looks broken or at least unprofessionally designed as “Select card type” field overlaps with “Card number” field.

So, the checkout design looks not only hard to complete, but might also diminish users’ trust in the brand. To reverse that experience he made a number of changes:

All Steps

• Changed style of progress bar – makes it more legible
• Changed text to icons in footer – simplifies the page visually
• Increased the spacing – creates a cleaner look which is easier to digest visually

Step 1

• Simplified text fields – creates a better balance on the page
• Changed tickbox and button style to match brand

Step 2

• Placed shipping options in cards – card placement improves vertical symmetry of the page, adds more white space and creates more of a visual flow down the page.
• Packaging options placed side by side – creates better balance on the page.

Step 3

• • Simplified text fields – creates a better balance on the page
  • Changed the ‘+’ icon and edit button style to match brand

My hypothesis is that since the page now looks modern, more clear and matches NET-A-PORTER’s brand, more users will perceive it as easier to complete. Not only will more users continue to complete their purchase as the page looks more clear, but users are also less likely to be scared by an experience that substantially deviates from the brand.

The next step would be for NET-A-PORTER to test this design change against the original, and measure if it actually impacts their bottom-line.

1. You should recognise that I don’t have a full insight into these companies’ strategies and user behavior, so some of my suggestions above might not be in line with their business goals.
2. It’s more important to understand the process and reasoning I followed rather than copy and paste specific suggestions.

With that in mind your main takeaways should be:

1. Improving your aesthetics can drive additional revenue for your business. (In our experience, it could drive as much as €450,000 of additional revenue per year).
2. One of the reasons why is people would perceive your product/platform as easier to use, making them more likely to stay and complete their purchase.
3. To improve your aesthetics use research. Be it user feedback (with the help of such tools as VisAWI) or systematic analysis by an experienced designer (internally we use a UX Review checklist that consists of 52 criteria against which we evaluate every website we work with).
4. Translate insights from the previous step into actionable test ideas. Tip: Hire an experienced designer who can translate your user feedback into action. For example, users can tell your colors look botched, but they can’t tell you how to fix your color harmony.
5. Focus on the high-value, high-friction points in your user funnel (eg. your top landing pages, bottom of the funnel stages such as check-out flow).
6. When applying aesthetic-usability effect, don’t change usability. As you could see in none of our suggestions we changed the core function of the website. In 2014 Marks & Spencer re-designed their website, changing both its aesthetics and functionality. A vast array of technical issues led to an 8% drop in sales.
7. Measure impact. This can be in the form of gathering user feedback on your new design, but bottom-line impact is what we’re after. Treat your new design as a test, not a blind change. This way you’ll know how much aesthetics matters for your audience.