Design Effective Navigation in 10 Steps

The Most Popular Methods of Navigation

The following are the most popular methods used to create a site navigation scheme. Make sure you take all the aspects of each into account before you decide which one you'll use.

1. Text-Driven Toolbars

These, I would say, are the least effective at grabbing users' attention. There isn't much you can do to static HTML to make it stand out more than other elements of your page -- except for large letters and bright colouring. Although these kinds of navigation systems are extremely fast loading and can be changed very quickly, they often look dull and in some cases actually put your users off looking further into the site.

One effect that's very popular and can be achieved with minimal effort --- all that is required is a touch of JavaScript --- is a rollover table cell effect. These are far superior to rollover graphics in some cases, and again, they take little time to load.

Advantages: Fast loading
Disadvantages: Can be dull

2. Image Toolbars

Although images have great potential to do well, and in 99.9% of cases do, they are often misused. Bad design, large images, and garish colours can put your user off immediately. It is worthwhile to consider using a single image map, which will reduce the image size considerably --- the server only has to carry out one HTTP transaction instead of several (if you have several small button images).

Make sure you specify the ALT attribute for your images, otherwise people using text-only browsers, who have images turned off, or who simply cannot wait for the page to finish loading, can still navigate your site without hassle.

Advantages: Can look great
Disadvantages: Can be slow loading

3. Flash Menus

Flash menus are becoming increasingly popular now, mainly because of the growing numbers of people with access to a fast Internet connection. But take into account the fact that a lot of your users will still be using 56k modems, so don't overuse your Flash.

Indeed, sometimes Flash can be a big no-no. If it takes longer than about 10 seconds to load, ditch it. Under no circumstances include a preloader. People do not want to be greeted with a 'Now Loading' message before they've even begun to explore the site.

Also consider users who don't have the Flash plugin installed on their computer. Although few, they do not want to have to download a whole new piece of software in order to be able use your site.

Advantages: Can look amazing and very professional
Disadvantages: Not everyone has the Flash plugin, can be slow loading

Of course, there are other possibilities to consider when designing your Website; the methods described here are only the most popular.

Other Considerations

Make your navigation suitable to your site's theme

If you run a Recipe Website, for example, consider making for each section small icons that relate to food and/or cooking. Perhaps you might include a small cartoon cake with a caption that linked to the 'Cake Baking' section.

Make your navigation suitable to your site's target audience

If the largest proportion of your users are children, why not make your navigation look like it belongs on a kids' Website? If you had a jokes section, for instance, you could use a small cartoon laughing face to symbolise joke telling.

3 Points You Should Remember At All Costs!

If you've decided to ignore everything I've said so far, please read these three points -- I think they're the most important when you design your site's navigation.

1. Test, test, test!

Make sure you thoroughly test your site navigation on as many browsers as possible. These should include:

• Internet Explorer 5+
• Netscape 6.x
• Netscape 4.x
• Opera

Also, make sure you test it on a number of screen resolutions, which should be:

• 800x600
• 1024x768

Check it all the way through. Make sure any JavaScript works on all platforms. If not, make sure no JavaScript errors are produced. And remember, it is impossible to 'over-test' your navigation!

2. Be Nice to Your Users

Put your most important button first on the navigation bar. This should probably be the 'Home Page' link. Also, spell out each link to your users. Cute little icons with no textual description are simply not enough. Your visitors should be able to work out exactly what is in each section before they click on the link to it.

3. Place it Well

Make sure your users can see your navigation clearly. Don't surround it with other content -- make it stand out from the rest of your content, and you won't go wrong. Also, keep in mind the 'Above the Fold' and 'Banner Blindness' considerations discussed earlier.

Good Luck!

I hope this article has helped you refine your navigation design. Hopefully by reading this you'll have gained all of the necessary knowledge required to create a navigation system that works for your visitors.

Remember, navigation is a part of every site, and the Internet simply would not survive without it. With all this in mind, I wish you luck in creating your new masterpiece on the Web!