jim.shamlin.com

6: Designing Navigation

People who can't find what they want with a reasonable amount of effort will leave your web site. And they probably will not return.

The Department Store Analogy

People who want to buy something won't end up buying it if they can't find it.

Consider the common mistake of many department stores, which divide clothing and accessories according to gender and age: men, boys, women, and girls. It would be rational to expect to find men's shoes in the men's department - but instead, there's a separate shoe department for that. Most of us have learned as much, but it's entirely irrational.

The typical pattern for shoppers is to seek out the right store, then seek the right department, then seek the right aisle, then look for the product. If they don't find it they're perplexed. They may try a different aisle or department, or they may try a different store - depending on their level of frustration. If they do find the item, they proceed to the register and buy.

Sales clerks are available to help customers who can't find something on their own. A customer who is stuck will hope to find a competent one who can point them in the right direction - and will be just as frustrated (or more) with a clerk that points them in the right direction.

Behavior online is exactly the same: people will try to find things on their own before going to a clerk. If the store is consistently incomprehensible, or past experience with a clerk has been especially helpful, then the clerk will be their first recourse every visit.

Web Site Navigation

Simply stated, the organization of information on a web site is like the arrangement of merchandise in a store, and the search engine is the equivalent to the clerk.

He mentions the notion of "search-dominant" users who always look for search engines as soon as they arrive on a site. They are probably the very same people who go right for a clerk when they enter a store - or at the very least they have had the same experience: unable to find the things they want they have come to rely on help.

It's difficult to generalize about search or link dominance among users because the same people use different behavior at different times and on different sites. But the general notion is that sites that are easy to navigate are less frequently searched. If you see a link to what you want right away, a single click gets you there, rather than typing a phrase, clicking a button, combing the results, and then clicking a link.

(EN: It's also been observed that people who navigate through links tend to discover more of a site, make more purchases, and give more share-of-wallet in a category to a site that is easily navigated.)

Browsing and Discovery

The terms that are used to describe using the Internet tend to have a casual feel: browsing or surfing give the sense of looking about in a leisurely manner instead of being on a mission to get somewhere specific.

Going back to the physical shopping analogy, a person's first visit to a store or a mall is generally a leisurely one. They explore the space and learn what is available and where it is to be found. But subsequent visits become more mercenary - they know what is on offer and exactly where to find it, and they follow a direct and purposeful route without much wandering and window-shopping.

There are a few differences, however, between Web space and physical space:

In spite of these differences, people still "surf" a new web site, clicking through categories and browsing articles or items, and developing a sense of what is there and how it can be found the next time, though the "path" is a trail of links rather than a physical location.

The concept of the "home" page is important online- but people click "home" on the web as a sort of reset button that starts them over from the top so they can get from one place to the next.

It's at this point that the metaphor of "navigation" begins to break down. Navigation is getting to a place relative to your current location - to drive from Philadelphia to New York and then New York to Washington. Online, the journey is from Philadelphia to New York, back to Philadelphia, and then to Washington. The same is true for navigating a store: a person walks from one department to the next, and does not return to the front door each time they want to visit a different department.

The Purposes of Navigation

Krug is also a bit peeved about calling navigation a "feature" of a Web site. It is a quality of the Web site itself, just as aisles are not a "feature" of a store but an area within the store - and the most important area as they enable people to get from one place to another.

To extend that a bit, a web site without navigation is like a store without aisles - it's a heap of things in which there's no way to move around and no way to find anything. In that sense, the navigation is as important as content - as the content is useless if there is no way to get to it.

In addition to facilitating movement, navigation performs a few secondary functions:

Web Navigation Conventions

Krug goes back to the physical world, in the way a well-designed city is constructed for navigation: there is a grid of streets that are numbered, a blocks are assigned numbers in the hundreds, buildings are in order with the even on one site of a street and the odd on another. Getting from 623 Second Street to 951 Fifth Street means walking over three blocks and up three blocks. And if you get lost, there are street signs at each intersection.

Web sites have conventions of their own. The site ID is in the upper left and serves as a link to the home page. Various utilities such as a search engine or common functions are in the upper right. Below both is a horizontal band that shows the major categories, and once you get to a category there is a column on the left listing subcategories or items. At the bottom of the page there is redundant navigation and a few familiar but seldom-used functions, beneath which is legal text that no-one ever reads.

Some of the navigation elements of a site are persistent, and exist in the same places on every page of the site. The horizontal bar of major categories is usually there, and the section of the site you are browsing is usually indicated by a different color.

Break any of these conventions, and users will be lost and bewildered trying to find their way around.

Hiding Navigation

There are a few pages for which the navigation rules of a site are suspended. Most notably, when a user is performing a task that requires them to go through a "flow" of multiple screens, navigation disappears so as not to distract the user from his task.

Other times, navigation is removed to attempt to coax a user through a process. The path to purchase (shopping cart, delivery info, payment info, and the like) is generally put on rails with navigation removed.

Indicating Location

The site ID at the upper left of a screen serves to link to the home page, but is also an indicator of what site a person is visiting. This is critical as the Internet allows links to be made from one site to another, and a person's way of knowing when they have left a site is that the ID changes.

The "site" is the top-level container for everything else - but in terms of the user's interaction with the site it is not very important. Except on the rare occasion when the user needs to return to the home page, it's just a badge of identity that takes ups space. Hence it is relegated to a location where it is not intrusive.

Site Sections

The horizontal bar of major sections of a site is called its "primary navigation" and contains some things that are sections of content and others that are a single page.

A common convention is to use the navigation bar as a drop-down menu, in which clicking will go to a section menu, but doing a mouse-down without releasing it will reveal a secondary menu that opens, much like the drop-down menus in computer applications.

A link "home" is specifically mentioned. While most sites use the site ID as a link to the home page, Krug is in favor of a redundant link in the navigation bar.

Utilities

Common utilities provided at the upper right of the screen include the search engine, a way to contact the site operator, and a link to log on if a site provides membership for users who have registered.

Other utilities depend on the function of the site. The author lists about 30 common utilities such as: checkout, company info, customer service, directory, FAQs, help, order tracking, site map, store locator, and your account.

While there are many options, only the top four or five should be listed to avoid clutter.

Searching

Given the large number of users for whom navigation has been poisoned, it is worthwhile for any site that contains a significant amount of pages to have a search box, and to match a conventional pattern to enable them to find it quickly.

Getting clever with the wording or layout is inadvisable - people are accustomed to seeing a text box with a "search" button beside it. If you do anything else, they may not find it.

Instructions for how to search are no longer necessary. Users know to type into the box and click the button. The exception is when a search is constrained: the user expects it will search the entire site, so if you have a search engine that just searches an article, a book, or a given section this will need to be denoted.

Complicated searches are also inadvisable. You can build in the ability to use and/or, enclose exact phrases in quotation marks, and the like for those who know how to do these things, but instructions on the features of a search engine are inadvisable.

It is seldom useful to provide a parameter search - such as searching for an author's name or title. The exception is when there is a gargantuan site like Amazon, when the user's search term may match items in disparate categories (a book, a song, a movie, and sundry items) such that it cannot be avoided.

Even then, a better approach is to allow the user to conduct a general search and provide constraints if their list of results contains a large number of items. Don't make them think about it unless they need to do so.

Multi-Level Navigation

It is generally best to limit the levels of navigation - from the home page, to a category, to a subcategory ought to be sufficient. IF there are sub-subcategories and sub-sub-subcategories and so on, content becomes lost.

He meditates about the reasons this should be so, but this is all speculation. The point is that he has observed that sites that go deeper than the subcategory level become difficult to use.

Page Names

Consider the names of pages to be like street signs and building numbers - they help the user to navigate. And like a street sign, the name of a page should be very prominent, in a consistent location, and easy to read.

The exception to that last bit is when a page title is too long to be listed in navigation. Ideally, you should be able to edit it down, btu in some instances it is not possible. When that happens, consider what terms in the name are meaningful to the user.

Orientation

A map is much more useful if it shows your present location. If you don't tell them "you are here" they will have to think a bit to figure out where they are. Don't make them think.

In Web navigation, common practice is to highlight the items in the menu that identify the user's place. If they are in the pants subsection of the men's clothing section, then those items are highlighted in a different color from other sections in their respective menus.

Krug suggests that a common problem with this is being too subtle. A highlighted menu item that orients the user should not be so garish as to distract from the content of the page, but neither should it blend into the remaining items.

Breadcrumb Trails

Some sites provide a breadcrumb trail that shows each step from the home page to the current one with links backward. Home - Section - Subsection - Page.

He admits that breadcrumbs were once considered an oddity, and were more for the convenience of those who were maintaining the site rather than those who used it. But people learned to use them and some use them often.

There are some basic conventions to follow: put them at the top of the page, list them from left to right, use clear separation between levels, and the last item should not be a link (because it's the page you are on).

Tabbed Navigation

Krug loves tabs and feels them to be a "product of genius" when they are implemented correctly. The problem is that they were implemented badly, and used so often that they seemed trite.

The value of tabs is that they are self-evident (people understand what a tab does at a glance) and generally rather large and hard to miss.

Basic tab design is that there is a single row, the tab for the present page matches the background color of the page below, and all other tabs are faded back.

(EN: Tabs that navigate to different pages can be useful, but tabs within a page are somewhat problematic. They tend to hide content rather than make it evident, and make it difficult to read the full content if the length of the content is such that the user must scroll back to the top to get to the tabs and see the next section.)

Orientation (again)

Krug suggests a "trunk" test, through the bizarre analogy to being locked in the trunk of a car, dumped on a street corner, and asked to tell where you are by looking around. What he essentially means that on any page of a web site, you should be able to answer six basic questions:

The reality is that people don't always enter a site from the home page and find their way to content. They may be unceremoniously dumped on one of the pages deeper within a site by a link from another site or an external search engine, and will need to find their way around.

He further suggests that these things should be so obvious that you can find them (though maybe not read them) if you print out the page and hold it at arm's length, or just far enough away that you can't read the main text of the page.