What do you call the application that are used to navigate HTML pages or the World Wide Web?
|
Show
Chapter 4. Types of Navigation“Everything should be as simple as possible, but no simpler.” —Attributed to Albert Einstein 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. CATEGORIES OF NAVIGATIONMost navigation types fall into three primary categories[51] (Figure 4-1). 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. AssociativeConnects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries. UtilityConnects 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.
 Figure 4-1. Three primary categories of navigation (after Fiorito and Dalton) STRUCTURAL NAVIGATIONAs 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. MAIN NAVIGATIONAlso 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. Consider the global navigation area of the University of Valencia (www.uv.es, Figure 4-2), for example. 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. It’s also typical to include a design element, such as a picture or graphic, to help create a brand image. Figure 4-2. The global navigation area on the University of Valencia home page Critics of an ever-present global navigation point to its intrusion on valuable screen real estate. These concerns are entirely valid. The global navigation area in Figure 4-2 occupies a fair amount of the page, and the designers might have done a better job reducing it, particularly on content pages further down in the site. But it’s not a question of including or excluding a global navigation: 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: 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. User behavior and needsDon’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. Stakeholder objectivesCompanies have goals. Inherently, some options will be promoted and highlighted over others. A visible, persistent global navigation may fulfill a stakeholder need. Workflows that can’t be interruptedThere 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. Compare Figure 4-3, which shows the home page of the Opodo travel site (www.opodo.co.uk), to Figure 4-4, which shows first step of the site’s checkout process. For checkout, the main navigation tabs were removed to provide focus during the process and avoid errors. Figure 4-3. The Opodo home page, with main navigation tabs highlighted Figure 4-4. Checking out on Opodo, without the main navigation LOCAL NAVIGATIONAlso 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 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. HorizontalLocal navigation might also be represented by a second row of options under a horizontal global navigation or by dynamic menus. Embedded verticalWhen 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. Figure 4-5 diagrams these three common arrangements. Keep in mind that other arrangements are possible, such as a right-hand local navigation, as well as combinations and hybrid arrangements. Figure 4-5. Three common arrangements of main and local navigation 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. The Dutch version of the Philips web site (www.philips.nl) 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. Clicking one of these local navigation then leads to a page where the menu is repeated on the left (Figure 4-7). Pages one level down from here are then also revealed, between the grey bars in the image. Overall, this is an efficient navigation strategy that makes good use of screen real estate. Figure 4-6. Dynamic menus for local navigation from the Philips home page Figure 4-7. An embedded vertical local navigation on Philips.nl AccessibilitySkip 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. ASSOCIATIVE NAVIGATIONAssociative 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 mentioned in Chapter 2. Three common types of associative navigation are: contextual navigation, quick links, and footer navigation. Take a closer look at each in turn. CONTEXTUAL NAVIGATION
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 (Figure 4-8): Embedded navigation Contextual navigation may be embedded within the text itself. As a result, contextual navigation is often represented as plain text links. Related linksContextual navigation may appear at the end or to the side of content. Figure 4-8. Two types of contextual navigation: embedded links and related links 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. Figure 4-9 shows the Education page on the web site of the Information Architecture Institute (www.iainstitute.org). 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. Figure 4-9. Embedded contextual navigation on the IA Institute web site 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. AccessibilityEmbedded 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. Related links are also used effectively on news sites. From one article, readers can get to other related articles. For example, each story on the web site for The Washington Post (www.washingtonpost.com) ends with related links (Figure 4-10). There are two main parts:
Figure 4-10. Related links component for an article from The Washington Post ADAPTIVE NAVIGATIONLook again at the links in the contextual navigation area of Figure 4-10, and you’ll notice the Sports Articles links change based on which stories readers visit most. 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. Figure 4-11 shows an example of this feature, using Jeffrey Zeldman’s book Designing with Web Standards.[52] 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. Boxes and Arrows (www.boxesandarrows.com), for instance, 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. Figure 4-12. Rating articles on Boxes and Arrows 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. Digg.com has a list of top articles for each of its main categories. Because it’s impossible to account for the length of article title, the design has to account for a mix of lengths (Figure 4-13). Figure 4-13. Top ten stories in the Technology category on Digg.com QUICK LINKSQuick 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. On the Princeton University web site (www.princeton.edu, Figure 4-14), 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 arrangement. Hiding them in a menu reduces the ability to rapidly scan the options. Figure 4-14. Quick links in a drop-down menu on the Princeton University home page FOOTER NAVIGATIONLocated 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, as mentioned in Chapter 3. Related links and logical next steps may also be included. eBay.com offers task-based options at the end of item pages (Figure 4-15). 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. Figure 4-15. Logical next steps in the footer navigation on eBay 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.[53] UTILITY NAVIGATIONUtility 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. Figure 4-16 shows 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. 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. There are many types of utility navigation, including:
Each deserves a detailed look. EXTRA-SITE NAVIGATIONImportant 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. Figure 4-16 shows the extra-site navigation found on the top left of many Google.com sites, so users can move from product to product easily. Clicking the link in Figure 4-17 takes you from Google Mail to the Google Calendar and back quite easily. There is then a link to see more Google services at the end of the list. Figure 4-17. Reciprocal extra-site navigation links from Google Mail to Google Calendar and vice versa TOOLBOXESToolboxes 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. Figure 4-18 shows the toolbox navigation component from the Toyota UK web site (www.toyota.co.uk). This grouping of links is not thematically related; instead, they are grouped together because each link points to an important site function or tool. Figure 4-18. A toolbox found on most pages of the Toyota UK web site LINKED LOGOWeb 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 (Figure 4-19). 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. Figure 4-19. Logo integrated into the main navigation on Apple.com LANGUAGE SELECTORSFor 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. InternationalizationIt’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. AccessibilityKeep 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: 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. COUNTRY OR REGION SELECTORSIn 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, Figure 4-20) 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. Figure 4-20. A country selector on the Coca-Cola web site InternationalizationMany countries speak multiple languages. If you have a multi-language site, consider breaking region selection by language as well. Figure 4-21 shows the country selection menu at the bottom of Google News (http://news.google.com). 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. Figure 4-21. Country selections on Google News INTERNAL PAGE NAVIGATIONAlso 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 (Figure 4-22). These internal links jump within a page with no reload. Figure 4-22. Internal page links for the CSS 2.1 specification on the W3C site Here are some common internal linking issues:
PAGE TYPESNavigation 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 three main categories of pages: 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. Content pagesContent pages are the substance of your site and why people are ultimately there; examples include articles and product pages. Functional pagesFunctional pages allow people to perform a task, such as conduct a search or check email; examples include search pages, submission forms, and applications. 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. NAVIGATIONAL PAGESNavigational 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. HOME PAGEProviding 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. For example, the home page for the University of California, Berkeley (www.berkeley.edu, Figure 4-23) is a portal to the all of the other pages and sites maintained by the university. Figure 4-23. Navigation on the home page for the University of California, Berkeley 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:
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. LANDING PAGESAlso 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. Gateway, a large mail-order computer distributor in the US, has a range of products on its site (www.gateway.com). Clicking on Computers in the main navigation brings you to the corresponding landing page (Figure 4-24). This provides an overview to the types of computers that are available. GALLERY PAGESGalleries 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. Figure 4-25 shows a gallery page for Lands’ End in the UK for women’s shirts (www.landsend.co.uk). Although it contains thumbnail images and price information, more basic details about each shirt might help this page be more effective. On the plus side, visitors can see nearly all of the products Lands’ End offers in the category at a glance. Galleries like this one are vital for e-commerce sites and the online shopping process. Figure 4-25. A gallery of women’s blouses and shirts on Landsend.co.uk SEARCH RESULT PAGESSearch 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. For example, compare Figure 4-26, which shows the search results for the term “shirts” on the Lands’ End UK site, to Figure 4-25. 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. For more about navigating from search results pages, see Chapter 11. CONTENT PAGESOn 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. For instance, the content pages on A List Apart, a leading online magazine for web design and development, devotes most screen real estate to article text (www.alistapart.com, Figure 4-27). The navigation is kept to a minimum and there are no gratuitous graphics. This allows readers to engage the text without becoming distracted. Figure 4-27. An article from A List Apart PRODUCT PAGESProduct pages are obviously critical to e-commerce sites. There are many typical elements to product pages:
In addition, product pages often contain several functional elements:
Figure 4-28 shows a product page for hiking books on the REI web site, a large U.S. outdoor goods retailer, as an example of an information-rich product page (www.rei.com). In addition to the many typical elements of a product page, 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, shown in Figure 4-29. This allows for examination of the hiking boot from all angles, mirroring how people scrutinize products in a brick-and-mortar store. Figure 4-28. A product page for hiking books on the REI web site Figure 4-29. 3-D manipulation of a product photo on the REI web site FUNCTIONAL PAGESFunctional 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. Search FormsIt’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, both discussed further in Chapter 11. Otherwise, it’s appropriate to reduce, or even remove, main navigation mechanisms from a search page. Figure 4-30 shows the advanced search form for Yahoo.com, which offers many specific search options. Navigation is limited to only few links for help and tips, as well as a way back the Yahoo! home page. Figure 4-30. The top portion of the advanced search form for Yahoo.com SUBMISSION FORMSForms 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. Figure 4-31 shows the registration form for Facebook (www.facebook.com), an online social networking platform. The navigation is limited to a few links only, including help and terms of use. Figure 4-31. The registration form for Facebook WEB APPLICATIONSWeb 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. Figure 4-32 shown an example of an online spreadsheet using NumSum, a free spreadsheet sharing service (www.numsum.com). 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 the bottom that navigate away from the workspace. If they have not saved their work, users are warned before they are allowed to navigate away from the page. Figure 4-32. An example of an online spreadsheet application with NumSum For more on navigation for applications, see Chapter 13. PAGE LENGTHWhen 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:[55]
Figure 4-33 shows an example of a U.S. Supreme Court decision found on the web site for The Legal Information Institute of the Cornell Law School (www.law.cornell.edu). 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. Figure 4-33. A U.S. Supreme Court decision online 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. For instance, visitors benefit from long product pages such as the one seen in Figure 4-28. It provides an overview and all of the context necessary to make a purchasing decision. SUMMARYVarious mechanisms come together within a web site to form a comprehensive navigation system, with each unit in the system playing a different role. Some access the main categories of the site. Others offer links to related pages throughout a site. Some links might provide access to useful features for the site itself, such as site search and help. When designing your system, keep the three main categories of navigation in mind:
The way the different types of navigation are arranged on the page plays a large role in how visitors will perceive and use them. The purpose of a navigation type should be clear and obvious for a more efficient interaction. For instance, links in a navigation bar across the top are expected to lead to main category pages. Designing against such expectations can lead to problems in orientation and navigation. For a more detailed discussion of page layout, see Chapter 9. The function of navigation mechanisms is also determined by the type of page on which it appears. As you work, remember the three primary page types:
Finally, for an overall flow that makes sense within a site, each page should also have a primary purpose. You will largely be determining the purpose of pages in the Architecture phase, discussed in Chapter 8. QUESTIONS
FURTHER READING“Navigation Systems,” Chapter 7 in Information Architecture for the World Wide Web, by Peter Morville and Louis Rosenfeld (O’Reilly, 2006). This chapter details different types of navigation in the classic book on information architecture. The authors define slightly different types of navigation than those presented here, but the same principles apply. Also included in this chapter are good discussions of site maps, site indexes, visualization, and social navigation. Get Designing Web Navigation now with the O’Reilly learning platform. O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers. What application allows you to access the World Wide Web?A web browser (also referred to as an Internet browser or simply a browser) is application software for accessing the World Wide Web or a local website.
What is the name of the device used to store web pages on the World Wide Web?As hardware, a web server is a computer that stores web server software and other files related to a website, such as HTML documents, images and JavaScript files.
What is web browsing write about World Wide Web?The World Wide Web—commonly referred to as WWW, W3, or the Web—is an interconnected system of public webpages accessible through the Internet. The Web is not the same as the Internet: the Web is one of many applications built on top of the Internet.
|
