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.
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.
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 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.
- 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.
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.
- 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.
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.
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.
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 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.
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.
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).
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.
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).
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.
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.
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.
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.
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.
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.
[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.
Get Designing Web Navigation now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
