By: Sam Hastings

October 22nd, 2002

Reader Rating: 8

Designing your site's navigation can be quite a tricky task at first. You need to research the number of categories you'll account for, where your visitors are most likely to click, the colour schemes that will best satisfy users, and many other aspects. With so many variables, navigation design can seem like a situation in which there's no right answer. Today, we'll discuss the task of designing navigation -- and hopefully give you a head start in creating a navigation system that works the best for your users.

While developing my own site, I sat down one evening and drew a few possible designs on paper. In my opinion, this is the best way to plan a site -- don't even switch your computer on until you've completed this stage! The process I followed was to design my navigation first and develop the site around this, using the navigation as the main point of focus.

There are, of course, many ways to create the navigation system for your site, from simple text-driven toolbars, to state-of-the-art Flash animated interfaces. The most important decision you'll face is to choose a scheme that's right for the nature of your site, and its users.

Remember, this may not be an easy task. Ask around for ideas, draw up some trial navigation systems, and have your friends, family, colleagues, or anyone else you know tell you what they like the best, and which of your designs they find the most effective. Usability testing with target audience members is, of course, ideal -- and it's not impossible to achieve on a budget! See SitePoint's usability section for more.

Top Ten Navigation Tips

Use this outline as a kind of checklist to make sure your navigation system fulfils these essential requirements. If it does, you're well on the way to success!

1. Don't Make your Users Guess!

It is sometimes necessary to spoon feed your visitors with information. Make careful decisions as to where your navigation is placed, and make it stand out. Then your users won't sit there aimlessly clicking the mouse as they search in vain for some kind of direction.

2. Keep it high

Broadsheet newspaper editors place their most important information --- latest headlines, significant content, etc --- 'above the fold', meaning in the top half of the newspaper itself. Consider your pages from the same perspective, and keep the significant information, including the navigation, as high up as possible. Not only will this mean the navigation will load first in the user's browser, but it also 'hits' the user faster. However, read Tip 3 for a word of warning on this point!

3. Below the Banners

Heard of snow blindness? Well, there's a 'condition' known among Web users as 'banner blindness'. Often, users naturally ignore content placed above any banner ads on your site -- they simply consider this space for further advertisement. Although it might be tempting, don't place any navigation elements above your banner ads.

4. Consistency is Key

I cannot stress this enough. On each and every page of your site, whether it's your forums, your links page, or anywhere else, locate your navigation in the same place, with the same styles, and don't change anything! This way, your users know exactly where to look for it.

5. Don't be Adventurous

It's always good to see your site stand out from the crowd, but please, when it comes to navigation, try and blend in with the rest of the flock. This way, regular Internet users will be used to your method of navigation to some degree -- as they will have experienced, and learned on similar systems on other sites -- and won't need to be taught anything new. Using your navigation system will be easy!

6. Add a 'Home' Button

Your home page is the most important page on your site, so make sure your users always know how to get back to it. Not only will the 'home' button let people who clicked links on your site get back to where they began, but it also allows people who land on sub-pages within your Website to find your home page -- potentially resulting in a new repeat visitor for your site.

7. Keep it Fast

Don't be fooled into thinking your users have super-fast Internet connections. They don't. Despite the fact that a large proportion of the Internet community does have a broadband (or similar) connection, there are still plenty of surfers stuck with 56k modems who like to see fast loading pages wherever possible. Optimise your images, your HTML and your stylesheets to ensure everything loads as fast as possible.

8. Quality, not Quantity

Build your navigation so that it 'streams' users into progressively more and more specific information. Internet users are a lot happier with a few choices (and navigation buttons) at each level than hundreds. Use subsections and subcategories with appropriate navigation to enable users to quickly locate the specific content they want.

9. Netscape isn't Dead!

Remember, people use other Web browsers and resolutions to the ones you use. Check your site's navigation in all possible browsers and resolutions before you launch. This way you can spot mis-alignments and errors your fancy JavaScript code before anyone else does, sparing you a great deal of embarrassment in the future.

10. Leave Out the Unimportant Stuff

Links such as 'Contact Us' and 'Privacy Policy' are best left out of your Website's main navigation. The most common place for these to go is at the bottom of the page.

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!