Planning

Navigation

The usability and ease of use of a website is influenced to a great extent by the navigational scheme of the website (including the use of graphics and content layout). Navigational elements should provide intuitive guidance that allows users to find desired content as quickly as possible. The following guidelines will improve the usability and effectiveness of your navigation. (See the Links section for additional design considerations when creating links on Web pages)

Required: all graphical navigation elements must incorporate a description using the ALT tag (see the Links section for how to embed ALT tag text).

Use Navigation Elements Consistently

Use the same navigation schemes on all pages. This creates a common look and feel to help users effectively find the content they are looking for. When users use a link or navigational element, they expect that link to look and function the same every time they use it. If the links or navigation changes users have to relearn how to complete each task.

Layout of Navigation Scheme

Navigation schemes often run horizontally across the top or vertically down the left margin of the Web page. For example, this WARC website uses horizontal navigation for main sections within the site and left side navigation to assist in finding detailed topics for each main section.

Group Navigational Elements Together

Grouping navigation elements close together helps users easily find and link to desired content and allows users to view a rough outline of how the site is organized. This helps users intuitively guess where desired content is located.

Use Clear and Descriptive Titles for Navigation Elements

Spending time to develop clear and descriptive (yet concise) link titles helps users accurately and quickly determine what content is offered at your site and helps them find desired information more rapidly. Make link text descriptive enough so that they make sense when read out of context, since people who use screen readers to access the information on a Web page will often use the tab key to step through the links on a page.

All menu link titles should correspond closely to the title and content contained on the linked pages. For example when a user clicks on a menu item named "Enrolled Students" they should get a page named "Enrolled Students". (For additional information on links see the Links section).

Also, links titled "Click here" do not help users identify important links and can prevent disabled users, who use screen reading web browsers, from understand the meaning of the link. ( See Does Your Site Talk? and the Web Accessibility section for more information)

Every Page Should Include Top-Level Site Navigation

Providing consistent links to high-level site categories allows users to navigate throughout the main sections of your site from any page. These navigation menus should be placed at the top (header or side navigation bar) and bottom (often using a standard footer) of every Web page within a site.

Use Department Logos To Link Back To Department Home Page

If your site uses a department logo as part of its identity, use this logo as a link back to your department's home page. Studies have shown that most web users expect an identity logo to link them to the home page.

Use Text-Based Navigation If Possible

When deciding between text navigation or graphic navigation (the use of graphic images as buttons or links) you must consider the audience and the tradeoffs. Text-based navigation is easier to maintain, decreases download time, and works better with text only browsers.

Graphical Navigation Elements

Graphical links can be used effectively to convey additional information about a linked information source. However, they have several disadvantages. They can increase download time, poorly communicate what links have been visited, be difficult to process by section 508 compliant assistive technology tools such as screen reader web browsers, and can disguise what links are available from users. If you decide to use graphical links, follow the guidelines listed in the Links section to improve usability.

Note: All graphical navigation elements must incorporate a description using the ALT tag (see the Links section).

Dynamic Menu Systems

While dynamic menus are very nice looking, compact, and appealing to many users, they present a huge barrier to access to users who are unable to use a mouse to navigate Web pages. There are ADA - Web Accessibility (Section 508) issues that need to be addressed when implementing dynamic menus (Javascript functionality) on Web page. Please review the Web AIM article on Keyboard Accessibility to understand how to implement dynamic menus while simultaneously providing accessible Web pages. The key is to ensure that all content can be accessed with the keyboard alone. A "Rule of Thumb" for creating dynamic menus is to make sure that the user can access the equivalent menu items in text form on another page or by some other keyboard accessible method that doesn't deviate from the natural flow of the page/site.

Bread Crumb Navigational Trails

Bread crumb navigational trails are a series of links normally located at the top of a page that tell the user the navigation path they took to reach the Web page they are currently viewing. The "bread crumb" on this page is located below the Cal Poly/Seal symbol. These link trails give users a way to identify what page they are on, how they got there, and how they can return to a previous page if they did not find the desired content.

Example: Home page: Root pages: Second level pages: Title of current page