designing a site
Goals: Well-designed sites start with a user-centered approach -- anticipating what users want, when they want it, and where they might look for it. Through discussion and examples, the developer will become aware of navigational design factors, and the how to choose the navigational elements necessary to make an effective web site.
- Types of Navigation
- Design Factors
- Elements of Navigation
- Navigation and Learn@UW
- Accessibility and Navigation
- Further Reading
- Exercise
types of navigation
splash
Splash screens, also called introductory pages, are used to present a site before the user gets to the content sections. These pages are usually pretty clean and generally have a graphical feel. Some sites use this navigation scheme to highlight one or two special sections up front. A splash screen is not necessarily a navigation scheme. It can be used to set the overall tone for a site. Splash screens are a good way to alert the audience to any specific requirements for using the site. For example, the site may require the use of a specific plug-in, i.e., Real One Player.
Before using a splash screen technique, consider the audience. What are their needs? If people are coming to get specific information, adding a splash screen may be seen as an unwanted obstacle. If the site is for entertainment, this technique might be very useful.
Examples of splash screens uses:
- Setting a tone for a site.
- Providing technical requirements for a site prior to entry.
- Leading users to different version of a site.
- Highlight a special portion of a site.
Here are a few good examples of splash screens:
- Design 4 Marketing (http://design4marketing.com/)
- George Michael (http://www.georgemichael.com)
Splash Screen, georgemichael.com
tabloid
A tabloid style navigation reproduces the traditional newspaper layout. The screen has many different sections and uses traditional navigation and topic links to catch the attention of the user. This style is often employed to attract Web surfers. Providing many options up front is also a way of dealing with multiple audiences.
Examples
- USA Today (http://www.usatoday.com)
- MSNBC (http://www.msnbc.com)
- CNN (http://www.cnn.com)
Tabloid Navigation - CNN.com
site context / organization
Site context navigation reveals the overall structure of the site to the user. This is important if the site structure is interdependent and interwoven.
Examples:
Apple (http://www.apple.com) has used color to help the user navigate through the site. When a tab in the navigation bar is clicked, the color changes, indicating that the users is in a particular area. Color can be a very effective way of leading the users. Be aware that not everyone sees color, and although effective, it should only be used as a supplemental navigation element.
Context/Color-based Navigation, Apple.com
Context/Color-based Navigation, Apple.com
strategic choices
Strategic choice navigation provides access to key areas to the web site. These points are usually determined by carefully studying the needs of the visitors. This is more common in a reference type site, where there is little relationship between content.
Examples: Both of these sites receive a large number of visitors. Each offers a variety of services and highlights or directs users to what it is they are most likely visiting the site for. By focusing on these key areas, these sites are extremely successful. However, a lot of research and constant updating are keys to maintaining this sort of navigation scheme.
- PBS (http://www.pbs.org/)
multi-audience
In most cases, sites will have a combination of navigational schemes. Sites with different target audiences and different purposes can use navigation to help steer people in the right direction.
Examples: The following sites incorporate several navigation schemes.
design factors
There are a number of factors that go into good site navigation. Designers should consider the following:
appropriate style
Good navigation depends on the needs of the user. If a site is linear, navigation should address that specific context. If a site is more web-like, navigation should make connections to appropriate resources within each page. Be aware that all training sites don't necessarily have one type of navigation. In turn, all reference sites don't necessarily have another type of navigation. Each type may share basic user needs, but the type of navigation takes many other things into consideration. Relationships between information chunks, coupled with careful consideration of the needs of the audience, should ultimately dictate the navigation scheme.
A big deal is made about whether navigation should be graphical or text-based. Again, one should review the target audience. Generalizations will need to be made about this group. If users will all be accessing a site with high-speed connections, the navigation can be more graphical. If users will be remote with slower connections, attention should be given to ensuring that "hang time", the time one waits with nothing to do, is not increased due to a graphics-laden navigation.
Make sure all graphical navigation is clear and readable. If icons are used, make sure people can figure out what they stand for. Fonts should be clear and a reasonable size for screen viewing.
layout
Navigational elements should have logical and consistent placement across the entire site. Navigation should be placed in the section(s) of the document where users will need it. Primary navigation, such as button and navigational bars, should be placed on the top and left of the screen. This is the primary "sweet spot" of web design. Hot spots refer to the area of the screen users first focus on. Basic screen design is broken up into four sections.
- 640 x 480
- 800 x 600
- 1024 x 468
Secondary navigation should be placed at the bottom of the page. After users read through the content, they will need additional navigation to avoid having to scroll to the top of the page to get to another section. Internal links, such as "Return to Top" also help direct users.
All navigation, regardless of the kind, should be consistently located so users become familiar and dependent upon it. This will also help to create a consistent character or look and feel for the site.
access points
The concept of information chunking plays a pivotal role in navigational design. Navigational design should draw upon the basic organization structure of the site and the site landmarks - important areas and sections of the web site. Site paths should be no more than 3 clicks in length for average size sites. Each page should have navigation bringing a user back to the home or menu page to avoid "dead-end" pages -- pages where information ends with no additional choices for navigation.
repetition
Navigation plays a role in defining the character and identity of a site. Navigational elements should be carried throughout the entire site to tie content together. Providing repetition also increases predictability and comfort for the user. Repetition encompasses: design, color, font and layout of navigational elements. Navigational elements can also assist the user to understand the context of a site. An example of this is E-Online, which uses colored buttons navigation and matching colored background to define sections of the site. This is repeated for each page within each section. If links take users to another section, a user is aware of it by the changing color scheme.
language
One of the hardest parts of navigation design is terminology. The way an item is labeled affects the usability of the site. If an object is poorly labeled, people won't know what information to expect to find, or where to look for it. Trying to figure out the organization of the site is not something users should be spending too much time on. Think carefully about how to label the elements.
Try to avoid terms that are too broad, like "information." The entire site has information, so that term doesn't really help a user. Also, avoid jargon in labels. A button called WISCWORLD, for example, might make a lot of sense to UW Madison people. However, if the user is not "from around here" it wouldn't be a meaningful label.
Refer to the target audience to determine whether the labels are clear. User-testing is very critical here. Get ten people together and ask them what they would expect to find using a particular navigation term.
performance
Adding graphical navigation is an effective way of capturing the attention of the user. However, graphical navigation can also add to the download time of a page and negatively impact the overall performance of a site. Make sure all graphical navigation is critical. Also, at a minimum, make sure graphics are compressed to their smallest possible size. Make sure the entire page is smaller than 100K.
elements of navigation
menus
Menus are the traditional form of navigation on the web and usually take the form of a horizontal bar across the top of the screen or a vertical bar running down the top left portion of the screen.
headers & footers
Headers and footers are used many times for basic navigation. Running on the top and bottom of each page, these elements provide both site identification and opportunity to embed strategic links on each site.
context navigation
Providing navigation within the context of the page helps users get through long pieces of information in a easy manner. Forward, Back and Return to Top navigation helps the user flow through content.
search
Search engines are an advanced feature which provide a powerful interface to a site. Used particularly with reference sites, search engines supplement a traditional navigation solution by providing a vehicle to locate all information on the site. This is only effective if the content of the site has been thoroughly chunked and well-organized.
site map
A site map can assist users in understanding how the site is organized. Information which is buried can be easily found if a good site map is in place. The deeper the site, the more a site map is needed.
contact info
Knowing whom to contact regarding information found on a site is important for a number of reasons. First, contact information should include everything one would normally have on a business card. This includes the author's name, title, business affiliation, location, email address and phone number. In addition, the page should note when the page/site was last updated. This information can help a user evaluate the credibility of the site. Furthermore, it is a great way to solicit feedback from users as to the effectiveness of the organization/navigation scheme.
navigation and learn@uw
Some instructors will want to use Learn@UW, the UW System's course management system, to deliver course content. There are several issues that need to be addressed when designing a navigational system for use inside a course management system.
instructional design
When deciding how to deliver materials inside a course management system, it is important to evaluate the tools and solutions available and decide the best way to design a course. Learn@UW has several tools that can be used to deliver course content. In addition, it is possible to design a course web site to deliver course content and use the other available tools to supplement the content. Before designing the web site, develop a plan which maps out which tools which are going to be used to deliver all available content and build the navigation to accommodate these needs.
internal navigation
Course management systems have built-in navigation that can be used to direct students to the tools being used in a course. Learn@UW has a navigation bar placed at the top of the window. This navigation bar is used to make links to tools such as Content, Quiz, Discussion, Dropbox, Classlist and Links. If the course web site to be placed inside Learn@UW was custom built, it is important to make sure this site navigation works smoothly with the internal Learn@UW navigation.
learn@uw example
In this example, the course designer has built an internal web site to deliver the majority of the course content, and is using the Learn@UW navigation bar to point students to supplemental tools. By design, the Learn@UW navigation bar will remain at the top of the screen at all times, so no matter where the students are inside the course, they will have access to these supplemental tools.
accessibility and navigation
Regardless of the target audience, there is always a chance that people will be accessing the web site using different accessibility tools such as screen readers, text browsers and other enhanced software. The W3C has specific guidelines for creating accessible web pages.
If the site features graphics-based navigation, two paths must be followed.
- Use ALT tags to describe images. These will help users with accessibility issues be able to understand the content. Failure to use ALT tags will render the page useless. A button labeled "Hours" would be read image-link without an ALT tag. An ALT tag could change this to hours-link, which tells the user that this is an image about hours and it will take them to another page.
- If graphical navigation is used, try to provide a text-based navigation on the page as well. This will help with screen reading software and supplement the ALT-tagged images.
further readings
Web Page Design for Designers
Navigation 1
(http://www.wpdfd.com/wpdnav.htm)
Yale
Style Manual-Navigation and the Web
(http://info.med.yale.edu/caim/manual/interface/navigation.html)