Web Design Tips, Tutorials & More!

Website Navigation-the basics.

The word navigation is a Greek work, and basically is used to describe the science, or skill at travelling from one place to another, without getting lost.  This includes air, sea, and outer space travel.

In a web design context, the term navigation means moving from one page to another, without getting lost, or more accurately confused.  This is why navigation is an integral and important part of any web design, and one that you should pay attention to.  If the navigation does not cut the mustard, visitors will soon become despondent, and that leads to the path of failure.

Website Navigation-the basics of typical layouts.

There are in essences three typical layouts for any web design, these are horizontal navigation links, vertical navigation links, and a combination of the two.  Here are brief descriptions of each.

Vertical navigation links, normally run to the left of the web page.  The main content is shown to the right of them in the display area, and users select which part of the site they want to see by choosing one of the vertical navigation links. 

The links may not run the length of the page, and other elements could be added below it.  If this system is adopted, it may well be worth adding a link to take a user back to the top of the page, or reproduce the links at the bottom, so navigation is within easy reach.

Horizontal navigation links, run just below the title bar, and can span the entire width of the page.  It is worth remembering though, that studies have shown that text that spans greater than 600 pixels, is hard to read.  So it is a good idea to limit the amount of text displayed at anyone time, to be no wider than 600 pixels.  This makes it easier to read and provides focus.  Other elements can fill up any empty space, if needed.

The third choice is horizontal and vertical navigation links on the same page.  This is generally adopted if the site is large, or requires lots of links to other sites.  The horizontal links generally remain constant, to provide the user with familiarity, and an easy way to get back to a certain page, where as the vertical links tend to change depending on what part of the site they are viewing.

Now we have seen what the options are, the question raised is which is the best method to adopt.

Opinion is divided on the subject, but as a rule of thumb, the deciding factor is how many links are needed, and how do they fit on the page.  The following are suggestions, not hard and fast rules for website navigation-the basics, and are probably worth experimenting with if you do not want to outright adopt them.

If the number of links is ten or less, and they will fit across a page of 800 x 600, then by using the horizontal navigation link layout, will allow for graphics and other elements that maybe needed to be placed either side of the main content.  This has worked to good effect, as the content can be “framed”, and provide a focus for the audience.  They work better as drop down menus too, though updates often require the template to be changed.

If the links are greater than fifteen, then by using the vertical system, will generally mean clearer links, as they will not have to be squeezed into an 800 x 600 space.  Vertical systems also have the advantage of being easily updatable, as extra links can be added to the bottom of the last link.  No template changes needed.  They do not work so well with drop down menus, however, as space for them to “drop” into, has to be considered.

This is just a basic introduction to website navigation – the basics.  Many decisions are needed to produce a good website.  Navigation should be high on your list of priorities to ensure that the website, is a good one.

4 Responses to “Website Navigation-the basics.”
  1. marc andrew

    i read every single of your post sometimes i read it over and over again ..you really inspired many people here..wish you a good luck in everything you do..

  2. boschandlombinc

    I agree with you abyviduya. This introduction article about web navigation basics are pretty rudimentary. I like how it’s simplified.

  3. sfary

    Thanks for the information. It will be useful for many.

  4. abyviduya

    This introduction to navigation basics is so cool. The fundamentals are pretty exhausted in here in terms of clarifying every detail and point.

Leave a Reply