navigation design :
help the user do what they want, and find what they don't know they are looking for
The following are general rules to follow when designing navigation in a web site. The are only rules and, as the saying goes, rules are made to be broken--just have a good reason to break them.
People are habitual, and it's therefore important to keep navigational elements generally the same throughout a web site. You want people to concentrate on your content, and they won't if they have to figure out a different navigation system on every page. This is true for:
- Placement on the page. Keep similar functions in the same place on the page. E.g. if you have a "home page" link on all your pages, put that link in the same place on every page.
- Visual design. Use consistent names, icons, or other visual cues for navigation throughout the site. E.g. the icon for the "home page" link should be the same everywhere.
Note: Some people create navigation systems that drop the current page link from the navigation bar. This may seem "efficient" since there is no reason to have a link to the page you are already on. But this approach violates the principle of consistency, since the links in the navigation bar would be in a different place on every page. It also violates the rule below for indicating the current page, because a better approach is to highlight the current page in the navigation bar (while making the link inactive).
In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that if you have more than 7 links on a page, people may get confused or have a hard time understanding the navigation. On the other hand, you often want to provide more than 7 links, which leads to:
If you have a lot of links on a page, try organizing them into related sets of 7+-2. For example, a food site could group links to fruits, vegetables, herbs, fish, poultry, and red meats together, while grouping links to nutrition info, health tips, recipes, meal planning, and cutlery in a different location on the page. Some ways to group navigational elements are:
- Proximity. Place similar navigational elements together on the page, separated from other groups.
- Style. Give each group of navigational elements its own visual design.
Below are 10 links for an auto site. How would you organize them for clear and useful navigation?
contact, cars, customer service, dealers, about us, trucks, jobs, investor info, financial services, suvs
Alternative: How would you orgainze the following links for Art Center's website?
HOME, ABOUT ART CENTER, PROGRAMS, INTERNATIONAL INITIATIVES, ADMISSIONS, FINANCIAL AID, STUDENT LIFE, CAREER SERVICES, FACULTY, NEWS + EVENTS, ACCOMPLISHMENTS, GIVING, ALUMNI
Don't make people work hard to get where they want to go. The harder it is, the less people will use the navigation. Some things to avoid:
- Excessive scrolling. Don't make users scroll all over the page to get to links. Keep in mind the typical size of your audience's screen. If the user needs to scroll, make them scroll only in one direction -- vertical or horizontal. Look at www.thehorizontalway.com for some interesting examples of horizontal scrolling sites, including blog.urbanoutfitters.com and www.soulwax.com.
- Excessive hierarchy. Keep the number of levels of hierarchy to a minimum. Try to make any page on the site available within 2 clicks at a maximum.
Always identify the name or function of the current page. This can be done by highlighting the navigation to indicate the current page. The name of the page should also be incorporated into the design layout. In a typical page, the user should be able to see where they are by the navigation bar and by a page heading.
If the site is complex, it's important to indicate where the current page is in relation to the rest of the site. If possible, combine your navigation with a visual layout so as to indicate the current location. This is called the trail of bread crumbs. E.g. you could have a navigation bar that shows the path to the page such as: "home>products>vacuum cleaners", where both "home" and "products" are active links to their respective pages in the heirarchy. Not only does this indicate to the user where they are, but it allows them to skip to any level of the hierarchy, eliminating the need to see the intermediate pages.
There is no single way that users will navigate through the site. People have different goals, search methodologies, attentiveness, previous knowledge, and ways of looking at the content of the site. Even gender can affect navigation.
- Provide ways for people to traverse across the hierarchy to short-circuit the formal organization. For example, if there is a contact page on a site, it's useful to have a link to it on every page. This way, the user can navigate across directly to the contact page, OR navigate up to home and then down to the contact page.
- Sequential vs. directed. Think of users as if they are finding their way within the content. This way-finding sometimes involves users who want to be lead through the information, and this involves a sequential organization (e.g. start here, go here next). Other times, the user will be looking for specific content, and they need a logical and categorical system that enables them to find what they need. Try to provide navigation that satifies both, or provide multiple navigation systems
- Search vs. grazing. Sometimes people will be searching for specific information, other times they will graze and meander on the site until the find something interesting. Your navigation should accomodate both techniques, and again, sometimes more than one navigation system is needed.
- Draw people to the content with different techniques: pull quotes, side bars, contextual links, short summaries or outlines. Use links to turn these into alternate navigation systems.
Depending on the amount of content and number of sub-pages underneath the main sections of the web site, the navigation design should reveal the sub-navigation in some way.
- Use sub-nav as part of the primary navigation
- Rollovers or pop-outs to reveal sub-nav