Web Navigation Systems

As they say, there is more than one way to skin a cat; and if one is the way tradition does it, there could yet be another that makes for a far tastier dinner. So goes the old adage, and if history is to be believed, it applies equally to the current technologies of today as to the chores and trials of the distant past. In our case, that means visual, dynamic and interactive ways of signposting people round on-line information - Web navigation systems.

Your 'nav bar', as the established Web contingent calls it, is the most important element in your entire Web site, along with the content itself. Without a decent navigation system, your audience is never going to find the bits of information they're after; they're never going to browse around comfortably and stumble across something they fancy, and never get to appreciate the fruits of your hard labor.

Indeed, fail to put enough effort and imagination into your navigation, and you might as well not have bothered with anything other than your home page. Harsh, but true. So the question is, what's involved in creating the best, most exciting and most functionally useful navigation system ever?

The Great Formula

The answer, like all great answers, is ‘it depends’: it depends on your audience and content, it depends on the function of your site and its objectives, and on more besides.
But then that's not especially useful. We need pointers and directions, and fortunately there are plenty we can gain by taking a long step back from the state of the Web today, and giving its ways and means a good look.

Take your average, almost traditional site - traditional if we can call some 10 years of precedent a tradition, but the facts are well established either way. There's a logo at the top, along with a banner ad if they're on a commercial tip, and the content dominates the centre space. The graphics that direct viewers from page to page, info bite to info bite - like the letter tabs on your address book - appear either across the top somewhere or down the side. Chances are it's the left side, adhering to the A4 margin-space principle, although going with the address book theory, the right makes better sense. But then many sites use that space as a pseudo-navigation column in itself, pointing users to 'pick of the day' pages and offering ad space at great cost to those advertisers that want their ads to look like extra navigation elements in their own right.

And there it is: short but sweet, crass but true, the Web at large in a paragraph. It's not a bad formula. It's comfortable: it fits with the way we're used to organizing information - in phone books, in filing cabinets, in Windows Explorer and Mac Finder, to name but a few. It's appealing on Web sites that deal in filing information like a team of zealous office admin staff, and regurgitating it on keyword demand: 'Give me the file about Hoover, please', 'Show me the stats for our January 2008 sales, could you?'... Portals like Yahoo! and Lycos, corporate intranets, and reference zones like the Microsoft knowledgebase have been incredibly successful in the field, combining a tree-like information structure with a simple search facility and numerous 'hot topic of the moment' and 'cool site of the day' style front-page hits. And given that these sites were among the first to make serious impact on the Web, and they are the first port of call for many browsers finding their whereabouts before embarking on a tour of unknown sites in search of information, they've also become the most mimicked.

Bespoke Navigation

But to ape the Great Yahoo! Formula probably isn't right for most of us. Think about your site, think about the brand you want it to be and its brand values. Is it a filing system, or is it something else? Is about entertainment? Is it about education? Is it just for browsing, like the Sunday papers, or for sorting like a pile of papers? How do you want people to use it, and more importantly, how would they like to use it? What's going to help them get the most out of your hard-created content? After all, you really don't want to sell it short after all that effort.

Lately, and especially with the precedent of Flash (small file sizes for great graphics and dynamic interactivity, that is), top designers have been pioneering sites with information structures and navigation designs. They represent a radical departure from the preconceived ideas that existed when the Web was just government-academic legacy: all headings, body and hyperlinks.

Take the new site of design company Amaze. It's intended to give you an overview of the fantastic work of this company, as well as information about jobs there and other resources. Rather than post you six lines of graphic links with sub-areas within them, it uses a graphical idea based on liquid to reflect a navigation with liquid concepts behind it. All information areas are related and interwoven to greater and lesser degrees, so the links on the front page lie in a motley group around the page in varying proximity to each other.

They don't occupy a rectangular delineated space, but a wobbly liquid space on color-coded groups. And as you roll over one link, a speech bubble pops up telling about it, while links in other parts of the site with similar information light up too, to draw the connection in the users mind. Very clever.

And take the all-time classic Shockwave, where all Shockwave fanatics go to get the latest and greatest updates on what's hot in the world of dynamic on-line graphics. Here, with the brand new design, you get to navigate yourself around a room - drawn fully in 3D - to find the corner of information you're after. The whole means of finding your way around is more natural and intuitive, and a damned site more fun, than the sorting-through-a-pile-of-papers model of traditional navigation. Okay, so it takes and investment of effort in the first place, but if you reckon you've got what it takes, it will pay off.
If you are serious about Web design - perhaps you're a professional, or want to become a professional - a good portion of your income is going to come from clients who have a product to sell. But how on earth do you make a sales-driven site attractive for people to visit, especially if it's selling something as dull as a vacuum cleaner?

Check out Hoover's UK site and you'll soon see. Head for the Land Beneath Your Feet link, and you'll find a fantastic zooming navigation widget that takes you ever deeper and deeper into the strange and scary living world within your carpet, from just-visible insects to ultra-microscopic pores and moulds.

Alongside these, in fantastic graphical illustration, you're shown a range of vacuuming products ready to suck the nastiness away. Clever stuff. In fact, take a look at the Web sites by the great leading UK design companies of the moment - yes, the UK design companies really are the worldwide pioneers in this field - such as Deep-end, Amaze, Spooky and the Bandit and others, and you'll find inspiration to take you far beyond the next site you were planning.

Hopefully you'll get some ideas which you can use to create something worthy of the Web of the future, and far more powerful in the predictable Web of today. Good luck.