Web Navigation Design

Your website’s navigation is the taproot from which the rest of the entire site springs. You have to build a clear, logical one in order to facilitate your user’s visit. If the user cannot intuitively and logically get around, he will come away with a bad impression of you and your site.

A good navigation will reveal what content is on the site at a first glance. It will allow the user to get to any page within your site in two or three clicks, and will make sure that he can reach the most important pages in one. Also, it will reveal what content is one your site, encouraging the user to clink around and explore further.

Some things to Remember

  • People can enter your site through any page, not just the homepage.
  • The fewer clicks it takes to get to content , the better.

How to Make Your Site More Navigable:

  1. Try to put yourself in the shoes of your average user.
  2. Use your primary navigation for the most important pages, pages that the user should be able to access at anytime.
  3. Make sure your navigation stands out.
  4. Always let the user know where she is in the site: make sure your pages have a clear title at the top.
  5. If you have content on a few pages that is related, be sure to use internal links to help the user find those correlations.
  6. Consider using icons to reinforce your navigation.

Web Site Navigation Checklist

  • Titles of nav items are short, clear, and descriptive. Make them as explicit as possible.
  • The primary navigation has only 10 or so items
  • The primary navigation stands out in the overall design
  • There are not too many links on any page
  • It is obvious when a link has been clicked: the color can change, or there is a clicked state.
  • Navigation is clear and consistently placed throughout site
  • Each page has a link back to the homepage

Basic Layout

As you plan your site, you need to make sure the overall layout will be able to contain all of the types of pages you need to create. Here are 2 really basic layouts:

Side Nav

In a site with the navigation to the side, you have plenty of room for content. You can choose to have your navigation on the left or right. Right side navigation is not as common, but can work if your design really supports it.

Left Side Nav

Left Side Nav
This is by far the most common layout on the internet.

Right Side Nav

Right Side Nav

Top Nav

A site with its navigation at the top of the site also has plenty of room for content.

Labtime: Working with Spry elements to create navigation

Adding Spry elements to your pages couldn’t be easier: just use Dreamweaver to insert and style these lovely AJAX items to spice up your site as needed.

Open Dreamweaver and create a basic HTML page. Save it as index.html in its own folder.
Change your insert panel view to the Spry menu.

Choose “Spry Menu Bar” and decide which orientation you prefer: horizontal or vertical.

Your page will then look like this:

Click on the blue tab above the Spry menu and you will see this property panel:

Use this panel to add and subtract what pages your navigation requires.

Use the CSS panel to modify the style rules for your menu.

Articles used to write this lesson

Good Web Site Navigation – Reaching The Information Instantly

Seven Steps To Easier Web Navigation
Constance J. Petersen | 2000

Website Navigation
Ross Shannon