类别 全部 - navigation - purpose - behavior - content

作者:Júlia Motger 14 年以前

471

Types of Navigation

The various types of web pages and navigation systems are crucial to creating an effective online experience. Content pages focus on delivering valuable information, such as articles, blogs, and stories, which are what users typically seek on information-rich websites.

Types of Navigation

Types of navigation

Page types

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

Page length
Influential factors

The page type is also a key factor.

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

It may not be efficient to download pages for small bits of content.

People don't like to read too much online

Content has not the same impact broken up into multiple pages.

Screen size is problematic because there is no single screen size model.

Functional pages

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.

Web applications

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.

Submission forms

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.

Search forms

Advanced search

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.

Standard search

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.

Content pages

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 should

be the content.

Product pages

Functional elements

Email this page

Change size or color

View larger images or zoom in

Save to a wish list

Add to a shopping cart or purchase

Typical elements to product pages

Related products

Further details

Product descriptions

Product pictures

Navigational pages

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

Search result pages

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.

Gallery pages

Galleries are similar to landing pages, but provide an overview of a specific group of products or content

instead of links to a site department or section.

Landing pages

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.

Home page

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

Navigation issues

If the last section of content is short, an internal link to it at the top may not scroll to the proper position.
Sometimes a sitewide decision is made to include "back to Top" links on all pages.
Internal links at the top of pages take up valuable screen real estate.
All sections of a longer page may be included in jump links.
Internal links may or may not be shown as visited links.
Browsers don't distinguish between internal page links and external links.

Categories of navigation

Utility navigation

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.

Example of utility navigation

Vitaminshoppe.com

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.

Types

Internal page navigation

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.

Country selectors

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

Language selectors

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.

Linked logos

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.

Toolboxes

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.

Extra-site navigation

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.

Assistance in the use of the site
Associative navigation

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.

Footer navigation

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.

Example of footer navigation

Amazon

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

Acces to supplementary information

Quick links

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 to

promote areas deeper in the site.

Example of quick links

The Princeton University web site

Quick links highlight key areas that

are not represented by top-level navigation options.

Dynamic menu

To a new web site

To an online shop area

To a related sub-site

Adaptive navigation

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

Example of adaptive navigation

Boxes and Arrows

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.

Based on user behavior

Contextual navigation

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.

Example of contextual navigation

The Washington Post

From one article, readers can get to other related

articles.

Related links

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

Embedded navigation

Contextual navigation may be embedded within the text itself.

Structural navigation

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

Local navigation

Also called: sub-navigation, page-level navigation.

It is used to access lower levels in a structure, below the main navigation pages.

Example of local navigation

Philips

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.

Common arrangements with main navigation

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.

Embedded vertical

When the main navigation is presented in a vertical menu on the left or right, it’s common to embed

the local navigation between the main navigation options in a tree-like structure.

Horizontal

Local navigation might also be represented by a second row of options under a horizontal global navigation

or by dynamic menus.

Inverted-L

It is very common to place a global navigation along the top of the page and have local navigation as

a vertical link list on the left in the shape of an inverted L.

Main navigation

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.

Example of main navigation

Web of the University of Valencia

The six main navigation options are on the left below the logo. Some utility links are included to the right, such

as a site map and link to site search.

Determining factors

Workflows that can't be interrupted

Stakeholder objectives

User behavior and needs

The size of the site

Gives shape to a site.

The main navigation defines the limits of

the site.

Helps visitors to remind where they are in the site.

It helps when users get interrupted while navigating.

Allows people to switch topics.

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

Aids in orientation.

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

Answers important questions users may have.

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

Several aspects to distinguish them

The position of a navigation on a page
Visual treatment of navigational options
The tasks and modes of seeking the mechanism supports
Behavior of the navigational links and transition to the next page
The type of content a mechanism accesses