Chapter 1. Introducing Web Navigation

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

CONSIDERING NAVIGATION

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.

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

An article from BBC news

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.

What’s more, the organization and grouping of labels also communicate valuable information about how to navigate. For instance, the first seven options on the left side of the page communicate a geographical organization of the news articles. Or, the collection of links on the right under the Climate Change—In Depth header in Figure 1-1 clearly let you know how you can find further information on the topic.

Overall, the various elements come together to create system of navigation. Though visitors might perceive this system as whole, we can dissect its individual components. For instance, the tabs at the top center of the page (starting with Home) are referred to as the main navigation. This page is in the News section. Within News, the local navigation is represented by a vertical menu on the left, which indicates where you are (Science/Nature is highlighted) and where else you can go, such as to articles about Africa or the business news section.

Is this a good navigation system? The answer is ultimately relative. You must consider a range of factors, from business goals to user goals. Still, there are common principles of good navigation that we can use to evaluate the quality of navigation. For instance, navigation on the BBC page is balanced, consistent, and provides a clear indication of where you are. Overall, it’s appropriate for this type of site and probably gets people to where they want to go—the most important factor for judging success in navigation design.

DEFINING WEB NAVIGATION

Think about a link—the most basic ingredient of the Web. Links are text or graphics in one page that connect to another page or a different location within a single page. They allow for the associative leap from one idea to the next—a powerful concept. If you’re reading a story about China’s foreign policy you can then jump to a page with detailed information about the demographics of the country, thanks to a link. But, links do more than just associate one page with another. They also show importance. Links show relevance.

Web navigation is defined three ways:

  1. The theory and practice of how people move from page to page on the Web.

  2. The process of goal-directed seeking and locating hyperlinked information; browsing the Web.

  3. All of the links, labels, and other elements that provide access to pages and help people orient themselves while interacting with a given web site.[2]

Web navigation design is about linking. It’s about determining importance and relevance of the pages and content on your site. This requires judgment in establishing meaningful relationships between pages of information. Together, the elements of navigation determine not only if you can find the information people are looking for, but also how you experience that information.

THE NEED FOR NAVIGATION

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.”[3]

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

  • Reflects brand

  • Affects site credibility

  • Impacts the bottom line

Consider each of these points in greater detail.

NAVIGATION PROVIDES ACCESS TO INFORMATION

Sometimes it’s hard not to state the obvious. Of course, web navigation provides access to information. Everyone knows that; we navigate the Web for information every day. However, alternative means of access also exist. Consider some possible alternative models of how information on your site can be accessed:

The content-linking-only model

Imagine a collection of pages linked to one another with no particular hierarchical organization or pattern of linking. All the links are embedded in the text. They aren’t isolated in a way that serves as a navigational scheme, and there’s no concept of a traditional home page. The site is just a big web of related information. Conceptually, it might look like Figure 1-2.

The content-linking-only model

Figure 1-2. The content-linking-only model

You might argue this would provide strong relationships between documents. A linked term or phrase on one page has a close association with the content on the destination page. But overall findability is low with this model. People wouldn’t have a sense of beginning or end in their search for information, and orientation would be difficult. Also, access time would be much longer. You’d have to scan the text in its entirety to get a sense of all related content. This is certainly not the most efficient way to access information.

The “liquid information” model

This is similar to the content-linking model, but there are no links. Instead, each and every word is interactive for all texts. There is no distinction between text and hypertext, or between content and navigation. All texts are links, and all links are texts. Figure 1-3 depicts this model. From a single word on a given page, any number of navigation actions is possible, leading to new content pages.

The “liquid information” model

Figure 1-3. The “liquid information” model

The University College of London Interaction Centre (UCLIC, www.uclic.ucl.ac.uk) hosts a research project that explores the possibility of making all online text interactive—right down to the individual words.[4] Instead of hypertext, the researchers refer to this as Hyperwords. The basic idea is that when a word is clicked, an option menu appears (as shown in Figure 1-4). You can then conduct a search, link to related documents, define the term, translate it, and so on. As they put it, the goal is to put an “end to the tyranny of links.” This would also mean an end to navigation design.

Navigation options with the Hyperwords menu

Figure 1-4. Navigation options with the Hyperwords menu

The filter model

Imagine accessing all the content of a web site through a single page. This page contains controls for filtering and sorting to present different chunks of material at a time. It would be highly interactive, for sure. A list of documents in the collection shrinks and expands with each interaction. Clicking on an individual item in the list would reveal its full text and images. Figure 1-5 shows this concept. A single control on a given page leads to new content, but that content is presented within the same page. The motion is therefore circular: you never leave the page, just continuously update its content.

The filter model

Figure 1-5. The filter model

This model suggests a potentially efficient way to access information, similar to the model Alan Cooper proposes at the beginning of this section. But the experience would be quite different from navigating or browsing. First-time visitors would not get a good overview of the type of content available on the site. It might also be difficult for users to know when a search is completed: you could potentially filter and sort all day and still arrive at new lists of content. Bookmarking and general accessibility are also complicated.

A working example of this model can be found in an experimental interface developed by researchers at IBM to browse the works of American composer Philip Glass (www.philipglass.com/html/pages/glass-engine.html). As shown in Figure 1-6, the Glass Engine filters the works of Philip Glass by various facets within a single page: the blue bars are sliders that can be moved left and right to locate pieces of music. The title and short description of each work are displayed in the center of the page, in this case, for Einstein on the Beach.

IBM’s Glass Engine filters the works of American composer Philip Glass

Figure 1-6. IBM’s Glass Engine filters the works of American composer Philip Glass

The search model

In this model of access, there is no navigation or linking to internal documents. Instead, visitors to the site can only perform keyword searches for information. Users type a keyword or two into a box and click the Search button. This produces a list of pages they can access. On the individual content pages, the only option is to return to the list or conduct a new search. Figure 1-7 shows these three steps from left to right.

The search model

Figure 1-7. The search model

Search is certainly an efficient way to get to content. We search on the Web all the time. But keyword searching is effective only if the item being sought is known in advance. It assumes that people will be able to accurately and completely express their information needs as a query. However, this may not always be the case.

The structural-browse model

In this model, there is only a set of links, perhaps on the side of each page, that provide access to information on a web site. This area is visually separated from the page content in the layout. You can click through a hierarchy of navigation options, refreshing the page content each time, as shown graphically in Figure 1-8. To get to a page in another area of the site, you’d have to navigate back up the tree and back down another branch. There are no embedded links within the text and no search function. Compare this with the content-only linking model, in which associations can be made in any direction from any page.

The structural browse model

Figure 1-8. The structural browse model

BALANCED NAVIGATION

Discussion of these too-pure models is intentionally one-sided. Generally, web sites have a mix of the models including structural navigation, content linking, and search and filtering mechanisms. Each supports a potentially different mode of seeking. Therefore, navigation tools for information on the Web come in multiple forms. Overall, a web navigation system provides efficient and balanced access.

In reality, web navigation might look more like something depicted in Figure 1-9, where various types of access are blended together. Navigation design is about creating a system of access to information. It is this system that gives rise to the web navigation experience.

Web navigation: multiple forms of access to information

Figure 1-9. Web navigation: multiple forms of access to information

What’s more, navigating can be a more engaging information experience than, say, just a keyword search. For instance, usability expert Jared Spool and his colleagues found that people tend to continue shopping more often when navigating than after doing a direct keyword search:

“So, users come to the site with a purpose and they do their best to achieve that purpose. The question is: what happens after they’ve achieved it? How do we get them to that valuable content that they didn’t know was there?

Well, our recent studies have turned up some surprising statistics. Apparently, the way you get to the target content affects whether you’ll continue looking or not.

In a recent study of 30 users, we found that if the users used Search to locate their target content on the site, only 20% of them continued looking at other content after they found the target content.

But if the users used the category links to find their target, 62% continued browsing the site. Users who started with the category links ended up looking at almost 10 times as many non-target content pages as those who started with Search[5]"

When browsing a web site, people seem to learn about other available content. For e-commerce sites, this could equal more sales; for a non-profit organization, it could result in more support; for a medical information site, it could provide a deeper understanding of a disease or cure. In other words, it’s how navigation systems provide access to important information.

People prefer information that involves sequence. They like to browse. Navigation provides a narrative for people to follow on the Web. It tells a story—the story of your site. In this respect, there is something both familiar and comforting about web navigation. The widespread, seemingly natural use of navigation to access content on the Web reflects its strength as a narrative device.

NAVIGATION SHOWS LOCATION

Navigation isn’t just about getting from one page to another; it’s also about orientation. Sometimes people need to know where they are in a web site. Research on hypertext systems in the ’80s showed this to be the case—location information helps people navigate. Many have pointed to the three basic needs in web orientation. While navigating a site, users generally need to know:

  • Where am I?

  • What’s here?

  • Where can I go from here?

Location is often indicated by highlighting the currently selected option in a navigation menu or displaying the path with a breadcrumb trail. Some sites even stamp location with a You Are Here notation.

Beyond orientation, knowing your location in a site has other implications:

  • Comprehension of a given page may improve—or even require—understanding its relationship to other pages. This is particularly prevalent when entering a site at a page on lower levels in the site structure rather than through the home page, such as via external search results. In other words, navigation isn’t just about where you are, but also about the meaning of the content. Navigation helps set context along with page titles and other elements.

  • Pages that are deeper in a site structure may be seen as more precise. Knowing how deep you are in a site can give cues as to granularity and detail of information encountered. The natural expectation is that pages higher in a site are more general in nature, and the detail comes out as you move further down the structure.

  • Knowing where you are in a site gives cues into exhaustiveness in seeking information. Location can signify if you should keep looking or not. The site navigation, then, potentially provides a sense of closure while looking for information.

For instance, Figure 1-10 shows the page for financial support for students in Europe on the Open University web site (www.open.ac.uk). To get to this page, you have to make several clicks: Becoming a student > Financial Support > Students Resident in Continental Europe. The relatively deep location of this page indicates that there isn’t more on this subject on the site, and to find more information you’d have to call the phone number or write to the email address provided. Additionally, by itself, Students Resident in Continental Europe could refer to many things. Knowing that this is within the category Financial Support gives it a clear meaning.

Location information in the navigation of the Open University web site

Figure 1-10. Location information in the navigation of the Open University web site

NAVIGATION SHOWS “ABOUTNESS” OF A SITE

Navigation conveys the breadth and type of a web site’s content and offerings, or the “aboutness” of the site. It creates an overall, meaningful coherence of subject matter of the site and sets expectations. In turn, knowledge of main topics of a site can affect the approach people take to finding information there. Note that this does not imply that navigation shows the scope of the site in terms of quantity of pages. Instead, it reflects the depth of the subject of a site.

Imagine you want to buy a new stereo receiver from Sony. You know to go to the Sony Style web site (Figure 1-11, www.sonystyle.com) to find out about their products. When you get there, you find categories for all kinds of electronic equipment: computers, cameras, TVs, and more.

Stereo receivers on the Sony Style site under TV & Home Entertainment and Home Audio Components

Figure 1-11. Stereo receivers on the Sony Style site under TV & Home Entertainment and Home Audio Components

The navigation at top of the page is clear, and you’re able to work your way to the home audio section to find stereo receivers. Along the way, you also understand that Sony offers a wide range of all kinds of electronics.

Now compare Sony’s site to the Harman/Kardon site (Figure 1-12, www.harmankardon.com).

Receivers under Home Products on the Harman/Kardon web site

Figure 1-12. Receivers under Home Products on the Harman/Kardon web site

Harman/Kardon makes a select range of high-end audio products. The navigation here is quite different than the Sony site shown in Figure 1-11. The browsing experience on the Harman/Kardon site is much more focused. This breadth is reflected by the site’s navigation. Also note that Harman/Kardon places emphasis on car products, something you won’t find on Sony’s site. The two sites reflect a different depth and breadth on a similar topic, and these differences are reflected in the navigation.

In general, navigation offers visitors a semantic peripheral vision of a site’s content. This provides cues for its relevance to your information needs. It reveals what’s available and what’s not, and lets you know you’re exploring the right topic.

NAVIGATION REFLECTS BRAND

Brand is often thought of in terms of its visual manifestation: logo, colors, font, etc. These elements—commonly referred to as trade dress—help people identify with your company and its products. But a brand is much more than that. Brand position affects essentially every aspect of a product or service, including web navigation. Ultimately, a brand is a promise to the consumer about the goods and services offered.

Brands have values and character. For instance, one company brand may value its tradition and quality of products, while another may value being on the cutting edge and providing friendly customer service. Navigation reflects and supports aspects of the brand. The navigation options displayed, order of elements, tone of voice for labels, and visual style of navigation all contribute to a holistic brand experience on the Web.

Compare the main navigation areas of the watch makers Swatch (Figure 1-13; www.swatch.com) and Rolex (Figure 1-14; www.rolex.com).

The home page for Swatch.com, featuring rotating navigation

Figure 1-13. The home page for Swatch.com, featuring rotating navigation

Swatches are fashionable and modern, and are targeted at young, first-time watch buyers. The web site navigation reflects a youthful, fun brand. For instance:

  • The main options are presented in a spinning circle in a playful way.

  • In addition to an option for the main collections, there are links to such things as The Club and Beach Volley, which are special programs and activities the company sponsors.

  • Teaser ads above the navigation (in the center of the page) include things like Flashmob Competition, as a way of attracting new customers.

The Rolex home page

Figure 1-14. The Rolex home page

In contrast, the navigation on Rolex.com is more somber and in line with the Rolex brand. The company values tradition and quality, and generally caters to a much more upscale clientele. This comes through in the site’s navigation:

  • Collections is the first option in the upper-left. Rolex clearly places value on their traditional line of quality watches. Instead of a seasonal collection, as with Swatch, there are long-standing product lines such as The Oyster Professional.

  • The category Sports & Culture contains information about opera, golf, and yachting. Beach volleyball is nowhere to be found on the Rolex site.

  • Instead of a Club, as with Swatch, there is The Rolex Institute. And within The Rolex Institute, visitors find options for Awards for Enterprises and Rolex Mentors and Protégés.

Neither of these examples is right nor wrong, better or worse. The point is that these site navigations reflect their respective brands. You won’t find Flashmob Competition on the Rolex site, for instance, just as you won’t find options for yachting on the Swatch site.

Another example is the Bose Corporation, which makes a range of quality sound system products, from speakers, to home entertainment products, to car audio system. Key company values are research and innovation. Bose also has web sites in countries around the world. In most, these values are clearly reflected in the navigation. This is an excellent way to reinforce the brand beyond just visual branding elements.

Figure 1-15 shows the top portion of the home page for Bose Ireland (www.bose.ie). The first option, New from Bose, communicates that the company is moving forward with new products and research. Two options to the right of this is the Innovations link. The message: Bose is on the cutting edge of sound system and related products.

Brand values reinforced in the navigation on the Bose web site in Ireland (www.bose.ie)

Figure 1-15. Brand values reinforced in the navigation on the Bose web site in Ireland (www.bose.ie)

Color, images, and layout obviously play a more immediate role in the brand perception. But navigation labels, categories, and order of those options do as well. This perhaps more subtle type of branding is all too often excluded from conversations of web design. But all elements of a site contribute to the brand experience, including the navigation.

NAVIGATION AFFECTS SITE CREDIBILITY

Credibility refers to how believable a web site is; it’s a perceived quality as judged by the visitor. A common goal in web site design is making the site more credible. This helps get a message across. The more believable your site is, the more effectively you can reach your audience and attain your goals. Good navigation helps you persuade and encourage visitors to do what you want them to.

Note that the term “persuasion” is not necessarily a negative concept. In fact, the ancient Greeks believed persuasion to be a cornerstone of democracy. It is the abuse of persuasion that is negative. Making your site more credible, and therefore potentially more persuasive, doesn’t mean relying on coercion and deception. Your organization has objectives. Your site has objectives. You want visitors to register for a service, read specific content, go shopping, or perhaps even convince them to improve their own lives. Making a credible site helps your cause.

B.J. Fogg, director of Stanford University’s Persuasive Technology Lab (http://captology.stanford.edu), has done the most extensive work on understanding web credibility to date.[6] His book Persuasive Technology: Using Computers to Change What We Think and Do (Morgan Koffmann; 2002), is highly recommended.

In a large-scale study, design look was the most important factor influencing web site credibility, and information organization was the second.[7] When judging credibility, participants commented on how easy or hard it was to navigate the site and on how well or poorly the information fit together. The results show that easily navigable sites are likely to carry more credibility.

Consider the web site for India’s national broadcaster, Doordarshan (www.ddindia.gov.in), as an example (Figure 1-16). The site’s navigation is full of problems:

Broad, vague categories

For instance, you’ll find categories such as Business, Information, and even Miscellaneous.

Abbreviations

Some visitors may not know what PB (BCI) and TAM Ratings mean.

Poor organization of menu options

Figure 1-16 shows Acts & Guidelines separated from The Right to Information Act 2005 by unrelated options.

Poor grouping of categories

Job Opportunities is under the main category Business, while Advertise on DD is under Information. You might expect this categorization to be the other way around.

Unexpected navigation behavior

Contact Us (under the Information main tab) leads to a page with a single link for a telephone directory. This link then opens an Excel document with names and addresses. In other cases, navigation options lead to blank pages.

Misspelled navigation options

Archieve instead of Archive.

Poor navigation reduces site credibility

Figure 1-16. Poor navigation reduces site credibility

Overall, the navigation experience is quite poor. This detracts from the credibility of the site and the organization as a whole. Of course, there are potentially many other influencing factors, such as visual design, content, and the reputation of the organization. But one thing holds true: well-designed, easy-to-use navigation is important in establishing credibility, authority, and trust.

THE BOTTOM LINE

Information is useless if it can’t be found. Organizations spend so much time and money making information available on the Web without really knowing how—or even if—it’s getting used. If a visitor can’t find the information they’re looking for, it can be costly to your business.

Calculating the return on investment for site navigation only can’t be easily done, if at all. There are many other factors to consider as well, such as search, technical performance, user needs and behaviors, and usability of the site. Still, justifications for good navigation include:

Customers can’t buy what they can’t find

For e-commerce sites, navigation is critical. As mentioned earlier, people tend to continue browsing—and buying—when they can successfully navigate to the products they want to purchase. Sure, keyword searching may also get them there, but that experience is different. Well-designed navigation plays a key role in getting people to the information or products you want to see. This ultimately helps you sell products or ideas.

Employees lose productivity when navigation is inefficient

Companies are making more and more information available to their employees on corporate intranets, but the size of some intranets can be enormous. The time to find information is critical for employee productivity. Even the smallest increase in navigational efficiency can have huge returns for a large corporation if you multiple it by thousands of employees.

The cost of support increases with poor navigation

If customers can’t find what they’re looking for, they’ll either leave the site or call your help line, which increases costs at the call center. And if you don’t have a call center, you’ve just lost a sale.

Brands become devalued with poor navigation

Negative experiences with a site’s navigation far outweigh any positive visual branding measures or marketing you may have done. Frustrated customers are hard to win back, regardless of how much you dazzle them elsewhere. And competition is not far away on the Web. So, effective navigation also brings a competitive advantage with it. Make your site useful, and people will come back and recommend the site to their friends. Similarly, frustrated users are unlikely to mention your site to another potential customer.

Plus, you must take into account the costs of training, relaunching, and so on. Mind you, well-designed navigation won’t solve all your problems. But because navigation is so central to the basic Web experience, it stands to reason that its financial implications are potentially far-reaching.

WEB NAVIGATION DESIGN

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.

Make no mistake: navigation is problematic, particularly on larger web sites. It’s one of the thorniest parts of web design. Providing access to web pages on information-rich sites is remarkably complex. Web navigation design is ultimately a craft—a mix of art and science, intuition and facts, form and function.

DESIGN PHILOSOPHIES

Most web projects have a prevailing design perspective. Often this is implicit. It may not be written or spoken, but it’s there. Understanding design perspectives can be important in creating a common team understanding and for guiding design decisions. Some of the many potential approaches to design are:

User-centered design

A user-centered design process places people at the center of attention while developing a product or service. It consists of methodologies that make the user an integral part of the development process, with activities such as interviews, observations, and various types of testing. This replaces guess-work and assumptions about user behavior with research. In the end, the overall design of the site should mirror how users understand the subject matter and how they expect to find information.

By carefully considering the actual context of use before a product hits the market, user-centered design potentially increases adoption rates and lowers learning curves. In this sense, user-centered design seeks to reduce the risk of product failure. User-centered design is not easy, however, and many point to the extra time and costs that user research adds to development. The benefits are not short term and pay off in the end.

Designer-centered design

From this perspective, the designer—in the broadest sense of the word—knows what’s best. Decisions are made from a personal view of the world. The creative growth of the designer is valued, and her interests are highly valued. A type of free exploration may be encouraged, and there may be a need to make a statement through the final design. The designer-centered design approach can resemble perspectives found in art to some degree; personal expression is important.

This approach might be successful for smaller, design-focused enterprises and be able to produce successful sites. Creative teams also find this approach enjoyable and rewarding. However, such designer-centered design is also self-indulgent, and business goals may be overshadowed by personal interests. The designer-centered approach quickly becomes unsuccessful for sites that deal with vast amounts of information or complex interactions.

Enterprise-centered design

This is an all-too-common perspective. The web site is designed around the structure and needs of the stakeholder’s company or organization. The main categories of a site, for instance, may reflect the departments of an enterprise. Also included in the perspective is the need to please the boss. Success may be measured by how well the key stakeholders react to the final product, perhaps even on a personal level.

This perspective may increase the efficiency for site maintenance later on: each department is responsible for only its own slice of the site. But it generally runs the risk of users becoming confused, getting lost, or going somewhere else.

Content-centered design

This is similar to enterprise-centered design, but an existing body of information is the basis for structuring navigation. For instance, you might organize content by document format rather than subject: all text pages in one place, all PDFs in another, images in another, and so forth.

You can easily argue that it’s hard to provide access to something you don’t have. In this sense, the content-centered design approach is only natural and to some degree constantly present. However, the amount and type of content available shouldn’t be the only force determining navigation priorities.

Technology-centered design

This perspective also prevails on many web projects. Technology is the driving force here. Design might be determined by the easiest way to implement a solution. The focus is on implementation and reaching a final product.

This may also be cost effective and efficient. It may help meet a project deadline. But you run the risk that people won’t be able to use or understand the final web site. In the long run, technology-centered design is generally counterproductive to project and business goals.

This book advocates a user-centered design perspective. This implies a holistic approach. It assumes that you—the web navigation designer—should consider a wide range of user behaviors. It requires you to actively validate assumptions about users’ behavior by seeking various means of contact with them.

Note that user-centered design does not mean “do what users tell us to do,” nor “ignore other project constraints.” Of course, business goals and technology are important. Of course, the intuition of the navigation designer plays a vital role. But user-centered design methods can inform a designer’s intuition, or better reach business goals in the long run. It’s a question of the starting point and focus of the project. User-centered design mandates that the user experience is the primary goal: all other perspectives are secondary.

SUMMARY

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.

QUESTIONS

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

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

  3. 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.[8] 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.

    1. What were advantages and disadvantage of each of these systems? (Consider the memex as if it were a real system).

    2. How did they approach solving the problem of navigating through information?

    3. What are the differences between these systems and the Web?

    4. Name two other hypertext systems apart from Xanadu and HyperCard. What approach did these take to linking information together and allowing people to navigate?

FURTHER READING

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



[2] Although linking between separate sites on the Web is clearly important, the focus in this book is on designing intra-site navigation systems.

[3] Alan Cooper, “Navigating isn’t fun,” Cooper Interaction Design Newsletter (October 2001). www.cooper.com/newsletters/2001_10/navigating_isnt_fun.htm.

[4] See the liquid information project at www.liquidinformation.org and Hyperwords at www.hyperwords.net.

[5] Jared Spool, “Users Continue After Category Links” (December 2001). www.uie.com/articles/continue_after_categories.

[6] See also the Stanford Web Credibility Research web site: credibility.stanford.edu.

[7] BJ Fogg, Cathy Soohoo, David Danielson, Leslie Marable, Julianne Stanford, and Ellen R. Tauber, “How Do People Evaluate a Web Site’s Credibility?” Consumer Reports WebWatch (2002). www.consumerwebwatch.org/dynamic/web-credibility-report-evaluate.cfm.

[8] Vannevar Bush, “As We May Think,” Atlantic Monthly (1945).www.theatlantic.com/doc/194507/bush.

Get Designing Web Navigation now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.