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:
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:
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:
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.
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:
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
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:
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.
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.