Tudor House

I had a recent poser a week or so back for a retail client – How should their sub-navigation be ordered on their website? I wanted to get some thoughts down on this, as long, unstructured navigations are something that highly annoys me on websites - especially ones I’m looking to shop on.

Retail navigation ordering typically follows the standard across the web – by key ‘type’ overall as a main choice, then breaking down sub types of this key type.  For example, a clothing retailer would typically break down their navigation by Gender as a main, and then clothing types within their sub nav (jackets, trousers, etc).  Other products similarly follow this fashion, usually broken down by their main type first, and then split out into smaller divisions within the type currently browsing.  In some cases a third level might be used.

This is generally regarded as a logical way to browse, and works well for the majority – you can quickly refine your browsing to specific ranges, and then filter and refine further as you require.

In terms of the sub navigation (second level), this usually ends up being the most comprehensive nav, typically having anywhere from 10 – 20 options within the sub-nav.  The issue that I have with most sites is their ordering of these options – nothing annoys me more than random ordering!

Random ordering your navigation for your website helps no-one.  It’s a bit of a personal issue for me, as it is such a simple fix and should be common knowledge; there’s no excuse for not delivering.

Randomising your nav provides absolutely no benefit to your visitors whatsoever – you are asking visitors to spend longer on your site, increasing annoyance and spending more of their time looking at your navigation instead of looking at what they want to buy. I’m really not buying the argument that ‘the longer they spend on the site searching, the more they will spend’.  It’s bad usability and bad practice.

As far as I’m concerned, the only ordering that should be used across the web for navigations are a choice of:

• A – Z Product Order
• ‘Popularity’ of Product (or relavancy)
• A combination of both

It’s pretty straightforward really.

• A – Z allow visitors to very quickly and easily scan the product ranges on offer.  In seconds, if they are looking for a particular product range, they can instantly jump around the list to find what they’re after.  It’s the most logical ordering method and one I think which should be adoped by all sites as a minimum requirement – no excuse!
• ‘Popularity’ of Product (or relevancy) lists most popular or relevant ranges closer to the top of the navigation, filtering out to smaller ranges and misc. items down the list.  I think in cases this can work well – if your navigation is quite short (maybe less than 5-6 items) or you are a specialised retailer in one or two particular products but sell accessories also, then putting your key ranges at the top and your accessories lower down can work well in some cases. For long navigations though, where the range is wide, structures like this can become horrible to scan through.
• A combination of both.  Usually the best method, but might require a little more work (whcih means hard cash spent on your website I’m afraid).  Listing one or two key product ranges first in the list (including special offers here is always a good choice), and having these then underlined or shaded differently before you list the whole range by A – Z can work really well.  It drives interest to the ranges you want, while providing a really good overview of your product range.

If the budgets there, I’d recommend option 3.  It gives more promotion to ranges you want to promote, while providing a nice, user friendly, structured nav for everyone.  However, for me, option one should be a minimum for all.

Some examples from the wild:

New Look

New Look order their nav in a related but random order overall.  At least that’s how it appears to the average user.  They win points for listing their new and closing lines first and second, meaning the majority of visitors will be exposed to these, and I’d chance that they are in the top 5 most viewed areas of this nav.  They’ve also dropped Sale in at the end (typically the first and last sections get good exposure) which is a good decision, however, I would recommend trying it at the front and seeing how it does.

They break down main clothing sections by type, and though they are grouped, I don’t think they’re that easy to browse.  I would recommend a feint green line once the main types begin, with them then ordered A-Z.  It could easily be tested for performance, eh?

Topshop

The groups work well, but their ordering can be a little confusing. They’re ordered by type within the groups, but I don’t think this is apparently obvious.  Sorting these by A-Z and separting out further (tops / bottoms) would make it even easier to take in I think. Worth a try!

TopShop get a little closer to the Holy Grail, but still not there yet! They adopt a grouped navigation, which works well with different types separated.  The also include sale and last chance items in their own group, though at the bottom of the page for some reason.

The groups work well, but their ordering can be a little confusing. They’re ordered by type within the groups, but I don’t think this is apparently obvious.  Sorting these by A-Z and separting out further (tops / bottoms) would make it even easier to take in I think.

LittleWoods

Littlewoods do a very organised, logical approach, with a breakdown by group, and then all products broken out A-Z.  This works well, but I think in this case the large product section could probably have done with being grouped out further – it can be a lot to take in all at once.

It does however get a lot of points – by maintaining a consistent A-Z order by Product, it does make it quite easy to scan the overall list and find what you’re looking for.