U3: Types og Navigation

Most navigation types fall into three primary categories.

Connects one page to another based on the hierarchy of the site; on any page you’d expect to be ableto move to the page above it and pages below it.

Also named: global or primary navigation.

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.

the main navigation defines the boundaries ofthe site itself.

Larger sites with thousands of pages may benefit from a steady main navigational mechanism acrosspages. Smaller sites may be navigable with only breadcrumbs or contextual navigation.

Don’t create prominent and persistent main navigation just for the sake of it. You need to understandyour users and their information needs, then design accordingly

Companies have goals. Inherently, some options will be promoted and highlighted over others. A visible,persistent global navigation may fulfill a stakeholder need.

There are times when global navigation shouldn’t be shown, or can vary its form. For instance, sometask flows, such as a checkout process or online bank transfer, should restrain people from jumpingout in the middle of a process.

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. It’s also typical to include a design element, such as a picture orgraphic, to help create a brand image.

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

Represents the local navigation with dynamic menus, which conserve screen real estate while providing quick access to options.

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 as a 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 embed the local navigation between the main navigation options in a tree-like structure.

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.

Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.There are three common types of associative navigation

Contextual navigation can vary

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

Contextual navigation may be embedded within the text itself. As a result, contextual navigation is often represented as plain text links.

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

Links in the text lead to other pages in the site on various levels of the structure. The first link in the last paragraph opens a PDF document, as noted in the text. The second link goes to Amazon.com.

Includes a link that allows users to automatically search for even more articles on the same topic.And also links to the most-viewed articles from the same section that the current article is in (in this case, Sports), including a link to see the top 35 most-viewed articles in that section.

Embedded links or associative navigation must make sense when read out of context. It’s common to labelassociative 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.

Adaptive navigation is a special kind of a contextual navigation.

allows readers to rate each story at the bottom of the text. Based on all ratings for all articles, visitors are then able to view the site’s top-rated stories in the navigation.

Similar to contextual navigation but quick links are contextual for the entire site, not a given page.

quick links highlight key areas that are not represented by top-level navigation options. On the home page shown here, however, it might be better to display these links directly on the page, perhaps in a site map-like rrangement. Hiding them in a menu reduces the ability to rapidly scan the options.

Also called: associative links, related links.

These often access a single page with no further levels of structure below them—a deadend, so to speak.

So it doesn’t address a specific user need.

even shows visitors’ history for a given session at the bottom of product pages.

Connects pages with similar topics and content, regardless of their location in the site; links tend tocross structural boundaries.

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.

Toolboxes bring together site options that perform functions—“tools” for doing things on the site. Toolboxesmay 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, atoolbar may link to a search feature, contact form, and online shop. This may require more effort in reorientation.

Web sites very often have a logo at the top of each page. It is customary to link the entire image itself tothe home page. People may or may not know of this behavior, so some sites add an explicit label underneathor to the side of the logo. In general, linking the logo provides a predictable way to return to a familiarstarting point. In some ways it is like an “undo” option within for the navigation process.

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 locallanguage site is completely different. Transitions may therefore be small or large. If there are only a fewlanguages to select from, simple links at the top or bottom of the page may suffice.

Keep in mind that if you do have a multi-language site, you need to declare the language of each site at thevery top of the HTML code for each page.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.

You also need to consider what language the selections appear in. Do they appear in the language of the website you are currently viewing, or in their original languages? 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.On the other hand many countries speak multiple languages. If you have a multi-language site, consider breaking region selection by language as well.

It’s bad practice to use images of national flags to switch language. Languages are often spoken in morethan one country.

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.

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 thatallow people to jump from one section of a page to another. Internal navigation links basically scroll thepage up or down, providing a more efficient way of reaching sections of a longer page. It’s customary tothen provide a reciprocal link back to the top, so internal page navigation tends to come in pairs of links.

are often very long, as the table of contents for the CSS 2.1 specification shows. These internal links jump within apage with no reload.

The purpose of navigational pages is to direct people to the content they are looking for; examples include home page, landing pages, and galleries.

Providing a dashboard-like view into the rest of your pages, home pages direct visitors to key areas of yourweb 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.

Is a portal to the all of the other pages and sites maintained by the university.

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 amain 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.

A large mail-order computer distributor in the US, has a range of products on its site.

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. Gallery pages are more than just a means to navigate aproduct page: they contain critical shopping information and allow visitors to compare products. Shoppersmay even decide to purchase from gallery page alone. They then go to the product page for more detailedinformation to confirm a decision.

Although it contains thumbnail images and price information, more basic details about each shirt mighthelp this page be more effective. On the plus side, visitors can see nearly all of the products Lands’ Endoffers in the category at a glance. Galleries like this one are vital for e-commerce sites and the online shoppingprocess.

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 thosefound on gallery pages. Depending on the search terms, results may or may not be of a single product orcontent type.

Note that men’s shirts are also included in the results and that the display and format of each of the hits is different than the setup of the gallery page. Within the search results, more detailed information is offered, but visitors initially get less of an overview of all available shirts.

Content pages are the substance of your site and why people are ultimately there; examples include articles and product pages.

Note the good use of contextual navigation to point out related products in the center left of the page. Visitors can also look at products up close in a separate pop-up window.

Functional pages allow people to perform a task, such as conduct a search or check email; examples include search pages, submission forms, and applications.

Requires more space; consequently, a separate page is usually needed.

An online social networking platform. The navigation is limited to a few links only, including help and terms of use.

The functions to manipulate the datasheet at the top closely resemble software navigation. Notice, however, that there are a few links in the upper-right and at thebottom that navigate away from the workspace. If they have not saved their work, users are warnedbefore they are allowed to navigate away from the page.

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.

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.

Instead, sending more information with each page (i.e., longer pages) may reduce the number of calls to theserver. 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.

On this site, cases are generally given a single page. Note the size of the scrollbar in the upper right; this document is over 50 screens long, even at a fairly large browser size. For smaller resolutions it may occupy 100 screens. The nature of the content, however, calls for a single page. People doing legal research online need to see the entire document, even if they end up using only a single sentence from it for their own work. Additionally, it is probably safe to assume visitors will either download or print it for reading.