3 reasons your “user-friendly” navigation sucks!

Your navigation looks just like the one on your competitors website… only yours is more “user friendly”?
Well I’m sorry but the chances are you are speaking from your bum… for a few reasons

I want to make clear that some navigation’s are simply amazing I highlight some examples during this post.

1 – Going Over The Top

Now as all designers will know, especially if you’ve worked in an agency format… clients will always ask for you to “photocopy” something from a competitors websites. Now right away this has always sent me running for the hills, if only because each website has a unique audience and so called “photocopying” of in this case a navigation can lead to scary results. In this case I also suspect the client stakeholders have said “make it user friendly for our OLDER audience” … the designer has gone over the top with this idea and it is now not user friendly. So let’s take a look at 2 examples, one has a superb navigation and the other … well that is just scary.

Waitrose vs Wiltshire Farm Foods

Now, both of these two websites are aimed (in my view) at similar audiences, the elderly. Now with this in mind I guess Waitrose  have decided to go all out and make it so user-friendly… but wait wait, the over size text looks hideous, the almost zero contrast of grey and black is just stupid (what if someone has blurred vision?) – oh and lets not forget the scruffy coding! Now compare Waitrose to Wiltshire, WFF has the large text, the text contrasts well with the green background … oh and lets add to this the navigation is so much clearer WFF doesn’t use a drop down system … that is how intuitive the WFF navigation is. Oh and although I know I didn’t have too look at the code, it is nice on WWF – well done Headscape (as always – follow @boagworld )

Visit The Websites: Waitrose (www.waitrose.com) and
Wiltshire Farm Foods (www.wiltshirefarmfoods.com)

2 – Death to Flash

Ok my heading sounds a little like I’m itching for a fight from the “flash camp” … truth is I’m not. I have nothing against flash, unless you count I hate it, Search Engines hate it …oh and did I mention it isn’t user friendly. Ok, deep breath I don’t hate it as much as some people… I just hate it’s use as a navigation means, as a whole website or to hold anything but multimedia content … using it for special features such as video (see YouTube) is ok though.

I don’t think I need to say much more on flash navigation and how it really doesn’t work … but you will want an alternative… We call this CSS with a lovely mix of JavaScript tools (like JQuery & MooTools). If you want to see some great examples of lovely javascript css navigation scroll to point 2 on this (top) 50 beautiful navigations from Smashing Magazine.

You get the message don’t you? Don’t use FLASH for your navigation!

3 – That is a SITEMAP not a navigation

This point is something an annoyance and can cause all sorts of issues. In the world of design we know that simple navigation is king, so we say have 5 main navigation links – brilliant. We then add another layer to one or 2 links … still good stuff. But arghhh someone has gone over the top and bulked it all out to confuse everyone! … In essence you have made your main navigation into a sitemap – big no no and so anti-user it scares me.

Creating a Sitemap from Your Navigation

Argos, some people will think this is a nice “user friendly website” well ok, it is in some respects. But take a look at this navigation… talk about over the top. Almost 50 sublinks of the primary navigation! Who ever thought this was a “user friendly” idea needs a shot in the head – bit extreme I know.

Let me twist my point to illustrate what I really mean here. From the above you can see it’s over filled, utterly useless on the surface and surely there is a better way of doing this. So let’s take a look at a site where the multi-level navigation works very well and has a real purpose unlike this Argos website. Porsche have taken a multi-level navigation and made it work. Primary (car type) Secondary (model) final layer (car info) … it works, it’s interactive and it is simple.

Porsche website with multi-layer navigation design

Visit The Websites: Argos (www.argos.co.uk) and
Porsche (www.porsche.com)

Now I know there are many more reasons a navigation may not be user-friendly, such as not being intuitive to use. However, I’d like to know why you think site navigation’s don’t work, let SEOAndy (@andykinsey) know your navigation nightmares & also let us see some amazing examples of useful navigation’s.