Thursday, November 15, 2012

Should online retailers follow established patterns of navigation?

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? 

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. 

First of all, it gives users the option of skipping all the Flash intros and just getting on with shopping: 

We 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.


No comments: