af Marcos Taboada 12 år siden
337
Mere som dette
Not all navigation mechanisms on a site are equal.
Your job is to sort them out. You must determine the purpose and importance of the navigation within your site, bringing similar options together and presenting them as a cohesive unit. Of course, there are conventions to get you started—bars and tabs are commonly used for the main navigation, vertical mechanisms on the left for local navigation—but there
are no set usage rules, and many variations exist.
To sort them out, try thinking like a visitor, not a designer. Take time to consider how visitors perceive the navigation mechanisms. Understanding the type of navigation a menu represents can help people predict
links and reorient themselves on new pages.
But what makes a main navigation the main navigation? What makes a related link different than a local navigation? Several aspects distinguish types of navigation:
What’s more, the type of page on which a navigational menu appears greatly determines the navigation’s
purpose. The navigation on home pages is usually different from the navigation on product pages, for
example, and visitors expect certain navigational elements to appear on search results pages. The role the page plays in the overall site also gives purpose to different types of navigation.
All of these aspects work together to allow site visitors to recognize that the main navigation is a main
navigation and that local navigation is a local navigation. This sets the stage for interacting with the navigation and the site as a whole.
To help you ensure navigational concepts are immediately clear on your sites, this chapter surveys the various navigation types and their functions, as well as key page types. As you read on, however, keep in
mind that there isn’t a standard language among designers. The terminology describing navigation and
navigational types can vary greatly. Whenever possible, alternative names are provided with each of the
descriptions. Still, you may find alternative (or even contradictory) uses of terms in your organization. In
all cases, just remember that your goal remains the same: to understand the role and purpose of
navigation.
Most navigation types fall into 3 primary categories.
Also called: anchor links, jump links.
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. Internal navigation links basically scroll the page up or down, providing a more efficient way of reaching sections of a longer page. It’s customary to then provide a reciprocal link back to the top, so internal page navigation tends to come in pairs of links.
Beyond the quick access to content sections, internal links provide an overview of page content, much like a table of contents. It may be very difficult to get a sense of what’s included on a longer page simply by scrolling and reading page headers. Sometimes a set of internal page links may even appear to be part the local navigation scheme.
Technical specifications of the World Wide Web Consortium (W3C, www.w3c.org) are often very long, as the table of contents for the CSS 2.1 specification shows. These internal links jump within a page with no reload.
Here are some common internal linking issues:
Utility Navigation
Connects pages and features that help people use the site itself; these may lie outside the main hierarchy
of the site, and their only relationship to one another is their function.
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. For example, a link to a search form or help pages aren’t part of the main navigation or local navigation systems. Other options may not have a page associated with them at all. Instead, they are functions of the site, such as logging out or changing the font size.
Utility navigation may lead to varying page types or site functions. Transitions from page to page may be dramatic at times. For instance, from a single mechanism there may be links to a shopping cart, to a search form, and to a page about the site owner’s organization—all quite different from one another, and potentially requiring significant reorientation on each new page.
Utility navigation is generally smaller than primary navigation mechanisms and appears on the top, sides, or bottom of the page. Global utility navigation quite often appears as simple text links. In some cases, the utility navigation is very closely related to the main navigation. As mentioned, utility navigation and main navigation often appear together in a global navigation area.
But utility options aren’t necessarily insignificant. For instance, on e-commerce sites, a shopping cart may appear in the utility options. This is obviously quite important for business.
In some cases, content may differ based on the country or market. A country selector allows visitors to pick their market region. 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. There may be legal requirements involved here as well.
Large international organizations may have dozens of localized web sites. Country selection is more complicated
in these cases. Sometimes country selection is done visually with a clickable world map. This, of course, assumes that people can identify the country they want on the map. Here, unlike for language selection, it is acceptable to use images of national flags.
The country selector on the Coca-Cola site (www.cocacola.com) takes a two-pronged approach: The map is clickable by region, but there is also a navigation to select a country from an alphabetical list on the right.
Internationalization
Many countries speak multiple languages. If you have a multi-language site, consider breaking region selection by language as well. The labels appear in the language of the country. If a country has two languages, the country name appears in both. Compare België to Belgique, and Canada English to Canada Français.
Notice also the Spanish version for the U.S. as well (Estados Unidos). Finally, countries with non-alphabetical languages are listed at the end with the original characters, such as Chinese and Arabic. The designers include the English translations in parentheses.
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. Transitions may therefore be small or large. If there are only a few languages to select from, simple links at the top or bottom of the page may suffice.
Internationalization
It’s bad practice to use images of national flags to switch language. Languages are often spoken in more than one country. For a Portuguese language site, you could potentially use an image of flags for Portugal or Brazil. Or, there may be more than one official language per country, such as in Switzerland, Belgium, or Canada.
You also need to consider what language the selections appear in. Do they appear in the language of the web
site you are currently viewing, or in their original languages? This will affect the order of the options. Take
the English version of a multi-language site as an example. If visitors from France are looking for française,
they may see and understand the nearby option for French. But would someone from Finland find the English label Finnish when looking for Suomi? Or would someone from Spain find Spanish when looking for español? It’s generally better to show the selections in their original language. Be sure to include diacritics (accents, umlauts, and other special characters) if you choose this option.
Keep in mind that if you do have a multi-language site, you need to declare the language of each site at the
very top of the HTML code for each page. The code for this might look like this, for instance:
<html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
Additionally, alt texts for images and all other accessibility measures built into your code, such as frame titles, need to be translated for multi-language sites.
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. People may or may not know of this behavior, so some sites add an explicit label underneath or to the side of the logo. In general, linking the logo provides a predictable way to return to a familiar starting point. In some ways it is like an “undo” option within for the navigation process.
Because a Home option is often included in the global navigation, some sites have combined the two: the logo is incorporated in the navigation. Apple.com was one of the first to do this. Amazon.com also includes the logo in a main navigation tab, as does Toyota.com. This is an efficient way to save space and offer persistent visual branding throughout the site.
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. For this reason, transitions from this type of navigation may be great, even dramatic. From the home page, for instance, a
toolbar may link to a search feature, contact form, and online shop. This may require more effort in reorientation.
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.
Extra-site navigation is typically positioned at the top right of the page. Although generally quite small and represented as plain text, links in extra-site navigation may result in dramatic transitions. After all, they do lead to completely different sites. A common goal, however, is to make the navigation mechanism consistent across all sites. Unfortunately, these links are not always reciprocal, and the destination site may not link back to the originating site.
Associative navigation
Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.
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. This is a key aspect of hypertext in general,
but is also at the heart of the embedded digression problem.
Three common types of associative navigation are: contextual navigation, quick links, and footer navigation.
Embedded links or associative navigation must make sense when read out of context. It’s common to label
associative links “For more information, click here,” for example, with “click here” the only linked words. When skipping from link to link on a page, a screen reader user would just hear the link text and not the preceding phrases: “click here,” “click here,” “click here,” and so on. It’s better to link the entire sentence, or at least enough so that the linked portion is understandable on its own.
Located at the bottom of the page, footer navigation is usually represented by text links. These often access a single page with no further levels of structure below them—a deadend, so to speak.
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. Footer navigation is often used as a catch-all for various types of content and it can lack consistency in an organizational scheme.
But footer navigation doesn’t have to be insignificant. For instance, part or all of a site map can be included. Related links and logical next steps may also be included. eBay.com offers taskbased options at the end of item pages. These lead to various areas of the site across the hierarchy of pages. Amazon.com even shows visitors’ history for a given session at the bottom of product pages. Other elements that may appear in a footer area include a Print This Page feature, an Email a Friend link, site help, the ability to comment on a page, and page rating features, among others.
The advantage of footer navigation is that it doesn’t intrude on site content or functionality, potentially saving valuable real estate. Of course, links in a footer area may not be as visible as navigation elsewhere on the page. But as web users become savvier in general, scrolling longer pages becomes less problematic. Web designers can therefore make use of bottom-of-the-page 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 to promote areas deeper in the site. Marketers may see the value in quick links for an upsell effect.
Transitions from page to page using quick links may vary greatly. By definition, they tend to jump around. They may link to a related sub-site, online shop area, or even to a completely new web site.
Quick links often appear at the top or on the sides of pages. On the home page, they may be prominently positioned in component of their own, but on subsequent pages they may be reduced to a drop-down or dynamic menu.
By observing what all site visitors do, a
new type of navigation link arises: 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. The process relies on an algorithmic ranking of some kind, based on user behavior. The principle is similar to a traditional best-seller list: if many people read something, it must be good. In this case, link relevance turns out to be a socially constructed phenomenon.
Adaptive navigation has been most prominently used to make recommendations on e-commerce sites. The classic example of this is the “Customers who bought this item also bought…” feature on Amazon.com.
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. You may have seen this on web journals and other sites that have a Highest Rated Articles list or similar. Based on all ratings for all articles, visitors are then able to view the site’s
top-rated stories in the navigation.
Lists of links produced by collaborative filtering are potentially long—virtually endless in some cases. Typically only the top items are displayed in a top-10-list fashion. If necessary, a More link might also be include to see more of the list. Because of the dynamic nature of adaptive navigation, you generally don’t know how long each link may be in the mechanism. Commonly a vertical link list with ample space is used for adaptive navigation. It would be hard to imaging a horizontal arrangement of adaptive navigation options.
Also called: associative links, related links.
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.
Generally, contextual navigation is placed close to the content of a page. This creates a strong connection
between the meaning of a text and the linked related pages.
There are two typical arrangements of contextual
navigation on the page.
Contextual navigation doesn’t support known-item seeking well. Instead, it supports exploration and may
point people to new information. From a business standpoint, contextual navigation provides opportunities
for upsell. Product pages in e-commerce sites, for instance, often have links to related products and services. This is a common use of contextual navigation in e-commerce.
Related Links
Contextual navigation may appear at the end or to the side of content.
If the navigation is embedded within text, there may be an explicit indication to prepare users for more disjointed interaction, such as linking to a different content format or another site. For instance, an embedded link may be preceded or succeeded by text indicating that the linked material is on a different site or in a different format.
Embedded Navigation
Contextual navigation may be embedded within the text itself. As a result, contextual navigation is often represented as plain text links.
Structural
Connects one page to another based on the hierarchy of the site; on any page you’d expect to be able
to move to the page above it and pages below it.
As its name implies, structural navigation follows the structure of a web site. It allows people to move up
and down the different points of a site’s hierarchy. Structural navigation can be further subdivided into
two types: main navigation and local navigation.
Skip navigation
Persistent, global navigational elements present issues for screen reader users: people don’t need every menu
option read aloud on every page repeatedly. For the first page a screen reader user encounters while using a site, this may be helpful. But on subsequent pages, it’s time-consuming and annoying to hear the same options read each time.
For persistent navigation with many options, place a Skip Navigation link before the navigation mechanism starts, so visitors can jump to the main content of a page, thereby skipping the navigation. Such links can be coded so that sighted users don’t see them, but screen readers catch them.
Another strategy is to show navigation at the bottom of the page and to have a Skip to Navigation link at the top of the page for keyboard-based browsers. Then, at the bottom of the navigation, include a Back to Content link to bring users back to the content of the page.
Also called: sub-navigation, page-level navigation.
Local navigation is used to access lower levels in a structure, below the main navigation pages. The term “local” implies “within a given category.” On a given page, local navigation generally shows other options
at the same level of a hierarchy, as well as the options below the current page.
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.
Common arrangements of local navigation and main navigation include: Inverted-L, Horizontal and Embedded vertical.
Generally transitions from page to page with a local navigation are smooth and consistent. There’s likely
no expectation that links in local navigation will cause the user to leave the site, or even the site category.
But local navigation can be more volatile than global navigation in some instances. It may be used to link
to other page types, content formats.
Overall, local navigation provides a great deal of context, such as which topics belong together, related
content, and so forth. In this sense, local navigation plays a key role in indicating the “aboutness” of the
site. It also gives a sense of granularity of a topic. For this reason, local navigation supports general exploration, as well as known-item seeking and re-finding. It also points to content a visitor might not have known existed.
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. Users don’t expect to land somewhere completely unrelated when using main navigation links. Changes in navigation from page to page are usually small when using the main navigation.
Overall, a main navigation supports a variety of user tasks and modes of information seeking, including
known-item seeking, exploration, and even re-finding. From a user’s standpoint, the main navigation plays
a critical role in using the site:
The main navigation is often presented in a global navigation area, which generally includes the site logo
and utility navigation. (See the following section for more on utility navigation). As the name “global” implies,
these controls generally appear in an unchanged, consistent position on all or nearly all pages of a site.
A global navigation area is usually a valuable navigational device. The question is how prominent and persistent it should be. The answer depends on several factors...
Workflows that can´t be Interrupted
There are times when global navigation shouldn’t be shown, or can vary its form. For instance, some task flows, such as a checkout process or online bank transfer, should restrain people from jumping out in the middle of a process.
Stakeholder Objectives
Companies have goals. Inherently, some options will be promoted and highlighted over others. A visible, persistent global navigation may fulfill a stakeholder need.
User Behavior and Needs
Don’t create prominent and persistent main navigation just for the sake of it. You need to understand your users and their information needs, then design accordingly.
The Size of the Site
Larger sites with thousands of pages may benefit from a steady main navigational mechanism across pages. Smaller sites may be navigable with only breadcrumbs or contextual navigation.
Navigation type and page type are closely related. A given navigational scheme may have two different purposes on different page types. For instance, visitors may expect contextual navigation on the home page to lead to pages within the site. But related links on a page deeper in the site may point to other sites or content formats. People understand navigation, in part, from the context of the page type on which it appears.
Each page in your site should have a purpose, a reason for being. It’s critical to determine the purpose of each page while structuring a site. When this gets overlooked, the result may be unnecessary levels of structure. What’s more, the purpose of the page should be immediately clear to visitors. People recognize different pages types quickly. This sets expectations for navigation and affects how people interact with the site.
Traditionally, there are 3 main categories of pages.
In practice these divisions are often blurred. Page types refer to the primary focus of the page or its primary purpose within the overall site.
When should one page become two? Will users scroll? The shorter the pages, the more of them. This will require more clicks and more page loads. The longer the pages, the fewer of them. But people then have to scroll. There is no single guideline for page length; many factors are influential.
Page type is also a key factor in determining page length. Generally, it’s best to use short pages when people need to browse and scan quickly, or when they are completing a task with an online application. Longer pages are good for content that is best presented together for context. It provides an overview and all of the context necessary to make a purchasing decision.
It may not be efficient to require people to download pages for small bits of content. Instead, sending more information with each page (i.e., longer pages) may reduce the number of calls to the server. But there’s long and then there’s long. At a certain point it makes sense to chunk volumes of information. Presenting an entire book as a single page, for instance, would cause performance problems.
People don’t like to read online. For longer texts, it’s safe to assume many people won’t read from the computer screen. Reading longer documents offline is less problematic and preferred by most. It’s acceptable to provide long text pages if people are going to print them anyway.
Content might not have the same impact or meaning when it’s broken up into multiple smaller pages. Keeping things together creates a natural relationship between pieces of information.
Screen size is problematic because there is no single screen size to design to. On the Web, a wide range of browser sizes exist and vary based on monitor resolution, the number of browser toolbars or sidebars a person has, and the size of the browser window on the desktop.
Functional pages
Allow people to perform a task, such as conduct a search or check email; examples include search pages, submission forms, and applications.
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.
There may be little or no text on such pages, so they often lack embedded navigation and related links.
Contextual navigation and cross-structural linking can be problematic when used from functional pages. First of all, users need to focus on completing the task at hand. Additionally, linking to another page while filling out a form or finishing a process may result in loss of input. Try to protect user-entered data so that visitors don’t have to fill it in again after they navigate away from the page, accidentally erase the form, or interrupt a submission process.
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.
Web mail applications are a common type of application. For instance, you may have a Hotmail, Yahoo!, or Gmail account. More advanced types of applications are becoming more and more common, mirroring desktop programs.
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. Forms allow for transactions on the Web. As with search pages, associative navigation on forms is discouraged. You generally don’t want to interrupt the task of filling out the form—this is particularly important on the Web, because such forms require explicit action to save data. If you do allow people to navigate away from a form in the middle of filling it out, be sure to maintain user-entered information when returning. It’s extremely annoying to have to fill out a form again after
reviewing terms and conditions or a help tip.
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. Sometimes, however, a more detailed search is required, typically called an 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.
Navigation on a search form is often quite minimal. There might be links to search tips, help, and other explanations, or links that show or hide options or clear the form. Two types of navigation that can assist searchers are scoping options and word wheels. Otherwise, it’s appropriate to reduce, or even remove, main navigation mechanisms from a search page.
Content pages
Content pages are the substance of your site and why people are ultimately there; examples include
articles and product 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, and how-to information are just some examples. Content pages are the fundamental currency of the Web. Accordingly, the focus of content pages should
be the content. All too often, unnecessary navigation and graphics clutter the page.
Product pages are obviously critical to e-commerce sites.
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
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; examples include home page, landing pages, and galleries.
Navigational pages point visitors to their ultimate goal: content or functional pages. They are stepping stones in information seeking. Designers may strive to reduce these pages in order to keep visitors closer to the site’s content, but navigational pages aren’t just necessary evils. They play an important role in telling the story of your site. They also support a range of seeking modes, help orientation, and even affect purchasing decisions. Key navigational pages include the home page, landing pages, and galleries.
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. Gallery pages are more than just a means to navigate a product page: they contain critical shopping information and allow visitors to compare products. Shoppers may even decide to purchase from gallery page alone. They then go to the product page for more detailed information to confirm a decision.
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. Similar to how a home page provides an overview of the entire site, landing pages provide an outline to the content in a given section.
Keep in mind that people arrive at sites in various ways, such as via bookmarks and search engine results. They may never see the site’s home page, but instead arrive on a page somewhere in the middle. For this reason, landing pages must provide both local and global orientation.
With mechanisms such as dynamic menus, you may be tempted to omit landing pages completely. Instead,
you can just bring visitors directly to the pages that correspond to the options in the menu. But if you skip landing pages, be aware of the consequences. Namely, you won’t be able to link to a section overview page directly.
Providing a dashboard-like view into the rest of your pages, home pages direct visitors to key areas of your web site. A common strategy is to show lower levels of navigation directly on the home page. This aids in scanning and provides a path to content that may not otherwise surface immediately within the site.
A home page may also contain text content or functionality, but usually in an abbreviated format only.
News sites, for instance, may present the first lines of top stories and then link to the full story elsewhere. E-commerce sites may feature a product on the home page, but link to the full details within the site. Or, travel sites may present a range of functions that visitors can perform right from the home page.
The home page is often viewed as a chance to market products or promote a brand image. However, visitors
coming to site with a specific information need want to first get to their destination directly and quickly. For this reason, Forrester Research recommends merging the site map with the home page, arguing:
“ Home pages tend to get cluttered with the latest marketing jargon from the firm, which Web users may have a hard time deciphering. Site maps, on the other hand, often organize links with simple labels like ‘products,’ ‘services,’ and ‘help’ — exactly the kind of language that customers understand. ”
Even if you aren’t willing to give up that prized home page real estate for an entire site map, consider that visitors will see it as a navigational page nonetheless. You will need to provide the guidance and navigation they expect, or risk that they go somewhere else.
