Navigation

9 minute read

Published:

This post covers navigation for Internet Programming.

Types of Navigation

  • bringing similar options together and presenting them as a cohesive unit

  • Categories

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27604.png

      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.
    • Associative

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

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

STRUCTURAL NAVIGATION

  • main navigation and local navigation

    • Also called: global navigation, primary navigation, main nav.
    • represents the top-level pages of a site’s structure—or the pages just below the home page
    • Changes in navigation from page to page are usually small when using the main navigation.
    • Roles of main navigation
      • provides an overview and answers important questions users may have when first coming to a site, such as “does this site have what I’m looking for?”
      • 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.
      • helps when users get interrupted while navigating and reminds visitors where they are in a site.
      • gives shape to a site. In many ways, the main navigation defines the boundaries of the site itself.
    • often presented in a global navigation area, which generally includes the site logo and utility navigation. (utility navigation-following section).
    • As the name “global” implies, these controls generally appear in an unchanged, consistent position on all or nearly all pages of a site.
  • LOCAL NAVIGATION

    • Also called: sub-navigation, page-level navigation
  • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27612.png
    • used to access lower levels in a structure, below the main navigation pages
  • 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.

ASSOCIATIVE NAVIGATION

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

  • Three Types: contextual navigation, quick links, and footer navigation

  • Contextual Navigation

    • Also called: associative links, related links.

    • Embedded navigation

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

      • Contextual navigation may appear at the end or to the side of content.
    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27618.png
    • 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.

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27630.png.jpg
    • 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.

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27632.png

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

  • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27634.png.jpg

    There are many types of utility navigation, including: Extra-site navigation; Toolboxes; Linked logos; Language and country selectors; Internal page navigation

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

    • 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

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27640.png.jpg
    • 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.

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27642.png.jpg
  • 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.
    • 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.
  • COUNTRY OR REGION SELECTORS

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27644.png.jpg
  • INTERNAL PAGE NAVIGATION

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

    • https://www.oreilly.com/library/view/designing-web-navigation/9780596528102/httpatomoreillycomsourceoreillyimages27648.png