Usability tips for optimising conversion: What a user-friendly online shop looks like
As an e-commerce retailer, you know how important website usability is to the success of your business. After all, if customers can't easily figure out how to use your shop, they will be less likely to make a purchase. It's as simple as that.
This article explains how you can boost your conversion rate by making your online shop more user-friendly. It also includes our Usability Checklist, which covers all the examples and tips contained in the article.
Defining usability: What does user-friendliness mean in e-commerce?
‘Usability’ refers to how user-friendly a website is. It's all about creating a hassle-free user experience that will make your customers enjoy shopping on your site. And that means designing your online shop so that visitors can quickly and easily find exactly what they need.
Perhaps the most important aspect of usability is how easy it is to navigate your site. Your website design should make navigation intuitive and quickly lead customers to the products or information they’re looking for. Other handy functions, like using auto-fill for form data, also help optimise the user experience (UX) on your site.
Why is user-friendly web design so important for conversion in e-commerce?
Usability and a positive UX increase the likelihood that...
a user will make a purchase, and
first-time customers will become repeat customers.
The easier it is for users to navigate your online shop, the faster they can find the products they want. And that makes them much more likely to become satisfied customers.
Customers are rarely consciously aware of good usability. However, poor usability is clearly noticeable (for example, if important filters are missing or the site is difficult to navigate). If your site doesn't meet the customer's expectations, they will simply leave without buying anything. This illustrates the direct link between usability and conversion: making your shop more user-friendly is crucial for boosting sales in the long term.
How can you test the usability of your online shop?
To find out whether your shop’s design is user-focused, you can perform a usability test. There are many types of tests to choose from, depending on your budget, your level of experience and what you want to achieve.
Companies learn the most from conducting live tests with real users who can offer immediate suggestions for improving the design of an online shop. There are also many tools to help you gain insights into your shop’s usability.
|Type of test||Test name||Method|
|Live user testing||Card sorting||Card sorting is mainly used when designing a web project. The goal is to organise the contents of your site into logical categories, so you can determine which main menu items you should use to make your shop as structured and understandable as possible for the user. First, test participants are given cards that contain terms related to the site's contents. Then, they are asked to arrange the cards into main categories, using either predefined categories (closed card sorting) or categories they create themselves (open card sorting). Prior to card sorting, it’s also smart to do a wording analysis to test how understandable the terms are.|
|Journal study||This method enables you to test website usage over a longer period of time. Users keep a written record of their experiences when using your shop, which gives you insights into how user-friendly it is. This helps you to identify aspects of the UX that need to be improved.|
|Rapid prototyping||This is a useful method to apply at the early stages of designing your online shop. Test participants are asked to use and rate the features on a prototype version of your website. Based on their feedback, you can continue to improve the prototype and run further tests on it. This is a good way to learn which parts of the site meet users’ expectations and which parts need to be improved to make them easier to understand.|
|Synchronous lab testing||During a synchronous lab test for shop usability, participants are asked to perform predefined tasks (for example, to buy a specific product). The users then share their thoughts on how user-friendly they found the site or application to be. The project is supervised by usability experts who can actively ask follow-up questions. This type of test can be used very effectively in combination with eye-tracking measurements.|
|Tool-based usability tests||Eye tracking||Eye-tracking tests monitor users’ eye movements when they are looking at a website. This shows which elements they look at, in which order, and for how long, giving you insight into the usability of your web design. For example, if users look at a specific element for an above-average amount of time, it could be a sign that they do not understand it. Or, if their gaze shifts very rapidly and apparently aimlessly from one element to the next, the page may be cluttered or the design may be confusing. Eye tracking is also a suitable usability test for mobile applications.|
|Asynchronous testing||Using special software, you can perform automated asynchronous shop usability testing from any location. The tool collects information on user behaviour, such as the navigation path that they choose when making a purchase in an online shop.|
|On-site surveys||These give you a fuller picture of who your site’s visitors and potential customers are. A pop-up or layer appears on the screen, inviting the visitor to take part in an online survey that is conducted using a survey tool. During the survey, the participants answer questions about their user experience and give you ideas for how to improve usability. These surveys also allow you to collect personal information you can use to formulate personas and define your target group more specifically.|
|Usability testing without tools||Personas||It isn’t possible to effectively test shop usability without software or user surveys. However, creating personas based on potential customers can help you make your website more user-friendly. The most important thing is to put yourself in your customer's shoes and answer questions like these:|
|- What are the user’s intentions when visiting my website?|
|- How do visitors use my site?|
|- Which functions or services are users looking for?|
|Answering such questions enables you to optimise UX and design a user-friendly shop that caters specifically to your target group.|
KPIs for usability testing
To make usability measurable, it’s a good idea to start by defining some key performance indicators (KPIs). They will help you determine whether your web design is effective and user-focused.
Quantitative usability KPIs include:
success rate for completing tasks
how long it takes to complete tasks
using the search function vs. using site navigation
how often errors occur (for example, when using specific payment methods)
Qualitative usability KPIs include:
user expectations and performance
Outside the testing environment, the following KPIs give eCommerce retailers insights into how user-friendly their sites are:
time on page
cart abandonment rate
Optimising your online shop: 7 usability tips for user-friendly web design
As an e-commerce retailer, you have more choices than ever when it comes to adding functions to your online shop. Still, it’s usually a good idea to stick to the golden rule: less is more. The keys to boosting usability on your site are an intuitive user interface and a clear, easy-to-navigate design. Here are some tips to help you make your website even more user-friendly.
Tip 1: Keep load times to a minimum
In many cases, visitors decide whether to stay on a page or quickly leave it simply based on how long it takes the page to load. If your online shop hasn’t fully loaded in two to three seconds, there’s a good chance that the user will hit the back button right away and return to their search results. If that happens, you’ve lost them to your competitors. In addition, your conversion rate will suffer, and the higher bounce rate on your page will send a negative signal to Google. Your site’s search engine ranking will suffer if users frequently leave within just a few seconds. That’s why one of the best things you can do to improve usability is to optimise your site’s load time (for example, by using compressed product pictures).
The images you use on your site should never be larger than 1920 x 1280 pixels. And follow this rule of thumb: upload photos and high-quality graphics as JPEG files, and upload smaller graphics or ones with few colours or transparencies as PNG files.
Tip 2: Stick to a classic design
Over the years, websites have gradually adopted a more or less standard page layout. This enables online shoppers to intuitively navigate a website. Usually, the elements of an online shop are arranged as follows:
|Company logo||Top left or middle|
|Shopping cart||Top right|
|Search function||Top, between the logo and sign-up|
|Sign-up and login||Top right|
|Contact information||Bottom, in the footer|
This doesn’t mean that every online shop needs to look exactly the same. However, these standard elements make the site intuitive for your users, which improves usability. If your site uses an unusual, overly creative design that puts the standard elements in hard-to-find places, it’s likely to put off your potential customers. The same goes for the terms you use. Avoid using unconventional names for things like the shopping cart or login. This only leads to confusion.
Tip 3: Make searching simple
Your customers must be able to find products on your site as easily as possible. That’s why the following elements are so important:
Logical product categories
Clearly defined filters
You can also use auto-complete to make the search bar even more user-friendly. As your user enters a search term, show them a list of possible matches and the number of search results for each match.
Tip 4: Arrange pictures and descriptions helpfully
Once the user finds the product they are looking for, detailed pictures and informative descriptions help entice them to make a purchase. Once again, it’s important to arrange on-screen elements so that the shopper can intuitively navigate the page. Some elements, for example, usually appear to the right of the image gallery. These include:
Size and quantity selection
The ‘Add to cart’ button
A quick list of key product features
A size table (if applicable)
Detailed product descriptions and customer reviews should be positioned below the image gallery.
Tip 5: Let customers ‘continue shopping’
Another important usability feature is to allow the user to immediately continue shopping after they’ve added an item to their shopping cart. For instance, you can use a pop-up window to give the user the option to either ‘Go to cart’ or ‘Continue shopping.’ If they choose to continue shopping, they should be able to pick up exactly where they left off, without having to perform a new search or set their search filters again.
It’s also important to include a ‘Continue shopping’ button inside the shopping cart. In many online shops, a customer has no option to return to the shop once they enter the shopping cart. As a result, it takes them longer to find their way back to the product selection they were viewing previously, and they might even abandon their cart. To ensure maximum usability, always include a clearly visible ‘Back to shop’ or ‘Continue shopping’ button.
Tip 6: Simplify the checkout process
Checkout usability is one of the most important factors that can boost your conversion rate as an eCommerce retailer. This could mean reducing the steps in the order process to the lowest possible number. Also give your customers the option to make an instant one-click purchase without creating an account. For more tips, check out our complete guide to optimising your checkout process to boost conversion.
Tip 7: Automate forms
These two automation options make filling out forms on your website easier and more user-friendly:
Auto-fill automatically fills in form data fields as soon as the customer enters their address information.
Inline validation finds possible mistakes in the information the user has entered by instantly checking things like:
Do the postal code and city match?
Does the street match the city/postal code?
Is the email address format valid (containing an @ symbol, without any spaces, etc.)?
Mobile commerce: User-friendly shop design for mobile devices
Mobile online shopping is increasingly popular. The 2019 Shopping Index study conducted by Salesforce found that 70% of users worldwide prefer to search for products on their mobile devices. To prevent potential customers from immediately leaving your online shop, it’s important to optimise your site’s usability for smartphones and tablets. Here are a few tips for creating a user-friendly mobile shop design.
Scale back content
Mobile devices offer far less screen space than desktop monitors. That makes it important to streamline your site to the most popular core functions and make these the focus of your mobile design. Be sure to keep the menu options short and clear—that will help boost usability in the mobile version of your shop.
Use an easy-to-navigate design
Highly functional design is even more important for m-commerce. Avoid unnecessary gimmicks, huge pictures and multimedia content. These not only overwhelm the user; they also slow down your page’s load time. Always give your customers a clear, easy path to return to the start page at any time. And make sure that page elements like the shopping cart and main navigation options are always easily accessible.
Use the touchscreen effectively
Design the mobile version of your online shop so that users never have to zoom to use it. Make CTA buttons large enough for the user to easily press with a finger. You can also take advantage of mobile functionalities like swiping, which allows users to flip through product pictures and lets you display longer texts in a more structured way.
Synchronise the shopping cart
A user-focused shopping cart is also important in mCommerce. Make sure that the functions are simple to use and that customers can easily manage products in their cart. It’s also a good idea to enable synchronisation with the desktop version of your site. This lets users start shopping on their mobile device and then complete the purchase later on the desktop, if they prefer.
Checklist: Does your online shop tick all the boxes for usability?
This checklist helps you quickly and easily assess how usable your online shop is. That way, you can identify areas where you can improve user-friendliness—and boost your conversion rate.
|1. General usability||Clear design|
|Efficient navigation (reaching the goal in just a few clicks)|
|2. Path to the product||Logical categories and subcategories|
|Option to create a wish list|
|Wish list option works even without a customer account|
|Easily recognisable ‘Add to cart’ button|
|3. Product search||Search function is in a clearly visible location|
|All products can be found through the search tool|
|Auto-suggest possible matches as the customer enters search terms|
|Allow for typos/errors in search terms|
|List search results in a logical default order (e.g. lowest price first)|
|Allow users to adjust the order in which results are displayed|
|Provide filters for search results|
|Offer plenty of product information along with search results|
|4. Product presentation||Clear, visually appealing design|
|All important information at a glance (such as price, size, material, colour)|
|Availability information (for both online and in-store shopping)|
|List of key product benefits to entice the customer to buy|
|Pictures with zoom function, various perspectives, etc.|
|Product descriptions in both short, bullet-point form and in longer, more detailed form|
|Cross-selling and similar products at the bottom of the page|
|5. Shopping cart||Easy to find at the top of every page|
|Symbol changes appearance when products are added (showing number of items and/or price)|
|Mouseover quick view of the shopping cart|
|A notification appears when the user adds an item to the shopping cart|
|Shipping costs are clearly displayed|
|Option to change or remove items from the cart|
|Button to start the checkout process|
|Button to continue shopping|
|6. Checkout||Quick, easy-to-understand checkout process|
|Option to leave the checkout process and continue shopping|
|Option to complete checkout without creating a customer account|
|Forms with auto-fill and/or inline validation|
|Easy-to-understand error messages when incorrect data is entered|