Unless your website is made up of only a single page, then you’re going to have to include some form of web navigation. There are many types of navigation to choose from (menus, links, etc.). Typically, sites will use various combinations of these web navigation options. How do we identify which types we should use? Well for starters let’s look at the different types of web navigations there are and how to use them.

Types of Web Navigation

Primary

Shows the top level categories or groupings
Needs to be accessible from anywhere
Organized Hierarchically

Your primary web navigation provides users access to the main pages on your site. These are either put together horizontally at the top or vertically down the left or right side of every page. Each of these navigation areas is typically made up of buttons or menus. They also act as page identifiers, letting the user know which page they are on. So as the user clicks on the navigation, it should change color to indicate which page the user is on.

Secondary

Shows the subsets of top level categories or groupings
Only displays on pages that are a subset of the parent page

Secondary web navigation is present when the original page has additional layers in its hierarchy. For example, consider a shopping site. Our main page displays a list of products. For a small selection of products, this may be useful. However, when you are dealing with larger lists, it’s more prudent to break your lists down into smaller components or sub-categories. Such as things like clothing, electronics, etc. You can then use these lists to add a secondary level navigation to all your product pages. Making it easier for your users to filter down to the product types they are looking for.

Utility Bar

Similar to Primary Navigation
Need to be on every page
Quick access Navigation

These are typically useful for sites that require an additional type of navigation beyond that of normal page navigation. For instance, it could contain options like login, logout, view cart, help, etc. Thus, we will need to display this information in a static location on every page. In most cases, this will be somewhere near the top of your page above the site’s primary navigation.

Supplement

Useful to encourage site exploration
Site Map
Tags

This type of web navigation is helpful in encouraging your end user to explore your site in a non-hierarchical way. If your website were a book, this would be its index. Typically, these are alphabetical or alphanumeric lists displaying the complete hierarchy of all the pages on your site. For example, if your site is a blog this area could include additional information like tags or other similar items.

Breadcrumbs

Use a symbol (> or |) to separate each page in the trail.
Display below the page navigation
Appear as links

Breadcrumbs are a useful form of web navigation. They help users find the path they took to get to a particular page. For instance, as a user clicks through a site, each page they visit will be recorded in the breadcrumb. As a result, the breadcrumbs will display near the top of a page below the primary page navigation. Also, they will appear as a horizontal list of page titles separated by a symbol (>, |, etc.). So if a user wants to return to a previous page is click on the breadcrumb link, and they will go back to that page.

Wizards

Limit your number of steps
All steps should be clearly visible
Include an overview and summary page
Make sure to highlight users progress through the wizard

Finally, let’s take a look at the Wizard. Wizards are useful when you require users to go through a sequence of steps and perform a set of tasks in succession. For instance, a shopping cart. Instead of requiring a user to enter a ton of information on one screen the process can be broken out into specific actions. Such as information about the purchase, payment information, billing, shipping information, and order summary.

Web Navigation – Understanding The Different Types