Inhaltsverzeichnis von Designing Web Navigation

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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 .

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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 jumps to the appropriate anchor. It is a simple, flat list of links with no cross references.

Figure 3-21: University of Auckland's simple index

By contrast, the BBC web site uses an extensive A–Z index with each letter on a separate page. Notice the mix of links and plain text on the M page in ; the heading Macedonia itself is not linked, but its sub-entries are.

Figure 3-22: BBC.co.uk has a very detailed site index

A–Z indexes have three key advantages:

They are familiar. The simple alphabetical structure and back-of-the-book experience means almost no learning curve for most people.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The simplest form of a navigation bar is a horizontal chain of plain hypertext links. These are sometimes separated by a vertical line (pipe) as shown in the main navigation bar on del.icio.us ().

Figure 3-23: A simple navigation bar on del.icio.us with plain text links

The inclusion of a text-based pipe may cause accessibility issues. Screen readers will read the character aloud between each link name. Alternatively, you can represent the pipe as an image with the ALT attribute set to "" (blank quotes). This, of course, adds weight to the page—though minimal—and requires a hit on the server for the initial image.

Note that this also applies to breadcrumb trails, discussed earlier. The trail shown in might be read by a screen reader as: "You are here colon NHS England is greater than news is greater than other health news." Some screen reader users may be used to this; others may find it disorienting.

Navigation bars often have a colored background, or may use graphical images for the options. This creates a strong sense of a bar across the page. The web site for the Russian newspaper Pravda, for instance, uses a navigation bar with white text on a dark blue background (www.pravda.ru, ).

Figure 3-24: The dark blue navigation bar on the Pravda site

A key advantage to navigation bars is that they don't take away from the horizontal width of the main content area. Instead they are positioned above the primary areas of the page. The content can then spread out across the entire width of the browser.

The distinction between tabs and navigation bars is their presentation. There is no real difference in function. Rather than a solid bar, tabs are like overlapping shingles, usually sticking up from the main content area. Each tab is distinct from the next, often with rounded or slanted corners.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Jacob Nielsen claims that CNET.com was the first to make extensive, consistent use of a navigation mechanism (a stack of links on the screen's left) across an entire site. Called a vertical or left-hand menu (or right-hand menu if on the right), this vertical arrangement has become prevalent in web navigation design.

Vertical menus are generally more flexible than navigation bars or tabs. Because the mechanism can easily extend downward, adding options is usually not as problematic as adding a tab. Additionally, vertical menus generally allow for longer labels, particularly if they can wrap onto two or more lines.

The Oracle web site uses a vertical menu with long, descriptive labels on the left of its home page to provide access to the major areas of the site (www.oracle.com, ). In a horizontal navigation bar, many of these labels would have to be shortened.

Figure 3-31: A vertical menu of the left side of Oracle.com

Vertical menus can also appear elsewhere on the page, such as for related links further down or for adaptive navigation, both discussed further in .

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Also known as fly-out menus, pull-down menus, or pop-up menus, dynamic menus provide quick access to navigation options. They are considered "dynamic" because visitors must interact with them before they display. After the visitor selects a navigation option with a mouse rollover or click, the site presents a menu window similar to those found in software applications.

A key advantage to this mechanism is ready access to more options than could otherwise be displayed on a single page. The downside is potentially reduced visibility of these options. Visitors have to explore more before making a navigation decision.

If the dynamic menu displays with a simple mouse rollover, it's common to delay the appearance of the menu. The menu should first appear about a half-second after the mouse has rolled over the navigation point. The menu should stay open as long as the mouse is over the navigation point or within the menu area itself. After the mouse rolls out, the menu should close after about a half-second delay. Another variation is to have the menu close with a click elsewhere on the page.

Even with a delay, dynamic menus from vertical navigation menus can be problematic. Depending on the menu's placement, trying to select an option may cause people to move the mouse outside of the menu area or touch a neighboring option. Exact movement along the navigation label itself is required. Dynamic menus therefore work better with a horizontal navigation bar or with tabs: they drop down (or up) and can easily be reached with the mouse without touching other navigation options.

For example, try using the dynamic menus on the Barilla page (www.barilla.it), shown in . If the mouse touches any of the other main options, the currently open dynamic menu closes, and the other opens. This is inefficient and annoying.

Figure 3-32: The dynamic menus on Barilla's web site are hard to use

The main navigation for Le Monde, a large French newspaper, uses dynamic menus extending downward from the navigation bar, which solves this interaction problem (

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Drop-down menus are simple HTML selection menus with options. Selecting an option brings the user to the new page. This type of navigation is often used for quick links, which jump to a new page across a site structure, for instance.

For accessibility reasons, do not have the new page reload just by selecting the option and releasing the mouse. This requires JavaScript (called an "onChange" event) and can cause problems with screen readers. Some screen readers will trigger the link as soon as it is read, prohibiting the user from getting to any other options it the menu.

An alternative is to activate the menu selection with an explicit button or link click just after the menu. An advanced solution might be to change the site's behavior based on whether a screen reader is used. A Go button would then appear only if needed.

A drop-down menu on the IBM web site navigates to the site in a different language and country (www.ibm.com, ) and is followed by a Go button to activate the selection.

Figure 3-35: Using a drop-down menu on IBM.com for language selection

The web site for the ASBA Group, a South African banking group (www.absa.co.za/absacoza), has an interesting navigation mechanism. Two drop-down menus allow visitors to first pick a verb, then an action (). This is part of a sentence beginning with "I want to." A selection in the first menu updates choices in the second menu. This provides many combinations and navigation paths in a compact space.

Figure 3-36: Two drop-down menus work in tandem

A mechanism such as the one seen in may not translate to other languages well. If you are planning a multi-language site, it's best to avoid sentence-based navigation, such as embedding navigation within a partial sentence. Word order and word forms are different in different languages.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Beyond traditional tabs, bars, and menus lies a category of mechanisms that use information visualization.

The standard definition of information visualization is: "The use of computer-supported, interactive, visual representations of abstract data to amplify cognition." The common vision in this field is to represent information in spatial or visual relationships to make complex data sets clear and understandable. More importantly, these representations are interactive. Information visualization is about manipulating and navigating information, not just about how it is displayed.

Information visualization doesn't aim to replace textual displays of information. Visual representations and plain text complement each other. For instance, text doesn't scale up well. Displaying thousands of items as text can't be done on a single computer screen. Information visualization techniques, on the other hand, provide views into information on different levels. Patterns of millions of items can be shown in a chart or graph of some kind. People can then zoom in or out for more or less detail.

Visualization mechanisms tend to have limited use and should be reserved for special situations. General web users may not be accustomed to them. But, as research in information visualization mechanisms continues, their application may become more widespread. Three common mechanisms are star trees, visual thesauri, and visual clusters.

Also called a radial tree layout, a star tree represents hierarchical relationships in a hub and spoke display. Large amounts of data can appear within a relatively compact space. A star tree might be an alternative to tree navigation and even a site map. Inxight offers a commercial star tree, such as the one in showing a diagram of Richard Saul Wurman's Understanding USA (www.understandingusa.com).

Figure 3-37: Understanding USA as a star tree

Clicking on any term shifts the whole display so that term is now at the center. The categories from the selected one are then larger and easier to click. Though interesting to view and manipulate, the mechanism is generally used as supplementary navigation for special situations.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Keep in mind that web browsers have built-in mechanisms of their own. Consider these while designing a site's navigation system. The most important browser mechanisms in terms of navigation include:

Back button: The most obvious and relevant browser control for navigation is the Back button. Clicking it is perhaps one of the most frequently performed actions while navigating the Web.
Forward button: The Forward button isn't used nearly as much as the Back button, but is still a way to move forward in a path.
Session history: This is a reverse chronological list of recently visited pages. shows a session history, extending down from the Back button. Session history is a good reason to supply meaningful browser titles; this is discussed further in .

Figure 3-41: An example of a browser's session history
Browser history: Many browsers also have a more permanent history of activity going back for weeks. This is often accessed in a left sidebar. Users can use this tool to return to sites visited in the past.
URLs: The URL itself is also a mechanism that allows for navigation. See more about URLs in .

Other features to consider include things such as bookmaking, page reloading, and the Home button. Make sure your site doesn't break browser navigation features. Expect people to navigate with them, especially with the Back button. However, it's generally advisable to avoid relying on browser controls as the

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Before beginning to design navigation, you must understand its individual components. These mechanisms are the basic building blocks for navigation systems. If web navigation were a story, mechanisms would be the sentences and paragraphs that comprise it. In the end, a blend of mechanisms comes together to form the overall construction of your site's navigation.

Each of the mechanisms you choose has a different role within the overall navigation scheme. Step navigation, paging, and breadcrumbs are a few simple examples of linear navigation mechanisms that move forward or backward, step by step. Other mechanisms show many details of an information structure at once, such as a tree navigation, site map, directory, or A–Z indexes. These are good for providing an overview to many pages at once.

Typically, however, web navigation is made up of menus, tabs, and bars. More advanced navigation mechanisms, such as star trees, visual thesauri, and clustering displays, visualize navigation spatially. These are not common mechanisms and tend to be used only in special situations in which they complement other navigation mechanisms. Finally, you must also consider that web browsers have built-in features such as Back and Forward buttons, history, and URLs, which affect web navigation.

, provides more context for when and how mechanisms should appear in a site. One may be the primary navigation to access the main categories of the site, for instance. Another might provide access to related content at the bottom of page. These different functions will guide the selection and use of mechanisms in your site's navigation.

Additionally, you must consider the structure of the site and how people will move around within it. , outlines how to arrange navigation on the page. Basically, it's a process of evaluating the navigation needs people will have when they are coming to and leaving from key pages in your site. As you then try to assemble the navigation around those needs, having a good understanding of possible means of access via different mechanisms is essential.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Think up analogies for three of the discussed navigation mechanisms. For instance, step navigation is like turning pages in a book. What does a location breadcrumb trail resemble? A directory? A dynamic menu?
Analyze the various navigation mechanisms on a few pages on Amazon.com (or Amazon in your country), including a search results page. Identify all the different kinds of navigation mechanisms you find.
1. How is each used? For what types of content is each used?
2. What are potential problems of each?
3. What works well? What doesn't? What don't they use that they could possibly benefit from?
4. List at the advantages and disadvantages of the three most prevalent navigation mechanisms on Amazon.
Compare results paging for three popular search engines. First, do a search for a common term that produces a large results set, such as "design." Then go to the twentieth page on each.
1. How does page numbering on the twentieth page differ?
2. What are the rules for the display of page numbers?
3. What is good and what is bad about each?
4. Specify the display rules for one of the paging mechanisms in words or in a flowchart using "if" statements.
Other than for user-created tags, what other types of navigation could be displayed as a tag cloud? List three other ways links in a tag cloud could be ranked, other than by popularity. How might a tag cloud be used for navigation on a news site, for instance? Or on a shopping site?
Redesign the home page of a site you are working on or that you visit frequently with the following three mechanisms only:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Designing Interfaces, by Jenifer Tidwell (O'Reilly, 2006).: This book gives a broad tour of various interface elements and principles of interaction design. Discussions cover both software graphical user interfaces (GUIs) and web interfaces. Among other things, Tidwell covers many mechanisms in detail using patterns, which are a way of representing a prototypical solution to commonly encountered design problems. This book contains hands-on information and is well-suited for practitioners.
Readings in Information Visualization: Using Vision to Think, Edited by Stuart Card, Jock Mackinlay and Ben Shneiderman (Morgan Kaufmann, 1999).: This collection of classic papers has quickly become the standard volume for information visualization. It is academic in nature, but clearly written and approachable. With over 700 pages and 47 articles, it is a valuable reference source.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"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:

The type of content a mechanism accesses
Behavior of the navigational links and transition to the next page
The tasks and modes of seeking the mechanism supports
Visual treatment of navigational options
The position of a navigation on a page

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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Most navigation types fall into three primary categories ().

Structural: Connects one page to another based on the hierarchy of the site; on any page you'd expect to be able to move to the page above it and pages below it.
Associative: Connects pages with similar topics and content, regardless of their location in the site; links tend to cross structural boundaries.
Utility: Connects pages and features that help people use the site itself; these may lie outside the main hierarchy of the site, and their only relationship to one another is their function.

Figure 4-1: Three primary categories of navigation (after Fiorito and Dalton)

As its name implies, structural navigation follows the structure of a web site. It allows people to move up and down the different points of a site's hierarchy. Structural navigation can be further subdivided into two types: main navigation and local navigation.

Section 4.1.1.1: MAIN NAVIGATION

Also called: global navigation, primary navigation, main nav.

The main navigation generally represents the top-level pages of a site's structure—or the pages just below the home page. The links in the main navigation are expected to lead to pages within the site and behave in a very consistent way. Users don't expect to land somewhere completely unrelated when using main navigation links. Changes in navigation from page to page are usually small when using the main navigation.

Overall, a main navigation supports a variety of user tasks and modes of information seeking, including known-item seeking, exploration, and even re-finding. From a user's standpoint, the main navigation plays a critical role in using the site:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Navigation type and page type are closely related. A given navigational scheme may have two different purposes on different page types. For instance, visitors may expect contextual navigation on the home page to lead to pages within the site. But related links on a page deeper in the site may point to other sites or content formats. People understand navigation, in part, from the context of the page type on which it appears.

Each page in your site should have a purpose, a reason for being. It's critical to determine the purpose of each page while structuring a site. When this gets overlooked, the result may be unnecessary levels of structure. What's more, the purpose of the page should be immediately clear to visitors. People recognize different pages types quickly. This sets expectations for navigation and affects how people interact with the site.

Traditionally, there are 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 pages: Content pages are the substance of your site and why people are ultimately there; examples include articles and product pages.
Functional pages: Functional 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 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.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Various 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:

Structural navigation provides access to content following the structure of a web site and includes the main navigation and local navigation.
Associative navigation links across levels of a hierarchy, creating semantic relationships between related pieces of content. Contextual navigation and quick links are examples.
Utility navigation accesses information about the site itself or site functions and may include global utility options, such as "help" and "search," as well as extra-site navigation and tools.

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 .

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:

Navigational pages are stepping stones in information seeking; they point people to content or functional pages. Examples include the home page, landing pages, and gallery pages.
Content pages contain text, articles, and images. Product pages on e-commerce sites, for example, are content pages.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Look at the following home page for the Czech Technical University in Prague (, www.cvut.cz). On a separate piece of paper, make a table with two columns and eight rows. Number the rows from 1 to 8. Label the columns Type and Mechanism. Then, for each circled element on the image, indicate the type of navigation and the mechanism used.

Figure 4-34: A page from the web site for the Czech Technical University
1. Is this the home page? How do you know what type of page it might be? How would you get back to the home page?
2. If you can't read Czech, what do you think this page is about? What clues did you use to determine that?
Visit a popular e-commerce site and look for a product you're considering purchasing. Find that product first by browsing to it and then by doing a search.
1. Along the way identify each of the navigation page types you encounter, including:
  - Home page
  - Galleries
  - Landing pages
  Is the purpose of each easy to recognize? What have the site designers done or not done to make the purpose of the page clear to you? What could they do better?
2. Identify all of the types of navigation on each page. Don't forget to scroll down and look at the footer area as well. How are each of these displayed? How consistent do they stay across pages?

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

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

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"If everyone always agreed on what to call things, the user's word would be the designer's word would be the system's word, and what the user typed or pointed to would be mutually understood. Unfortunately, people often disagree on the words they use for things."

—George Furnas et al. "The Vocabulary Problem in Human-System Communciation"

Creating the right navigational labels for a web site is often an underestimated part of the design process. "Oh, that's just a labeling problem," some may say, brushing off the decision for "more important" design issues.

From a user's perspective, however, navigation labels are the site's content, functionality, and structure. If navigation has a narrative role for a web site, labels are the words that tell the story.

Critical to findability, navigation labels are the trigger words site visitors look for when they scan navigation options. The words in a label draw a person's attention to the link, or, if the words are uninteresting to them, ignore the link. Navigation labels are also key elements in predicting what's coming next, after the decision is made to click a link. They come immediately before a decisive point in navigation: the transition from one page to another. Getting navigation labels right is vital.

Information often doesn't let itself be chopped up and described neatly, however, and language gets messy, making labeling decisions difficult. This chapter provides insight on taming language and organizing information into clear and easily navigable labels that will highlight—rather than hide—your site's content.

Research shows that the chances of two people naming the same thing the same way are low. Professor George Furnas and his colleagues, then researchers at Bell Labs, explain:

"The fundamental observation is that people use a surprisingly great variety of words to refer to the same thing. In fact, the data show that no single access word, however well chosen, can be expected to cover more than a small proportion of user's attempts."

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Research shows that the chances of two people naming the same thing the same way are low. Professor George Furnas and his colleagues, then researchers at Bell Labs, explain:

"The fundamental observation is that people use a surprisingly great variety of words to refer to the same thing. In fact, the data show that no single access word, however well chosen, can be expected to cover more than a small proportion of user's attempts."

In many tests with hundreds of people across different situations and subject areas, they found that a single access point (i.e., a term chosen for navigation) will at best match user's terms only 10-20 percent of the time. This would seem to make your job quite difficult. But it's not mission impossible. The best approach is to start with the user's words. You need to know what users will expect to see, or how they might describe the content you're offering. Methods such as card sorting and free listing, described in , seek to do just that.

Keep in mind that the Bell Labs research focused on database search systems and predated the Web. Although the basic principle of the Vocabulary Problem is still present, the context of other labels and texts on a web page, as well as the visitor's past experience, provide additional clues for the interpretation of labels.

Jesse James Garret, author and a leader in information architecture, writes about the importance of this overall context:

"All the information users have to go on are the language of the link, its visual treatment, and its placement on the page. Yet, despite this extreme shortage of information, they somehow develop mental images of the result they'll get when clicking a link. The mental image might not literally be a picture of the page in their minds—although if they're visual thinkers, it may take exactly that form. They may have formed a mental impression of the content and the manner of its presentation. This impression isn't derived solely from the information they have gleaned from the navigation design, though. They also take their own experience into account."

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Ambiguous labels leave people guessing their intent. If site visitors go down the wrong path because of an unclear label, they may get lost or give up. Good labels instill confidence while navigating and help avoid frustration. The following sections detail some of the most important aspects of labels and predict how successfully they may guide users to the content they seek.

The site should speak in terms visitors can understand naturally. It's easy, however, for site designers to assume that others know the same terms and abbreviations they do. This may not always be the case. There are several aspects of labeling that can potentially cause a mismatch in understanding. You should avoid company lingo, technical terminology, clever labels, and abbreviations, while using the appropriate tone of voice.

Section 5.2.1.1: AVOID COMPANY LINGO

Company lingo creeps into web sites all too easily and all too often. Such jargon confuses more than it helps. In rare circumstances, in which a brand name has become a household word, for instance, marketing-speak might be acceptable. But if you are inventing new products and words, chances are the "outside world" won't understand them. And people won't click on what they don't understand.

Realistically, however, some products and services have trademarked names. Some business sites may even require that a term appear in its trademarked form. In these cases, qualifying and enhancing a label with explanatory text is helpful. Include the jargon if you have to, but explain it for better understanding.

Section 5.2.1.2: AVOID TECHNICAL TERMINOLOGY

Most visitors to a given site are not as web savvy as those who created it. Not everyone knows what a plug-in is, what a secure server refers to, or even what they can do with a site map. If visitors have to choose a bandwidth to view a video clip, will they know how many megabits their Internet connection is? Perhaps not. It's best to use everyday language for clarity.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Navigation labels don't exist on their own: they are part of a system of headers, titles, and texts that direct people to the information they want. The design of navigation labels must fit within the overall system. Often there is a tendency to focus on one element or the other. In many cases, the people creating the navigation labels are different from those writing page titles. You job is to bring these together to make a cohesive system. In addition to navigation options, key elements to consider are browser titles, URLs, and page titles.

Most browsers have a title in a bar at the very top of the application. shows the browser title for The New York Times (www.nytimes.com) as an example.

Figure 5-7: Browser title of The New York Times

People don't pay attention to browser titles while surfing the Web. As a result, site designers can overlook them. But browser titles are important for many reasons:

Bookmarking: When people bookmark a page, most browsers use the browser title as the default label for the bookmark name. Most people don't manually change these. If you want site visitors to be able to bookmark pages and get back to them, design good browser titles.
Tabbed browsing: Popular browsers such as Firefox offer tabbed browsing. The label displayed in the tab is usually the browser title for a given page. This also applies when people open multiple windows on their computer desktop: the label displayed for each instance is the browser title.
Printing: When printing, the browser title is may appear at the top of the printed page. This becomes an important part of the printed document.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

As mentioned in , persuasion doesn't mean tricking people. It refers to encouraging people to take a certain action or have a certain belief. This isn't a bad thing. Site owners generally want to motivate visitors to view some specific content or take some action.

Bryan and Jeffrey Eisenberg have done some of the most extensive work in persuasion in online retailing. They show that persuasion takes place both on the macro-level and the micro-level. The macro-level is trying to get people to take action. On the micro-level, however, it's about links and navigation:

"Every click represents a question your customer is asking. It represents your customer's willingness to stay engaged with you. It represents a unique point of conversion. It represents continue persuasive momentum.

If you customers don't click, communication ceases and persuasive momentum evaporates. If you can't help people get to the informatioan they require to satisfy their questions, why should they bother doing business with you?"

On the micro-level, labels to be critical in the process. In his article "Persuasive Navigation," Jeff Lash points out the difference between call to action and persuasive labels. A call to action is an imperative to the visitor, e.g., Sign up Now and Apply Today. Persuasive navigation, however, provides benefits to visitors: "Sign up and get exclusive content" and "Receive discounts if you apply today." Call to action becomes persuade to action. The goal is to entice or encourage people to do something. Providing clues about benefits to the user helps.

Even stronger persuasion occurs when speaking directly to user needs. This is often difficult, but can be effective. It's a matter of aligning people's desires and needs with business goals and reflecting this in labels.

Consider the web sites of the World Wildlife Fund (WWF), a global environmental conservation organization. It relies on donations and support from individuals. Naturally, the main navigation has an option for offering support. The approach to labeling this option on the various sites around the world differs, however, reflecting different levels of persuasion. There are examples of descriptive labels, calls to action, and persuasive labels.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The World Wide Web is just that: worldwide. Many international companies have web presences in various market countries based on a common web interface. This usually means the same page layout appears in different languages. In translating navigation labels from one language to another there are several aspects to look out for:

Label length

Words in one language may require significantly more real estate than in another. All navigation mechanisms have limits, some more than others. If flexibility for various label lengths is not built into the interface, translated labels may not fit.

Additionally, some languages have compound words that don't separate and wrap easily on the screen. A four-word label in French may actually be as long as a German translation of the same term, but the German label may appear as one long term without break. The French label would wrap normally, while a single German would not. Consider these three terms for the same concept, here in English, French, and German:

Job Creation Scheme
Programme de création d'emplois
Arbeitsbeschäftigungsmaβnahmen

As a general rule of thumb, translated labels may require up to fifty percent more space than the original language. Where this is not possible, be sure to account for the longest term possible in the page design.

Grammar

Navigation labels that rely on a specific syntax or grammatical construction may present problems in translation. The labeling system must account for this. There are several differences in the grammar of languages that could potentially cause problems:

Sentence structure is different across languages. Embedding navigation elements within a sentence may not result in the same order of links as desired when translated.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Where do good labels come from? First and foremost, learn from your users. Attempt to match your labeling system to user expectations. outlines some research techniques for doing so, including methods such as card sorting. But, as previously noted, there will never be a single, perfect system that meets all of your visitors' needs. The goal, then, is to optimize as best you can.

And, of course, an important resource is your own creativity. No amount of user research is going to give you the absolute correct answer. There is no silver bullet. Your intuition plays a big role in navigation design. From time to time, you may need inspiration, however. Here are some places to get ideas and a broader perspective on labels:

Thesauri and word generators: If you get stuck, brainstorm as many alternatives as possible. Look to dictionaries and thesauri for synonyms and alternative word forms. Or, you can consult keyword suggestion tools. These have emerged as a tool for search engine optimization to track keyword usage. These show frequency of search queries that contain any word or phrase you enter. Google's AdWords suggestion tool (http://adwords.google.com/select/KeywordToolExternal) and Overture's keyword selector (http://inventory.overture.com/d/searchinventory/suggestion) are two examples.
Competitor sites: Patterns in labeling emerge across sites in a similar business and market. Look at how competitors are labeling their navigation and site features. It may to your advantage to use these terms. If a visitor comes to your site from a competitor site, for instance, they may have gotten used to a certain pattern of labels. Or, you may want to explicitly be different from competitors to set yourself apart. Either way, looking at labels on competing sites is a good place to start.
Search logs

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Getting the right labels is critical to navigation. The Vocabulary Problem, proposed by Professor George Furnas and his colleagues, is an important concept. Their research shows that the likelihood of two people using the same term to describe an object is very low. On the Web, however, navigation labels don't appear out of context. When creating labels, consider the context of the site, page, and user expectations and experiences. Create a meaningful shared reference of understanding.

A primary quality of good navigation labels is speaking the user's language; avoid company lingo, technical terms, clever labels, and abbreviations. Try to make labels as descriptive as possible. Good labels are also mutually exclusive and focused. Finally, labels should be consistent in granularity, syntax, presentation, and usage.

Longer labels tend to be more successful than short ones. Research shows that links that are between 7 and 12 words long perform the best. If a link label is too long, however, it becomes too much for people to read. Trigger words are less likely to be present in shorter labels. There is no rule with label length, but try to clarify labels appropriately.

Labels are part of a larger system of elements that all contribute to navigation. Menu items, browser titles, URLs, and page titles, for instance, are best when coordinated into a unified scheme. However, flexibility needs to be accounted for to avoid issues of redundancy and unnecessary navigation elements.

Persuasive labels encourage a certain behavior. Descriptive labels tend to be passive, whereas calls to action speak directly to users. Persuasion is best when verbal cues match the needs, questions, and desires of site visitors. On a micro-level, persuasive labels are critical for achieving overall business goals.

Finally, when translating labels, pay attention to label length, grammar, and the intended meaning of the original terms. Identify worse-case translation situations and plan for them.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The following concepts influence label selection. Define each term and provide examples for each:
1. Homonym
2. Synonym
3. Antonym
4. Polysem
5. Paronym
6. Hypernym
7. Hyponym
In their article "The Vocabulary Problem in Human-System Communication," George Furnas and his colleagues propose a simple exercise to demonstrate the chance of two people naming that same object the same way. Try this exercise with several people:

"On a piece of paper, write the name you would give to a program that tells about interesting activities occurring in some major metropolitan area (e.g., this program would tell you what is interesting to do on Friday or Saturday night). Make the name 10 characters or less. Try t-o think of a name that will be as obvious as possible, one that other people would think of."
Visit three or four pages on popular e-commerce sites by browsing categories to find a particular product (i.e., don't perform a search). In the table below, record the label used for each element indicated on each page. How do the terms align? What is good about the system? What can be improved? How can the entire system provide a meaningful user experience?

	Page 1	Page 2	Page 3	Page 4
Browse title (at the top of the browser)
URL
Selected navigation

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Waiting for Your Cat to Bark?: Persuading Customers When They Ignore Marketing, by Bryan Eisenberg and Jeffrey Eisenberg, with Lisa T. Davis (Nelson Business, 2006).: This book presents an end-to-end process for creating web sites that persuade. It deviates from traditional marketing techniques and instead focuses on creating valuable user experiences for visitors. The method relies on personas and scenarios—cornerstones of user-centered design. This book is easy to read and understand, and offers some unique perspectives on persuasion.
"Labels," Chapter 4 in Information Architecture for the World Wide Web, by Louis Rosenfeld and Peter Morville (O'Reilly, 2002).: This is a brief chapter about labels and labeling in the classic book on information architecture. Examples of good and bad labeling systems are reviewed in detail. Practical information about creating labeling systems and sources of appropriate labels is offered.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"A foolish consistency is the hobgoblin of little minds."

—Ralph Waldo Emerson

A common goal in navigation design is to create effortless interaction with information. Navigation should be "invisible" to the user. Measuring its effectiveness is therefore problematic: it's difficult to demonstrate the value of something that's at its best when you don't notice it.

At the same time, navigation is deceptively complex. The thousands of pages you've provided access to, the numerous relationships you've established between different pieces of content, and the smooth interaction detailed in countless flowcharts all get reduced to a handful of links. The navigation on any one page is just a small portion of a larger system, which is sometimes hard to grasp.

What's more, many variables—from technical performance to graphic design—potentially affect the success of navigation. Showing cause and effect is sometimes difficult. For example, if visitors don't use a navigation option that could potentially help them, is it because they didn't see it or because they didn't understand the label? Making that option bigger won't help if the label is wrong.

Ultimately, the success of navigation is relative: what's good for one site might be catastrophic for another. Nonetheless, there are overarching guidelines that hold true across most situations. This chapter reviews them and introduces methods for evaluating whether your site hits the mark.

The following sections outline some of the more important qualities of successful navigation. These are not rules. They don't prescribe how to design navigation. But understanding them can guide your thought process while designing. Overall, these aspects predict the effectiveness of a navigation:

Balance
Ease of learning
Consistency (and inconsistency)
Feedback
Efficiency

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The following sections outline some of the more important qualities of successful navigation. These are not rules. They don't prescribe how to design navigation. But understanding them can guide your thought process while designing. Overall, these aspects predict the effectiveness of a navigation:

Balance
Ease of learning
Consistency (and inconsistency)
Feedback
Efficiency
Clear labels
Visual clarity
Appropriateness for the site type
Aligning with user goals

Now take a look at each aspect in more detail.

Breadth versus depth refers to the balance between the number of visible menu items on a page (breadth) and the number of hierarchical levels in a structure (depth). There is a clear trade-off: the fewer the navigational items, the deeper the structure; and, the more navigation items at once, the fewer levels of hierarchy ().

Figure 6-1: The same number of pages arranged to demonstrate breadth versus depth

On web sites, breadth and depth is a function of both the information structure and the navigation. Directories, for instance, often show options to two levels of the hierarchy on one page, thereby reducing the number of clicks to get to a second-level page. Dynamic menus have a similar effect in that they can access deeper pages in a site directly from a top-level page.

Generally, broader structures work better than deeper ones. The effort it takes to continually choose categories across many levels of a deep structure outweighs the effort to scan many items in a broad navigation. The eye is much faster than a mouse click (and page load). Although users tend to become disoriented (and possibly lost) quicker in deeper structures, don't swing too far toward breadth. Showing all links at all times can be overwhelming and make choices harder. Visitors may just take the first option that appears to fit their need, or simply give up.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Evaluating navigation can take place throughout the lifecycle of a web site.

When relaunching or enhancing a web site, it's imperative to first determine the problems of the old one. At the beginning of a project, review the current site's navigation. This will also familiarize you with the site in general. Evaluating navigation of competitors can also reveal best practices and show how to effectively position your site in the marketplace.

During the research and design phases of new sites, try to identify potential issues on an ongoing basis and address them before it's too late. Peer reviews of navigation can detect potential problems early in the process.

Finally, evaluations of a site after it is launched can point to actual issues visitors have. This feedback can flow into enhancements during the maintenance phases of a web site.

The following sections introduce some common methods for evaluating navigation. Those that don't involve users are referred to as inspection methods. Though outcomes of these can be subjective, their more structured approach to site inspection yields valuable feedback. Usability tests and web metric analysis, on the other hand, focus on data about real user behavior. They can point to actual problems that users have while using your site. You can use the methods listed in as a guide.

No single evaluation will give you a complete picture of navigation success. Findings and conclusions are strongest when they are validated by a combination of techniques. For instance, you can't conclude from inspection methods that people will have problems navigating. Instead, you can only claim that it is likely for them to have problems. Follow up with a usability test to confirm your suspicions.

Finally, in reality, evaluations are rarely limited to navigation alone. The techniques listed in this section focus on navigation evaluation, but have a broader context as well.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The definition of successful navigation is relative to the site type, business objectives, and user goals. Still, there are basic qualities of navigation and evaluation tools that predict its effectiveness across situations.

A good navigation structure is balanced between breadth and depth. It doesn't require unnecessary clicks or pages to reach target content in the site. Generally, but not always, broader structures work better than deeper ones. contains more detail on structuring information to help you decide which approach is best for your site.

On the Web, it's safe to assume that people won't want to spend a great deal of time learning how to use a navigation system. Don't leave visitors guessing what to do with overly clever mechanisms or ambiguous labels. As discussed in , clear labeling is essential to the success of navigation.

Be reasonable—not rigid—about consistency. You need to vary the position, color, labeling, and the amount of navigation presented to create a sense of movement through a site. In evaluating navigation, focus on how inconsistencies are used, and determine if they help or hurt the navigation experience.

Clarity and visual logic is important for effective navigation. Provide clear feedback as to location within the site and provide effects such as rollovers to help users select and click navigation. People will make out the intent of mechanisms quickly and automatically. The visual hierarchy you create then guides them on how to use the navigation For more details about the layout and visual design of navigation, see and .

To check your work, perform a user-based usability test or try one of the structured evaluation techniques, such as a heuristic evaluation, checklist review, or navigation stress test. In addition, web metrics are important in determining navigation success after a site is live. Compare readings for such things as conversion rates or revenue before and after to measure improvement.

Finally, be certain that your site complies with accessibility guidelines. Ideally, you'll be considering accessibility issues throughout the design process. Don't wait until the end to retrofit accessibility measures. Inspect and test the site for accessibility as soon as possible to avoid unnecessary rework.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Review the navigation of a local online newspaper in your area. Take notes on the following aspects:
- Balance: is the site balanced without unnecessary levels?
- Efficiency: is the navigation efficient to use?
- Feedback: is it clear where you are in the site?
- Labeling: are navigation labels clear and understandable?
- Consistency and inconsistency: is inconsistency used wisely?
- Visual design: does the visual design of the navigation enhance its use?
- Appropriateness: is the navigation appropriate for an online newspaper? Does it help you find what you need?
Pick the one you like best and compare it to the web site for your favorite band or movie. What are the differences?
Together with a friend or someone you know, conduct an informal checklist review and a navigation stress test on your favorite e-commerce site. Compare notes and discuss. Where do the findings overlap between a checklist review and the stress text? What differed between the two? Which was more telling about the overall navigation system?

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Heuristic Evaluation," by Jakob Nielsen in Usability Inspection Methods, ed. Jakob Nielsen and Robert L. Mack (John Wiley & Sons, 1994).: This chapter is a comprehensive discussion of heuristic evaluations. Nielsen was an early advocate of heuristic evaluations and brought the technique to the attention of the web design community. This text is also available online at www.useit.com/papers/heuristic/heuristic_evaluation.html.
A Practical Guide to Usability Testing, By Joseph Dumas and Janice Redish (Intellect, Ltd, 1999).: This book is an excellent guide to usability testing with a wealth of practical information. It focuses on formal usability testing methods with laboratory settings and multiple experimenters.
Usability Engineering, by Jakob Nielsen (Morgan Kaufmann, 1993).: Traditionally usability tests are done in a controlled laboratory by trained psychologist. This is intimidating to many designers and developers. Nielsen advocates discount usability engineering approaches, also called "guerrilla" methods. He proposes simplified "think aloud" tests with a small number of users. Also see his essay online: www.useit.com/papers/guerrilla_hci.html.
Web Accessibility Initiative (WAI), http://www.w3.org/WAI.: The guidelines from the World Wide Web Consortium (W3C) are regarded the standard for web accessibility. This site has many valuable resources. The accessibility checklist is a must for developers: www.w3.org/TR/WCAG10/full-checklist.html. There is also detailed information on evaluating accessibility: www.w3.org/WAI/eval/Overview.html.
Web Site Measurement Hacks, by Eric T. Peterson (O'Reilly, 2005).: This is a well-written, well-structured book from an authority in the field. Discussions assume some of technical understanding, but are approachable by novices to the field. With 430 pages, this is a comprehensive book that digs deep into topics such implementation of web measurement tools and reporting issues. specifically looks at how web metrics can inform usability testing.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"People don't want to buy a quarter-inch drill. They want a quarter-inch hole!"

—Professor Theodore Levitt, Harvard University

It's tempting to dive into the details of a design as soon as the project starts. People will start talking about button placement, labels, and even color as soon as a project begins. Resist this urge. Understand the problem first. The amount and type of analysis you perform at the outset will influence navigation design throughout the project. It's like hitting a golf ball: the slightest deviation up front has a huge effect on the final trajectory.

Having a clear and early understanding of the problem generally saves time and money in the long run. A common vision can short-circuit unnecessary debates or avoid major changes later on. When you hear the term "analysis," you may envision an unnecessarily long "discovery" phase. Don't be put off. Analysis need not be time-consuming or costly, and documentation doesn't have to be overwhelming. Focus on the key points:

Business goals
Content
Technology
Users

Good navigation design is not just about providing links to pages. It's about coordinating goals, content, technology, and user needs into a cohesive user experience. This chapter examines each area and offers some advice to help you analyze the broader context that will frame your entire approach to navigation design.

Commercial businesses ultimately want to be profitable, of course, but even nonprofit organizations, governmental bodies, and the smallest volunteer groups have goals. They want to sell ideas or grow their cause. "Business goals" is used here broadly to refer to the goals of any organization.

Apart from increasing profits, common goals are usually variations on:

Winning new customers or members
Increasing customer loyalty

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Commercial businesses ultimately want to be profitable, of course, but even nonprofit organizations, governmental bodies, and the smallest volunteer groups have goals. They want to sell ideas or grow their cause. "Business goals" is used here broadly to refer to the goals of any organization.

Apart from increasing profits, common goals are usually variations on:

Winning new customers or members
Increasing customer loyalty
Strengthening the brand or core message
Improving operational efficiency
Reducing customer support costs
Managing corporate knowledge effectively

Beyond identifying the concrete goals of a business, there are many other aspects to consider, including the vision, mission, brand, and strategy of the organization. Navigation proves to be a crucial aspect of web design in meeting all of these objectives. Mapping stakeholder concerns to navigation at an early stage makes certain that the two are aligned.

defines some important goal-related aspects of design using a hypothetical financial services company for illustration. The rightmost column of the table demonstrates how each of these can influence navigation, resulting in a broad set of guidelines for design.

Table 7-1: Mapping business goals to navigation design
	Definition	Example for a financial services company	Navigation guidelines
Vision	The underling reason for the company's existence; a concise description of the overall company ethos.	We help our customers to get the most out of theirfinances to realize their dreams.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

You can't effectively design navigation without knowing what it is you're providing access to. Understanding your content is critical to creating an effective navigation system. Content analysis is a technique that looks at the type, structure, and general nature of information. This will, in part, determine the types of categories and labels you create for navigation, as well as how content will be organized.

There are three levels of detail at which you can analyze content:

A content survey is a high-level analysis of existing sites and content, requiring a sample of different types of information.
With a content inventory, you account for all pages of site, but you don't look at every piece of content in detail.
A content audit implies that every page, document, and other piece of content is recorded and examined. This can be very painstaking and may not be possible for large sites.

Regardless of the approach you take, a content analysis can be very tedious. You'll have to systematically track various aspects of each page in a spreadsheet (). Record information that will help you find patterns in the information. Although your list might change or evolve as you encounter more content, start by tracking things such as:

Page number or ID
Page name
Page type, such as those presented in
Source and content owner
Discards or content that should not be included in a new site
Subject
Notes or any other comments about the content

Figure 7-2: A sample content analysis spreadsheet

The key is to find common themes in the content—how it's created, stored, categorized, and used. In terms of navigation, you want to look for logical groupings of content and learn how people are likely to find information on your site. Then consolidate your findings so that you can make overall recommendations:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Just as an architect understands the properties of the construction materials used to build a house and an artist understands the qualities of paint and color, you need a fundamental comprehension of how web sites are put together. You may not be a programmer, nor aspire to become one. Still, it's critical to understand the basic capabilities and limitations of web technologies. The underlying technology of the site will constrain or enable the types of navigation solutions you can come up with.

For example, you may intend to support re-finding in your navigation system with features like saved items and favorites lists. However, if your site doesn't have the ability to set up user profiles and store account information, this may not be technically possible. Suggesting products via collaborative filtering in an adaptive navigation mechanism is convenient for the user, but the process is not simple to implement—the site technology may not even support such an option.

During the Analysis phase, there are three levels of technology to consider:

Platforms
Back-end technologies
Front-end technologies

With ubiquitous computing on the rise, organizations often don't want to limit themselves to delivery on just one "information appliance." The web site content and navigation system you design might eventually be destined for reuse on a mobile device, for interactive TV, or even on a refrigerator with a computer display. Find out what devices your design will ultimately be targeting; understanding the distribution to different devices allows you to design more flexible and effective navigation.

Consider, for example, the rapid increase of content delivery to all things mobile—cell phones, personal digital assistants (PDAs), pocket PCs, and even car navigation systems. Targeting both the Web and mobile platforms is difficult and changes how you approach creating navigation. Don't count on a site designed for web-only use to be effective on all mobile devices.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The final variable in the analysis equation is also the most important: the user. Navigation design is really about predicting the types of questions people will have when they come to your site, then matching the navigation to user expectations. But as with any prediction, there is the risk of being wrong. User intelligence is the practice of understanding how people use your site in order to reduce this risk.

Keep in mind that the outcome of user intelligence doesn't replace your judgment—it informs your judgment. User research does not mean "do what users say." Instead, it's about detaching yourself from your own perspective and focusing on user goals. In the end, your intuition is still very important to the design process.

User intelligence generally requires a range of techniques, including:

Reviewing secondary literature on a given topic or in a given field
Analyzing existing user data
Performing primary user research

There is no silver bullet. User intelligence activities are part of an ongoing design process. shows an approximate timeline for how activities described in this chapter (as well as in other chapters) can be usedto complement one another. Realistically, you may only perform a few of these on a given project, and the order may be different than suggested here.

Figure 7-4: An approximate timeline for user intelligence activities

Before conducting primary user research, consult reports and articles about trends in the field your site covers. You may not find a single, focused discussion of navigation design, but instead discover relevant comments scattered throughout your reading material. Zero in on these details, and bring them together to inform your research and design efforts. Here are some places to start looking on the Web:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Primary user research is the most important part of a user intelligence effort. There is no substitute for doing your own research. Important detail can get lost in a report. You need to see users' frustrations first hand or experience their delight when they find something new to truly understand their needs.

Although user research is usually done with broader considerations in mind, this section focuses on some of the methods that are most relevant to navigation design. No matter what your goal, planning a strategy before you begin will make your research far more effective.

First and foremost, establish what you'd like to get out of the research before you begin. Ask the wrong questions, and you'll get the wrong answers. Consider these questions in determining your research goals:

Why is the organization undertaking user research?
What questions would you like answered?
When will research take place?
Who is the audience for research findings?

After setting your goals, choose a research method. Don't make the mistake of doing this the other way around. Fit the method to the research questions. Secondary research and existing user data greatly shape the open questions you may still have. They point to the gaps in knowledge and to larger issues that require further investigation. The various methods are covered in detail in the next sections; for now, just consider the two fundamental approaches:

Qualitative methods tend to be exploratory in nature with no hypothesis to prove or disprove. Instead, qualitative methods seek to gain rich descriptions of user behavior. The data that is collected and analyzed is generally text, or what people say and do. For this reason, qualitative methods can often explain why people behave in a certain way, as well as uncover previously unexpressed needs. In general, qualitative research requires one-on-one sessions and targets a much smaller sample size than quantitative methods.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

After conducting research, you'll have to make sense of what you've found. Be careful that research findings don't get misinterpreted. There are several potential pitfalls to avoid:

Don't make quantitative conclusions for qualitative studies: A common mistake is to make quantitative conclusions from a qualitative study. If you interview five people and two make negative comments, for instance, you can't make reliable conclusions such as 40 percent of participants dislike the web site. Instead, with qualitative methods, focus on the things people do and say that explain their behavior, not the numbers.
Refrain from treating design research as if were science: Though many of the techniques may be similar, design research has a different purpose than scientific research. Design research methods are solution-oriented, with a focus on creating innovative artifacts, e.g., a usable navigation. Scientific methods generally result in abstract models and theories that apply across situations. This is an important distinction—one that you should be clear about up front.
Avoid mixing interpretation with personal preference: Conclusions from design research, though not scientific, are not mere guesses based on opinion either. An interpretation implies there is evidence to support a conclusion and it is more than just a hunch or best guess.
Try not to overgeneralize: Don't overgeneralize your interpretations and conclusions. If one person mentions disliking the Top New Stories feature on your home page, this doesn't mean that everyone dislikes it. Try to validate your conclusions. A mix of methods provides different perspectives and can indicate if your conclusions are on track.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Another efficient and effective way to reflect a great deal of information uncovered from user intelligence activities, scenarios are detailed descriptions of what the site should do from the user's perspective. They are important in describing the user experience. Scenarios can quickly communicate your vision of how the site will be used to a development team and stakeholders

Consider this example of a scenario from the beginning of the landmark article "The Semantic Web" by Tim Berners-Lee, inventor of the World Wide Web, and his colleagues. This scenario sets the stage for a broader, more technical discussion later on in the text:

"The entertainment system was belting out the Beatles' 'We Can Work It Out' when the phone rang. When Pete answered, his phone turned the sound down by sending a message to all the other local devices that had a volume control. His sister, Lucy, was on the line from the doctor's office: 'Mom needs to see a specialist and then has to have a series of physical therapy sessions. Biweekly or something. I'm going to have my agent set up the appointments.' Pete immediately agreed to share the chauffeuring.

At the doctor's office, Lucy instructed her Semantic Web agent through her handheld Web browser. The agent promptly retrieved information about Mom's prescribed treatment from the doctor's agent, looked up several lists of providers, and checked for the ones in-plan for Mom's insurance within a 20-mile radius of her home and with a rating of excellent or very good on trusted rating services. It then began trying to find a match between available appointment times (supplied by the agents of individual providers through their Web sites) and Pete and Lucy's busy schedules. (The emphasized keywords indicate terms whose semantics, or meaning, were defined for the agent through the Semantic Web.)

In a few minutes the agent presented them with a plan. Pete didn't like it—University Hospital was all the way across town from Mom's place, and he'd be driving back in the middle of rush hour. He set his own agent to redo the search with stricter preferences about location and time. Lucy's agent, having complete trust in Pete's agent in the context of the present task, automatically assisted by supplying access certificates and shortcuts to the data it had already sorted through.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Abraham Lincoln is reported to have once said, "Give me six hours to chop down a tree, and I will spend the first four sharpening the axe." Preparation is clearly as important—if not more important—than execution. But when projects begin, people tend to grab the closest implement, no matter how dull, and jump right into the detail.

Good planning ultimately saves time by focusing design decisions later on in the project. Web navigation design does not take place independent of project goals. You must at least be aware of key elements of project background.

For example, consider the stakeholders, the overall goals of the business (such as revenue targets and operational cost goals), and the site's goals. Understanding the vision, mission, strategy, and brand is also important. And in order to create a unique position in a market, it's necessary to examine competitor products and services. Finally, ask why this company is embarking on this web project at this time: Find the problem behind the problem.

Remember, you can't design effective navigation without understanding what it is you're providing access to. Gather existing content for analysis and use a survey to get an overview of the major content types, formats, and structures. Or, develop a detailed content inventory or audit in which every page is systematically reviewed and tracked. You need to become fluent in the language of the information you will be organizing and understand the general subject matter.

Likewise, understand the technology of the medium you are designing for. This doesn't mean you have to become a programmer, but you should become familiar with how the relevant platforms and back-end and front-end technologies work. Developing a navigation for a mobile phone presents different constraints than developing one for a web site.

Finally, and most important, pay attention to your users. User intelligence is a series of ongoing activities to reduce the risk that people won't be able to use your site navigation properly. This isn't a discrete task that can be easily crossed-off a project plan, and no single method will give you all the answers you are looking for. Instead, you'll have to blend a range of techniques that complement one another. The goal of user intelligence is to uncover user needs and expectations, which in turn inform navigation design.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Compare at least two of the computer-based card sort programs mentioned in this chapter. (Note that installation and setup of these programs is generally very quick and easy. You can start using each within 10 minutes).
1. What the advantages and disadvantages of each program?
2. What are the major limitations?
3. Other than facilitating statistical analysis, what are other general advantages of computer-based sorting programs?
Interviewing is a good way to understand more about your target population. Using the Web, find out the differences between directed interviewing and nondirected interviewing techniques. What are the advantages and disadvantages of each?
Create a task flow for performing a search on Google. Pick something you're looking for on the Web and try to find it using Google. Be as detailed as you can, down to the individual action. What happens after you type the first letter into the input field? What are the various conditions that can occur (e.g., no results, etc.)? What do you do on the results page? Represent the task flow first as an outline, then as a diagram.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Elements of the User Experience, by Jesse James Garret (New Riders, 2003).: This is a slim volume breaks down and explains the author's famous diagram of user experience design (www.jjg.net/elements/pdf/elements.pdf). Two elements of his diagram—Strategy and Scope—are of particular interest in relation to analysis as outlined in this chapter. This is a must-have book for any web designer.
Observing the User Experience: A Practitioner's Guide to User Research, by Mike Kuniavsky (Morgan Kaufmann, 2003).: This is a hands-on book full of practical information about conducting user research. There is detailed information on planning user research and participant recruiting. Most of the book focuses on user research methods, including card sorting. The text is clear and accessible, appealing to a wide range of readers.
Rapid Contextual Design: A How-to Guide to Key Techniques for User-Centered Design, by Karen Holtzblatt, Jessamyn Burns Wendell, and Shelley Wood (Morgan Kaufmann, 2004).: This book offers step-by-step instructions and detailed research tools for conducting contextual inquiries during fast-paced projects. It includes techniques for storyboarding, creating personas, and prototyping, among other things.
Strategy Safari: A Guided Tour Through the Wilds of Strategic Management, by Henry Mintzberg, Bruce Ahlstrand, and Joseph Lampel (Free Press, 1998).: In this comprehensive book on corporate strategies the authors survey ten schools of thought on strategy, bringing many different perspectives to the table. Strategy Safari is well-written with many examples to illustrate concepts. It is a good starting place for anyone interested in the subject.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Every link in hypertext creates a category. That is, it reflects some judgment about two or more objects: they are the same, or alike, or functionally linked, or lined as part of an unfolding series."

—Geoffrey C. Bowker & Susan Leigh Star Sorting Things Out: Classification and Its Consequences

Imagine you're planning a trip to Paris in the spring and coincidentally see an online advertisement for what looks like a good package price—better than what you've been able to find so far. You click on the ad and land on the home page of a travel service you've never heard of, but that appears reputable nonetheless. A quick scan of the teasers in the middle of page reveals that none of them are for the Paris trip you want. One of them is for something called Europe Tours, but that doesn't seem right and sounds like a group thing.

Still curious, you scan the main navigation options on the site: Flights, Hotels, Rental Cars—those are clear. But then you see options called Top Deals, Package Specials, and something ambiguous called Boarding Pass. Unsure, you click on Specials. Here, you see an offer for a flight to Paris, but without a hotel, as listed in the advertisement. You then convince yourself it must be under Top Deals. This, however, reveals a form where you can search for last minute deals, which also isn't what you want.

By now, the offer in the advertisement isn't looking so good, and the site's credibility is quickly diminishing. But you give it one last chance and click the Back button until you get to the home page. You then select Europe Tours option from the home page. To your surprise, this opens a new browser window to reveal what appears to be a separate service from the travel company. There is nothing there to indicate they have super deal for a Paris trip, and you quickly close that browser and get back to what you were doing.

What has happened here? You wanted to purchase a trip, and the travel service surely wants to sell it to you. But you couldn't. The individual steps to get to your ultimate goal prevented you from reaching it.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

It's no secret that brick-and-mortar stores are laid out to promote the sale of products. The candy bars, magazines, and other small items aren't placed at the checkout register by accident. And someone made a conscious decision to put the milk in all the way in the back. Promoting products and optimizing sales is a normal part of any business.

Bryan and Jeffrey Eisenberg, leading online marketing experts, detail a method for planning sites they call persuasive architecture. In optimizing a site to sell things better, the Eisenbergs point to three critical questions to ask from the beginning:

What is the action you want someone to take?
Who are you trying to persuade to take the action?
What does that person need in order to feel confident taking that action?

Personas and scenarios stand at the center of their persuasive architecture method. Together, they represent how visitors make decisions and reflect the process for buying online. The choices customers make that are captured in your personas and scenarios need to match how you sell products and ideas on your site. Bryan Eisenberg explains:

"When a customer makes a decision, that decision represents the culmination of a cognitive process. It may take place almost instantaneously or stretch out over a long period of time, but it's a process, not an event. Persuasive architecture weaves the buying process into the selling process."

Web navigation plays a central role in persuasion architecture and in aligning user goals with business goals. Note that even if you're not creating an e-commerce site, you are still selling ideas and communicating a message. Persuasion architecture plays part in these cases too.

This chapter investigates the three key aspects of this process:

Navigation concept: A concept is an abstract model of how the navigation works. It not only guides the team though development, but can also give users a clear pattern to follow when using the site.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

A navigation concept is a model of how people will navigate the site. It doesn't specify a solution, but instead provides the vision for how the solution should be created. A concept guides design and development for the entire team. In terms of persuasive architecture, a navigation concept represents how the site will encourage users to take certain actions. Two common ways of describing a site concept are by genre or metaphor.

As discussed in , recognizable forms or genres of information potentially improve visitor orientation and give a sense of context. You can also use them as the basis of a navigation concept. For instance, newspapers have a recognizable form: there is a front page, headlines, a lead story, and topical sections. Online newspapers typically retain some of these common genre-defining aspects of offline newspapers. But new elements are brought in as well, including links to blog postings, the ability to comment on articles directly online, and the inclusion of video footage. The basic concept of a newspaper—which we are all familiar with—is not lost online and serves as an underlying concept for news sites.

shows the home page of The Los Angeles Times (http://www.latimes.com/). The lead story, other headlines, and various sections are familiar within the newspaper genre. But some online-only aspects can be found, such as Most Viewed Stories, Blogs, and Videos. By treating these areas as further sections of the newspaper, the result is an online experience that borrows from traditional formats and extends them online.

Figure 8-2: The Los Angeles Times home page

Genre is important for navigation and for the overall usability of the site. Visitors can recognize the intent of the site easily and quickly based on existing knowledge and expectations. A recent study compared a genre-conforming news site with a genre-violating news site with the same content. The findings showed that following conventions and matching user expectations significantly improved performance, particularly when navigating the sites. The study also found, however, a consistent internal site structure allowed people to build a mental representation of a site, even the genre-violating version of the newspaper.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The information structure refers the plan or map of pages in your site. It is the skeleton of the site that you'll be filling out with page layouts and final designs, discussed in the following two chapters. As you investigate how to construct the navigation, keep the different types of structure in mind, including:

Linear structures
Webs
Hierarchies
Facets
Emergent structures

Of course, hybrids of these are not only possible, but common. A web navigation system may make use of any or all of these basic structures simultaneously.

Figure 8-5: A simple linear structure

In a simple linear structure, pages are arranged in a sequence, as shown in . Linear structures occur when people can't get to one page without having first seen a previous page. A site search is an example of a natural linear structure: you can't see a results page without entering a search on the search form. Wizards and online tests are other common examples of linear structures.

Or consider . This is the second step in setting up an account on Apple's .Mac service. To get here, visitors must first enter their personal details. These are validated by the system for format. On this screen, credit card details must be entered before proceeding to the third and final step. A simple Continue button moves the user through this structure one step at a time.

Figure 8-6: A simple linear structure

A hub and spoke structure can be considered an extension of a linear arrangement of pages. This is essentially a collection of linear structures from the same starting point (). You start out on a key landing page and navigate to other pages individually. From there, your main navigation path is back to the hub.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The structure of a site indicates the "physical" arrangement and connection of pages. It doesn't, however, determine how pages and content is thematically related. A hierarchy—which you'll most likely be dealing with—is agnostic to the categories of pages that comprise the structure. Regardless, if the navigation is categorized by subject, by date, or by audience, the structure will still be hierarchical. In addition to determining the site structure, the next step in navigation design is to consider the types of categories and topics that will be used to organize information. But note that defining a structure and organizing categories of content go hand in hand. One may not precede the other.

The organization of a site's navigation itself can be instructional, potentially helping visitors better understand the topic at hand. Providing a logical categorization of options and grouping them by a consistent scheme increases the ease with which people can comprehend and use a navigation menu. This in turn adds to the predictability of navigational links, potentially bringing visitors closer to their ultimate goal.

The general recommendation for navigation design is to create menus that share a common organization. For instance, it might be confusing to see the following options within a single navigation mechanism:

Kitchen Appliances
Search
About us
Download PDF Catalog
International Sites
Jobs

Instead, navigation design seeks to create menus out of a similar links. This also helps create a sense of purpose for a type of navigation, as discussed in .

Navigation is largely about creating relationships between content on your site. But keep in mind that ultimately there is no right or wrong way to design categories and organize your information. The objective is to organize navigation in a way that makes sense to users and achieves your business goals. To do this, you must explore alternatives and find what works best. Many different organizational schemes exist. Keep these in mind as you categorize content on your site and develop navigation options.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

A site map is a document that demonstrates the relationships between content and functionality in the site's architecture. It captures the site's concept, informational structure, and organizational scheme in a visual representation. A site map is a key deliverable in designing a web site, and it's useful to many project team members:

Stakeholders use site maps to see how the site will impact their business.
Visual designers identify page types and page layout needs from site maps.
Programmers visualize the scope and extent of the site from site maps.

There are many variations of site maps: the amount of detail shown, arrangement of boxes, use of color and shapes, and so forth can vary from designer to designer. However, the main purpose is the same: to effectively communicate your architecture to others. There are no hard and fast rules on how a site map should appear, but there are common elements of site maps, including:

Nodes: Pages in your site are the basic nodes in the site map, typically shown as squares.
Connectors: Nodes are connected to show relationships. Site maps generally don't show all of the associative links, but instead show structural and utility navigation.

By Victor Lombardi

Modern business operations and strategy are often inextricably tied up with the design of products, including navigation. Here's a simple example of how navigation changes to suit different strategies.

Let's say you are designing an e-commerce web site for a company called Firm that sells building materials. Firm has several distribution centers around the world and each center carries the same selection of products. For every geographical location shown on Firm's web site you might create a navigation bar listing the products in consistent, alphabetized categories:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

A site's architecture is the plan or blueprint showing how visitors will reach their goals on both the macro level of initial goals and micro level of individual actions. It also reflects how the site will encourage them to take a certain action. Referred to as persuasive architecture, your job is to align what you leaned about the business, content, and technology during Analysis with what you learned about visitors with user intelligence activities (). The site navigation is a key aspect of the where these two—user goals and business goals—are played out.

Architecture starts with a navigation concept, which underlies the physical structure of a site. When creating a navigation concept, you are building perhaps the single most important aspect that impacts a user's experience with your site. Keep in mind that it's hard to change a concept once a site is live, so exploring alternatives at this stage is critical. I recommended testing alternative concepts with users for early feedback. No amount of post-launch enhancements can fix an inappropriate concept.

The structure of a site represents how it's put together. Most often you'll be dealing with some kind of hierarchy. But other types of structures supplement and enhance a basic site hierarchy so that a mix of structures is usually present in any given site. It's important to note that structure and navigation are related, but not the same thing. The goal in creating navigation menus isn't to represent the structure one-to-one, but to provide only the navigation that is needed to access relevant areas of the site. This is discussed further in .

Traditional organizational schemes, such as by user type, by topic, or by task, can help increase the ease of understanding navigation menus. But there is no one correct way to group things together. It's only in terms of user goals and business goals that you can judge the appropriateness of an organizational scheme. Further, categorizing navigation options isn't always straightforward. Often you end up with miscellaneous schemes that defy a traditional scheme. In these cases, you can still create a cohesive navigation through page layout and visual cues.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The organization of information can get messy, even with simple schemes that we are all familiar with. This exercise begins with a simple task. On a separate piece of paper, arrange the following list in alphabetical order. Then answer the questions below:

El Paso, Texas Saint Nicholas, Belgium The Lord of the Rings Newark, New Jersey XVIIme siècle .38 Special St. Louis, Missouri New York, New York 1001 Arabian Nights The 1-2-3 of Magic Albany, New York #!%&: Creating Comic Books The Hague, Netherlands $35 a Day Through Europe H20: The Beauty of Water Plzen, Czech Republic
1. Did you put The Hague under T or H? Did you put El Paso under E or P?
2. Which came first in your list, Newark or New York?
3. Does St. Louis come before or after Saint Nicholas?
4. How did you handle numbers, punctuation, and special characters?
5. Now, assuming the italicized terms are book titles, what might be a more useful way to organize this list?
6. If the cities represent places you've visited and the book titles are ones you've read, how could chronology be used to order the list in a more meaningful way?
This quick exercise has two parts. First, organize all the things on your desk or in your desk drawer into piles or groups any way that seems natural to you.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Information Architecture: Blueprints for the Web, by Christina Wodtke (New Riders, 2002).: This book covers a range of core concepts in the field of information architecture. It's packed with practical advice and is downright fun to read.
Practical Information Architecture, by Eric L. Reiss (Addison-Wesley, 2000).: This is a concise book filled with timeless, practical tips for structuring web sites. Starting off with solid discussions of site goals, target audiences, and measuring success, among other things, Reiss never looses sight of the bigger picture of creating a successful site architecture.
"A Simplified Model for Facet Analysis: Ranganathan 101," Canadian Journal of Information and Library Science, by Louise Spiteri (v. 23, April-July 1998): 1-30. http://iainstitute.org/pg/a_simplified_model_for_facet_analysis.php/.: The technical literature on faceted classification is dense, long, and intimidating even to those interested in the field. Louise Spiteri, professor at Dalhousie University, provides a "boiled down" version of the key principles in this article. But make no doubt: Spiteri's article itself is not light reading. Still, it is an interesting place to get detailed information on facets.
Sorting Things Out: Classification and Its Consequences, by Geoffrey C. Bowker and Susan Leigh Star (The MIT Press, 2000).: This book tackles Classification Theory head on. Though dry and academic, the authors liven up the subject with many examples. They successfully demonstrate the potential political and ethical consequences categories can have.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Less isn't more; just enough is more."

—Milton Glaser

Navigation provides the narrative through your site. It's the story people follow to get the information they want. If the navigation concept is your premise and the site structure is your plot, you start telling the story with page layout. Some of the same principles of writing a good story hold true in designing navigation:

Focus on one idea per web page.
Keep extra details to a minimum.
Hold the user's attention.
Use visuals to enhance.

Ultimately, you want to create a flow in navigating through the entire site. In terms of page layout, this means you have to consider how your system of pages varies the position of navigation, labels, and function from page to page. A significant part of orientation while navigating is about how pages change from one to another, referred to as transitional volatility (see ). Layout plays a large role in creating this desired sense of movement through a site, in addition to a page's labels and text.

Within the overall site development process, laying out pages proves to be a critical phase. It's at this point that people react to the design—more so than at previous stages. When the page layouts start to appear, conflicting perspectives from various project members become apparent. A systematic approach helps avoid unnecessary debates based on personal opinion and keeps your story on track.

There are three main areas of concern in the layout process:

Determining navigation paths: In selecting the menus and mechanisms for your navigation, it's usually not necessary to reproduce the entire site structure so that you can get anywhere in the site from every page. Instead, identify the optimal routes people will likely travel to reach your key content and model the navigation around those. Use personas and scenarios to inform the choice of mechanisms to avoid over-designing the navigation system.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Site structure and navigation are related, but not the same thing. A detailed site map shows all pages of a site, but the navigation system is a limited view into that structure. From any given page in the site, navigation is a constrained window of all available pages.

illustrates possible navigation paths from a given page. Main navigation may provide access to the top-level pages in the site (thick red lines pointing up); a local navigation allows people to navigate further down (blue lines); and associative links traverse the structure as need to bring together related content (thin red lines).

Figure 9-1: A window of navigation within a site structure

To create this window of navigation, you must first recognize the nature of your site's structure, even if you're not the one who designed it. You'll most often deal with hierarchies, but elements of linear structures and web-like structures may also be involved. A navigation system is ultimately a mix of different types of access to information within a given structure. To determine the most effective mix, begin by identifying the optimal paths through your site.

A site's navigation is often created from the top down. The designer starts with the home page and determines all the ways to reach various parts of the site, level by level. By the time the content pages deep within the site are reached, the system is more or less fleshed out and the routes to those pages are already locked into place.

From a user's standpoint, however, the home page may be the least interesting page on the site. It's usually a mere stop on their way to where they are going. They care much more about the information and services your site has to offer. Of course, the home page often plays a key role in giving an overview, such as with intranets and news sites, but it's usually not the target page visitors are seeking.

Further, people may not enter the site on the home page. They may follow a link from a search engine, an online advertisement, or from another site. They may not have the chance to retrace those top-down routes to content pages you've carefully planned out. Therefore, you also need consider how people will get to your content from locations other than the home page. This leads to a simple but important piece of advice:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

People make sense of web pages very quickly based on layout, even before they start reading any text. Consider, for instance, the recent practice of providing thumbnail images of home pages in search results, such as with the Alexa search engine (www.alexa.com, ). And technologies such as the Snap preview plug-in for Firefox allow site owners to give a page preview for any external link on a site (www.snap.com, ).

Figure 9-3: Thumbnail images of web pages in Alexa search results

Figure 9-4: The Snap preview plug-in for Firefox

Such small images provide little or no textual information themselves. Yet, visitors can identify a great deal about a site just from its basic layout—even in miniature form. People are able to recognize sites they already know immediately. With unknown sites, people may be able to deduce the genre (e.g., this is a news site, that's a blog) from just the thumbnail image. This provides additional cues that help with orientation.

When it comes to navigation, where it's located on the page and how it appears indicates its function. Navigation mechanisms should therefore work together as a logical visual system, along with all of the other page elements. Creating a consistent visual system aids in predictability and eases reorientation when navigating, providing a broader context for understanding content.

As you probably already noticed, page layout proves has many interdependencies. For instance, the number of options depends on the length of labels and vice versa. It's difficult to separate all of the elements that comprise navigation layout into discrete elements. Fields and disciplines overlap—a key reason why conflicting opinions are often heard at the point. This often requires revision and compromises in the design of the navigation system.

To prepare for change, start with a format that is easy to manipulate, such as with sticky notes or whiteboards. Try different arrangements of the mechanisms and navigation menus you'll need, and discuss these as a group. Explore alternatives, and weigh the trade-offs inherent in the design process.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

When dealing with large web sites, it's quite impossible to hand-design the layout of thousands of pages, nor is this desirable. Instead, rules are put in place to govern the display of navigation and content. These rules are captured in what are called page templates.

Templates are predefined collections and arrangements of navigation mechanisms. Note that two or more mechanisms may come together to form a larger navigational module. For instance, the global navigation area may consist of a linked logo, the main navigation tabs, and utility links. Within the template scheme, this may be represented as a single element, rather than three separate mechanisms. Your template design can then refer to the global navigation module as a single unit rather than three separate mechanisms.

A template-based approach is important for consistency: it ensures that a related links module, for instance, will always appear the same way across pages of the site. Templates also allow for reuse of modules, facilitating implementation. It may not be necessary to redesign and reprogram common modules, but instead you can use them again as needed. This approach requires a modular concept to the layout: you must be able to abstract navigation rules across pages.

Navigation design for large sites is really about creating a formula for which navigation options appear on pages. It is a mapping of navigation mechanisms, types, and modules to form the overall navigation system. In creating this system you need to consider such things as:

Display of navigation modules: A template definition indicates all of the modules that could possibly appear on a page. You need to indicate which are mandatory and which are not.
Position of navigation mechanisms: Navigation modules tend to stay in a constant position on the page. But you need to account for how the layout will adjust if a given module is not present. And occasionally, a module may have variable positions. For instance, a related links component may appear on the left or right side of the page, depending on the page type and its location in the site.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

In the broadest sense of the word, wireframes are preliminary sketches of pages. They show the skeleton of the navigation system independent of the final visual design, or the primary layer of basic information needed on each page. Wireframes are a visual tool for working out how you will progress from the requirements, concept, and site map to designed pages. They allow you to deconstruct the problem and propose appropriate solutions. A primary function of wireframes is to capture your page template layouts.

There are different approaches to creating wireframes. Some aspects you should consider are:

Fidelity: As with prototypes, there are high-fidelity and low-fidelity wireframes. Low-fidelity wireframes may not even show layout. Instead they may just be a list of navigation types, content, and the functionality needed for each page. High-fidelity wireframes might clearly suggest a final design, including the size and position of navigational elements. Most web designers create wireframes that fall somewhere in between high- and low-fidelity wireframes.
Display of labels and text: One school of thought suggests using dummy text for wireframes. This is often referred to as "Greeked" text. The advantage to this approach is that other team members won't focus on the content, just the structure of the pages themselves. The other school seeks to reflect representative content in the wireframes. This can catch layout issues caused by long labels and dynamic texts before you implement the site. This is good for user testing or presenting to stakeholders. If you use this approach, don't include temporary working labels for the navigation. Show the navigation texts as they should appear in the final site as early as you can.
Format: There is a range of formats for creating wireframes—everything from using paper to a high-end graphics program. Frequently you'll have a mix of both: at first you might sketch pages on paper, and then later capture these with a program. HTML wireframes are also possible and offer the advantage of linking pages together. This allows you to check how pages transition from one to another, or to check the "feel" of the site without the "look."

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Laying out pages is a critical point in the design process when many pieces come together. Abstract aspects of the site design, such as business goals or site structure, become more tangible once navigation menus and content appear on pages. This is often when potentially conflicting opinions from the development team come out. To steer discussions toward a common goal, a systematic approach to laying out the navigation options can help.

Site navigation provides a narrative for people to follow to get to the content they are looking for. Though labels and text clearly play a role in guiding people through your site, the layout of navigation communicates a great deal about its purpose and function.

In laying out web navigation, begin with end pages that people are searching for, not with the home page. Using personas and scenarios, determine the navigation your target groups will need to get to and from key pages. Don't try to reproduce the entire site structure. Instead, include only the key navigational elements. Provide enough information scent so that your visitors can navigate effectively without overwhelming them. Also consider how people will get to your important content pages, and plan ahead on other pages.

The visual logic of the page must consider all design elements, of course, including text and graphic elements. But the visual relationships you create are critical for navigation. People can make out the function and role of page elements instantly. Further, the final presentation of the site navigation also communicates a great deal about the role and purpose it plays, discussed further in the next chapter ().

Page templates capture your navigation system and the rules by which it appears and behaves. Templates are advantageous for consistency, but can also lead to inflexibility when variation is called for. Ultimately, the design of templates should vary the position, labels, and behavior of navigation areas in a way that creates a flow and sense of movement through the site.

Wireframes are key deliverables in creating page layouts. They reflect much of the project requirements and other information gathered to date, and they show how you will coordinate the macro and micro actions of a persuasive architecture (). Wireframes are a key tool in navigation design that allow you to explore alternatives. Judicious use of them will make implementing your design much smoother.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Visit any well-known online shopping or auction site, such as Amazon or eBay, and navigate to a product you're interested in purchasing. You don't have to actually buy the product, but from the home page, sketch the approximate layout of the pages you encounter as rough wireframes using simple shapes. Then answer the following questions:
1. What are the different page types you come across? (See for a list of page types.)
2. How do the elements vary and move position from page to page?
3. How does variation in page templates help or hurt navigation?
Find the web site of your local newspaper. Select any article that interests you. Without scrolling down, answer the following questions:
1. What percentage of screen is devoted to navigation? To the newspaper article? To other elements?
2. Is this a balanced layout? What could be better?
Study the two images of CNN ( and ). The first is the home page; the second is the technology section page, which is reached by clicking Technology. How does the main navigation transition from one page to the other? What are the differences and similarities between the navigation on both pages? What are the advantages and disadvantages of such a transition?

Figure 9-22: The CNN.com home page

Figure 9-23: The Technology section of CNN, one level down from the home page

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Communicating Design: Developing Web Site Documentation for Design and Planning, by Dan M. Brown (New Riders, 2006).: This is a practical book with a clear focus: creating design documentation. Brown covers ten design deliverables in detail, including site maps, flowcharts, wireframes, and screen designs. This is a very hands-on book that goes into great detail of creating design deliverables with many good examples. It's highly recommended.
Homepage Usability: 50 Websites Deconstructed, by Jakob Nielsen and Marie Tahir (New Riders, 2000).: Based on analysis of home pages from 50 different sites, this book presents guidelines for creating home pages. The authors first present the guidelines, and then a detailed analysis of each home page analyzed. In doing so, they illustrate many principles of page layout, particularly balancing content, navigation, and other elements.
Information Architecture for Designers: Structuring Websites for Business Success, by Peter Van Dijck (RotoVision, 2003).: This is a very visual book with many images and diagrams. It covers a gamut of topics surrounding information architecture in general. There is a brief, but very good section on wireframes. Many case studies throughout this book bring the theoretical and procedural explanations to life.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Clutter and confusion are failures of design, not attributes of information."

—Edward Tufte Envisioning Information

People like context-rich information. How we find, organize, and even understand information is influenced by how it's displayed. Content that is presented with color, texture, and style has relevance to our work and to our lives. The visual treatment of navigation is not merely a "nice-to-have," but crucial to its perception and use. It can be the difference between usable and not usable, between credible and not credible, or between found and not-found.

In determining how to present navigation, the design process once again proves to be multidisciplinary. You must bring together divergent perspectives from team members and reconcile differences. Clear goals and a solid navigation concept help build a common understanding, but you can still expect conflicting opinions at this stage.

The visual presentation of navigation is also interdependent on other aspects of its design, such as navigation types, labels, and page layout. This means going back and forth between elements of your navigation and making compromises as needed. The maximum number of horizontal tabs, for instance, depends on the font size, labeling, position, and spacing of options. This, in turn, must synch up with the architecture of the site. Navigation design is never a linear process from beginning to end.

The overall aim of the Presentation phase is to visually guide visitors through the navigation system and to enhance the overall information experience. This involves three larger areas of concern, each discussed separately in this chapter:

Information design
Interacting with navigation
Graphic design

Broadly defined, information design deals with the display of information to make it easier to use and understand by humans. The field draws on graphic design, typography, linguistics, psychology, ergonomics, computing, and other related areas. Information design is a wide-ranging discipline that considers both offline and online media. In terms of web design, it is concerned with the clarity information and with enhancing the understanding of your site's navigation and content.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Broadly defined, information design deals with the display of information to make it easier to use and understand by humans. The field draws on graphic design, typography, linguistics, psychology, ergonomics, computing, and other related areas. Information design is a wide-ranging discipline that considers both offline and online media. In terms of web design, it is concerned with the clarity information and with enhancing the understanding of your site's navigation and content.

Edward Tufte, professor emeritus at Yale University, has done some of the most important work in information design. He is best known for his three books: The Visual Display of Quantitative Information, Envisioning Information, and Visual Explanations. Above all else, Tufte teaches that content should be allowed to speak for itself, with as little ornamentation as possible.

A few principles of information design espoused by Tufte are particularly relevant to navigation design:

Negative space: Areas on the page that contain links, text, and images are called positive spaces. Negative spaces are the areas in between. These two work together visually. Areas of positive space that are near each other, but not touching, can give the illusion of a third shape between them. Such negative space adds to the clutter effect of a page and may be detrimental to your design. The example in demonstrates that the proximity of the three black bars gives the illusion that two white bars exist between them. Use the white space in your layout to your advantage and avoid creating the perception of unnecessary elements on the page.

Figure 10-1: Negative space between the bars
Chartjunk: Chartjunk, a term Tufte coined, refers to anything unnecessary in an information display. Often people think they are enhancing information with added graphics and lines, when their additions only detract from it. A simple example of chartjunk is a table with dark grid lines. Unless the reader's focus should be on the table itself, lighter lines allow the information on the page to be scanned and read more quickly.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The Web is not a static medium. People click, search, browse, and explore an endless chain of links. Beyond creating navigation that is easy to read and aesthetically pleasing, you also have to design for use. Three aspects of interacting with navigation that are particularly important are:

Underlining links
The size of the clickable navigation options
Rollover effects

Each is discussed in turn in the following sections.

To distinguish them from normal text, the default style that most browsers apply to hyperlinks is blue and underlined. Although there is nothing inherent in links to suggest this styling and it is somewhat arbitrary, web users have come to learn this convention very quickly. And the double coding of links—blue and underlined—means that people who are color blind or who have black-and-white monitors can still identify them.

But underlining text can add to the overall visual complexity of web pages. Stacks of underlined links are generally harder to read than the same links would be without the underlines, for instance. And because underlining indicates clickable navigation, that means using underlining in place of italics for a book title or for emphasis may cause confusion.

To avoid the potential negative effects of underlines, some designers remove them. In many cases this can improve readability and lead to a cleaner design overall. Take the Yahoo! home page, for example (). Practically everything on this page is clickable, but no links are underlined. Links are only slightly distinguishable from text by their color (dark blue). If every link were underlined, this page would seem considerably busier and less readable. The longer text links in the In the News area in the lower left in, particular, are easier to scan without the underlines.

Figure 10-9:

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The appearance of navigation plays a critical role in its perception and use. Background color, size, image positioning, and alignment can either cause or alleviate banner blindness, for instance. In turn, the visibility of navigation options can be the tipping point between meeting business goals and not. The graphic design of a site goes a long way in creating and reinforcing an online brand image, as well as the overall character of the site. Research shows that the single biggest factor influencing the credibility of a site is its visual appearance.

In terms of navigation, a primary consideration is whether to use plain HTML text or graphic images for menu options. Text-based links have many advantages over graphics because they:

Load faster than graphics
Can show visited link status by changing color
Are generally better for accessibility: screen readers have an easier time with text and users with poor eyesight can increase the font size
Can be easier to manage with content management systems

But graphics have a different quality and aesthetic than plain text. They can also create desired visual priorities and effects. The rounded corners of tabs, for instance, generally need to be created with images. Depending on the goals of the web site, graphics may be appropriate and necessary. Graphic images can:

Give a three-dimensional appearance to buttons and navigation bars
Make use of fonts that may not be installed on users' computers
Create rollover effects and other highlighting options not possible with plain text
Have an overall finer quality and appearance than text links

As the capabilities of CSS improve, more and more of these types of effects are possible without images. In general, you should reduce the use of gratuitous graphics where you can and rely on plain HTML and CSS for improved performance, usability, and accessibility. But at the same time, graphic images can help you reach certain aesthetic goals of your site design. Like so many other aspects of site design, making decisions regarding the use of graphics or plain text is about balance and trade-offs.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Presentation, the title of this chapter, has two meanings. First, it refers to how the navigation will appear on the page to site visitors. But it also refers to communicating your designs to others on the development team. After you've performed analysis, architected the site, determined a layout, and designed the final pages, you must be able to clearly explain your to work to others.

Unlike creating a site map or wireframes, which allow you to consider multiple design directions, this stage in the process is about capturing and documenting the final solution. This is not to say that no revision is involved, but you shouldn't be freely exploring alternatives at this time: it's time to deliver. Note that you probably won't be just specifying navigation, so you'll have to consider other parts of the site's design as well.

To communicate your navigation system effectively, use screen designs and prototypes to show how it will look and user interface specifications to describe how it will work.

Screen designs show the final navigation in context of finished page designs, reflecting and blending layout, alignment, text design, color, icons, imagery, branding, and business goals, among other things. As with wireframes, you needn't show every page in the site; instead, you should generally reflect page types and templates.

Typically, you'll create screen designs in a graphics program such as Adobe Photoshop, which means you're creating static images with fixed proportions. But keep in mind that web pages are flexible and can fit different browser sizes. The "wonderful world of Photoshop" may not correspond to the realities of HTML programming and variable page widths. Make sure that your designs are flexible enough to survive various display configurations on the Web.

Creating HTML prototypes is another, perhaps better, way to reflect the design of final pages. In addition to showing color, font, images, icons, and other page elements that might be captured in screen designs, HTML prototypes allow you to work out details of the page construction.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

People navigate the Web based on a range of cues. Labels provide a great deal of direct information, of course, but there are more subtle aspects that people key in on, such as the page layout and the function of navigation menus. The visual presentation of navigation proves to be critical as well. It's not just about decorating the navigation or coloring it in. Instead, a good visual design can guide visitors through a site.

Existing principles from the field of information design can help you understand how to better present navigation. Be conscious of your use of negative space and don't let chartjunk creep into your design. Layering information allows you to provide clear focus on key information.

The design of text is vital for navigation. Choices of typeface, case, size, text weight, and alignment are all within your control. Use the tools of typography to create a visual hierarchy in the navigation. On well-designed sites, people don't have to hunt for the next logical option: the navigation leads them through it.

But the Web is not static like print media; using the Web requires action. You must consider how people will find and click the links you provide in the navigation. This includes considerations of underlining links, target size, and including rollover effects to enhance that interaction.

Color also plays a role in navigation. In particular, color-coding is a common tactic for distinguishing function or content areas. Color can provide orientation, as well as a sense of movement through a site. Though perhaps not immediately perceivable by visitors, a consistent color scheme improves the overall information experience. Icons can also enhance navigation. If designed effectively, they can serve as visual signposts that facilitate scanning and differentiating navigation options.

Finally, you need to communicate your navigation design to others for implementation. Screen designs, prototypes, and user interface specification documents are three deliverables that capture the final solution. Generally, you want to reduce the amount of documentation you need to produce. Before beginning, discuss which deliverables are needed on the project and create these to fulfill your audience's needs. Outsourced projects may require very detailed specifications, whereas agile projects may have no documentation. In any event, remember to focus your collective team energy on the end product and not the documents needed to get there.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

To simulate the importance of target size, try this: if you're right-handed, use your left hand to operate the mouse; if you're left-handed, use your right hand. Then attempt to navigate through your favorite site. What problems do you have? What would have made user experience in using the site easier?
Sketch icons for the following terms commonly found on web sites:
1. Jobs
2. Site map
3. Privacy Policy
4. Help
5. Home
6. Products
7. Services
8. Support
Which were more difficult than others? Why?
Color and text are intertwined. The left and right hemispheres of the brain see different information: the left processes the color, while the right wants to parse the text. To demonstrate this, read the table of colors in out loud, but say the color of the text and not the word.

Figure 10-21: Color and text are closely related

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Envisioning Information, by Edward Tufte (Cheshire, CT: Graphics Press, 1990).
Visual Explanations: Images and Quantities, Evidence and Narrative, by Edward Tufte (Graphics Press, 1997).
The Visual Display of Quantitative Information (2nd Ed.), by Edward Tufte (Graphics Press, 2001).: These three books are the classic trilogy on information design from Edward Tufte. This is not easy reading, but at times simply mesmerizing. The quality of a graphics in the books is also beyond most other printed works, and the examples are well-researched.
Site-Seeing: A Visual Approach to Web Usability, by Luke Wroblewski (Hungry Minds, 2003).: A site's visual design has a direct and profound impact on how we perceive, use, and navigate web sites. This book contains hundreds of well thought-out examples from the Web to illustrate this point. Wroblewski covers the design of many navigation mechanisms in detail, as well as use of space, color, fonts, and many other visual design elements.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"The nature of the query is an evolving one, rather than singular and unchanging, and the nature of the search process is such that it follows a berrypicking pattern, instead of leading to a single best retrieved set."

—Marcia Bates The Design of Browsing and Berrypicking Techniques for the Online Search Interface

Searching is commonly considered an alternative to navigating. Basically, a search coordinates a person's keyword query with pages that contain that term or terms. Navigation, on the other hand, allows people to browse to desired content, providing an important overview of a site and helping people determine relevance. But are these alternate or complementary approaches?

From a user's perspective, navigating and searching aren't necessarily contrasting activities. People just want to find the information they need. Integrating navigation and search, then, better supports how people really look for information.

People aren't naturally "search-dominant" or "link-dominant;" instead, whether a person searches or browses is situational. For instance, if you're looking for the manual for your mobile phone on the manufacturer's web site, you might search for the model number directly from the home page (a known-item search). But when you're looking for a new phone to purchase on that same site, you might browse their products (exploratory searching). Information needs dictate the method of seeking.

This chapter considers navigation in the context of keyword searching, suggesting supportive navigation elements and techniques for before and after searches. In addition, the chapter investigates the University of California Berkeley's faceted browse interface, which stands as an example of closely integrating navigation and search.

There are potentially many ways to integrate browser mechanisms into the search process, starting with the search form itself. You can include options, such as search scoping menus and words wheels to let people zero in on target content and pre-filter results, or you can prompt terms for aid in formulating a search query.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

There are potentially many ways to integrate browser mechanisms into the search process, starting with the search form itself. You can include options, such as search scoping menus and words wheels to let people zero in on target content and pre-filter results, or you can prompt terms for aid in formulating a search query. Canned searches combine navigating and searching so that clicking a link actually runs a search in the background. The key is to provide both browsing and searching options, enabling visitors to switch strategies as needed.

Some search forms include a scoping option that enables people to set a narrower focus on the search prior to clicking the Go button. Frequently, a drop-down menu contains the site's key content areas, reflecting the main navigation. Visitors select a category from the menu to limit the range of content searched. Sites with distinct content areas or with a lot of content benefit most from the ability to scope a search.

The web site for Eddie Bauer (www.eddiebauer.com, ), a large U.S. sportswear manufacturer, provides a simple drop-down menu to scope a search on the home page. The categories in this menu match the main navigation options for the most part. The distinctions are clear, which can help pre-filter results. For instance, a man searching on the term "shoes" could select Men from the menu, and he then wouldn't get women's footwear in his results.

Figure 11-1: Categories in a search scope menu on the Eddie Bauer web site mirror the site's main categories

A word wheel shows a small piece of a list of terms already in the search system. It dynamically matches user-entered characters and quickly displays the appropriate portion of this list. For example, type N, and a word wheel would show the first five or ten words that begin with N. Then type the letter "A," and the list jumps to the first word beginning with NA, and so forth. At any time, you can select a search term from the word wheel menu. Deleting a character usually jumps back in the list to the matching point.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Frequently people have a word or phrase in mind and just want to search as quickly as possible without carefully formulating a query. When faced with the results, however, they suddenly discover they need ways to refine the search. Navigation techniques, such as topics links, clustering, grouping, and making search suggestions, can help. You've probably already seen many of these without realizing. Navigating search results can aid greatly in narrowing and focusing a search.

Search results often contain details about each page that was found, as well as the topic of each page. If the topics for each page are linked, clicking one leads to other pages for that category, enabling people to navigate to more stories on a given subject that matches their interests.

For example, each news story found on Digg (www.digg.com), a community-driven news story portal, belongs to one of 35 topic categories. Search results include the topic link for each story on the right of the last line for each hit (). Clicking on topic link shows a new list of items for that category.

Figure 11-5: Digg.com search results allow people to browse to the topic of any story in the list

More sophisticated search engines automatically group similar results by topic into subsets, sometimes displaying a list of the subsets along one side or the top of the page as a type of navigation. Clicking on a subset then filters the results, displaying a more manageable list of items. You may have already seen such techniques on Amazon.com, for instance, where searching on popular topic like Star Wars provides a staggering main list of results. A look at the left edge of the page, however, provides links for viewing only DVD, Books, or Toys & Game results, among other categories.

Two common methods of producing these subsets are clustering and grouping. Technically, there is a difference between these approaches, although the terms are often used interchangeably.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

So far, the techniques mentioned in this chapter represent individual approaches to integrating navigation and search that you can merge into an existing web site. The faceted browse interface, on the other hand, which is a system for navigating large bodies of information developed by researchers at the University of California, Berkeley, offers a more holistic integration of search and browse.

This interface relies on facets and faceted classification as a means of structuring information (see ). Facets offer an alternative to hierarchical structures. Instead of creating a tree structure and fitting items into that structure, facets seek to describe the properties of a thing.

A facet is nothing more than a category. But it's the arrangement of categories that is important in faceted classification. Facets are mutually exclusive dimensions or properties of the object they describe. Facet categories then have values within each. Unlike hierarchies, these values from different facet categories aren't structurally related to one another. Facet categories can be thought of as independent buckets of values. This allows for any number of ways to approach the objects in a collection.

The classic example for explaining facets is with bottles of wine. There might be several key properties by which to describe wine, such as Region, Type, and Price. Each of these is a mutually exclusive facet. For instance, the values under Region aren't dependent in any way on those in Type or Price. Choosing values from a facet category then filters out all other values from that facet. In other words, a wine can't be both red and white at the same time.

By selecting Napa Valley, CA from the Region facet for a collection of wine, all other values (e.g., France, Italy, etc.) for that facet are omitted. Then selecting Red from the facet Type would filter out all non-red wines. Finally, choosing a price category for Under $20 would limit the number of wines to an even smaller number. You're then left with the intersection of the selected values from those three facets: Napa Valley, red, and under $20.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Navigation and search need not be mutually exclusive activities. There are potentially many ways to integrate the two. For instance, before conducting a search, navigational elements such as search scope menus and word wheels allow people to browse pre-existing categories. This can help avoid getting no results while communicating the breadth and type of information included in the search. Additionally, navigation links themselves can invoke a search via a canned search. Even main navigation links can be canned searches and lead to a dynamic results page instead of a hand-crafted gallery.

After a search is conducted, techniques such as clustering and grouping allow people to refine the results by browsing categories. Clustering automatically groups results into similar sets and creates a label for each set on the fly. With grouping, search results are sorted into predetermined categories. Suggestions for search terms can also be made on the results side of search, as well as recommending top hits manually (also called best bets).

The overall goal of such approaches is to integrate navigation and search for a richer information experience that mirrors how people naturally seek information; namely, they move around, changing strategies rapidly and switching from navigation to search as needed.

Finally, facets offer a powerful alternative to structuring information than hierarchies. It's difficult, however, to create an interface that exposes facets in a way that novices can understand. Researchers at the University of California, Berkeley, have done just that. The Flamenco interface allows average web users to intuitively search and browse facets in an integrated way. Other examples of the faceted browse approach include the library catalogue for the North Carolina State University library, based on the guided navigation system developed by Endeca, and the search and browse features on Epinions.com.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Conduct a search for the term "laptop computer" on eBay.com or eBay in the country where you live using the appropriate translation. Which of the following are present before and after doing the search?
1. Scoping options
2. Word wheel
3. Canned searches (browse categories to determine this)
4. Clustering
5. Grouping
6. Suggestions and best bets
Then do the same search for Amazon.com or Amazon in your country.

Now purposely misspell the terms, like this: "laptpo computer." How does each site handle misspellings? Which is better? How could both improve?
Think back to the last large purchase you made, such as a car, home, or even which school or university to attend. You probably had criteria by which you made that decision. For example, for a car you might have wanted a particular model, within a given price range, and a particular color. What were the primary criteria used in your decision making process? How could these be represented as facets? What were the possible values for each facet?
Examine your personal collection of CDs or books. What are all the properties of them that are important to you? For books, the traditional facets are author, title, and subject. What other facets are salient?
Now suppose you could create a database to catalogue your books or CDs. How would you describe the collection using facets?

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Design Recommendations for Hierarchical Faceted Search Interfaces," by Marti Hearst, ACM SIGIR Workshop on Faceted Search (August, 2006). Available online at: http://flamenco.berkeley.edu/papers/faceted-workshop06.pdf.: After 13 years of research on faceted browsing, Marti Hearst, head of the Flamenco project at the University of California, Berkeley, summarizes the group's key findings as a set of design recommendations. This article is short and practical. See the many other key publications of the Flamenco Search Interface Project: http://flamenco.berkeley.edu/pubs.html.
"How to Make a Faceted Classification and Put it On the Web," by William Denton. (November 2003). Available online at: http://www.miskatonic.org/library/facet-web-howto.html.: William Denton offers an excellent summary of facets, as well as practical tips on how to create and use facets on the Web. He references key academic sources, but keeps the text light and readable. This is an excellent starting point to understanding facets with how-to information.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"An understanding of how we categorize is central to any understanding of how we think and how we function, and therefore central to an understanding of what makes us human."

—George Lakoff Women, Fire, and Dangerous Things

People naturally tend to categorize things. It's how we make sense of the world—one drawer for socks, another for shirts; food in this kitchen cupboard, dishes in that one. Grouping and labeling helps us find things later.

In the digital world, we create personal systems of organization with computer files and folders. Some intrinsic characteristics of information, such as file type or date, help by enabling you to sort your emails by time received or search for only PDFs, for example. But you also create folders and give files names.

All of this searching and organization relies on metadata, which is commonly defined as "data about data." Metadata are the labels used to describe objects: documents, books, photographs, MP3s, web pages, and so forth. They give us handles to grab onto when organizing information. A computer doesn't know that a photo on your hard drive is of the Eiffel Tower taken on your trip to Paris in 2005 unless you tell it so. By attaching metadata to the image, finding it becomes easier.

In the broadest sense of the word, tagging, the subject of this chapter, is not a new activity. Librarians and indexers having been "tagging" books with subject headings and keywords for years. Tags are simply metadata we apply to resources and objects on the Web so we can find them later. However, the way in which tagging gets done in open, collaborative systems on the Web using such services as del.icio.us and Flickr is unique and innovative.

This chapter looks at social tagging systems and some of the exciting possibilities they bring with them. But to be useful, a tagging system must also be navigable. The discussion here therefore focuses on navigating social tagging systems.

The traditional classification of, say, books relies on standardized classification schemes called

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The traditional classification of, say, books relies on standardized classification schemes called controlled vocabularies. A controlled vocabulary seeks to clarify language by mapping variant and related terms to a preferred term. In other words, if you had to decide what to call a small, portable computer, a controlled vocabulary might direct you to use notebook and not a variant term such as laptop, lap-top, or even note-book. Overall, this represents a top-down approach: The classification scheme is already in place, and when a new item needs to be added, it's assigned a topic, often by a trained professional.

Tagging offers an alternative to controlled vocabularies schemes with a bottom-up approach to classification. In tagging systems, any user can assign freely chosen terms to a resource or object on the Web—such as a page, photo, or video—in order to be able to find it again. The terms used to tag a resource can be very informal and personal, and tagging systems lack a predefined structure inherent in controlled vocabularies. If you want to tag a web page with notebook, iBook, and lap-top, you're free to do so, even if your neighbor uses the terms laptop and portable computers.

The use of natural language to describe resources is a strength of tagging systems. Further, with tagging, you apply a keyword to the resource rather than placing the resource in a category. This means a given resource can have any number of tags, allowing for multiple browseable paths through the tagged resources. This potentially overcomes the vocabulary problem discussed in .

But tagging systems often generate what is called "meta-noise" in the classification scheme. This is includes such things as misspelled tags (e.g., bithday, brithday) and unique compound tags (e.g., newyorkcity, programming/php). People also use tags that have no meaning to a wider community (e.g., mydog or mystuff), which may result in single-use tags that appear only once (e.g., bobandsueswedding). Such tags don't contribute to the broader use of the tagging system, but effectively track resources for a given user or group.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

There are two primary reasons why people tag:

They want to find something of value at a later point in time.
They want to share a resource or object with others.

In both cases, navigation plays an important role. To help understand this, consider three distinct activities in the tagging process:

Creating tags
Using and managing your own tags
Using other people's tags

Aspects of navigation involved in each of these steps are discussed in more detail in the following sections.

How tags are created affects whether people can navigate them later. In creating tags, you need to consider such things as access to the tagging service, how suggestions for tags can be made, and the form in which tags can be entered. In general, you want to encourage tagging and lower barriers to creating tags where possible.

Section 12.2.1.1: ENCOURAGING TAGGING

People like to have their things organized, but at the same time they can be lazy when it comes to doing it. For social classification to be effective, the act of tagging has to be simple. The process of adding tags should be easy enough to overcome any lack of motivation to tag. Flickr, for instance, allows members to tag multiple photos at once while uploading them (). Requiring users to tag each photo individually is a good way to ensure that few people will bother. Although bulk tagging means that individual objects in the batch end up with more generic tags, the trade-off of convenience for accuracy usually pays off with more tags being added.

Figure 12-1: Tagging multiple photos at once on Flickr

The tagging interface should also limit unnecessary navigation steps. Ma.gnolia, for example, dissuades people from tagging by requiring an extra click to display the input field for manually adding a link (, right side). After visitors add a link, the site states no tag was added, but does not make it clear how to add a tag (, left side). A more effective approach would be to display a simple Add Tag link for entering tags in place of the "none assigned" message. Exposing the input field for entering tags to begin with, rather than hiding it, would help as well. Avoid complicating the task of adding a tag with even as little as an extra click.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Social tagging systems offer a new alternative way to classify digital, web-based information. Unlike controlled vocabularies, which are rigid and impersonal, tagging systems grow naturally as average users add personal tags to resources.

When tags become public for an entire community to use, a social classification or folksonomy emerges. Social classifications have many inherent relationships and links, but for a system to be of value these must be exposed and apparent to users of the system. Navigation plays a key role here.

Three key activities in the tagging process are important for effective navigation systems for social classifications: creating tags, using your own tags, and navigating others' tags. This chapter reviewed just some of the techniques and best practices currently in place, resulting in some recommendations for the design of social tagging systems:

Creating tags: Generally, the system should encourage tagging and lower barriers to creating rich, useful tags where possible. One way to do this is by making access to a tagging service quick and easy, particularly for bookmarking services. You can also prompt for tags, where possible, relying on the user's existing tags as well as tags from others. Finally, the system should allow for tag forms to resemble natural language as close as possible
Navigating your own tags: A primary reason for tagging is so that you can return to a resource later. The tagging system must therefore allow people to effectively manage their tags, including editing and deleting them. Providing options for filtering, sorting, and searching are common ways to let people navigate effectively. The ability to combine tags is also an important way to hone in target resources for taggers with hundreds of tags.
Navigating tags from other users

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Apart from those listed in , name three other web-based resources that could be tagged. What are potential unique aspects of tagging those resources? How would navigation to those resources be improved with tagging?
Consider the four modes of information seeking proposed by Donna Maurer as outlined in . How does a social tagging system handle each?
1. Known-item searching
2. Exploration
3. Don't know what you need to know
4. Re-finding
Search tags on a popular service such as del.icio.us or Flickr for a compound phrase, such as "cell phone" or "web design" or any other two-word phrase. Be sure to search tags only. Then vary the form of that term by joining and combining the words, such as cell-phone, cellphone, and cell-phone. Use the plural forms as well and search tags only again. Compare the resulting resources that are returned for each.
1. What are the differences?
2. What is gained or lost by changing the form of the word?
3. Is something missed by changing the word form? Is that a problem?
Create an account for two popular bookmarking services, such as del.icio.us, BlinkList, Ma.gnolia, or CiteULike, if you aren't already registered. Bookmark at least ten new pages in each. Compare the process of:
1. Creating tags
2. Navigating your own tags
3. Navigating other peoples tags
What aspects are better or worse in each service? Why? If you were to make your top three recommendations to the owners of each service to improve each of the above, what would they be?

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"Position Paper, Tagging, Taxonomy, Flickr, Article, ToRead," by Cameron Marlow, Mor Naaman, Danah Boyd, and Marc Davis (position paper, 2006). www.rawsugar.com/www2006/29.pdf.: This is an excellent overview of how tagging systems work in general. Though unpublished, it provides a solid academic discussion of tagging.
"What is a Controlled Vocabulary?," by Fred Leise, Karl Fast, Mike Steckel (Boxes and Arrows, Dec. 2002). www.boxesandarrows.com/view/what_is_a_controlled_vocabulary.: This is a well-written primer on otherwise difficult concepts. The discussion is easy-to-follow and uses real world examples. For anyone looking to learn more about controlled vocabularies, this is a great starting point. Also see from the same authors:

"All About Facets & Controlled Vocabularies" (Boxes and Arrows, Dec. 2002). www.boxesandarrows.com/view/all_about_facets_controlled_vocabularies.

"Controlled Vocabularies: A Glosso-Thesaurus" (Boxes and Arrows, Oct. 2003). www.boxesandarrows.com/view/controlled_vocabularies_a_glosso_thesaurus.
Women, Fire, and Dangerous Things, by George Lakoff (University of Chicago Press, 1987).: Lakoff comes out swinging hard in this book, challenging the classical theory of classification. Using many examples he shows, for instance, that categories aren't always mutually exclusive with clear boundaries. This is a dense text that isn't that easy to get through. Though fairly old, its arguments are still salient and timely.
"Usage Patterns of Collaborative Tagging Systems," by Scott Golder and Bernardo A. Huberman (Journal of Information Science, 32(2), 2006): 198-208). www.hpl.hp.com/research/idl/papers/tags/tags.pdf.: This is a brief, but more scientific article that statistically analyzes patterns of tagging on del.icio.us. Along the way, the authors make some interesting observations about tagging systems in general.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

"No matter what the subject be, there is only one course for the beginner; he must at first accept a discipline imposed from without, but only as the means of obtaining freedom for, and strengthening himself in, his own method of expression."

—Igor Stravinsky

Consider for a moment the difference between surfing the web and using a program native to your computer, such as a word processor. At the heart of web navigation is the hyperlink, which connects pages by URL addresses. The interaction involved is fairly straightforward: clicking a link sends a request to a server at the corresponding address. After the requested files are returned, a browser renders a static page, which may contain more links leading to more web pages.

With desktop programs, you typically access files you've created that are stored locally on your computer. Clicking menu options such as Paste or Save doesn't take you to another document via a link, but instead performs an action. Sure, there is help text and you can link documents together, but for the most part, software navigation is about editing, saving, and manipulating text, graphics, or a file in some way. Compared to web navigation, this type of interaction is more dynamic, and it introduces the concepts of behavior and functionality.

But as new web technologies evolve, designers can increasingly simulate the type of interaction found in desktop software online. Consequently, the Web is becoming more and more interactive. This increase in highly functional web sites marks a shift in how navigation works and extends the possibilities for accessing information.

For the web designer, this means new issues to consider when creating a navigation system. Single-page interactions like those found in desktop software replace the basic idea of linking two static pages together, as is typical on the Web. The navigation design must necessarily take into account dynamically updated content and interactive features.

Existing techniques from fields such as interaction design, which has a long tradition in software application development, provide potential solutions. But creating interactive applications online isn't just desktop software design for the Web. Designers must embrace the constraints of the Web and support users in a way that makes sense in online environments. This chapter offers a look into just some of the new challenges and general considerations of creating navigation for rich applications on the Web.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Technically, a web application is any feature on a web site that performs a function. A site search is a web application. So too, is a shopping cart or the checkout process on an e-commerce site. But these are fairly simple and commonplace examples. Rich web applications, also referred to as rich Internet applications (RIAs), however, are a class of more sophisticated web applications that behave similarly to software programs. Compared to normal web pages, they are rich in interaction, rich in content, and rich in functionality. Ultimately, rich web applications are a breed of their own.

The primary advantage of rich web applications is an enhanced user experience. Instead of the clicking from one page to the next with reloads in between each, rich web applications often make use of a single-page model in which updated information is quickly brought into the page (). With this method, reorientation to navigation options is minimal or not present at all. Overall, rich web applications are more responsive and allow for quicker ways to find information, while potentially lessening the "lost in hyperspace" effect.

Figure 13-1: Page-to-page hypertext linking compared to single-page interaction of rich web applications

For an example of these differences, compare the process for selecting cars on the General Motors (GM) site (www.gm.com) and on the Ford web site (www.ford.com), which features a rich web application.

GM offers a showroom of its vehicles that allows visitors to browse by different criteria in the tabs across the top: by brand, by body style, by model, or by price (). Selecting an option under one of the tabs, such as the brand Saturn, transitions to a new page where all Saturn models are presented (). After this new page loads, you experience a brief moment of reorientation to the new navigation options there. To view another brand, you would have to go back to the showroom's start page and make another selection.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Most web users have developed a mental model of how navigation works:

Navigating information is primarily done by clicking links.
Clicking on a link brings up a new page.
The back button returns to the previous screen.
Each page has its own URL that can be linked to or bookmarked.

In emulating desktop applications, however, rich web applications introduce some twists into these basic assumptions and challenge the very model of the web as a hypertext system. With rich web applications, there may not be a transition to a new page with each action, screens may not have their own URL, the back button may erase a previous transaction, and interacting with information is more dynamic than a simple click of link. The next sections take a detailed look at these differences.

A key aspect of rich web applications is that they shift some of the processing of information from the server to the client, or local computer. This important technical difference changes the resulting web experience dramatically. Technically, there are two basic ways in which rich web applications circumvent the process of having to reload pages with each click. They either:

Load the data all at once: Some web applications simply load all the necessary information needed to interact with application to the user's browser at once. Filtering, sorting, and manipulating data then doesn't require a page reload. This is how the filters in the Ford showroom works in : all of the model descriptions, images, and parameters are loaded at once, and filtering via the slider bars is done within the browser without a call to a server. You may have seen this elsewhere on the Web with a "please wait while loading" message before an application starts. Apart from an initial delay, this approach offers very quick interaction with information.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

The overall process for designing rich web applications looks similar to the framework outlined in of this book:

Investigate user goals and business goals, and derive product requirements.
Structure the product logically to meet those goals and requirements.
Explore alternative design directions and capture these in screen layouts.
Design the final screen presentation, considering such things as font, color, and icons.
Evaluate and test designs as you go along.

Of course, specific implementation teams will have their own methods and phases, but they are usually variations of the above, even when working in fast iterations on agile projects. Design processes in general move from abstract to concrete; this progression is no different for rich web applications.

Many of the deliverables for creating rich web applications are similar to those mentioned in previous chapters. Personas and scenarios are important artifacts to define and communicate user needs. Site maps allow you to plan the structure of the application. Wireframes are good tools for identifying and working through different design directions. And screen designs, prototypes, and UI specifications document the final solution.

But compared to information-rich sites, where the content and its organization are main design concerns, rich web applications allow for transactions and dynamic displays of information. In creating rich web applications, you must therefore consider the behavior of the application and how people with interact with it.

Interaction design is a broad field that deals with designing the behavior of products. It encompasses everything from interacting with a computer program to interacting with a physical product such as a mobile phone. The field has gained particular importance and prominence in web design because of the increase of rich web applications and new technologies that allow for more transactions on the web.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Within a decade and a half, the Web has moved from a small hypertext system used for sharing scientific documents to a worldwide phenomenon, fundamentally changing the way we do business and lead our lives. More robust means of accessing information, such as the type of interaction offered by rich web applications, represent another step in this evolution.

The single most important advantage of rich web applications over static web pages is a smoother, more fluid user experience. Web applications allow people to filter, sort, and manipulate information dynamically, as well as perform functions. This maximizes users' time and provides a more satisfying information experience overall.

The new possibilities that technologies such as Flash and Ajax offer also bring new challenges in navigation. The notion of linking from page to page—a fundamental part of web navigation—is replaced by single-page applications and dynamic interaction more akin to desktop software. But unlike these programs, web applications have several distinctive considerations that make them uniquely web-based products:

Rich web applications reside within another application: the web browser. The designer of a web application must consider how the controls of the browser work together with the application itself, particularly the back button.
Web applications that are launched in a secondary browser complicate window management and detach the application from the experience on the rest of the site.
Examples of new types of interaction previously uncommon to the web are filtering with slider bars, drag-and-drop interactions, panning, and zooming.
While scrolling is acceptable in static web pages, it is problematic for web applications, which use techniques such as collapsible and expandable components to maximum screen real estate.
Although rich web applications may increase the ease and efficiency with which people find information, their dynamic nature makes it harder to save, bookmark, print, share, and re-find information.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

Using the Web, find out about the following technologies. Indicate their possible implications for rich web applications. What do they enable beyond conventional HTML page design and construction? How do these possibilities affect the design of navigation? How do they extend or eliminate the page metaphor inherent to the Web?
1. XForms
2. ActiveX
3. Java Applets
4. Adobe Flex
5. Adobe Apollo
Open a common software program on your computer, such as a word processor or email program. Then find the home page for the web site of the manufacturer of that software. Compare the navigation between the two and answer the following questions:
1. What are the main navigational mechanisms that appear in each?
2. What are differences in approaches to labeling in each?
3. What role does branding (e.g. logo, colors, etc.) play in each of the navigations?
4. What role does location or knowing your location within the product's structure play in each?
5. What are the assumed learning curves of each? How much time would you invest in learning the navigation of the web site? Of the software program?
Create a document in an online word processor or spreadsheet application such as Google Docs & Spreadsheets (http://docs.google.com) or NumSum (www.numsum.com).
1. How does the application handle the following:
  - Back button
  - Scrolling

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.

Inhaltsvorschau

About Face 2.0: The Essentials of Interaction Design, by Alan Cooper and Robert Reimann (Wiley, 2006).: This book offers a very deep look at the various aspects of interaction design, including user research, persona and scenario development, and a painstakingly detailed review of interface mechanisms, widgets, and screens. discusses navigation for desktop software applications in particular.
Designing for Interaction, by Dan Saffer (New Riders, 2006).: This is a concise but broad overview of the field of interaction design. Discussions include the design of digital interfaces, mobile devices, physical products, and even service design.
Making the Web Work, by Bob Baxley (New Riders, 2003).: Baxley offers a thorough look at designing web applications by structuring this book around a process for designing them. It includes discussions of problem analysis and audience research, as well as structuring the web application. The text is easily approachable for novices, but substantial enough for experts to get something out of it.
Web Application Design Handbook, by Susan Fowler and Victor Stanwick (Morgan Kaufmann, 2004).: Weighing in at over 650 pages, this book presents a thorough look at application design. It serves as a good reference source for anyone developing web applications. It describes how web applications are different than web sites, but in doing so relies on references to desktop applications perhaps too often.

Ende der Inhaltsvorschau. Der weiterere Inhalt dieses Abschnitts ist hier nicht einsehbar.