Navigation Basics

Good web designers must know how to design successful navigational interfaces for the web. So how do you start when thinking about designing a navigational system?

Navigation should answer 3 questions

1) Where am I? (Present)
2) Where else can I go? (Future)
3) Where have I been? (Past)

A good way to remember these 3 important questions is to think about the importance of answering where the user is in the Present, Future, and Past.

Also of importance are the additional questions below:

What’s here?
How do I go forward?
How do I get back?

Must also serve the goals of the site.

Examples of specific navigation challenges based on the goals of the site could be things like:

How do I place an order?
How do I search the site?
How do I contact customer service?
How do donate money to this organization?

The more versatile the navigation, the more successful it will be because it will serve a variety of users.

What does the user who visits the site want?

Examples of what a user may want:
To find information
To publish something
To purchase something
To interact with someone
To read what someone else thinks about something

What does stakeholder (client) of the site want?

(And of course, you should ask a lot of questions so you understand what your client wants for the site.

Examples of what a client (stakeholder) may want:
To share information
To make money
To get feedback
To teach something

It’s important to explore these questions before starting to design the navigation for your site.

Navigation design “rules”

The following are general rules to follow when designing navigation in a web site. They are only rules, and as the saying goes, rules are made to be broken– just have a good reason to break them!

Consistency

Consistency is the golden rule of effective navigation design.

People are very habitual, and it’s therefore very important to keep navigational elements the same throughout a web site. This is generally referred to as “persistent navigation,” keeping your navigation consistent from page to page. Navigation located at the footer of a web page is common and can act as persistent navigation for a 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 incorrectly 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).

7 +/- 2 rule

  • In general, people have a hard time keeping track of more than 7 items (plus or minus 2) at a time. This means that 7 is a good number of navigational links but you can have anywhere between 5-9 navigational links on a page, people may get confused or have a hard time understanding the navigation.

Group Navigation

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.

Keep it simple

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 down forever to get to links.
  • 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.

Where are we?

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 or breadcrumbing. 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 hierarchy. 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.

Next versus numbered pages. When the user can navigate to additional pages you generally want to use numbered pages versus a “next” button. Or both as is often the case on such sites as the New York Times.

Avoid “Hub and spokes.” When you can’t see the all the navigation or categories again without going back to the main page, this is often referred to as “Hub and spokes” The user must return to the “hub” to find other choices. As a designer you want to avoid this and develop a more consistent navigation scheme.

Multiple Navigation

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 accommodate 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.

Other Issues that impact the way you design navigation

  • Information Architecture: You wouldn’t build a house without plans, you cannot build a website without one either. Until you have the plan (commonly referred to as the “sitemap”) you can’ begin designing your site. The sitemap functions as the “blueprint” for the website structure.
  • Design comps: Developing a “look and feel” requires creating a design comp for how your site is going to look. Creating the look and feel first will be important and will influence the design of your navigation.
  • Accessibility issues: Every website should have a plan on how to be accessible to as many people as possible. These accessibility issues with also impact the design of your site and your navigation.
  • Usability issues: After you have designed the navigation you’ll need to test it to see how successfully it meets the goals of the site and whether the site and the navigation what is commonly called “user friendly.”

Interface Design Conventions


A canonical page layout. Not every page includes every element shown here.

2 thoughts on “Navigation Basics”

  1. Pingback: UX Crashcourse: Navigation Basics – seconddesign
  2. Trackback: UX Crashcourse: Navigation Basics – seconddesign
  3. Pingback: Mark 8: Navigation Basics | creative panda blog
  4. Trackback: Mark 8: Navigation Basics | creative panda blog

Leave a Reply

Your email address will not be published. Required fields are marked *