Website Navigation Tips

Log In
New User? Sign Up

About | Contact | FAQ

HOME ACCOUNT PRODUCTS NEWS ARTICLES DIRECTORY CLASSIFIEDS FORUMS TOOLS

Home

Content

Site Development

Website Design

Saturday, July 04, 2009

SPONSORED LINKS

Print

Email

Save

Discuss

Feeds

Navigation - Not Confusion
Published: Friday, October 10, 2003

The importance of an effective navigation
An effective navigation allows visitors to find what they are looking for quickly and easily. Designing an effective navigation can also help to direct visitors to other offerings on your site. It is also necessary that the search engine robots can read the navigational links in order to spider (or index) your site.

Creating an effective navigation
Site navigation can be of various types depending on the type of site. For example, a news site will provide navigation to the latest news (current or maybe a few days old) on the cover pages. Because of the sheer amount of pages of news articles, it is impossible to link to each item that appeared in its lifespan. On the other side, a smaller site will probably be able to link every item from its cover page (homepage).

The goal of an effective navigation is guided by the 3 click rule (all pages on the website can be reached within 3 clicks from the homepage). This rule applies to search engines also, where pages more than 3 clicks away are not indexed.

Categorize content, products or services: Create smaller categories for organizing the content, products or services. The categorization may be logical, alphabetical or as applicable. The categories can be arranged in a tree structure with several subcategories. Hence it can be several levels deep. Create a navigation panel specific to each category and place it in the left or top panels so that the user can view all links within that category without scrolling. This navigation panel will change when the user moves from one category to another.

Centralize navigation menu: Centralize the navigation menu on a separate navigation file. Using server side include code, add that navigation file to each page that belongs to the category. This will reduce maintenance worries if the navigation
menu is changed or updated. Only one navigation file has to be updated instead of each of the web pages.

Provide link to home page: Provide a link to the home page from each page so that the user can return to the main page if lost. This can be achieved by creating a 'Home' link. In addition, add a link to the home page on the logo image.

Use breadcrumb trail: A breadcrumb trail provides a quick way for the user to know what section or branch this web page is in. A breadcrumb is useful if the website has a lot of categories and each category is few levels deep. A good example will be a directory such as Yahoo or DMOZ.

Create consistent top and bottom menus: It is essential to provide a top navigation menu (as the top bar) which is consistent in look and feel for all the pages in the website. This menu should contain links to each category, the home page, contact or support page, faq page (if centralized faq), etc. This helps the user to move around categories or to contact support from any location.

Similarly, a consistent footer can contain links to contact information, advertising info, privacy policy, membership agreement etc.

Include links to related items: Related links placed at the bottom or right side allows visitors to navigate to similar or related items or content directly. Provide clear and descriptive information about the related link so the user knows what to expect on that page.

Include a search box: A search box can often solve the most complex navigation problems. A search box is very helpful for large websites. If your site has one, include the search box in every page at the same location. There are some free site search providers such as Google.com or FreeFind.com.

Tips & tricks

Use server side includes for centralizing navigational link code.

Place main navigation within the top 500 pixels of the website so that the user does not have to scroll.

Make use of the link text wisely so that it is easy to understand.

Avoid using image graphics for navigation. Image navigation may be obviously clear to the web designer, but may be confusing to some users. Use plain text or images with text descriptions.

If images are used in the navigation menu, include an image alt text for usability purposes.

Avoid using complex image rollover navigations. They may look elegant, but adds to the file size of web pages and takes longer to load.
Even if there is a need to create a complex dynamic navigation using DHTML or Javascript, simple HTML links should also be provided somewhere in the website so that search engine robots can spider your website.

Print

Email

Save

Discuss

Feeds

	Breadcrumb Navigation A breadcrumb trail provides a quick way for the user to know what section or branch this webpage is in. A good example will be a directory such as Yahoo or DMOZ.
	Server Side Includes - Centralize Common Content Use server side includes to centralize the common web site content.
	Introduction To Server Load Balancing Load balancing applies to all types of servers (application server, database server), however, we will be devoting this section for load balancing of web servers (HTTP server) .
	Favicon - Create Icon For Your Website A favorite's icon can make your website stand out from the rest. Learn how to create a favicon for your website.
	Website Hosting - Introduction This article provides an introduction to web hosting. Learn how the internet works and why you need a web host for your website.