In this blog post we’re going to focus on one of the often over looked but key design features of any website, the navigation.

Navigation is important as it’s how people find their way around your site. Get it right and visitors will be zooming around finding exactly what their looking for and more importantly ending up where you want them to. Get it wrong and they’ll likely bounce right off your site.

There are a number of different navigation feature that you can use, each of which we will look at now:

Navigation Menus

The most obvious navigation tool is the menu. By default almost every site comes with a main navigation menu, though in some cases you might have multiple menus.  For example you might have a secondary menu in the header, the footer or even a sidebar. The secondary menu may be the same as your main menu or it may be different depending on what you are trying to achieve.

Quite often your menus will be multi-tiered i.e. you have pages grouped under another page which may also be grouped under a page above that. Traditionally such a menu would be drop down as is shown in the image below:

Multi-Tier Main Navigation Menu

Multi-Tier Main Navigation Menu

These days you can now take this further and change the design to create a ‘Mega Menu’ as shown in below. This mega menu makes it far easier to get the full picture all in one go:

Example Mega Menu

Example Mega Menu

Calls-to-action

Most people wouldn’t immediately class a ‘call to action’ as a navigation feature but it is. Essentially it’s a navigation technique designed to funnel people to content that you want them to see/act on. Good ‘call to action’ features are clear and concise and their message is compelling in its need to act.

An example of an effective Call To Action

An example of an effective Call To Action

Buttons

Buttons are similar to ‘calls to action’ except rather than having a compelling message to get someone to act, they merely direct a visitor to specific part of your website. Buttons can be simple shapes of a certain colour or image or they can a group of carefully constructed shapes and images to create a fun, good looking feature on your site. Samples of buttons include:

An example of colour based buttons with a fun design

An example of colour based buttons with a fun design

Effective buttons with image backgrounds.

Effective buttons with image backgrounds.

Breadcrumbs

Breadcrumbs are a visual path of the navigation process the site has taken to get you to the content that you are browsing.  It’s like a family tree showing the parental relationship of your page all the way back to the home page e.g. Home > Section > Sub Section > Sub-Sub Section

Breadcrumbs showing under the main navigation menu

Breadcrumbs showing under the main navigation menu

Tag Navigation / Word Clouds

Tags are Meta data that search engines use to determine the key words associated with your website. These tags can then be used to direct visitors to content related to these key words. Tags can be shown as either a list or a tag cloud as per the images below:

Tag Categories showing as a sidebar list

Tag Categories showing as a sidebar list

Tag Cloud with key words

Tag Cloud with key words

Sitemap

Sitemaps are like a family tree of your website. They give a comprehensive overview of all of the content on your website and where to find it. Even if you don’t have a sitemap available to visitors it is important to have an xml version so that search engines can index your site.

Conclusion

Website navigation can take many different forms but getting it right is important to effectively direct people around your website. No one method is perfect and it is likely that a combination of navigation methods will give you the best outcomes.