Navigation Systems for Websites

Navigation must serve three purposes when considering both end users and search engine spiders:

• Navigation must allow easy access to all pertinent information on the website
• Site Navigation systems must serve as the primary organizational structure of the website
• Text navigational systems must be properly employed to leverage search engine indexing and internal link power

Image Links and Link Buttons

Image links are the perfect way to get the attention of website visitors. With a page full of text, images can and should be designed to lead the eye directly to the navigation system, or any link that a site owner desires to draw attention to. The eye travels from light to dark, and the method of reading that most people in the western world learn trains the eye to naturally travel from left to right.

Websites that are too cluttered with images seldom serve their primary purpose. Like an exotic atomosophere in a fine restaurant that presents itself to the senses upon entering, every element on a web page, ideally, should work together to present an end effect. Image navigation links and link systems are no different.

[ The image links in the example are Flash navigation buttons which are currently not indexed by most search engines ]

Image links, from a search engine standpoint, are far less important than text navigation systems. The abuse of alternate text tags, and other methods used to attempt to spam the search engines, has caused the search engines to reduce the importance associated with image links, at least when attempting to leverage search engine rankings.

More: Image Links & Linking Images

Text Links

Text links are critically important to ensure that websites are search engine friendly. The anchor text, or the text that a visitor actually clicks on to travel to another page, should always be relevant to the actual content of the page the link is pointing to:

A bottom text navigation system is a perfect method to:

In the example above, the bottom text navigation system gives direct access to all web pages in this section ( hub ), provides a method to return to the main hub, and links to two other main sections on the website ( home and forum ).

More: Text Links & Keyword Considerations

Site Menu and Navigation Examples

Javascript Menus

Javascript menus, when done correctly, can provide easy access to a great deal of site content. They can also be used to hide links from the search engine spiders, granting a designer greater control over which links are followed by the search engine spiders -- and on which pages. The above example is a universal top menu navigation system that provides access to all pages on the site ( over 100 ).

Sidebar navigation systems are very popular. The navigation menu to the left is made up of individual flash buttons, and is located on the left side of screen, directly adjacent to the page content.

The navigation system to the right is an integrated flash menu system which responds on mouse-over and on-click. The content is to the right, and the design concept was implemented as a completely non-scrolling web site.

Comprehensive Website Navigation

For complex websites, we prefer to implement a top menu system, a bottom text navigation system, and a contextual navigation system within the page content itself. Maximizing available screen space to use for actual content is one of the most important concepts in navigational design. Once a complete site architecture is deployed, users will be entering deep within the content pages of the site. It is thus extremely important to give visitors easy access to the rest of the site from the top of the page, from the bottom of the page, and with rich text links included in the content itself.

Website navigational systems can make or break websites, both from an search engine perspective, and from an end-user perspective. If advanced menu systems are used, there must always be an alternate navigation method used on each page.