Designing Web Navigation | O'Reilly Media

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

"Wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified."

—Vannevar Bush As We May Think

Navigation plays a major role in shaping our experiences on the Web. It provides access to information in a way that enhances understanding, reflects brand, and lends to overall credibility of a site. And ultimately, web navigation and the ability to find information have a financial impact for stakeholders.

Navigation design is a task that is not merely limited to choosing a row of buttons. It's much broader, and, at the same time, more subtle than that. The navigation designer coordinates user goals with business goals. This requires an understanding of each, as well as a deep knowledge of information organization, page layout, and design presentation. This chapter paints a broad context for web navigation to help you better appreciate not just its purpose, but its potential scope of importance.

When web navigation works well, it's underwhelming. Navigation is best when it's not noticed at all. It's like the officiating of a sports match. The referee may make dozens of good decisions throughout the game, and you may not even know he's there. But with one bad call, the ref is suddenly the center of attention for thousands of booing spectators.

shows a news article from the international version of the BBC web site (www.bbc.co.uk). It's the kind of page that we all come across regularly on the Web. There is nothing particularly interesting about the navigation. It's there when you need it, and out of the way when you don't. But this page illustrates some typical navigational features.

Figure 1-1: An article from BBC news

Where did your focus of attention first land? If you're not looking for a specific topic, your eyes may wander across the page. You might have first seen the logo in the upper left, or perhaps the article title. Maybe the image grabbed your attention. But you probably didn't notice the E-Mail This to a Friend link above the headline or the search input field in the upper right. If you were looking for those functions, however, you could have found them easily.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When web navigation works well, it's underwhelming. Navigation is best when it's not noticed at all. It's like the officiating of a sports match. The referee may make dozens of good decisions throughout the game, and you may not even know he's there. But with one bad call, the ref is suddenly the center of attention for thousands of booing spectators.

shows a news article from the international version of the BBC web site (www.bbc.co.uk). It's the kind of page that we all come across regularly on the Web. There is nothing particularly interesting about the navigation. It's there when you need it, and out of the way when you don't. But this page illustrates some typical navigational features.

Figure 1-1: An article from BBC news

Where did your focus of attention first land? If you're not looking for a specific topic, your eyes may wander across the page. You might have first seen the logo in the upper left, or perhaps the article title. Maybe the image grabbed your attention. But you probably didn't notice the E-Mail This to a Friend link above the headline or the search input field in the upper right. If you were looking for those functions, however, you could have found them easily.

Without knowing it, you made out a scheme for the page to help you understand its navigation and content. Even before you read any text, you had already created a mental image of how this page is put together in your mind: over here are the main options, over there is the article text, and down below are more options. People do this quickly and automatically.

People also rapidly scan pages for the words that meet their information needs. If you were looking for a local weather report, you'd figure out quickly that this is the wrong page. But you might have then seen the Weather option at the very top of the page. In clicking on this option, you'd expect to go to the section of the site for weather. For this reason, the labels and texts of navigation are critical.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Critics of navigation conclude that it should be eliminated from web sites all together. Author and interaction design advocate Alan Cooper, for one, suggests that navigation is unnecessary. He writes:

"The artless web sites created during the Web's infancy were of necessity built only with simple HTML tags, and were forced to divide up their functionality and content into a maze (a web?) of separate pages. This made a navigation scheme an unavoidable component of any web site design, and of course, a clear, visually arresting navigation scheme was better than an obscure or hidden one. But many web designers have incorrectly deduced from this that users want navigation schemes. Actually, they'd be happy if there were no navigation at all."

He then encourages a different paradigm for the Web:

"Skilled web developers using modern browsers and site construction tools such as ActiveX and JavaScript can create easier to use single-screen interactions that don't require jumping around from page to page. Yet many web designers continue to divide, and divide again, their sites into many fractured pages. These hierarchical arrangements of screens force them to impose a navigational burden on their users."

True, people don't particularly want to navigate and risk getting lost. They come to a site to get answers or accomplish a task. As such, web navigation can be considered a means to an end. But is it a necessary evil? If navigating isn't fun, why impose a burden on people with something that could potentially confuse them?

It would be hard to image a web site without the familiar navigation we've grown accustomed to on the Web. To better understand the need for navigation, it might help to look at the some of the different functions web navigation potentially has. Web navigation:

Provides access to information
Shows location in a site
Shows "aboutness" of a site

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Given the many potential roles web navigation plays, you can see that its design requires a mix of skills and levels of understanding. Many factors influence navigation design and, in turn, navigation affects many aspects of the site. Web navigation design can't be done in isolation. When considering a navigation design, ask yourself these fundamental questions:

Why are you building the site?: Though seemingly obvious, this question is overlooked all too often. Or, if it is asked, the answers are unclear or based on the wrong reasons. The first step in navigation design is understanding the purpose and motivation for the web site as a whole, as well as in the broader business context.
Who will use the site?: This is perhaps the most important question to ask. It's also one of the trickiest to answer. User research is the process of systematically investigating the visitors to a given site. It not only gives insight into the types of people visiting your site, but also into their needs and behaviors.
What does the navigation provide access to?: People come to a site to find answers or to perform a task. You must be providing the right content for the site to have value.
How is the site content organized?: Information architecture represents the underlying structures that give shape and meaning to the content and functionality on your site. It also has a major and direct impact on the navigation. As the designer, you must understand the content and how it is organized.
How will users navigate to the content they need?: Page layout and graphic design give the navigation its final form. This is more than just cosmetic window dressing, however. Aspects such as the order of options, their arrangement on the page, the font type and size used, and color, can be critical elements. They can make or break the navigation system.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Links are the basic currency of the Web. They tie two pieces of web content together in a meaningful way. This is a powerful concept. Web navigation is a systematic organization of links to provide access to information and to make meaningful associations. Navigation plays a key role in our overall web experience. It would be hard to image the Web without it.

But it's not just that navigation provides access to information. It's how navigation provides access that's important. Browsing a site is a different experience than just searching it, for instance. Navigation provides context and understanding. Showing users where they are on your site helps orient them, not only within the structure of a site but also within the meaning of the content. Navigation reveals a site's thematic scope and it's relevance to a particular need.

Web navigation also plays a role in expressing a brand. It communicates corporate priorities and values through categories, the order of options, and the tone of the labels. Well-structured navigation also contributes to the overall credibility of a web site. People seem to trust a site that appears clearly organized with an easy-to-use navigational structure. Finally, web navigation can have a financial impact. The cost of finding information is high, and the cost of not finding information is perhaps even higher.

Web navigation design is necessarily a multidisciplinary endeavor. You must consider business goals, technology constraints, and content. More importantly, to design navigation well, you need to understand the people who will using it and what they are trying accomplish. The navigation designer does not only create a row of tabs and links. He balances a range of factors into a cohesive system that support the goals of the site and of visitors. Navigation design is a craft that blends skills and talents from different areas.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You'd like to buy a new CD in your favorite style of music. Nothing in particular, you just want the latest; something new. What is the difference between navigating an online music site, such as iTunes, and walking through the actual shop? Describe your experiences in the shop and on the web site as if you were:
1. Someone shopping there for the first time.
2. A regular visitor.
3. What's the first thing you do in each situation? What's the last thing? How to you find what you are looking for?
You need a new computer desk for your home office. Use Ikea.com (or the Ikea site in your country) to find such a desk. First, do a search with the site search function, then browse to find a desk.
1. What are the differences in how you locate the desk?
2. What problems did you encounter with each method of access?
3. Which was more helpful and why?
The World Wide Web is a type of hypertext system. Hypertext refers to the linking of one document to another, in this case, web pages. But the Web wasn't the first hypertext system to be imagined or developed. In 1945, an important American scientist during the Second World War, Vannevar Bush, envisioned a system that could link two documents. With the hypothetical memex machine, as he dubbed it, people could create "trails" of related information. Later, Ted Nelson—who coined the term "hyperlink"—developed a system called Project Xanadu, considered the original hypertext system (although it took 30 years to complete and was not successful). Other attempts followed, including HyperCard, one of the first commercially viable hypertext applications, introduced by Apple Computer in 1987.

Using the Web, find out more about each of these systems and answer the following questions.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

"As We May Think," by Vannevar Bush (Atlantic Monthly, July 1945).: This is the classic essay by Bush—the then scientific advisor to President Roosevelt—that inspired so many hypertext projects. This essay includes broad, sweeping discussions of the role of science, technology, and information. Though references to specific technologies are clearly outdated, the sentiments expressed here are timeless. Available online at:www.theatlantic.com/doc/194507/bush.
The Design of Everyday Things, by Donald A. Norman (Doubleday, 1990).: This is a seminal work in user-centered design—a must read for any designer. Norman uses many examples from everyday life to support his arguments. He points frequently to failures in design from all kinds of situation. Norman tends to repeat things and ramble at times, but the central tenet of this book is clear: the user's needs are not the same as the designer's.
Persuasive Technology: Using Computers to Change What We Think and Do, by B.J. Fogg (Morgan Kaufmann, 2002).: This book is highly recommended for anyone working with interface design. Fogg essentially defines a whole new discipline in one single volume. In painstaking detail, he describes the myriad of issues surrounding credibility and computers. Though this could easily serve as a college textbook, it has appeal to a larger audience. The discussions are easy to follow and at times mesmerizing. Rich, relevant examples bring concepts to life.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

"Data is stored: Information is experienced"

—Andrew Dillon, Dean of the Information School, University of Texas at Austin

A man grabs the yellow pages and looks up the phone number of the local pizza delivery service. A scientist goes to the library to research her doctoral thesis using an online catalog. A woman searches the Web for beach resorts for the family vacation. These are all acts of information seeking.

Before beginning to design web navigation, you should take time to investigate how people look for information. The more you understand, the easier it is to structure your thoughts around solving design problems.

This chapter considers information seeking on three different levels:

General information seeking: How do people generally look for information? For simple fact-finding missions, information seeking may be straightforward. But for more complex problems, getting the information you need may be a long, involved process. This chapter briefly reviews a few key aspects from information seeking research and practice.
Seeking information online: How do people seek information online? This presents its own issues and challenges. The immediate availability of additional resources allows people to change seeking strategies rapidly. They don't always stay on course and may wander from page to page. They then get "lost in hyperspace," which is one of the oldest problems in a hypertext system design. You need to keep this in mind when creating web navigation.
Navigating web sites: How do people navigate the Web in particular? Research into web navigation behavior has only just begun. Some large-scale studies are beginning to build up, allowing for comparison over time. And concepts such transitional volatility, introduced by Stanford University researcher David Danielson, help us better explain how people navigate. Other considerations, such as "banner blindness" and others, also help form a larger picture of web navigation.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Information seeking refers to all of the various activities people undergo to find information. It's about how people gather information from their environment, usually to satisfy larger problem-solving goals. This can include everything people come in contact with over their lifetime—not just information that is actively sought.

Theoretical models of information seeking help explain how people find information by taking holistic look at the ways in which people hunt for information in their lives. Understanding them may not solve your immediate web design problems, but an awareness of their basic principles can help you understand broader navigation issues. (See the sidebar "" for a discussion of some of the traditional academic models.)

Of particular interest for navigation designers is a behavioral model of information seeking proposed by David Ellis, professor at the University of Wales Aberystwyth. This oft-cited framework has had a profound impact on information-seeking research because it demonstrates patterns across situations and contexts. Professor Ellis identifies six primary behaviors in information seeking:

Starting: identifying relevant sources of interest
Chaining: following and connecting new leads found in an initial source
Browsing: scanning contents of identified sources for subject affinity
Differentiating: filtering and assessing sources for usefulness
Monitoring: keeping abreast of developments in a given subject area
Extracting: systematically working through a given source for material of interest

Ellis' categorization of behaviors does not indicate a unidirectional process for finding information. Instead, the importance and involvement of each behavior in a given search is variable and situational. People move back and forth between them as they look for information. As a result, information seeking is a nonlinear activity.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Online information-seeking behavior presents some unique problems and situations. Because linking from one source to another is simple and immediate, people can cover a great deal of information quickly. They tend to zigzag through online systems, moving from resource to resource, varying seeking strategies rapidly.

Marcia Bates, a professor at UCLA, likens online seeking to berrypicking. If you've ever picked raspberries or blueberries, you know they don't come in bunches. Instead, you have to collect them one at time until your pail is full. You also move from bush to bush as you spot even riper berries, changing your approach fluidly. Similarly, when searching for information online, the solution to the original question is the culmination of many steps. It's not an all-or-nothing process. People constantly evaluate and re-evaluate what the find for relevance to their information need. People berrypick online.

Within Bates' Berrypicking Model, browsing and searching are complementary and not mutually exclusive activities. What's more, information needs evolve as people seek information. New information encountered sheds light onto the original problem, which itself changes and becomes compromised. Online information seeking is more like a negotiation between the seeker and the system.

When creating navigation, web designers often assume people will take a single, direct path to the information they are looking for. They don't. Instead, users may enter the site from a search engine on a page deep in the site's structure, move up to the home page, perform a keyword search, navigate to another page, and then pick one of the categories in the main navigation. Web navigation must be flexible enough to accommodate this behavior and support the evolving search.

Similar to the Berrypicking Model, Peter Pirolli and Stuart Card's theory of Information Foraging analyzes patterns in human information seeking and is directly based on the food foraging theories found in biology and anthropology. Assuming we forage for information as early humans once foraged for food, we can then speak of "information ecologies" and refer to seekers as "informavores" that have "information diets."

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

We are all creatures of habit. Even in our web browsing, we rely on a limited number of pages within a site. In a 1995 study of web browsing behavior, researchers at the Georgia Institute of Technology clearly showed a recurring pattern of users frequently returning to a given page or pages as a sort of home base, resulting in a hub and spoke style of navigation through a web space ().

Figure 2-4: Typical hub and spoke style of navigating

More recent studies confirm this comfort in familiarity: Andy Cockburn and Bruce McKenzie, researchers at the University of Canterbury in New Zealand, examined the surfing behavior of many web users, looking at the duration of each page visit, how often people visited a page, the growth and content of bookmark collections, and many other factors. Previously, revisitation—navigating to a previously visited page—accounted for 58 to 61 percent of all page visits. In 2000, page revisitation was even more prevalent: 81 percent of page visits calculated across all users.

The results also show that browsing is rapid. People often visit several pages in a very short period of time. They move very quickly on the Web, with pages displayed for only a few seconds. This research generated a simple set of guidelines:

Support revisitation
Design pages to load quickly
Shorten navigation paths
Minimize transient pages

The revisitation pattern changed somewhat in 2006, but the speed of browsing remained, according to Harald Weinreich, at the University of Hamburg. Weinreich and his colleagues noted a drop in the use of the Back button, but confirmed that people don't stay on any one page very long. Twenty-five percent of all visits lasted less than 4 seconds and 51 percent less than 10 seconds.

They also saw new patterns in web navigation behavior: increases in form submissions and in new window events (i.e., opening a page in a second browser). Both seem to be rooted in a change in web technologies, not necessarily people's behavior. Increased form submissions, for instance, suggest that the Web is becoming more interactive. New window events are likely to be caused by an increase in pop-up advertisements.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

There's more to navigation than providing clear, concise links, and smooth transitions from page to page. You must consider the information shape, as well. With shape, the form in which we experience information becomes an important navigational element itself. For instance, news articles tend to have similar shape. They start with the basic facts, then introduce people and quote them, and gradually go into more detail before tapering off. Understanding this shape potentially helps you both navigate and comprehend the article.

Andrew Dillon and Misha Vaughan proposed the notion of shape in hypertext documents, defining shape as:

"...a property conveyed both by physical form and by information content. Separating these elements completely is perhaps impossible but one can talk of the distinction between the layout and sequencing of information as viewed by the consumer (user or reader) and the cognitive representation of meaning that employs (at least in theoretical terms) knowledge structure such as schemata, mental models and scripts."

People naturally seek order and patterns when they come in contact with online information. This helps them predict, reorient, and habituate in the navigation process. When web content has a consistent shape (i.e., consistent physical and semantic patterns), it's easier for people to use.

The word "genre" has its roots in art and literature. In the broadest sense of the term, it refers to a distinct category of works marked by common style, form, and content—in other words, a common shape. Genre is a shared set of conventions for a given work—fairy tales versus poetry, for example. In film, a western represents a different genre than a horror movie or a comedy. Musical genres include classical, jazz, and rock.

In each example, certain identifiable elements define its categorization. A fairy tale begins with "Once upon a time..." and ends with "...and they lived happily ever after," for instance. Or, rock music is distinguished by its short songs with lyrics and a heavy back beat performed by small ensembles playing electric instruments.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The field of user experience design, or simply experience design, attempts to address a broader range of concerns in web design. Some definitions of user experience underscore a holistic view:

"User experience encompasses all aspects of the end-user's interaction with the company, its services, and its products...In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design."

Other views focus on key aspects of how people experience products and services:

Usefulness: How well the basic services, features, and functions match user needs and goals; a rational, cognitive response to the end product
Usability: How well the end product works and how well users can interact with it; the physical, objective properties of an interface
Desirability: The subjective, emotional response to the site; represents users' spontaneous feelings about the site and the site's owner

A good user experience balances these elements. A user experience is all the behaviors, thoughts, and feelings a person has when encountering a product or service over time. Your job is to take all of these factors into account when designing site navigation.

With such definitions, you can see why emotions play a significant role in interface design. Traditional academic disciplines related to web design—human-computer interaction and information science—have long focused on the physical and cognitive aspects of computer interface design. Now, in designing for optimal user experiences, user engagement, joy of use, and just plain fun, are all part of the paradigm.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Information seeking is a broad term that refers to all of the activities people engage in while hunting for information. There are decades of academic research in this area. Existing models of information seeking—though perhaps generic and abstract—can inform web navigation design. If anything, they teach us to focus on users and their needs, rather than on the technology. User research, a topic discussed in , is largely about understanding how visitors navigate and seek information on your site.

Studies in information seeking also reveal that finding information is complex and varied. Sometimes site visitors know what they are looking for, but often their information need is vague. The different modes of seeking people use directly impacts how they interact with your site. For instance, when focused on a specific information goal (known-item seeking), people may completely overlook page elements and experience banner blindness or even navigation blindness.

People move through different stages or states in while seeking information. It's not a linear process. The Berrypicking Model describes how people zigzag through online resources and change search strategies rapidly. Perhaps more importantly, users' confidence can vary as they seek information. As Carol Kuhlthau shows, visitors may be optimistic at the beginning, but as they progress and encounter more information, their confidence may dip. This is a critical point where people either proceed, back up and return to previously-visited pages, or break off a search completely.

Designing navigation is largely about increasing and maintaining confidence as users move through your site. There are several keys to creating this sense of certainty:

Labeling: When arriving at a page, visitors scan it quickly for trigger words. But they aren't necessarily weighing all options carefully. Instead, they may take the first link that appears to match their need. They satisfice. Creating good labels is critical for navigation, discussed further in .

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Ellis' behaviors of information seeking are listed below. Some thoughts around "starting" have already been presented in this chapter. For each of the others, think of specific ways that you have experienced each on the Web.
1. Chaining
2. Browsing
3. Differentiating
4. Monitoring
5. Extracting
Consider Donna Maurer's notion of the "don't know what you need to know" mode of information seeking, mentioned in this chapter. How might you design a site to support it? List three things a web site could do to help people find information they aren't directly looking for, but still need.
Look at the following excerpt from a familiar document and consider how form and genre might help you navigate:

Figure 2-15: What is it?
1. What is this image from?
2. Where are you in the document?
3. Where would go to find a list of soups?
4. Where would you go in the document to look for drinks?
5. What do the little "chili" symbols likely refer to next to three of the items?
Navigate to your favorite book or new best seller on Amazon.com, Amazon in your country, or another bookselling site. Compare each new page with the previous page, rapidly using the back and forward buttons on your browser. Note exactly what changes from page to page. Some changes to look out for are navigation options, layout and position of elements, as well as color, font, and text size.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

"The Design of Browsing and Berrypicking Techniques for the Online Search Interface," by Marcia Bates (Online Review 13 (1989): 407-424). www.gseis.ucla.edu/faculty/bates/berrypicking.html.: This oft-cited, landmark article introduces the Berrypicking Model in information seeking. There is a clear focus on the design of more effective interfaces that match real-like patterns of seeking online. Bates offers guidelines for designing better interfaces.
"Transitional Volatility in Web Navigation," by David Danielson (IT & Society 1, 3 (2003): 131-158). www.stanford.edu/group/siqss/itandsociety/v01i03/v01i03a08.pdf.: Danielson's recent work on web navigation is some of the most important to understanding the navigation process. This is an academic article, but nonetheless approachable and understandable by practitioners.
"Banner Blindness: Web Searchers Often Miss Obvious Links," by Jan Panero Benway and David M. Lane (Internetworking 1.3, 1998). www.internettg.org/newsletter/dec98/banner_blindness.html.: The concept of banner blindness reveals an important aspect of design: human behavior is complex. Logical behavioral assumptions don't always hold true. The designer's intuition is certainly important, but testing is also key. Sometimes things aren't as neat and convenient as expected. This is a fascinating and eye-opening study.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again. When the moon came they set out, but they found no crumbs, for the many thousands of birds which fly about in the woods and fields had picked them all up."

—Brothers Grimm Hansel and Gretel

A navigational mechanism is a link or group of links that behave in a similar way and have a similar appearance. They are the tools and devices of navigation systems.

Sometimes a site's structure suggests a particular mechanism, such as a horizontal navigation bar with a site's top-level categories. Navigation mechanisms should synch up with the site's structure, and there may be negotiation between the two: a change in your structure might bring about a change in your navigation and vice-versa. For example, if your site has 20 top-level categories, a navigation bar may not be appropriate. Instead, a directory-style display or dynamic menus will probably work better.

This chapter surveys common mechanisms individually and, for the most part, stripped of overall context. In reality, these mechanisms come together to form a total navigation logic for your site. But first it's important to understand the mechanics of navigation.

Step navigation allows people to move sequentially through pages. It often consists of a text label and an arrow, and is accompanied by a link to move backward in the series as well. Typically, a left-pointing arrow indicates movement to the previous page, and a right arrow indicates the next page.

For languages that read right to left, the direction of the arrows may be reversed. Arrows alone may not be clear or intuitive for all users in all situations. A text label in conjunction with an arrow avoids ambiguity.

The Next Blog feature on Blogger (www.blogger.com, ) is a simple example of step navigation that moves you from one blog to another, sequentially.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Step navigation allows people to move sequentially through pages. It often consists of a text label and an arrow, and is accompanied by a link to move backward in the series as well. Typically, a left-pointing arrow indicates movement to the previous page, and a right arrow indicates the next page.

For languages that read right to left, the direction of the arrows may be reversed. Arrows alone may not be clear or intuitive for all users in all situations. A text label in conjunction with an arrow avoids ambiguity.

The Next Blog feature on Blogger (www.blogger.com, ) is a simple example of step navigation that moves you from one blog to another, sequentially.

Figure 3-1: Step navigation on Blogger.com

Step navigation is valuable in processes where the decision in one step affects something in the next, such as in a wizard or a checkout process. It's also appropriate for sections of a longer document or chapters in an online book, or for online surveys and exams. Step navigation provides simple access to pages, one after another.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Paging navigation is similar to step navigation, but includes additional information and options. It is often found on search results pages that show details about the pages in the results set. Results sets usually have limits on the amount of items that can be displayed at once. After this limit is reached, a second chunk of results is displayed on a new page. This is repeated until all results are represented on several pages.

The simplest form of paging navigation is step navigation with the addition of a page count. This usually appears between the links to move forward or backward. A search for men's shoes on the Lands' End web site (www.landsend.com, ), allows you to sequentially browse through the six pages of results.

Figure 3-2: Simple paging on Landsend.com

Sometimes visitors need to "rewind" to the first page or "fast-forward" to the last page of a set. Often a double arrow or arrow with pipe (vertical line) represents this type of navigation. Clicking the rewind link goes to the beginning of the set of chunks; clicking fast-forward goes to the last. If you browse to the ninth page in a set of items but want to return to the first, clicking rewind allows you to go there in one simple step.

Whitepages.com uses rewind (First) and fast-forward (Last) controls in :

Figure 3-3: Paging on Whitepages.com, using rewind and fast-forward

Rewind and fast-forward mechanisms are good for larger sets of things. If the list of items is alphabetical, for instance, it may be efficient to jump to the end to look for the Zs, but it also might not. Rewind and fast-forward may only add more clutter and cause potential errors. People rarely need to jump to the last chunk of a set if the results are ranked by relevance, for instance. In such a case, increasing the number of items on a given page to reduce jumping around may be better.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

In the fairy tale, Hansel and Gretel left a trail of breadcrumbs in the woods so they could find their way back home. The lesson for the Web is clear: people need to navigate back along a path they've already taken. Ironically, though, birds ate their breadcrumb trail in the story, and they got terribly lost. So perhaps the metaphor is not the best one. The term "breadcrumb trail" is widely used in web navigation design nonetheless.

As a navigational mechanism, the breadcrumb trail shows a person's path through a site. It consists of elements, or nodes, that are chained together. The nodes are linked to previously visited pages (or parent topics) and are separated with a symbol, usually a greater-than sign (>), colon (:), or pipe (|).

Section 3.3.1.1: LOCATION BREADCRUMB TRAILS

The most common type of breadcrumb trail generally:

Shows the current position within a site.
Provides shortcuts to previously viewed pages and/or other areas of site.

These are called location breadcrumb trails. In essence, they are a linear representation of a site's structure, e.g., Home > Men's Clothes > Shirts > Dress Shirts. Regardless of how people arrive at Dress Shirts, the breadcrumb trail is the same.

The National Health Service (NHS) web site in the U.K. labels its location breadcrumb trail "You are here:" (www.nhs.uk, ).

Figure 3-10: Location breadcrumb trail on the NHS web site beginning with "You are here"

Unlike Hansel's trail, which showed his exact path (or would have, if the birds hadn't eaten it), location breadcrumb trails on the Web do not show navigation history. They show a fixed position in the overall site. On the NHS web site, regardless of how someone accessed the Other Health News page, the breadcrumb trail is the same.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Tree navigation allows for access to a hierarchical structure. This type of mechanism is commonly seen in operating systems to navigate file folders, e.g., in Microsoft Windows Explorer. It is invariably shown as a vertical arrangement of folders, terms, or nodes of some hierarchy. Often there are small plus and minus icons to open and close nodes of the hierarchy, or there may be small arrows that point right and down for closed and open, respectively.

Opening and closing the tree on the Web can be problematic if a page reload is involved. If a user has scrolled down and the page refreshes to the top after expanding a node, the open node may be located offscreen. Avoid page reloads with tree navigation on the Web if you can. If page refreshes are needed, scroll the page automatically to the position the user last left it.

Safari Books Online (http://search.safaribooksonline.com) uses a tree navigation to access book categories. This appears on the lower-left side of the store's main page, seen in the closeup in .

Figure 3-15: Tree navigation on Safari Books Online

This tree is simple and effective, but there is a distinct interaction problem: after opening a branch, the page reloads back to the top, not to the point where a category was opened. Trying to get to the section on the programming language C, for instance, requires scrolling several times to re-access the tree navigation after each reload.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A site map is a representation of a site's structure used for navigation. This provides a top-down overview of the site's content at a glance. Using a site map, visitors can jump directly to any page listed.

A site map is often afforded its own page, but it may also appear, in part, on other pages. Site maps should therefore be fairly simple and easy to scan. It's also critical that labels used in the site map match the main navigation categories, as well as page titles.

One line of reasoning is that if your main site navigation matches user needs, a site map is not necessary. Ideally, this may be true, but it isn't always the case. Sites with a great deal of content and a wide variety of user types may not be able to predict every information need for every visitor in every situation. A site map could help.

Site maps have gone in and out of style. In the early years of e-commerce, many sites included one. But creating and maintaining a site map is not easy and sometimes costly. The investment often doesn't match the benefit.

More recently, site maps have been recognized as a means of optimizing search engine indexing. Search engines can get a better overview of your site's total content via a site map. So, although site visitors may not use them often, site maps may have other benefits. You'll need to weigh the advantages and disadvantages carefully.

A fundamental question in creating a site map is that of granularity. It may not be possible, nor desirable, to list every page. But providing too little detail may also not help. The trick is achieving the right balance. Generally, site maps show two to three levels of site structure, providing access only to the main pages of a site.

For example, the web site of the French car manufacturer Renault has a simple site map (www.renault.fr, ). The main categories are listed with the key pages one level down.

Figure 3-16: The top half of a simple site map on Renault.fr

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Directories usually provide access to pages via topics. Yahoo!, the first commercial topical directory on the Web, popularized the notion of web portals. Unlike site maps, directories may classify content by category. They are also different from indexes, which list terms alphabetically (see the next section). Directories are useful when dealing with mixed types of information without a hierarchical relationship. They are also effective for organizing and linking to external sites.

Category headings are usually arranged alphabetically, with the main topic often shown in a larger font, followed by a few key subtopic links displayed underneath. Clicking a link brings you to a page for that topic. That page displays all links under the topic. In this way, you can drill down into the categories.

DMOZ.com hosts the Open Directory Project (www.dmoz.com). Edited by a team of volunteers around the world, this directory seeks to categorize the Web at large. Positioned front and center on the home page, the DMOZ.com directory shows fifteen top-level categories, each with three key subcategory links ().

Figure 3-19: The DMOZ directory

Note that the subcategory links under each heading are not alphabetical. Instead, they are prioritized, presumably by their usefulness. An ellipsis after the subcategory links indicates that more links are available.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A recent addition to navigation mechanisms is the tag cloud, which lists links alphabetically and weighted by frequency; the more frequently occurring a topic the larger it appears. This gives a snapshot into the relative significance of a topic: the larger the link, the more important it is. Although most often implemented with tags (hence the name), these mechanisms sometimes employ other types of links as well.

Tag clouds are good for dynamic content. Flickr is reported to be the first site to use the tag cloud (www.flickr.com, ). Tags that are used more frequently are displayed in a larger font, so the cloud shows popularity of tags. (See for more on tagging).

As a navigational mechanism, tag clouds have limited value. If a visitor has a known information need, for instance, a cloud of links isn't really efficient. They seem to be more of a novelty than an effective navigation mechanism. But the visual weighting of links provides valuable information: it shows at a glance what others are talking about or about the concerns of a community. Tag clouds reflect a certain zeitgeist for a site or topic.

Figure 3-20: Flickr's famous tag cloud

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

An A–Z index is an alphabetical guide to topics, terms, and concepts found throughout a web site. Indexes generally supplement access to content and aren't a main point of entry. They provide a bottom-up view of a site's content and are the electronic version of the traditional back-of-the-book index. For sites with many repeat visitors, such as a company intranet, a site index can be particularly beneficial.

In a site index, each alphabetically arranged entry is linked to the page where that topic is discussed. Indexes can be quite long and are often divided into pages for each letter of the alphabet. A strip of letters is then linked, allowing users to jump to specific letter pages of the index.

Note that the body can also be a mix of links and text. Not all entries in an index are linked, particularly for "use" or "see" references. For example, if an entry for ping-pong points to table tennis via a see function, ping-pong may not be linked. Like this:

Ping-Pong: See: Table Tennis

The University of Auckland web site, for instance, has a simple A–Z index (www.auckland.ac.nz, ). In this case, the entire index is on one page. Clicking a letter in the alphabet ju

Table of Contents

Section 3.3.1.1: LOCATION BREADCRUMB TRAILS