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.

I’ll be attending Internet World 2009 this year which starts next week – but better than that, I’ll be exhibiting! Feel free to come over for a chat, I’ll be around on the Tuesday & Wednesday (28th & 29th April).

If you’ve got any spare time and an interest in anything website related I recommend you come down.  It covers pretty much everything you could ever want to know about the Internet and websites, with a host of free seminars by some of the experts in the business – and it’s all totally free to attend.

I’ll be discussing anything and everything marketing related, right from Analytics through to Zearch

Feel free to come down for a chat about anything – problems with site performance, help with advertising, new developments in the industry or just a catch up – you can find me at stand E7082.

See you there!

I’ve just recently read a well put together article by a chap called Scot Robinson, about how to reduce your Bounce Rates in 8 steps. These steps are:

1. Include Clear Call-to-Actions
2. Make Sure the Content of Your Articles and Posts Meet Visitor Expectations
3. Include Well Designed Navigation with Targeted Options
4. Less is More
5. A Picture Tells a Thousand Words
6. Fix Your Crappy Design
7. The Site Loads Too Slow
8. Test, Test and Test Some More

However…
When you actually read the article through, I summarised it more as:

1. Include Clear Call-to-Actions – GOOD WEBSITE DESIGN
2. Make Sure the Content of Your Articles and Posts Meet Visitor Expectations – RELEVANT CONTENT
3. Include Well Designed Navigation with Targeted Options – GOOD WEBSITE DESIGN
4. Less is More – GOOD WEBSITE DESIGN
5. A Picture Tells a Thousand Words – GOOD WEBSITE DESIGN
6. Fix Your Crappy Design – GOOD WEBSITE DESIGN
7. The Site Loads Too Slow – GOOD HARDWARE / INFRASTRUCTURE
8. Test, Test and Test Some More – OPTIMISE

This is a helpful article and does go into some important aspects you may have overlooked, but in terms of general pointers; a strong call to action, a well structured site with good, clear design, hand-holding the visitor along, really should be common sense to anyone wishing to succeed online. Of course, you need good load times, anything whatsoever that is likely to frustrate, annoy, delay, distract or otherwise tempt the visitor from their intended action is going to harm your end result analytics and this may mean bounce rate. But isn’t this just general good usability?

The moral of the story? If you want low bounce rates, make sure you have a well designed website that works well and doesn’t annoy people, giving them a clear call to action. If you want to monitor and improve things, then monitor & test them. Common sense? Simple Common Sense, as Mike might say.