Design Effective Navigation in 10 Steps

Share this article

Key Takeaways

  • Start the design process offline, sketching out various potential designs and focusing on navigation as the main point of focus.
  • When designing navigation systems, consider the nature of your site and its users, using usability testing with target audience members to determine the most effective design.
  • Keep navigation consistent and simple, placing it high on the page but below any banner ads, and ensure it loads quickly for users with slower internet connections.
  • Test your site navigation on multiple browsers and screen resolutions, and make it clear and well-placed so users can easily find what they’re looking for.

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:

  • 800×600
  • 1024×768

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!

Frequently Asked Questions (FAQs) about Website Navigation

What is the importance of website navigation?

Website navigation is crucial as it directly impacts user experience and site usability. It helps visitors find the information they’re looking for quickly and easily, thereby improving their overall experience. A well-structured navigation system can also improve your site’s SEO ranking as search engines can crawl your site more efficiently.

How can I improve my website’s navigation?

There are several ways to improve your website’s navigation. Firstly, keep it simple and intuitive. Use clear labels for your menu items and ensure that the most important pages are easily accessible. Secondly, consider using breadcrumbs, which can help users understand their location on your site. Lastly, always include a search function for easy access to specific content.

What are the common mistakes in website navigation design?

Common mistakes in website navigation design include having too many menu items, using vague labels, and not including a search function. These can confuse visitors and make it difficult for them to find what they’re looking for. It’s also important to avoid complex dropdown menus and to ensure that your navigation is mobile-friendly.

How does website navigation affect SEO?

Website navigation can significantly impact SEO. A well-structured, easy-to-navigate website allows search engines to crawl and index your site more efficiently, improving your visibility in search results. On the other hand, a poorly designed navigation system can hinder search engines from accessing your content, negatively affecting your SEO ranking.

What is the role of a sitemap in website navigation?

A sitemap is a file that provides a map of your website’s content and is used by search engines to understand your site’s structure. It plays a crucial role in website navigation as it helps search engines index your site more efficiently, improving your SEO ranking. It also helps users navigate your site more easily.

How can I make my website navigation mobile-friendly?

To make your website navigation mobile-friendly, ensure that your menu items are large enough to be easily tapped on a small screen. Also, consider using a hamburger menu or a vertical menu for smaller screens. It’s also important to ensure that your website is responsive, meaning it adjusts to fit the screen size of the device it’s being viewed on.

What is the difference between horizontal and vertical navigation?

Horizontal navigation is typically located at the top of a website and runs across the page. It’s best suited for sites with fewer main navigation items. On the other hand, vertical navigation runs down the side of a page and can accommodate more items. It’s often used for sites with a large amount of content.

What are breadcrumbs in website navigation?

Breadcrumbs are a secondary navigation system that shows a user’s location in a site’s hierarchy. They’re typically placed at the top of a page and provide links back to each previous page the user navigated through to get to the current page. Breadcrumbs can improve user experience by making navigation easier and more intuitive.

How can I use website navigation to guide user behavior?

You can use website navigation to guide user behavior by strategically placing important links or buttons in prominent places. For example, if you want users to shop your products, place a ‘Shop Now’ button in your main navigation. You can also use color, size, and positioning to draw attention to specific navigation elements.

What is mega navigation in website design?

Mega navigation is a type of dropdown menu that appears when a user hovers over a menu item. It allows for the display of a lot of content at once, including links, images, and even forms. Mega navigation can improve user experience by providing a lot of information at a glance, but it should be used sparingly as it can also overwhelm users if not designed well.

Sam HastingsSam Hastings
View Author

Sam is a student and a Web developer in his spare time. He's worked on numerous projects including his Weblog and the popular entertainment site, Devilware.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week