User Interface Rules for Website Navigation

From the CouchSurfing Wiki, an informal workspace which anyone can edit.

What Is Website Navigation?

Navigation is how you move around from page to page within a website. Usually navigation (or nav) means a separated area (often a top-bar or side-bar) of each web page on the site that contains the site's most important links.

User Interface Rules

Navigation also implies structure and organization of pages. In order to design the best possible user interface, the navigation scheme should follow a set of rules of organization. Below are a proposed set of rules for future navigation schemes for the CouchSurfing website. These rules are listed in order of importance.

1. be small – primary nav should contain as few links as possible because fewer links are easier and quicker to sort through. this forces birth of the next rule:
2. be hierarchical - with a site that has many pages, if not all links can go in the primary nav, they must be moved into secondary navigation. Since secondary nav must also follow rule A, tertiary nav may be necessary, and so forth.
3. useful links at top - in deciding which pages go at the top of the hierarchy, the first consideration is how useful the page is. In general, the most used pages should be at the primary, and the least used pages should be at the lowest level. However, this consideration is tempered by:
4. be organized – obviously a hierarchical nav must be organized in a obvious way. That is, if a user wants to visit a page she doesn’t see in the primary nav, she must be able to easily guess which primary nav link would likely contain that page. Therefore, primary nav should represent major groupings of pages based on function or information.
5. use breadcrumbs – looking at the nav should instantly tell the user where she is in the site map. Therefore, every page on the site should have a corresponding link in the nav, and no page should be hidden from the nav. However, in the cases of the least useful pages which are burried below the tertiary level in the hierarchy, they can be displayed as breadcrumbs rather than quaternary nav links.
6. pages at bottom – all of the actual pages on the site are at the bottom ends of any branch in the hierarchy, never at the intersections. When a user clicks on a primary link, the page displayed is actually the primary link’s default secondary link, and the secondary link’s default tertiary link, etc., until the end of the branch is reached. If pages were at intersections, that would violate the breadcrumb rule because the page would not be displayed in the nav.
7. default link first – Following from the pages at bottom rule, when the user clicks on a primary nav link that leads her to a default page in the secondary nav, that secondary nav link should be the first (e.g. left-most or top-most) in the list.
8. no teleportation – teleportation is really confusing for the user. Teleportation is when a user clicks a link in one place within the navigational hierarchy and suddenly lands in a totally different place in the hierarchy. This must be avoided in links that appear in the nav. However, links on a page my teleport.
9. well named links – all links should have a name and that name should always be descriptive. The name used must not be confusing or ambiguous. This applies not only to nav links, but also links on a page. Links should never be named “click here”.