Design: Web: Navigation
Navigation is a critical element of an effective website. Use the following resources to learn more about navigation.
Link Types
Links are an important part of the web environment. They allow users to follow a train of thought, access additional information, or jump over irrelevant information. If you use lots of links, be sure to keep them up to date. Users hate "Link rot". Link rot happens when links aren't updated and lead to error messages rather than useful information. As you develop links, consider the following four types:
Links Within A Page. A list is provided at the top of the page and the links jump to anchors on the same page. For example, a table of contents may be provided at the top of the page. Clicking on a topic or question will jump the user down the page to the particular topic. Users can click on the words Introduction, Task, Resources, Process, and Conclusion. When a hot word is clicked, the user jumps down the page to link. These links are useful when you have a number of key ideas you wish to present on a single page. Try the following example: Using the Library.
Different Page, Same Site. This approach is used when you want to access a series of pages within the same site. Rather than linking to an entire URL, you simply link to the document. For example, the word "Photographer" might be highlighted. When it is clicked, the user goes to the Photographer page within the same site. Developers may use a table of contents, next and previous buttons, or a visual map to assist users in navigation.
Different Page, Different Site. When you link to an external website be sure that users know they are leaving your website. You may even want a disclaimer to appear stating that the library or school is not responsible for the content at external sites. When using frames, the user may not realize they have moved to another site unless they study the status line while the page is being loaded.
Other Action. There are many other types of links. For example, you can link to an email address or a movie. Users might download a document such as a PDF file, QuickTime movie, audio file, use ftp to download some software, or email someone using an email link.
There are many things to consider in designing your links. For example, keep the user informed. If they will be leaving the site, provide instructions for returning. Keep your links updated. "Mystery" links that go to the wrong page can be discouraging. If your program is under development, don't activate your links until the pages are done. It's frustrating and a waste of time for a user to link to an empty page with the words "under construction."
Link Layout
Some people like to place links in paragraphs, while others like to place them in lists. It depends on your goal. Sometimes the links are more meaningful within the context of an example or sentence. The user can choose to click for more information or continue reading. In other instances, you might wish to provide a link with a brief description or activity. Consider your users. Also, make it clear whether the link is "required" for understanding or simply an option.
Information should never be more than three clicks away. Don't build complex webs that require users to go through many menus before getting to information.
As you select your text styles, consider the link color. Underline is difficult to read. Instead use a contrasting color for your link. Also think about changing the color for the hover so people will know that it's a link.
Links Page
Most schools provide some type of "favorite links" page. Consider a format that will be easy to use. For example, the Teacher Tap page contains links with short descriptions. These lead to pages on particular topics. If you plan to include a "favorite links" page, be sure to keep it current. It is frustrating to go to a site and find that most of the links no longer function. This would be a good student project. Assign a student to check a particular page weekly or monthly to look for changes.
Navigation
Users must be able to easily find their way around your site. Every page should contain navigation tools. These are most frequently placed at the bottom of pages. Use icons to enhance your links visually, but also include a text option. Provide links forward and backward through linear sections of your project. In addition, provide links back to your main menu page, core page, or school site.
Tables. A table of contents is a logical way to set up a class or project. Tables are also useful in presenting a table of contents.
Go to the Buddy Project uses tables and popup lists. The key to navigation is access. Your navigation system should be simple and easy to use.
Visual Map. Some people like to use an interesting visual as part of their site map.
Check out the first page of the Palmerston Resource Center, Springfield Township High School and Mt. Erie Elementary Library.
Icons. Some people like to use icons along with headings as part of navigation.
Check out the icons at Greece Athena Media Center.
The Design
As you think about your end user, keep in mind that this may be their first trip to the website. They need help moving around. Here are a few tips:
- Use color and alignment to make navigation clear.
- Avoid orphan links that provide a dead-end with no way to move back or forward.
- Avoid objects that look like buttons but contain no navigation
- Be selecting in linking. Most sites overwhelm users with options.
- Check your links regularly.
As you develop links, consider the following designs:
- Types of Links
- Link Layout
- Link Page
- Navigation
- The Design