Designing Effective Website Navigation
Website navigation is a crucial part of your website design. Visitors find their way around you website using your navigation links.
To be effective Your Website Navigation design should allow visitors to quickly and easily reach the parts of the site that they are interested in.
Your site navigation is determined by the information hierarchy of the website i.e. your website layout and by what you want the visitors to see.
Website Navigation Design
When designing your site navigation menus you have several decisions to make:
- Positioning The Navigation Bar/menu on the Web Page
- Site Navigation menu bars structures and Naming
- Site Navigation Link Types- Plain text, graphical etc.
There are various places where the Website navigation links can be placed. Here we will look at the most common positions and their relative merits. In particular how they impact search engines.
Position on Page
There are three standard positions for placing the navigation links they are illustrated below:
The positions are top, left side and bottom.
Most websites use a combination the two most common are: top + left and left +bottom:
Navigation Menu Structure
Your website navigation should be kept as simple as possible and you should avoid having a large navigation menu. Generally you will have two web site navigation menu bars on a web page.
Because the side menu area has more space, it usually has the larger menu bar and hence I call it the main site navigation menu with the top or bottom menu bar containing navigational links to general web pages like content, about us, privacy etc -a mini website navigation menu.
It is normal to repeat this 'mini' menu (general menu on each and every page).
In a small website 5-10 pages then top or bottom menu will probably link to every web page in the site and the left hand menu will be missing.
In a large site the left hand menu (main navigational menu) should be context sensitive and be relevant to the pages directly underneath it.
As an example imagine a website about fashion the main site navigation menu ( on the home page) would have links like:
- women's fashion
- men's fashion
- Children's fashion
The women's fashion link would point to a web page on women's fashion in general which would link to specific aspects of women's fashion like
- women's shoes
- women's scarf's
- women's skirts
- women's tops
This is illustrated below:
Naming Navigation links
What is crucial to remember is that the Navigation links will not only be used by our human visitors but also by our web spiders. These links are your internal links i.e. they point to web pages within our website. As with external links the correct naming of the links can have an impact on our search engine rankings.
In evaluating links search engines give special relevance to the text surrounding the link and the anchor text that makes up a link.
The Navigational Menu should be built from keywords that reflect your website. The example fashion site above illustrates a good naming strategy. Our home page navigation menu would look like this:
Women's fashion
Men's fashion
Children's fashion
and on the women's page the navigation menu would look like this:
Women's shoesWomen's scarf's
Women's skirts
Women's tops
Linking Type- Plain text, graphical etc.
There are many different ways of providing website navigational links.
- Plain text links
- JavaScript links
- PHP links
- Graphical links
Plain text links
Plain text links are by far the easiest to implement and are to be recommended for most websites. All Pages should include some plain text links even if they use other link types as their main navigation structure.
Plain text links are used because they are search engine friendly- means that all search engines are able to follow them. The problem with plain text links is that they can be very difficult to maintain for large websites (>50 pages). However, careful attention to website design can overcome this.
The strategy I try to adopt is that a navigation change should affect at most 20 pages and were possible only 10 pages. This means that in a 100 page website the pages will not all have the same navigational structure.
As an example this webpage is part of the website design section of this website and so the main navigation links are all website design related and not the same links as you will find on the home page. This is considered in more detail in website navigation menu bar structure.
JavaScript Navigation
JavaScript navigation can be used to build very complex drop down menus suitable for large websites. It requires far more knowledge and expertise to implement but it has the advantage that once implemented then it is easily changed.
In order to change the navigational structure for 100s of web pages a single page change is all that is required.
The main disadvantage ( and it is a big one) is that JavaScript links aren't followed by search engines and hence the pages referenced by these links may not be indexed unless some other form of navigation is provided- usually via a sitemap.
Even a sitemap may not be sufficient for search engines like Google as the Page search rank is derived from the sitemap page and not the home page.
This aside, I would caution about using JavaScript navigation unless you really need it. If you do always supplement it with plain text navigation for your important pages.
PHP Navigation
Using php scripting for the navigation makes the navigation very flexible and easily changed and is the best option for large sites. It is accomplished by using a php include file for the navigation. See
Adding Handling repetitive content.
Graphical Links
Although they are used they are not search engine friendly and are so they are only advised if you have other text based links pointing to the page.
Website Navigation and Internal Links
It is important to remember that the site navigation links represent only part of the internal linking structure. The web pages on your website will still contain other internal links outside of the navigational structure.
Resources and related articles: