Any decision on a website’s navigation is critical to usability, findability, accessibility and SEO. It can be difficult to undo if you select a poor design. So usable navigation is best established early on in a web project.
There are many different examples of main navigation systems, (i.e. the main method for accessing content in different site sections) but the ‘three Cs’ of convention, consistency and context are important whatever the design.
To start with, here are the main purposes of navigation systems:
- To provide a summary of site content.
- To direct users to relevant content through text labels and images.
- To provide context for site visitors.
- To provide both direction and context for search engine robots and ranking algorithms.
And here are some best practice tips:
For many websites, the main navigation usually uses a combination of the top and left of the browser window. However, right-hand navigation can have benefits in persuasion – this Egg.com example shows how locating the navigation on the right tends to encourage the visitor to scan the other content.
The Microsoft home page uses a rollover to select the content. In our view this is not learnable and not usable since it flouts convention. It also forces the user to move the mouse horizontally when moving from the tabs to the content to avoid selecting another option.
In the majority of cases usability is improved through placing the main navigation on all pages on the site. The current convention tends to be to use the top global navigation for the main product categories, services or tasks such as search, contact, log-in etc.
The left hand menu tends to be for more detailed product menus and is not necessarily present throughout the site.
Use highlights, tints or arrows to highlight the current site position within a hierarchy. Dabs.com provides a good example of this feature:
Provide text-based navigation elements unless they are consistent with brand values of site.
Text-based links are better for findability, accessibility and SEO. They are best for SEO since search engines use the keyphrases in the link anchor text as an indication of the content of target phrases. They also use the alt attributes of images for similar purposes, but the weighting is likely lower.
Don’t take the decision lightly to use a dynamic (drop-down) main navigation.
The recently redesigned M&S website provides an example of this – while it makes for less clutter on the page, it can be confusing for users. Like the Microsoft example, it forces the user to move the mouse vertically to avoid selecting another option.
For more information, see our
Web Design Best Practice Guide
, which provides best practice approaches for all the topics that anyone involved with website design needs to do an effective job.