2017-05

How to improve your eCommerce site navigation (and conversions)

by Chris Marklew
 | 
27 June 2017
How to improve your eCommerce site navigation (and conversions)Your eCommerce website's navigation is the roadmap that guides your customers through the sales funnel on a journey to the checkout.

How a customer navigates through your website will determine where they end up. If you provide clear directions along the shortest possible route, they're more likely to end up where you want them – the checkout – and willing to repeat the trip. If you don't, they're likely to get lost or go off-road entirely.
 
It’s important you understand what makes good site navigation and how to test it to decrease cart abandonment, and convert first-time visitors into repeat buyers.
 

MENU

Start at the top

Whatever business you're in, you need to break down your offerings into concise categories. Top-level navigation, or menu buttons, should include the most important parent categories, organised in a way that's useful for your customers and easy to understand.
 

Topshop top navigation
Topshop’s top-level nav is clear and intuitive.

If you sell clothing, for example, consider whether 'tops', 'pants', and 'dresses' are top-level categories, or if there's a more important step to take first, like ‘men's’, ‘women's’, or ‘kids’ clothing.


Follow design conventions

Your business is unique, and you should demonstrate your individuality through your products and service – not by trying to subvert website design conventions.
 

Sass & Bide navigation
sass & bide clearly categorise their products in their drop-down nav.

Your customers are familiar with how eCommerce navigation works, and they won't be prepared to learn your quirky navigation. User-friendly design is familiar, intuitive, and efficient.
 
Top-level menus should be at the top or to the left of the page, where your customers expect to find them. You can use hidden drop-down (hamburger) menus, but only if you're putting that saved space to better use.

The CMO's guide to digital benchmarking

Signpost your search field

A lot of people landing on your site already know what they're looking for, and what they're looking for is the search field. The search field’s design and placement can influence the customer to use search over category navigation, so make sure the search field’s prominence aligns with the important of search to your site.
 
For example, content-heavy online retailers like Amazon have centred, more prominent search fields than fashion retailers like Topshop, which use smaller positioning to the right.
 

Amazon search bar
Amazon centres its search bar at the top of the page.


Test your search field’s design and positioning with site analytics. This will tell you how many people are using your site’s search function, and if this traffic is converting because of their search. Heat and scroll maps, like Crazy Egg, can also improve your search box’s positioning, giving you a visual overview of where on your website your visitors are clicking.


INTERNAL NAVIGATION

Highlight your offers

Sometimes it's not what you're selling, but how much it costs. If you frequently offer discounts or sales through your eCommerce site, highlight these in your top-level navigation tabs, as well as your category navigation like online fashion retailer ASOS.
 

Upsell with relevance

Smart navigation can guide your customers to places they didn't even know they wanted to go. One of the best ways to do this is through product recommendations – upselling other relevant products in your catalogue that they might not have found otherwise.
 

You might also like – ASOS
Upselling modules like this from ASOS can be automated.

These suggestions should be based on what they've browsed or what they've added to their cart, and they must be appropriate to be useful. For example, your site shouldn't recommend technology products that are incompatible with the system your customer is buying, or fashion accessories that don't match the look they've searched for.

There are two ways you can upsell:

Manually
This is done by categorising your products, matching them to their respective upsells, and then adding the system to your site, usually with the help of a developer.

Automatically
Smaller retailers that use an eCommerce platform, like Shopify, can use plug-ins that automatically recommend related products either at the checkout or on the product page. Each plug-in varies, and will depend on the eCommerce platform you use.
 

Recently viewed – ASOS
Allow users to easily return to products they have viewed.

Make turning back easy

When they've had a little time to think or compare, your customer might want to return to a recently viewed item.
 
Don't make them fall back on their browser navigation – include a prominent 'recently viewed' tab in your design so they can easily navigate back to where they were if they take a wrong turn. This is usually made up of a row of products your user has recently visited – information that is collected by tracking your customer’s browsing history. The list tends to be located at the bottom of the product page, or in the footer, but can also be given more prominence in a sidebar.
 

Put it to the test

You might be confident that you've achieved the best eCommerce site design, but what do your customers think? Put yourself in their shoes and see how easy it is to complete set tasks on your site and across platforms – desktop, mobile, and tablet versions.
 
For a more comprehensive overview of what's working and what could be improved, you can seek specialised help in eCommerce design. Companies like Netstarter can test your site's navigation and user experience design, and then optimise to increase conversions and decrease cart abandonment.
 
Find out more about Netstarter’s eCommerce offering or call us on 1300 725628.

Page 1 of 2
  < 1 - 2  > 
About the author
Chris Marklew
Head of Design UX/UI

Chris is an award winning UX/UI design director with over 18 years experience in the digital industry. He has a proven track record of success in leading teams that deliver highly effective and engaging user interface designs. Be it delivering projects for leading brands, or working client side on digital products, Chris brings the experience, ability and passion that ensure top quality work and outcomes.

More articles by Chris Marklew