Build the navigation

Deciding on the Navigation

Developing a usable navigation scheme is critical in creating a usable site. A navigation scheme includes the main level of links as well as all second, third or fourth level of links required. To know how many levels of links you will need, you’ll need to decide on the content of the Website.

The best method to determine the navigation you’ll need is to brainstorm all of the content topics you’ll need – just write the topics onto a whiteboard or flip chart sheets. When you feel you have a complete list, move them into logical, related categories. Then label the categories. Those labels become your first level navigation and often include such task-oriented links as

  • About Us
  • Program Information
  • Forms
  • Service offerings, such as Registration, Academic Records, Dining Plans, etc.
  • Contact Us

Another approach is user-centered links such as For Faculty or For Students.

If your site is complex, each of these categories may have more than one subpage attached. For example, For Faculty could have several subpages, such as policies, committees and resources. Those are level two navigation categories. Each of these may, in turn, have several pages, such as a list of subcommittees.

Once you have developed an outline of the links, then you can build a navigation area (navbar). The top level navigation bar should appear on all pages. There are occasional exceptions to this rule, such as the need to use the whole screen for a flowchart.

Placement of Navigation

The relationship between all levels of navigation should be clear. One of the easiest ways to do this is through proximity. For example, the secondary links appear as indented links underneath the main categories on a left navbar. Color and font size are also ways to show relationship and hierarchy of importance. Related sections can be one color and first level navigation font can be larger than second level.

There are several ways to place navigation on a site: vertical, horizontal, cascading and tab-based. Each has its advantages and disadvantages.

Vertical:

  • Limits the length of words of the link
  • Take up space in the content area of the page
  • See the Convocation site for an example

Horizontal:

Cascading navigation (pop up lists):

  • Require a lot of skill to create them in a way that is viewable on all browsers and is accessible to screen reader software of users with disabilities

Tab-based:

Top of content area:

  • Can interfere with natural flow of page (header first, them text) if list is long
  • Is an easy solution for individual sections with deeper links
  • See the Websupport Guidelines page for an example

Inside content area:

  • If there are only a few links, page looks sparse
  • Have to use back button to get to page of links
  • Can be a good solution if there are many links to section
  • See the Websupport CSS page for a content area link example

Long pages – target links

  • If the page content is long, it is generally advisable to break the page content into different sections to prevent extensive scrolling
  • If the page needs to be one section intact, you can place anchor tags (jump-to links) in the page and link to them at the top of the page
  • See Accounts Payable for an example

The best approach is to test your navigation with users.