Secrets to Developing Foolproof Website Navigation

Before you can jump right in and start working on the navigational structure of your website you need to know what content you have that you would need to post onto your website. Just like the navigation system of an airplane is not much use without a determined destination. A website navigational structure without the content is not useful. This is where you proof read and get picky about what to include in your website.

 Once you have got all the content you need for your website it again does not make sense to just throw it in and call it day. You need to classify the content and per-determine where each piece of information belongs and how it relates to other content on your website as well as content from external resources.

As you plan your content, try and make it such that the user requires two or at most three clicks to get to any portion of the content that they desire.

Whatever design you choose, be it graphics, fonts or colors, make sure they are well suited to the website and the theme it portrays. Make sure your navigational structure is also consistent throughout the website. All links or anything that responds to clicks should be visually distinct from the other text and images found over the rest of the website.

Now that you have your content and you have organized it into logical units, now is the time that you can start creating the links and the means to access this content. That is where the menu comes in. A good navigational menu is one that is simple and clear. You also need to keep in mind that users on your website have expectations that you should adhere to.

For starters you will want a navigational menu bar that will not keep users guessing where to find information from your website. A good practice would be implement the following links on your website as a starting point.

• Home page
• About us
• Products
• Services
• Contact
• Clients
• News

A menu bar with these menu items is self explanatory and well understood by practically all the Internet users today. It may not be practical for some kinds of websites such as blogs and news websites among others to follow this structure so in such cases a safe bet would be try and keep it as close to this as possible. Use the list above as a guide and start sorting your content to fit in. If it does not, then make the appropriate changes to the menu bar links.

 There are basically two types of primary navigational layouts. Those that use the horizontal menu bars and those that use the vertical menu bars. There are a few rules to guide you when deciding which menu layout to choose form.

In general, if your primary navigation contains few items such as the example items listed above then the horizontal menu bar makes a good choice to consider. If your menu item contains several categories as is common with E-commerce websites then a vertical menu bar layout may be suited for your website.

Ideally keep vertical menu bars placed on the left of the page unless you are serving up a page with a right-to-left reading language such as Arabic.

These rules are more of hints. The important think to remember when planning your content is to try and get the best generally logical groupings that can suit a place on the primary menu bar. If your primary navigation contains too much stuff then it could also be a hint that your content is not organized well enough.

It is a common occurrence to find that your content is far too vast or complex to be accessed solely via the primary navigation. Therefore with the help of technologies like JavaScript and CSS and Server side capabilities, you are open to integrate several other navigation options. These include:

• Fly-out and Drop-down menus: These give you the option of having additional menu items attached to the primary navigation menu bar links. Fly-out menus are typically used to extend menu items on a vertical menu bar while the drop-down menus are used to extend the menu item options within the horizontal menu bar.
• Breadcrumb Navigation: This is typically a trail showing where the user is on the website navigational tree hierarchy. This compliments the page headings and page titles which are also used as navigational aids. The breadcrumb links are usually placed directly on top of the content and below the horizontal navigation menu bar. Its layout can be in a layout such as this "Home > Services > Web Design > Templates".
• Search Navigation: This is typically a search field used to key in keywords that a user feels are relevant to the ideal content that he is looking for. Search navigation is ideal for websites with large amounts of content, content that would normally be archived or complex navigational websites which make finding content difficult or impractical using traditional links.
• Footer Navigation: Ideally footer navigation is used to allow the user to continue navigating a website without having to scroll back to the top of the page. Footer menus also hold additional informational links such as terms of use, privacy policy, help, site map links and other none content pages of the website.
• Site Map: This is an index or catalog of all the links of major and minor sections within your website. This is a single page used to help the user quickly access content anywhere on the website. This is also important as it is also used by search engines to easily index your website. The site map should be placed at the bottom of the page preferably somewhere in the footer navigation bar.
• Anchor Links: These links form a important part of the navigation as it gives access to related content to the page the user is viewing. These links are placed in the body of the paragraph text and are integrated in as part of the content. Anchor links also play a crucial role is accessing older content such as in blogs or news websites where there are no longer direct links to older content.
• Back-to-top Links: This navigational links assist the user avoid unnecessary scrolling. Typically Back-to-top links are used where there is a lot of content on a single page that makes scrolling back up to the top cumbersome.
• Logo Navigation: This is basically the website logo that is usually placed on the top left corner of the web page next to or above the horizontal menu bar. The logo usually links back to the home page.

 Users of mobile devices must also be considered and many websites designed for desktop computers are not suitable for viewing on small screens. Ideally the primary navigation menu bar on a mobile device consist of a vertical list of items which link directly to the content pages which in turn have a back button to return to the main menu. The use of Previous and Next anchors is also important in containing the flow of content in mobile websites.