by Júlia Motger 14 years ago
458
More like this
Navigation type and page type are closely related. A given navigational scheme may have two different purposes on different page types.
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 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 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.
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.
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.
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.
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
The purpose of navigational pages is to direct people to the content they are looking for.
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.
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.
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 pages direct visitors to key areas of the web site.
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.
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.
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.
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.
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 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 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
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.
Connects one page to another based on the hierarchy of the site. It follows the structure of a web site.
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.
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?”
