What is web site navigation?

[yoursks]

To correctly describe web site navigation, we need to know the meaning of navigation. The word is derived from naus/nautes (Greek), which relate to sea and sailors. In addition tonavigation, these roots have also given us other words like Nautical (relating to the sea),Astronaut (a sailor of the stars - Aster means a star), Cosmonaut (a sailor of the cosmos) etc. Closing our brief English language discussion, "navigation" is the science and skill of moving from one place to another.

Web Site Navigation - Definition
Web site navigation is the science and skill which you apply to a web site that helps visitors move from one page to another.

Web Site Navigation Menu or Web Site Navigation Bar
Navigation on a web site is achieved by a collection of links (text/images/flash/java applets) that form the Web Site Navigation Menu or the Web Site Navigation Bar. This navigation menu or bar is usually placed vertically on the left or horizontally near the top of the web page - check the images below.

A vertical web site navigation system

The image on the left shows a very common layout of web sites. The header section (in orange) carries the logo, ideally on the left, and might have other images and/or text. The navigation menu is placed in the green section. It might not span the entire height of the page and can have other web page elements or simply blank space below it. The main web page contents (text and images) are situated in the light grey area.





Horizontal web site navigation bar

The web site navigation bar can also be placed horizontally right below the header section of a web page as depicted in green color in the adjacent image. The main contents of the web page are located in the light grey area. The only disadvantage of this web page layout is that the text spans the entire width of the page. This makes it difficult to read as studies have shown that online surfers find it hard to read web page text which spans more than 600 pixels. This problem can easily be overcome by limiting the width of the text display area so that it's lesser than 600 pixels. To fill the blank space created on the left and the right of the text, one can use images or other design elements.

Vertical and Horizontal navigation systems

The third common web site navigation menu layout is shown in the adjacent image. Here the navigation system exists both as a horizontal bar right below the header and also on the left. This is generally used for sites (such as this one), in which there are several pages (and hence, several links).
For example, on webdevelopersnotes.com, links to the important sections of the web site are placed horizontally and the links to pages inside that section are placed on the left. Links placed in the horizontal bar remain the same throughout the web site but the links on the left change depending on the web site section.

Horizontal and Vertical Web Site Navigation Menu/Bar - Which one to use?
A web site navigation bar/menu is a very important aspect of a web site. It actually decides the page design and layout. I follow a few basics principles in deciding whether to use a horizontal navigation bar or a vertical web site navigation menu system.

• If the number of main links on the web site is less than 10 and they fit horizontally on a screen resolution of 800x600 pixels, I use a horizontal menu. Since the navigation menu is horizontal, and is followed by the main textual and graphical contents of the web page, it gives me a chance to place graphics and other web page design elements on either side.
• If the number of main links on the web site and more than 15, then I put all these in a vertical navigation bar on the left side.
• The contents (text or graphics) of the web site also dictate which navigation system I use. If most pages have a lot of content, then I prefer to go in for a left-side vertical navigation menu system.
• If the site has to employ dynamic JavaScript drop down menus, I prefer to use horizontal web site navigation because here the dynamic menu actually drops downrather than be displayed on the side of a vertical web site navigation menu.
• Vertical web site navigation menus are also easy to update. If a site has 10 main links in a left-side vertical navigation system and the client decides (after about 6 months) that they want to add 5 more, we can simply expand the vertical menu without disrupting the design template. However, in case of a horizontal menu system, it would change the design template because the 10+5 = 15 links would surely flow to 2 lines creating two rows of links.

The above are simply my opinions and you might not concur... but I do advise that you look at the site contents (the actual contents of web pages) and the number of main links you want before you decide which web site navigation system to use.