UX Design Tips

6 Universal UX Tips for Increasing Sales on Your Website

By Tim Oldenhuis

Author image
June 29, 2017 12:47 am

While they might not realise it at the time, people are generally wary when it comes to buying online, especially when purchasing a product they’re not familiar with. To break down this sense of uneasiness and encourage people to make purchases it’s important to build trust between the user and the website – good design that provides a positive user experience is an effective way to do this. A website that provides a good user experience is one that is simple, intuitive, and easy to navigate. If you get it right, the user should flow from homepage to checkout with ease, barely noticing the aids and techniques used. Poor design however, and the negative user experience that comes with this will quickly prevent the building of trust, and have your customers looking elsewhere.

There are countless ways in which good user experience can be designed, but below I’ve outlined 6 UX tips for increasing sales on your site (techniques that can be applied universally).

1. Create familiarity

The exposure effect states that the more familiar people are with something, the more they will like it, and online content is no exception. People are conditioned to associate certain characteristics with different standards or benchmarks of different categories. For example, most people would recognise a typical online store as having a header with navigational items and a search bar, a side bar for filtering, and a main page area of thumbnails.

While this isn’t to discourage originality, when designing a website it’s important to design with user’s expectations in mind . When people are presented with information different to what they expect it interrupts the flow of information, creating friction, and making them more prone to scrutinising what they see. This applies to more than just your layout; user expectations should be considered in every aspect of your site, including the colours that are used (think red sale banners with white text for sales promotions), the type of information presented (details contained in product descriptions), and even the information requested in form fields.

You easily notice the effect of familiarity when you’re searching for something you wouldn’t ordinarily purchase, and where you’re unsure of the type of store you’d purchase it from. Earlier this month I had to replace a small part of a coffee machine, something I’ve never had to buy before and something I was unsure I’d be able to buy separately. I didn’t even know what to call it. I searched online by the part number and some results looked like a stock list; others had a shopping basket, a cart and a checkout all on the one page. The site below is the one I ended up purchasing from, because it was the first one that immediately looked like an online store. It has all the familiar elements, its structure is clear and there’s nothing unexpected.

Coffee Shop UX example

2. Use breadcrumbs

Breadcrumbs are navigational aids that are used to show the user where they are in a site, where they’ve come from and where they can go next. This contextual information is important to the user experience as people want to know where they are and what options they have. Providing it encourages exploration, whereas leaving it unclear can cause uncertainty and frustration. A good breadcrumb trail should start with the site’s homepage and end with the user’s current page, showing the site’s hierarchy in between (for example, Home > Men > Shirts > Long Sleeve > Carhartt WIP Donaldson Shirt).

Breadcrumbs are also effective in showing users how far along they are in processes, such as checking out. Psychologically people enjoy a journey more when they know how far along they are and how far they have until they reach the end. When progress is unclear, users can become impatient and abandon the process. Alleviating this can be as simple as placing a ‘Step X of Y’ message under ‘Next’ button, though a breadcrumb trail will have a much more encouraging effect as it tells the user what they can expect in the coming steps.

Asos is one online retailer who uses breadcrumbs effectively in both scenarios. Here the user is able to clearly see how they’ve arrived at this page, and can easily navigate back to different levels of the site, for example to view other zip hoodies.

Asos Example UX Design

Asos also uses a breadcrumb-like style in their checkout, making it clear where the user is in the process, how many steps are left and what each of them will be…

Asos Checkout UX Example

3. Take advantage of social proof

People are more likely to pay their bills on time if told the majority of their neighbours do, more likely to speed if the cars around them are speeding, and more likely to have contributions to charity deducted from their pay if a colleague does as well. Social proof is a powerful influencer of behaviour. We look to others to guide how we act, especially in situations of uncertainty, such as buying a new product online.

One way of including social proof that’s been shown to have a drastic effect is reviews, especially if the reviews contain a picture of the reviewer. Other methods that can be used include categorising products in terms of popularity or simply showing how many people have bought the product. eBay stores do this effectively by displaying the remaining quantity of a product followed by how many have been sold, tapping into social proof while also creating a sense of scarcity.

eBay Ratings UX example - UX tips for increasing sales

While it may not make sense to include ratings on your own website’s ecommerce store, you can easily boost your business’s social currency by inviting your customers provide reviews on your Google Business Listing or Facebook page.

4. Wherever possible, automate

A good user experience is one where the user is required to do as little as possible, and where the few actions that they do need to take are quick, easy and simple. The more difficult a process is, the more likely the user will give up halfway through, if they start it at all.

Automation involves reducing the amount and complexity of these tasks. Whenever your site can perform a step on the users behalf, it should. Automating can be as simple as auto-populating suggestions as a user types, or showing previews of items by hovering over them rather than having to click a link.

One place automating (also referred to as scaffolding) is especially useful is during the checkout process, as this step generally requires the most action from the user. Chances of abandonment are already much higher here because this is where users are about to part with their money and are most wary, so it’s important to reduce any additional strains you can. When asking for address details for example, ask for the postcode first and then autopopulate suburb and state fields so the user doesn’t have to type them in. When asking for credit card details, don’t ask the user their card type. Instead, have your site identify the card type from the card number.

EBay again provides an excellent example of this principle in action in their listing an item process. From the very first field where the user is required to enter information, the site offers suggestions of appropriate categories, defaults to the most common options, and provides recommendations for any area the user might feel uncertainty.

eBay Scaffolding Example UX Design

5. Error handling

As mentioned earlier, unexpected information interrupts the flow of information and causes frustration for users. A common source of unexpected information is errors. Errors can be made by the user or your site, but regardless of fault they can’t always be prevented. It’s therefore necessary to focus on how you respond to them

Following an error the goal is to guide the consumer back onto their path as painlessly as possible. The most effective way to do this is to explicitly point out the cause of the error, show the user where it is, and tell them what needs to be done to continue. If information is left out in a form, rather than displaying an error message along the lines of ‘incomplete fields, highlight the specific field/s that are missing and give an example of how it should be completed.

Gumtree does this well by letting users know as soon as they’ve made an error, but allowing them to continue to other fields and reducing the interruption in their flow. They also clearly highlight which fields need addressing, and are clear about how to do so.

Gumtree UX Example - UX tips for increasing sales

6. Evoke emotion with colour

There is overwhelming evidence that different colours cause different emotional responses and as a result you can optimise your site’s design to induce desired reactions at specific points in the user experience. For example, red increases people’s heart rate and is associated with excitement and confidence, which is why it’s generally used as the default for advertising sales (ironically, red can also increase feelings of indebtedness). Blues on the other hand calm people and creating an inviting, communal feel, which is why they’re often used for social media and communication sites e.g. Facebook, Skype.

While well-placed uses of colours can help shape the feeling users have towards your site, there effects are limited. Colours can’t be rapidly changed so that your users move from homepage to checkout guided entirely by their emotions. There are other ways though that colour can be used to improve the usability of a site and contribute to the user experience. While it may seem obvious, the benefits of highlighting call to actions and allowing for readability by using contrasting colours cannot be understated. Further, keeping colours consistent with branding and using colours that are associated with specific industries (e.g. browns and greens for natural products) greatly improves consumer confidence.

It’s also important for website colours to look contemporary and up to date. Google’s Material Design approach recommends “muted environments, deep shadows, and bright highlights”, i.e. bright and bold. Material Design aside, there are many examples of web designs incorporating bright colors to effectively increase emotional engagement. Asana’s color-drenched homepage is a great example…

Asana Homepage

As another example, the Calm website (and even more strategically, the Calm app) uses colour very well. The cool blues and greens not only reflect the tranquil nature of the site, they conjure up corresponding emotions as well. On top of this, the white text and call to action contrasts strongly with the background, effectively highlighting the user’s options and key information.

Calm Website UX Example

UX Tips for Increasing Sales

The level to which the design of your site can shape user experience will ultimately come down to how much you experiment with different techniques and discover what works best for your particular audience. The above is just a few principles that should be considered regardless of your sites purpose. By taking them into account you’ll be able to ease the inherent uncertainty felt by people shopping online, and the trust that comes with this will encourage users to engage with your site over those that don’t.

Of course there are range of other factors that will determine how well you website performs, including site speed, effective sales copy and calls to action, but if you nail these 6 UX techniques for increasing sales you’ll give you website the best chance possible of converting visitors to your website into repeat customers.

Leave a Reply

Your email address will not be published. Required fields are marked *