Web Navigation

Categories of Navigation

r

Several aspects distinguish types of navigation:• the type of content a mechanism accesses• Behavior of the navigational links and transition to the next page• the tasks and modes of seeking the mechanism supports• Visual treatment of navigational options• the position of a navigation on a page

Structural Navigation

r

Connects one page to another based on the hierarchy of the site

Types

Main Navigation

r

Also called: global navigation, primary navigation, main nav.

Characteristics

r

The links in the main navigation are expected to lead to pages within the site and behave in a very consistent way. Users don’t expect to land somewhere completely unrelated when using main navigation links.

Provides an overview and answers important questions

Aids in orientation

It allows people to switch topic

Reminds visitors where they are in a site

It gives shape to a site: in many ways it defines the boundaries of the site itself

Local Navigation

r

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

Characteristics

r

Local navigation is used to access lower levels in a structure, below the main navigation pages. It generally shows other options at the same level of a hierarchy, as well as the options below the current page.Local navigation can be considered an extension of the main navigation.

Transitions from page to page with a local navigation are smooth and consisten

It provides a great deal of context

r

... such as which topics belong together, related content, and so forth.

It supports general exploration

It also points to content a visitor might not have known existed

Format types

Inverted L

Horizontal

Embeddedvertical

Associative Navigation

r

It connects pages with similar topics and content, regardless of their location in the site

While reading about one topic, the user can access to other topics

Common types

Contextual Navigation

r

Also called: associative links, related links.

Characteristics

r

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.

It is generally placed close to the content of a page

It creates a strong connection between the meaning of a text and the linked related pages

Types

Embedded Navigation

r

There may be an explicit indication to prepare users for more disjointed interaction. Links in the text lead to other pages in the site on various levels of the structure.

Related links

r

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

Adaptative Navigation

r

It is a special kind of a contextual navigation. Its links are generated from a process which relies on an algorithmic ranking based on user: if many people read something, it must be good. In this case, link relevance turns out to be a socially constructed phenomenon.

Quick links

r

Quick links provide access to important content or areas of the site that may not represented in a global navigation.They often appear at the top or on the sides of pages, but on subsequent pages they may be reduced to a drop-down or dynamic menu.

Footer Navigation

r

sit can lack consistency in an organizational scheme

Characteristics

Generally located at the bottom of the page

It is usually represented by text links

It commonly contains supplementary information not pertinent to main topic of the site

r

This information may not be pertinent to main topic of the site or doesn’t address a specific user need, but might adress a legal requirement for site owner.

Pros & Cons

It doesn’t intrude on site content or functionality, potentially saving valuable real estate

scrolling longer pages becomes less problematic

Links in a footer area may not be as visible as navigation elsewhere on the page

Utility Navigation

r

It connects pages and features that help people use the site itself; these may lie outside the main hierarchy of the site.

Characteristics

They are generally not part of the main topic hierarchy of the site.

It may lead to varying page types or site functions

It is generally smaller than primary navigation mechanisms

It can appear as simple text links on the top, sides, or bottom of the page and often related to main navigation

Types

Extra-site navigation

r

This type of meta-navigation allows people to switch to related web properties owned by a single provider.

Toolboxes

r

Toolboxes bring together site options that perform functions—“tools” for doing things on the site.

Linked logos

r

It is customary to link the homepage to provide a predictable way to return to a familiar starting point.

Language and conuntry selectors

r

Note that language selection and country selection are different activities. For instance, eBay sites in the U.s., U.K., and australia all appear in english, but each has different products available in each version of the site.

Same content for different counties

In a multilanguage website this tool allows people to switch between different languages. 

Different content for each country

A country selector allows visitors to pick their market region.

Internal page navigation

r

Also called: anchor links, jump links.

Pros

When web pages are very long it may be advantageous to add internal page links that allow people to jump from one section of a page to another.

Couns

People may expect a transition to a new page when clicking a link, but instead, they are simply moved down on the same page.

Internal links may or may not be shown as visited links, depending on the link construction and browser.

if the last section of content is short, an internal link to it at the top may not scroll to the proper position: it may be shown at the top of screen.

Page Types

r

People recognize different type pages quickly. This sets expectations for navigation and affects how people interact with the site.

Navigational Pages

r

They direct people to the content they are looking for.

Key navigational pages

Home Page

They direct visitors to key areas of the web page

They contain text content or functionality but in abbreviated format only

It is often viewed as a chance to market products or promote a brand image

Landing Pages

r

Also called: sub-section start pages, category pages, overview pages, department pages.

They provide an outline to the content in a given section

They must provide both local and global orientation

Gallery Pages

r

They are similar to Landing Pages but there are some differences to consider.

They provide an overview of a specific group of products or content

They contain critical shopping information and allow visitors to compare products

Search Result Pages

They are similar to Gallery Pages

They are dynamically created based on user-entered keywords

r

That is why they do not necessarily show the same results as a Gallery Page but other general content without providing a general view.

Content Pages

r

Content Pages are the fundamental currency of the Web.

The focus should be the content

There might not be too many graphics or images

r

This allows readers to engage the text without becoming distracted.

On information-rich web sites there could be a Product Page

Typical elements

Product pictures

Product descriptions

Further details

Related products

They often contain several functional elements

Add to shopping cart or purchase

Save to a wish list

View larger images or zoom in

Change size or color

Email this page

Functional Pages

r

Functional pages allow people to complete a task online, such as conduct a search or send an email.

Characteristics

They are often the destination page tat fulfills a user need

There may be little or no text on such pages

They often lack embedded navigation and related links

Users need to focus on completing the task at hand, but linking to another page while filling out a form or finishing a process may result in loss of input

r

Protecting user-entered data will prevent visitors to fill it in again after they navigate away from the page, accidentally erase the form, or interrupt a submission process.

Function Types

Search Forms

r

It is quite typical for the site search feature to be a small input field on the home page or on all pages of a site. Sometimes, however, a more detailed search is required, typically called an advanced search.

This offers more control tha a simple search

It usualy requires more space; consequently, a separate page is usually needed

There might be links to

Search tips

Help

Other explanations

Hide options

Types

Scoping options

Word wheels

Submission Forms

r

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, for example.

As with search pages, associative navigation on forms is discouraged

Such forms require explicit action to save data

Web Applications

r

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 robust, online applications will become more common

More advanced types of applications are becoming more common, mirroring desktop programs

Generally the functions to manipulate the datasheet at the top closely resemble software navigation

Resources

Designing web navigation by James Kalbach

a

Author: Mireia González
Subject: Documentació i Comunicació audiovisual
Professor: Lluis Codina