{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.


That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.


Sorry about this, there is a problem with our search at the moment.
Please try again later.

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:

  1. Follow convention 
    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.

  2. Be consistent
    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.

  3. Provide context
    Use highlights, tints or arrows to highlight the current site position within a hierarchy. Dabs.com provides a good example of this feature:

    Dab.com side navigation

  4. 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.
  5. 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.

Graham Charlton

Published 20 June, 2007 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (0)

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.