Making Navigation Work

Understanding what HTML tags do and being able to create an attractive page layout with informative content is not the end of the story. You have to provide people with a way to find (or navigate to) the information easily and quickly. How you do this will vary depending on the type, content and complexity of the site.

  • Remember people are lazy; if they have to click their mouse on more than three links to find the information they want, they will not bother and will probably not visit the site again.

Sections

Imagine you are creating a personal web site for your family. You could divide the content up in to several main sections, and have hyperlinks to each of the main sections on every page of the site. You might also add the Home page to these sections like this:

  • Home
  • Work
  • Family
  • Holiday
  • Pets
  • The sections you divide your web site in to might be reflected in the folder structure you use for storing the files.

You may want a hyperlink to your Contact Details on every page (but not necessarily your email address) but these links are often best kept separate from the hyperlinks to the main sections. Alternatively the pages not relating to specific sections could be sub-pages to the Home page.

Sub-Sections

You can divide the main sections up in to sub-sections. For example if your have been on Holiday to several different locations each location could be a sub-section. Every page in the section then have hyperlinks to its own sub-sections, like this:

Individual Pages

Each sub-section may only be a single page but if you go on lots of different Holidays you can use the first page in each sub-section as an index for the different times you have visited each destination. This means that from the home page anyone is just two or three clicks from a page with the information they want.

Examples

If you have fewer sections arranging them across the page is usually best. You can then arrange links to the sub-sections down the side of the page or horizontally under the section links.

Horizontal main menu, vertical sub-menu Horizontal main menu and horizontal sub-menu Vertical main menu, horizontal sub-menu
navigation example navigation example navigation example