It seems that, after a few years of redesigns, navigation on most e-commerce sites follows a pretty familiar pattern. 

There is some sense in this. Online shoppers are accustomed to the same general patterns of navigation from their experiences on the online retail sites they use regularly, so there is much to be said for following precedent in this area. 

But does this prevent innovation in e-commerce design? Are there better ways that retailers could be using? 

I've been asking the e-commerce experts and looking at a few examples... 

E-commerce navigation

If you look at the most popular retailers in the UK, navigation design has settled down to a pattern of top navigation bar with drop-downs, and a site search box. 

For a department store retailer such as John Lewis, a top navigation bar with 11 categories allows customers to easily access the section of the site that they are looking for, as well as to switch departments while they are shopping on the site. 

Most sites follow a similar pattern to that of John Lewis, though there are one or two slight exceptions. 

ASOS, for example, has just two top nav options, men and women, which lead to huge drop-down menus. However, it does show product categories down the left hand side: 

Amazon clearly sees the search box as massively important for navigation. It's prominent and big enough to handle most search queries. Meanwhile, navigation is 'hidden' in a huge drop down, which opens down the left of the page. 

Alternative navigation

While I'm all for innovation, new approaches to navigation often don't work. Take Whistles for example. It relaunched in 2009 with a Flash homepage which moved around unless you left the cursor in the centre of the page. 

It has since replaced that particular aspect of the design, but it still delivers a poor user experience. 

There's no search box, which is odd, and even when you select categories, there are no price or product names displayed, and no way to filter product searches. 

Poor navigation is a common affliction for luxury brand sites, as design often seems to trump usability at the planning stage. There are exceptions though. 

I like the Christian Louboutin site for this reason. First of all, it gives users the option of skipping all the Flash intros and just getting on with shopping: 

I like the option of browsing by colour, size and heel height and just scrolling up and down looking at product images. It works well for this site, though it wouldn't necessarily apply to most e-commerce sites. 

Harrods has improved a lot. For a start, it is a good example of how to use mega drop-down menus

The menus are large enough to allow users to view all sub-categories, while they avoid the usability drawbacks , such as losing the menu when the cursor moves away from the area. 

Also, as you scroll down, the sections of the site displayed change as the arrow moves along the top navigation bar, offering an alternative way to navigate: 

What makes an e-commerce site easy to navigate? 

Best practice is all about giving customers the option to travel through the site in the way they choose, but enough of a helping hand to guide them if they get lost. 

It should be driven by testing and data. Use analytics to learn how customers are actually using your website, this can inform your design decisions. 

For example, are they using site search? If not, perhaps it should be moved to a more prominent position, or perhaps redesigned to make it easier to see. 

According to Matthew Curry, E-commerce manager at Lovehoney

Remember that people may not even use your menus. A popular navigation path I've seen is Search -> Results -> Product Page -> Breadcrumb to Category. Having a clear product taxonomy & naming convention is vital. 

Dan Barker, e-commerce consultant

An e-commerce site becomes easy to navigate when you focus on three things: 1) understand what your visitors may want to achieve on the site, 2) show them in the most enjoyable way possible how they can achieve those things, and 3) remove the pieces that would add extra pain and get in the way of that. All of that comes down to good decision making, good execution, and good testing.

James Gurd, e-commerce consultant:

It’s a mix of functionality that caters for a diverse audience. One navigation structure alone doesn’t cut it because most websites have a heterogeneous audience. There are a few essentials web managers need to tick off, such as a minimal click path, clear menu structures, consistent global site navigation, and well structured site search. 

Is e-commerce navigation the place for innovation? 

According to Chris Moffatt, Online Merchandise Manager at luxury retailer Smythson:

I’m a firm believer that for etailers, navigation isn’t the place for innovation. It’s too easy to alienate potential customers by giving them a difficult journey through your site. The principles of "Don’t Make Me Think" still apply.

Paul Rouke of usability agency PRWD believes that retailers need to get the basics right first of all: 

Before looking to innovate when it comes to search and navigation, retailers should ensure they get the core principles and best practice of good navigation in place first, so customers can find what they want how they want.

This does not mean that retailers cannot attempt to improve the user experience for customers navigating their websites. Indeed, over the past ten years, usability standards in this area have improved considerably. 

However, retailers should consider experimenting within the ‘constraints’ of existing navigation formats, rather than attempting to reinvent the wheel. 

James Gurd believes that there is a balance to be struck between innovation and usability

There shouldn’t be a limit on innovation. Innovation is what takes e-commerce forwards. However, I’d exercise caution. You shouldn’t ignore the core principles that drive effective web design, such as usability, user experience and accessibility. 

Any new development should be planned with these in mind because it doesn’t matter how innovative a solution is if your customers can’t easily use it. If you’re not sure, follow the lead of companies like B&Q who open up beta versions for customers to use and provide feedback before they implement a major change.

Any significant changes to navigation constitute a risk that needs to be carefully considered -are you willing to risk losing customers from your website with non-standard navigation?

Graham Charlton

Published 14 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 (2)

Albie Attias

Albie Attias, Ecommerce Director at King of Servers Ltd

Studies suggest that e-commerce sites are not the place for experimentation. It seems people have a fixed idea what an e-commerce site should be like). If you go for innovative, unconventional layouts – people are less likely to like them.

See this article for more:

over 5 years ago

Rhys Billington

Rhys Billington, Head of Design & Content at Sky

Onone area that should always be taken into account when working on the navigation; especially where images are concerned is the page performance as this will have an effect on the conversion rate.

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.