Today sees the release of Econsultancy's E-commerce Best Practice Compendium, which contains more than 170 tips on improving usability and conversions. 

The report is split into three sections: site search and navigation, product pages, and the checkout process. 

In today's post, I'll look at some tips examples to improve e-commerce navigation. 

Minimise number of clicks 

Effective e-commerce navigation should make it as easy as possible for customers to find what they want, and get to the relevant product page as quickly as possible. 

There are a number of ways to do this, and much depends on the mindset of the consumer. 

If they arrive knowing what they are looking for, then your site search should do the job, returning relevant results which will take them quickly to the product page. 

However, a minority of users will typically take the site search option, so people will head for the navigation bar and look to browse by category. 

Let's say I want a book on Soviet Russia. Unless I type the name in to the search box, it can be tricky on some sites. 

Waterstones doesn't do a great job of this. First of all, I have to click to open the category drop-down menu and click history, then the sub-categories are below the bestsellers / coming soon list, where they can easily be missed. (Also, why bundle history and transport together?)

I can then select history, then European history. After this, Waterstones leaves me at a dead end. I have a page with more than 44,000 titles and the filtering options only give me price, ratings and author. Not what I need. 

Amazon does this better. Once I get to the history sub-category I can then search by region and country before choosing the relevant period of Russian history.

Use auto-complete

Auto-complete in site search is a great way to improve the effectiveness of site search and minimise the risk of misspellings and therefore inaccurate results. 

As customers type in a query, as on Waterstones (it does do something right) they are provided with suggestions after three letters:


According to Lovehoney's E-commerce manager Matthew Curry: 

In my experience, autosuggest provides a real boost to search conversion rates. In a usability test I ran, we found that users actually relied upon site search autosuggest and autocorrect to know the correct spelling of words for them. Make sure that your site search solution is up to scratch, and that you still provide search results for common misspellings, just in case.
Another feature to consider is rich auto-complete. It's like the normal version, but better.    In this example, as I begin to type the word 'sunglasses', I see the normal auto-complete, but also some product images, which allow me to make an instant decision on the selected products:  

Filtered navigation

Filtered navigation is essential. It makes for effective browsing by allowing the customer to narrow their product selection by eliminating results which are irrelevant to them. 

In this example from House of Fraser, my search for a coat is made easier by the sheer amount of filtering options available. 

Use reviews as a navigational aid

I love the way Kiddicare uses its customer review data as a navigational aid, allowing users to see only those products which have been recommended by other shoppers. 


Make your drop-down menus work

Drop-down menus are a common feature on e-commerce sites and, used well, they enable shoppers to take a shortcut to the product category or sub-category they are looking for, while also providing a chance to promote certain products or offers. 

Let people search by department

Allowing users to filter site searches from the very start makes it easier for them, and it's also more likely that they will find relevant results. 

It is especially useful for retailers with large product ranges, like Tesco: 

Consistent navigation

Not all traffic will come in through the homepage, much will arrive directly at product or category pages, so navigation should be consistent so that people can find their way around the site from wherever they happen to be. 

For most sites, this means a constant top nav and search bar, as on John Lewis. 

The only place navigation shouldn't be visible is during the checkout process, which should be enclosed to remove any distractions for shoppers

Consistency between site search and navigation is also important. The same sorting options and filters should be available to users whether they choose to search or browse. 

Do you need the carousel? 

Carousels, or image sliders, are commonplace on e-commerce sites. Essentially, they allow retailers to promote several different products without using all of the space on the page. 

However, an interesting article on Conversion XL argues that they are conversion killers.

This is because: 

  • They take attention away from other features on the page. 
  • They are often too fast and shoppers miss the message. 
  • Image sliders suffer from banner blindness. 
  • Poor usability. They often move too quickly and navigation controls are too small. 

This is certainly something worth testing. 

Navigation by colour

Whether you use this may depend on the products you sell and the size of the product range, but it can be effective. 

For example, Christian Louboutin uses this for its shoes.  I like the option of browsing by colour, size and heel height and just scrolling up and down looking at product images. 

Use visual cues

This is an excellent example from Sunglass Hut. Showing images of the different styles of sunglasses provides a very useful navigation aid. 

For more tips on navigation, as well as product pages and the checkout process, see our new E-commerce Best Practice Compendium

Graham Charlton

Published 28 November, 2012 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

You might be interested in

Comments (13)

Save or Cancel


I think the depth of categorisation & labels chosen for those categories can play an important role.

Guided navigation with products grouped by end-use is helpful in certain verticals; the customer may know what they want to achieve but not how to go about it.

For example an electronics retailer might make a category/filter for "Stream music wirelessly" rather than hoping that the end-user knows they need to find a Sonos product.

over 5 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Oliver Good point. To be honest, there are many more than ten tips for navigation - I just wanted to give a flavour of what's in the full report.

over 5 years ago

Paul Beard

Paul Beard, Marketing Consultant at Attain Design

Another interesting point here is the use of category menus along the top navigation versus down the left-hand column... has a very big impact on browsing on mobile devices (more and more important for ecommerce!). I'm not saying either is necessarily the 'right' way, but in most unique instances one conveys more benefits than the other.

over 5 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Paul - you mean top nav is better for mobile?

over 5 years ago


Paul Beard

Well... Yes I always say so as rule of thumb; although sometimes the resultant drop-downs compromise usability. A lot of it depends on how well the products break down into manageable chunks. If it's a complex structure by necessity, more functionality needs to be present. There are other viable solutions, for example building a responsive website.

Responsive sites can wrap up the nav in different ways for different screen sizes. Nav can be optimised differently for mobile v desktop (or tablet or any other device). So, if left-column navigation tools and links add value to desktop users, they can be kept without compromising the mobile experience at all.

But ultimately, like everything 'web', bespoke is always better because (while it's more work) it's more tactical and user-focused.

over 5 years ago


Hannah Norman, Digital Marketing Executive at Koozai Ltd

I really enjoyed this post. I couldn't agree more about the navigation on Ecommerce sites. It really annoys me when drop down menus don't work correctly, flicking off if you move the mouse quickly or having the category of the drop-down set up as a link to a '#'. It allows for a click however looks like something is broken on the page as it doesn't load new information.

Personal peeve there.

over 5 years ago


Cristin Riffle

SOO helpful for consumer sites, but what about more complex sale B2B sites focused more on lead gen and without direct eCommerce goals? Any new research on nav and site search / structure effectiveness techniques for conversion improvements with these?

over 5 years ago


Gareth Beer, Ecommerce Manager at Speedo International Limited

Great post and pleasing from my perspective that most points we've taken onboard with our new navigation and search changes

over 5 years ago


Deri Jones, CEO at SciVisum Ltd

Nice top 10 Graham.

Regards search AutoComplete.

One tip:

An increasingly common error we're seeing is one that directly p*sses off visitors - finding a product, that you then cannot buy! Frustration.

It's just too easy to add richer search features that inadvertantly create unbuyable product problems, due to subtle technology issues.

Be careful to get your new searching technology lined up with your live stock contol.

Worth asking your analytics guys - if they feel Inventory management monitoring is worth covering?

over 5 years ago


Ed Hoffman, VP at SLI Systems

Good post- I agree with the need for consistency between search and navigation.

One point on your suggestion to
'Let people search by department' - for a site like Tesco that might make sense, however a very small percentage of visitors will use a drop-down list like this, and it takes up real estate that could be used for a bigger search box.

In the opening, you mention that "If they arrive knowing what they are looking for.." they are likely to use site search, and that more people will head for navigation/browse. I agree that on many sites, more people browse, however there has been quite a bit of usability research which shows that some people are highly inclined to search first, while others are more likely to browse. Important to get both right. eCommerce conversion rates are generally much higher for searchers.

over 5 years ago


Nate Friar

On the filtered navigation point, the challenge is knowing which refinements to display and when to display them. It can be very difficult to strike that balance between displaying all the relevant filters and overwhelming shoppers.

over 5 years ago

Rhys Billington

Rhys Billington, Head of Design & Content at Sky

A really nice post & good to see some discussion around navigation.

Now that the tablet is proving to be standard in most households, it is also time to take into account the price range sliders that appear on many sites. I have always found it difficult to use them on a table and must increase the exit rate due to user confusion & frustration.

over 5 years ago



These tips seem so obvious when they're here in front of you, but I am guilty of making them myself. One thing I would recommend to anyone is investing that little bit of time in finding the right shopping cart software, it's the backbone of your site, and poor software results in poor front end of site in my opinion. Thanks!

over 5 years ago

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.