Types of navigation

Connects one page to another based on the hierarchy of the site. It follows the structure of a web site.

Also called: global navigation, primary navigation, main nav.The main navigation generally represents the top-level pages of a site’s structure—or the pages just below the home page. The links in the main navigation are expected to lead to pages within the site and behave in a very consistent way.

Such as “does this site have what I’m looking for?”

It is comforting to have a persistent navigation mechanism across the site, particularly for large, information-rich sites.

Visitors can get to other sections of a site efficiently, or they can reset their navigation path and start over using main navigation options.

It helps when users get interrupted while navigating.

The main navigation defines the limits ofthe site.

The six main navigation options are on the left below the logo. Some utility links are included to the right, suchas a site map and link to site search.

Also called: sub-navigation, page-level navigation.It is used to access lower levels in a structure, below the main navigation pages.

However, local navigation often works in conjunction with a global navigation system and is really an extension of the main navigation. Because local navigation varies more often than main navigation, it is often treated differently.

It is very common to place a global navigation along the top of the page and have local navigation asa vertical link list on the left in the shape of an inverted L.

Local navigation might also be represented by a second row of options under a horizontal global navigationor by dynamic menus.

When the main navigation is presented in a vertical menu on the left or right, it’s common to embedthe local navigation between the main navigation options in a tree-like structure.

It represents the local navigation with dynamic menus, which conserve screen real estate while providing quick access to options. In Figure 4-6, a dynamic menu extends from the main navigation and displays options for Over Philips.

Connects pages with similar topics and content, regardless of their location in the site.Associative navigation makes important connections across levels of a hierarchy or site structure. While reading about one topic, the user can access to other topics.

As the name implies, contextual navigation can vary. It’s situational. Though links may transition to similar pages at the same level within the site, they quite frequently lead to new content areas, different page types, or even a new site.

Contextual navigation may be embedded within the text itself.

Contextual navigation may appear at the end or to the side of content.

From one article, readers can get to other relatedarticles.

Adaptive navigation is a special kind of a contextual navigation. Its links are generated from a process referred to as collaborative or social filtering.

This is an example of passive collaborative filtering: the site automatically collects user behavior to generate the list. With active filtering, participants in the site must explicitly rate a product, person, or service.Boxes and Arrows allows readers to rate each story at the bottom of the text (Figure 4-12). Based on all ratings for all articles, visitors are then able to view the site’s top-rated stories in the navigation.

Quick links provide access to important content or areas of the site that may not represented in a global navigation. Although similar to contextual navigation, quick links are contextual for the entire site, not a given page. They generally highlight frequently accessed content areas or tasks, but may also be used topromote areas deeper in the site.

Quick links highlight key areas thatare not represented by top-level navigation options.

Traditionally, footer navigation contains supplementary information not pertinent to main topic of the site, such as copyright information, terms and conditions, and site credits. In this sense, footer navigation doesn’t address a specific user need, but addresses a legal requirement for site owners.

Amazon.com shows visitors history for a given session at the bottom of product pages.

Utility navigation connects tools and features that assist visitors in using the site. These pages are generally not part of the main topic hierarchy of the site.

Important for large corporations that may have diverse product areas or businesses, extra-site navigation links to other related sites, sub-sites, or companies. This type of meta-navigation allows people to switch to related web properties owned by a single provider.

Toolboxes bring together site options that perform functions—“tools” for doing things on the site. Toolboxes may include links to content or navigation pages, but often they link to functional pages.

Web sites very often have a logo at the top of each page. It is customary to link the entire image itself to the home page.

For sites that have sites in multiple languages, a language selector allows people to switch between them.Most often, visitors jump to the same web site, but in a different language. Sometimes, however, the local language site is completely different.

In some cases, content may differ based on the country or market. A country selector allows visitors to pick their market region.

Some web pages can be very long. In these cases, it may be advantageous to add internal page links that allow people to jump from one section of a page to another.

We can see a fairly common utility navigation grouping found on Vitaminshoppe.com just above the main navigation bar. It includes a search input field, shopping cart link, help, and contact information.

Navigation type and page type are closely related. A given navigational scheme may have two different purposes on different page types.

The purpose of navigational pages is to direct people to the content they are looking for.

Home pages direct visitors to key areas of the web site.

Also called: sub-section start pages, category pages, overview pages, department pages.Landing pages provide an overview of main site categories. These often correspond to the options in a main navigation and might be departments of an online store or the main sections of an online newspaper.

Galleries are similar to landing pages, but provide an overview of a specific group of products or contentinstead of links to a site department or section.

Search results pages resemble gallery pages, but are dynamically created based on user-entered keywords.The collection of resulting links doesn’t necessarily have the benefit of handcrafted categories such as those found on gallery pages. Depending on the search terms, results may or may not be of a single product or content type.

On information-rich web sites, content pages are ultimately what people are looking for: text, stories, articles, personal résumés, blogs, news, company histories,...Accordingly, the focus of content pages shouldbe the content.

Functional pages allow people to complete a task online, such as conduct a search or send an email. Like content pages, they are often the destination page that fulfills a user need.

It’s quite typical for the site search feature to be a small input field on the home page or on all pages of a site.

As the name implies, this offers more control than a simple search. An advanced search interface requires more space; consequently, a separate page is usually needed.

Allow people to submit information. This might be to create an online account or profile, to apply for a job, or to reserve a car,... Submission forms allow for transactions on the Web.

Web applications refer to a range of pages that contain interactive features and functionality. People accomplish tasks on these pages: they write emails, edit spreadsheets, manage projects, and so forth. As web technologies become more and more robust, online applications will become more common.

Generally it's best to use short pages when people need to browse and scan quickly.