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…
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.
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.
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?