Website Design: Improve your Navigation

There are billions of different Web pages floating around the Internet, and unless you have the ability to trawl Google and memorise the URL of every page of every site, there's no way you'd survive out there without a little help.

Thankfully, we don't have to wander round the Web feeling our way like a zombie in a maze. Navigation forms the basis of any Web site, and always has done. Despite the fact that it is a necessity of Web design, it has become something of an afterthought for many designers, as they concentrate on trying to get clever with content.

Navigation remains the single most essential aspect of site construction, and the wonders of modern technology mean you can guide your visitors around your site in a range of innovative ways to make their online experiences all the richer and more rewarding.

What's the point of navigation?

For the benefit of anyone arriving on the planet in the last few minutes, the base principle of site navigation is to help your visitors find their way around your Web site, providing links to all its pages. Common sense reasons that it is imperative that your site is easy to navigate or your guests will soon leave the party for pastures new.

The home page of a web site is where visitors form their impressions about the entire design, and its importance far outweighs that of the other pages that make up the site. The same theory applies to the site's navigation mechanism, ie if you manage to convince new visitors to make the step from your home page to one of your sub pages, the chances of them wanting to peruse the other delights on your site increase no end.

Proper site navigation should give the visitor a sense of 'place' within the site. it should help you maintain consistency throughout the site, even establishing something of a brand. It's important that anyone delving through your site knows how to get back to where they started, otherwise they're likely to flee in frustration.

Your navigation system should also encourage the user to explore other areas of the site by suggesting pages of related interest, and challenge their minds by pointing them towards more obscure links elsewhere online that will interest them. Ultimately, your top priority when designing site navigation is to ensure that the user doesn't have to work hard to find everything you're offering.

Traditional navigation

Back in the old days, navigating the Web was a completely different experience from the one you'll see today. We all know that developments in Web design software have made it easy to create prettier pages with flashy graphics and stylish content, but site navigation has also evolved considerably.

In the late Nineties, when the Web was just beginning to take shape, the core device for site navigation was the trusty textual link, and a blue underlined piece of text was your ticket to a world of information. once clicked, the text link would turn purple (or sometimes red) to indicate that this was one corner of the Web that you'd already explored, and this became something that even newcomers to the Net could get their head around right from the off. Of course, these conventions still apply today, albeit in a slightly more 'glam' format.

 A few years ago, the closest you'd have got to a graphical interface on a site would be a series of boxed text links across the top of the page of running down the side. Occasionally these would be accompanied by hideous animated G11's or clipart that vaguely represented the part of the site a link pointed to ('borne' would be a house, contact us' a phone, 'buy' would be a stack of coins, etc).

Just because these navigation systems seem a little primitive from this side of the Millennium, it doesn't mean
they weren't effective, and they are still used in some form these days. The Site Map, for instance, was one of the first devices to appear, and still represents probably the quickest way to find your way around large Web sites. On the whole though, exploring a collection of pages in 2003 is a much richer experience than it was seven years ago. The emergence of modern WYSIWYG design applications and advancements in graphic manipulation technology have meant that Web developers can get more imaginative with their navigation bars in order to truly achieve usability.

Navigation musts

If you mosey along to any Web site worth its salt and look carefully at how it was put together, you'll notice that all the big sites follow the same navigation methods a tidy nav bar for effect with a bandwidth friendly set of textual links somewhere on the page. However creative you think you are, or however much you want to hurl saliva in the face of convention, there's no use trying to fight against these methods. They work and they always will work, and users are unlikely to stick around if they don't get what they're expecting.

Textual links, or embedded links, are the most basic form of navigation and represent a clear, instant method of accessing pages within a site. These are generally arranged in the form of a series of underlined words across the top of a page or a list running down the side.

Another key device in the quest for an easy ride online is 'breadcrumb' navigation. By using trails of HTML links, you can show the route from the home page to the current page, helping the visitor to move up and down the menu tree more effectively, especially on large, page heavy sites.

In order to give the user the richest, most diverse surfing experience, it's wise to slap in as many related links, within reason, as you can unearth. The key here is to avoid simply using the obvious links, and to add pointers to more obscure, off the wall sites that are likely to titillate your readers, adding greater value to your site in the process.

It's also important that you position your navigation links in a place where the user will expect them to be, and where they won't intrude into the content of your site. Many Web designers favour the placement of links along the top of a Web page, plus down the left or right hand side, and at the bottom of each page for good measure. Basically, you need to make sure that your visitors are never more than a scroll wheel rotation away from the next page. Make sure you stick to colour conventions too blue is generally recognised as the norm for a text link, with purple or red used to indicate a page that's already been accessed by the browser.

New methods

While these traditional navigation principles should still be foremost in your mind when designing pages, there are a number of trendy new devices kicking around town that are also worth thinking about.

Let's first consider image maps, a navigational tool that has the potential to be something quite special, but which invariably turns into a confusing mess. The key to achieving a workable image map is to choose your picture carefully. Make sure it's something that lends itself to being logically sliced up and split into parts, rather than a generic piece of art with no determinable boundaries within it. if you can afford to do so, buy the image in from a picture agency before slicing it up in Image Ready (or a cheaper alternative such as Paint Shop Pro) and exporting it to your Web editor to apply the rollovers.

If pictures aren't your bag, or if you're keen to avoid bandwidth heavy navigation, you may want to think about exploring the DHTML route or even applying JavaScript pop up menus. While these have been around a few years now, they're still called upon by pro designers as a means of adding dynamic navigation. Adding DHTML menus is far easier today than it ever was, and there's plenty of software around that will do the job for you without you having to lift a brain cell.

However, when it comes down to designing sites 'in the Twenty first Century, you won't find many better tools for the job than Flash. Macromedia's cherished vector graphics application houses all the functionality you need to produce slick, easy to follow, fast loading navigation. The program allows you to create virtually any type of dynamic navigation system you can think of, from stylish icons and Flash buttons to pop up and pull down menus. Flash is also great for generating actions and animation within a navigation bar in order to engage the user and promote interactivity.

Ironically, relying too heavily on these swanky new navigation methods can lead to your site becoming overwhelming to a visitor, and a jamboree of weird and wonderful menus is no use to anyone. If you are intending to use devices such as Flash or JavaScript menus, always make sure this isn't your sole form of navigation, and that there are text links for those without the right plug in. As accessibility is what we should all be striving for these days, you should always be sure to include ALT tags on any images you include in your navigation to cater for anyone using a screen reader and make sure you create a text only version as well.

If you really want to know if your site is truly useable, the best idea is to unleash it on a group of friends and get them to try and navigate it. Come up with a list of things that a user might want to do on the site, then observe your guinea pigs as they try and access the information. You'll soon learn that it pays to keep things simple and not to try anything too elaborate when designing navigation. That's not to say you can't be original, and with advancements in creative applications such as Flash, navigating Web pages can only get more enjoyable.