Keeping it simple: great UX design for retailers
If you want customers to make a purchase on your e-commerce site, you need to make the process quick and easy. This article explains how to remove potential barriers and help to maximise conversions.
During armed conflicts, state-of-the-art planes and vehicles need to be repaired quickly, potentially with basic tools. The need for specialist equipment or extensive specific knowledge would result in either too much time being required or repairs being impossible to be conducted on the battlefield.
It is this which resulted in aeronautical engineer Kelly Johnson coming up with the KISS principle – “keep it simple, stupid”. His belief was that unnecessary complexity should be avoided in favour of making simplicity key at the design stage. So, the easier it is to perform a task, the more people can do it, and the less likely it is that issues are encountered.
Johnson’s principle lives on, and not just in the armed forces. KISS is commonly applied in the world of technology, including when looking at website user experience (UX). Visitors want to find the information or products relevant to them quickly and efficiently, with as few obstacles as possible.
This guide looks at four key areas of UX design for those with an e-commerce site, highlighting important areas to consider when looking to ensure that your site is suitably simple.
Simplification of navigation
We’ve previously discussed the moment of orientation, and how crucial it is that a visitor can tell what your site has to offer within the first few seconds of a visit to the home page. This is especially key with e-commerce, as potential buyers are looking to quickly find out whether a site offers what they’re after and helps them get to the relevant page.
Your store may sell hundreds of products, or millions. It may be focused on one range of products or cover many different categories. The key is ensuring that visitors are shown the breadth of products available, without being overwhelmed by the choices on offer. But it is a balancing act: provide too much choice immediately, and you’re on the road to becoming the next arngren.net!
An example of how simple navigation can improve the user experience can be found with the Asda website. Only a few years ago, the website looked like this:
With no sign of a search bar and 15 links in the top navigation bar alone – and key offerings such as groceries and George given equal weight alongside lesser offerings such as Asda Tyres – making a choice from these options is necessary for a visitor to get anywhere.
The current Asda site has improved on this, with a much simpler approach:
The four main services on offer are much clearer on the simplified navigation bar. Less popular options, such as Asda Tyres are still available, but only visible when the visitor clicks the ‘More’ option on the right.
Most importantly, the search function has been given much greater prominence alongside the store logo. If you’re looking to find out whether Asda stock your favourite type of bread, or what clothes George has on offer, then no hunting around is required – the search facility enables visitors to get directly at the specific products they require in as few steps as possible.
- Use minimal clear top-level categories for your main navigation, avoiding overlap and ambiguity where necessary.
- Make availability of site search prominent in your site design.
- Don’t be afraid to focus on key product areas, with less important ones available behind additional navigation.
Simplification of selection
Hick’s law (devised in the mid-1950s by British psychologist William Edmund Hick) states that the more options there are available, the longer it takes to process them and decide on which one to choose:
If your store has many products that are relevant and they’re all presented with equal importance, then the potential customer will potentially evaluate each of them before proceeding – taking more time to decide and decreasing the chance of conversion. Your visitors need a quick way of narrowing down the choice and getting to the product that’s most suitable as easily as possible.
Amazon is the largest internet retailer in the world, with millions of products across a huge number of categories. Helping visitors pinpoint the specific product that best meets their needs is of critical importance, given the sheer level of choice on offer.
For example, let’s say we’re interested in purchasing a Blu-ray copy of the most recent Spider-Man movie. If you visit Amazon UK and search for ‘spider-man’, you start with over fifty thousand products listed:
While display in order of popularity helps – with the most common searches of the moment shown at the top – it won’t help in every instance. Here, for example, you can’t expect a visitor to look through all fifty thousand products!
This is where the benefit of Amazon’s extensive filters are clear – a few quick clicks greatly reduce the options for the user to consider. In this instance, clicking on ‘Movies’ (under DVD & Blu-ray), ‘Blu-ray’ and ‘2010 and later’ reduces the options down to less than two hundred. And there, sitting on the top row of results is the product we’re after:
- Enable visitors to filter down the products you have on offer, helping narrow their choice to appropriate options only.
- Base the filters on relevant key criteria that would be of importance to your customers – product colour, brand, price, customer review scores, etc.
- Present pages listing product choices in a suitable order by default, so that more popular ‘of the moment’ choices are the most prominent.
Simplification of purchase
Once your prospective customer has found the product that interests them, you want them to buy it from you. To ensure that there’s the highest possible chance of this happening, the process should be as quick and painless as possible.
If your site is likely to attract further purchases from the same customers later, then it’s a good idea to allow accounts to be created and details saved. This means that when they do come back, no time is wasted re-entering information such as name, address and contact details.
Often, the process of creating an account can be made simpler. Visitors are likely to be a member of one or more social media services, which will contain some of their details. Allowing visitors to create accounts using their social media registrations means that many of these details can be carried across – and can simplify how visitors log back into their account on their next visit.
ASOS provides a good example of this. If a visitor is new to the site then they are given the option to set up an account, during the checkout process, using either Facebook, Google or Twitter as a basis:
A short and ‘to the point’ message details the benefits of signing up in this fashion, as well as addressing any data concerns that visitors may have.
While making an account is beneficial for a significant proportion of your potential users, there will be visitors who don’t want to set one up – because of privacy concerns, worries about spam or another reason. As such, it’s still a good idea to allow purchases without logging in to an account, through a ‘guest checkout’ or similar.
- Allow potential regular customers to set up an account with their details stored, to minimise the information that must be entered for each purchase.
- When they’re setting up an account, allow them to log in via social media and carry across available data, minimising data entry.
- Ensure a ‘guest checkout’ option is also available.
Simplification of payment
Your customer has looked through your site, found the product they’re after and started the purchase process – but until they click that final confirmation button, there’s still potential for them to ‘drop out’.
Have you ever been asked to sign in to your Amazon, PayPal or Google account to pay for a product? These are all examples of account-based payment providers, which allow visitors who have a suitable account on one of these third-party sites to buy products more quickly and easily – without needing to re-enter potentially awkward and sensitive details such as credit card number and card security code.
While such providers will charge your business a higher fee compared to other payment services, they can be a big boost to conversion. Aside from the obvious benefit of a quicker and easier passage through the checkout process, utilising such well-known and trusted companies can be a good signal of trust for an e-commerce site.
Account-based payment providers have increased in popularity in recent years, and tend to be prominently featured alongside the standard card checkout. For example, London Theatre Direct provides the option for visitors to pay through Amazon or Google as well as ‘checkout with card’:
Payment providers will not be for everyone, so it’s important for the standard checkout process to also be as simple as possible. Ensure minimal frustration by not asking for details more than once (except where necessary). For example, if someone wants to have their purchase delivered to the same address as to where their card is registered, they should be able to simply tick a box for this single address to be used in both areas – not asked to input it all over again.
- Where suitable, allow visitors to use payment methods that they may already have set up to increase ease-of-use and visitor trust.
- For those who are entering their details directly on your site, allowing details to be carried across appropriate fields automatically.
Every website is different, with unique strengths, weaknesses and challenges. As such, working out what areas of your site are in biggest need of simplification (and therefore the most attention from your developers) can be a daunting task.
That’s where Further comes in. Our experts have been looking at how to get the best out of clients’ websites for over a decade and will be able to cater to your specific needs – ensuring your site is working as hard as it can for you. We’d love to help, so get in touch with us by clicking here.