Used on most websites, usually providing a consistent method of moving around and for identifying the current location within the website, navigation bars are seen as a backbone, allowing visitors to navigate quickly to different parts of the website and also provide a lifeline if visitors get lost.
Good navigation bars tend to be dull and boring, as people rarely visit websites just to use the navigation system. It should be so boring, that the user does not spend any time looking at it, until they actually need it. Then when they do need it, the navigation bar should be easy to identify and should not create any questions in the visitors mind about how they use it.
Sometimes a tiny bit of animation can be a nice touch, but it will probably be a waste the website authors time. In most cases, animation should not exist. Take for example a navigation bar that animates its way onto the webpage when the page loads, it might be all right the first time, but on the second, third... fiftieth time it will get annoying, more so when website visitors are trying to quickly jump between pages. Website visitors should not be expected to wait for the animation to finish before being able to use the navigation bar. Some websites use cookies to suppress the repeat animation, but in most cases it will be more reliable and useful to remove the animation.
However, it is possible to animate the interaction with the navigation bar, but why waste the time doing it? Website visitors are not going to thank the author for doing it, if anything, having a navigation bar that expands using an "interesting" animation means the user will have to wait at least another second before it finishes, that's another second where the visitor is getting impatient. Although, on some websites having a navigation bar that did have to expand to show more links, it might give a more professional finish with a little slide... if this is the case it should not take any longer than 0.4 seconds to get it over and done with - this is based on the human reaction time of 0.1 second.
The easiest way to avoid unnecessary animation is to not use Flash. Ideally if animation has to be done, it should use unobtrusive JavaScript, which has the added bonus that if the user does not have Flash or JavaScript (like a search engine spider), they still get to use the navigation bar. From the view of a search engine spider, the navigation bar is an excellent way to access all pages on a website, if it cannot use the links, then in all probability it will not be able to index the whole website.
While jumping around a website, the navigation bar should be consistent. If it varies in position, size, style or how it works, then the visitor may start to question if they are still on the same website.
A very primitive test, which does not cover every situation, is that you should be able to use your mouse and click on a link in the navigation bar, when the next page loads, without moving the mouse, the same link should be present under the mouse. This does not cater for navigation bars that expand depending on the section the user is in, but in most cases it goes towards ensuring that the positioning of the navigation bar and size of the links remains consistent.
Some website authors believe that if an entry in the navigation bar links to the same page the user is on, then the entry should either be hidden or shown in plan text (not a link).
First, it is advisable to keep the entry for the current page in the navigation bar, as this helps the visitor keep track of their current location within the website. For example, a visitor who is scanning though all the pages on a website will probably be using a sequential method of moving though the navigation bar (i.e. going from top to bottom). If links are being added and removed, then the lack of consistency will require the user to guess which is the link to the next page. Although this particular issue can be avoided for first time visitors, by visually displaying links to pages that have already been seen (using the CSS visited pseudo-class), it is much more beneficial to keep the current page in the navigation bar and visually highlight it.
Second, there are website authors who keep the current page in the navigation bar, but do not make it into a link (plain text). Really the decision to-do this is down to personal opinion. Some website authors believe that a visitor will not want to follow a link that re-displays the same page, as this is can confuse users. However, in my experience, I have found that sometimes the visitor may want to reload the current page without using the browsers refresh button (this is usually the case with visitors who are used to frame or Flash based websites). For these visitors, the navigation bar appears to be broken, as an entry exists in a block of links which is not a link. Personally I have not seen any visitor who has followed the "about us" link in the navigation bar, then got confused when that following that link again re-displays the same page, if anything they expect this to happen.
Most websites eventually expand to over 100 pages worth of content. Once this happens, the website author should really be considering if the number of pages can be cut back (if they have not already done so). This is because a 100 page website, along with being potentially difficult to maintain, can easily become difficult for visitors to find relevant content. In quite a few cases, websites of this size can be cut back to 30 pages without any loss of information or putting too much content onto single pages. This has the the added bonus that it usually becomes easier to navigate and more optimised for search engine spiders (which typically ignore duplicate content). Remember, more pages does not mean a better website, it could mean that the website has very little relevant content, spread over too many pages.
Although, after cutting back the pages which are not required, websites can and do pass the 100 page mark. When this happens, the navigation bar really does need to be continually re-considered to see if there is a better way of representing the websites structure.
One of the first failing points with large websites is to show a large number of links in the navigation bar. If this happens, then all the visitors have a long list of links to read before finding a link that is relevant to them. Generally the more links available, the more potentially relevant links can be identified. Although this gives the visitor choice, it is a choice they should not need to be making, in reality its more of a gamble.
It seems that the main reason large navigation bars exist is to abide by the "3 click rule". The basic idea behind this rule is that anyone who cannot find what they are looking for within "3 clicks" will get frustrated and leave the website. However, this rule has been proven to be slightly incorrect, if users know they are going in the right direction, the amount of "clicks" can become irrelevant. In contrast to overloading the user with too many links (by using a site map on each page), it is usually better to provide a small sub-set of links on the main navigation bar which the visitor can easily choose from - the less links, the less likely the user will have to gamble on which one they should use.
One of the ways that large navigation bars can be broken up is by splitting the whole website into different sections. If website of 100 pages was to be divided between 5 sections, the website visitors will usually be able to identify which section they need to be in. Once the visitor is within a section, they have a much more manageable 20 links to choose from, which could in turn be sub-divided. By using this method of homing in on relevant content, the user is much more likely to find what they are looking for.
Some websites use hover menus, these allow the website visitor to hover their mouse over a menu item (e.g. the name of a section within the website), which will then show a list of sub links. These menus can help some users get to the content quicker, however there are several usability and accessibility issues, which I will not go into here. Any website author who considers using such a menu should do plenty of research into the issues these menus create (e.g. page size, keyboard access, screen readers, cognitive problems, users with motor skill issues, etc).
Sometimes trying to hide the meaning of the links in a navigation bar can be useful, perhaps in websites that have a discovery element to them, but most websites do not need this. A simple example is a set of icons that link to different pages on the website, only when the user hovers their mouse over the icon is a small bit of text exposed to identify what that symbol means, or the destination of the link. This setup is often referred to as "Mystery Meat Navigation". Using icons for navigation requires website visitors to remember the value behind each icon before they can quickly navigate the website, although that assumes that the visitor identified that the icons are even used for navigation.
A second type of mystery navigation is one which is hidden at first, only by interacting with the webpage does the visitor get to see the navigation bar. This seems to defeat the purpose of having a navigation bar, if there are more than two pages on a website, then the visitor will expect that moving between those pages will be quick and painless. If they are hidden, the visitor has to find it first of all, then work out how to show the links, then they are expected to repeat that process every time they want to switch pages. An example of this is with the use of drop down menus, it seems that these navigation systems (which prevent search engines from indexing a website) are used to reduce the amount of space a navigation bar uses on the page (making it more difficult to find) and also to disguise a huge list of links (too many for new users to read and understand), while expecting visitors who use a mouse to use two "clicks" to get to their destination, with the added bonus that they can easily become inaccessible to keyboard and screen reader users.
There is nothing wrong with experimenting with navigation bars, one day someone could find a brilliant alternative, but so far a simple list of links seems to be the best solution. Perhaps the list of links could also expose more links on large websites when the visitor enters a section of the website. But ultimately website authors should keep in mind Jakob's Law: "users spend most of their time on other websites", so using a simple navigation bar will mean less learning time on the users part, and the website authors can spend more of their time on the content of the website - the bit that people come to see.
Any feedback would be greatly appreciated, I don't include comments due to the admin time required, but if you email me, I will reply and make appropriate updates. Also, if you would like to take a copy of this article, please read the terms this article is released under. This article was originally written Wednesday 29th November 2006.