Designing Web Navigation by James KalbachNotable passages from
Designing Web Navigation
by James Kalbach

O'Reilly, Sebastapol, 2007

   Trigger words emerge to be the most critical aspect in creating information scent. These are navigation labels and texts that match a visitors need on the page.… [L]abels are what people scan for when they first land on a page. [Jared] Spool [Design for the Scent of Information] and his team found that scanning for trigger words is a consistent pattern among all user types, tasks, and sites:
   "We've noticed that people looking for information all exhibit similar patterns. They first scan for their trigger words—words or phrases they associate with the content they're seeking—in an attempt to pick up the scent."
   Trigger words help to indicate they are on the right track. They reduce uncertainty and give confidence in navigating further. For instance, pages like the home page for Staples.com are actually more successful than pages in which options are hidden behind navigation menus. Without a specific goal in mind, this page may appear overwhelming. But when people have a focused goal and arrive here, they begin scanning without hesitation. Believe it or not, this type of design improves navigation and gets people where they want to go, which, in turn, increases business.

Staples.com homepage


[]

With banner blindness, however, people simply oversee certain elements on a page, even if they are the largest items on the page. There's seeing, and there's seeing. Apparently, they've learned to blank out banners, or long, rectangular advertisement-like areas of a page.


[]

   Breadcrumb trails are popularly believed to increase the user's understanding of site content and structure by providing greater context. Studies have shown, however, that breadcrumb trails are infrequently used, don't necessarily increase navigational efficiency, and may not increase understanding of the site structure. They are therefore usually supplemental to some other mechanism and often not the only way to navigate.

See Bonnie Lida, Sping Hull, and Katie Pilcher, "Breadcrumb Navigation: An Exploratory Study of Usages," Usability News 5.1 (2003),
and Bonnie Lida Rogers and Barbara Chaparro, "Breadcrumb Navigation: Further Investigation of Usage," Usability News 5.2 (2003).


[]

Accessibility

   Embedded links or associative navigation must make sense when read out of context. It's common to label associative links "For more information, click here," for example, with "click here" the only linked words. When skipping from link to link on a page, a screen reader user would just hear the link text and not the preceding phrases: "click here," "click here," "click here," and so on. It's better to link the entire sentence, or at least enough so that the linked portion is understandable on its own.

   Note that screen readers often have a hard time with abbreviations. The vocalization software tries to make words out of abbreviations. Abbreviations for U.S. state names, for example, may sound like ahhk for AK (Alaska) or wha for WA (Washington). You can use an abbreviation tag to correlate abbreviations with their full meaning:
   <abbr title="Frequently Asked Questions">FAQs</abbr>
   With this, screen readers will sound the full text and not the abbreviation. Most browsers also display the full text of the abbreviation when the mouse hovers over it with the abbr tag.


[]

   The home page is often viewed as a chance to market products or promote a brand image. However, visitors coming to a site with a specific information need want to first get to their destination directly and quickly. For this reason, Forrester Research recommends merging the site map with the home page, arguing:
   "Home pages tend to get cluttered with the latest marketing jargon from the firm, which Web users may have a hard time deciphering. Site maps, ont he other hand, often organize links with simple labels like 'products,' 'services,' and 'help'—exactly the kind of language that customers understand."
   Even if you aren't willing to give up that prized home page real estate for an entire site map, consider that visitors will see it as a navigational page nonetheless. You will need to provide the guidance and navigation they expect, or risk that they go somewhere else.


[]

The Vocabulary Problem

   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 (that is, 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 he content you're offering. methods such as card sorting and free listing … 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.


[]

   Note that extended explanations in so-called tool tips may not help much. These are small bits of text that appear in a dialog window (usually yellow) when you roll your mouse over an option. You can't count on people using these as help in making navigation decisions, however. People tend to decide which options to select before they move their mouse toward the navigation. By the time they see the tool tip, they've already decided what to click.


[]

Keyword suggestion tool: https://adwords.google.com/select/KeywordToolExternal.


[]

Usability Testing

   The following heuristics are based on principles of information seeking and web navigation. They focus on navigation and general information-seeking patterns:

  • Balance. The number of navigation options presented is balanced with the depth of the site's structure.
  • Ease of Learning. Using navigation is intuitive and easily learned.
  • Efficiency. Finding and using navigation options is easy. Paths to information are short.
  • Consistency. The presentation and interaction of navigation options is consistent and predictable. Inconsistency is appropriately used to show contrast and priority.
  • Clear Labels. Navigation labels are unambiguous and predictable. Categories are meaningful and mutually exclusive.
  • Orientation. It is clear where you are within the site on each page.
  • Exploration. The navigation promotes free exploration and information discovery.
  • Differentiation. The site facilitates scanning and browsing. It also allows people to quickly differentiate relevant information from non-relevant information.
  • Information Use. After finding relevant information, people can use it appropriately. They can capture content for integration into personal information sources.
  • Modes of Searching. The navigation supports multiple modes of seeking (known-item, exploration, don't-know-what-you-need-to-know, re-finding) that are appropriate to the site.

   See navigation checklist review on pp. 158 - 160.

   Keith Instone developed what he calls the "navigation stress test" around the three basic questions of navigation:

  • Where am I?
  • What's here?
  • Where can I go?

   You can explicitly test the navigation with targeted tasks. For instance, have participants find a specific article or products and then return to the gallery page. Observe the following aspects:

  • Visibility. Do users see key navigation elements on the page?
  • Labels. Are labels clear and understandable?
  • Orientation. Do users get lost moving back and forth in a site?
  • Findability. Are users successful in locating the information they need?
  • Efficiency. Can users complete seeking tasks quickly and efficiently?


[]

Creating Personas

   Creating a persona is not creative writing. You don't simply make up information based on anecdotes, or worse invent it all. Instead, to be truly useful, personas must be based on actual data. The process is not at all easy and requires detailed research and validation.
   Briefly, creating personas consists of the following steps:

  1. Identify the most salient attributes that distinguish one segment of users from another. This may include demographic details, but probably focuses on more such important attributes as online purchasing behavior and domain knowledge. What are typical patterns of information seeking? What mode of seeking are people generally in, for example, is re-finding important? What are their typical gaps in knowledge? What do people do, think, and feel when finding information?
  2. For each of the attributes, determine the minimum number of personas that you need to represent the range of your target groups. For instance, if experiencing shopping online is an important attribute, you may need a persona with little experience and one expert to represent your intended users. Base this on user research findings.
  3. Write the personas. Start with the list of attributes as a kind of outline for your text. Use evidence from user research to support everything you include. Keep extraneous details low, but do add a small amount of colorful details to make them come alive.
  4. Validate the personas. This can be done with stakeholders and team members to check if the target personas are aligned with business and project goals.
  5. Make the personas visible. Hang them up in brainstorming sessions and include them in project documents. Don't expect others to actively read and then remember the details of a several page personas [document]. It's your job to make them come alive.

   Page 195.


[]

   Qualities of a well-written scenario:

  • Easy to understand - There is no technical language. Just about anyone can approach it.
  • Enjoyable to read - There is a limited amount of extraneous detail in the scenario.… But in small doses, such detail makes a story that people can relate to.
  • Shows underlying motivations - The scenario shows the impact the [topic] could have on everyday lives.
  • Clear vision - Without describing how [something] works in detail, it is clear what it's supposed to do and the impact it could potentially have.


[]

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


[]

   Overall, creating a navigation concept involves the following steps:

  1. Review the information collected during Analysis, including vision, brand, competitors, goals, and of course users.
  2. Describe the desired actions people need to take to meet their goals and the business goals in a scenario. Rely on the personas and scenarios you've created.
  3. Brainstorm and explore different possible models of navigation. Get all the key decision makers together in the same room. Use genre and metaphors to guide your concept.
  4. Develop a concept diagram showing the relationships between site features and content.
  5. Describe the concept in words. This should be simple and memorable.


[]

Less isn't more; just enough is more.
– Milton Glaser


[]

Start with the End Goal

   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 in 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 to 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: Don't start by designing the navigation on the home page. Instead, begin designing the navigation from the pages that are most important to visitors: content pages.


[]

   Alternative locations of screen elements are not only possible, but quite common. In fact, Jared Spool found that the so-called "expectation locations" of page elements had no effect on success in online shopping. He tested 44 users on 13 sites in more than 1000 shopping expeditions. Participants had enough money to buy an item they wanted, and they were directed to sites where those items were available. The need to purchase a product and the means to do so were there, so any failure was due to problems in site design. Spool found no connection between sites that comply with Bernard's suggested scheme and increased sales.


[]

Left- Versus Right-Side Navigation

   If the main navigation is in the form of a vertical link list, popular practice strongly recommends placing it on the left side of the page. In redesigning the Audi web sites in 2002 (www.audi.com and www.audi.de), Razorfish Germany challenged the dominance of a left-hand navigation and placed the main navigation on the right. The key motivation was to distinguish the Audi sites from its competitors. They also wanted the core brand value of "innovation" to ring true to all parts of the site, including the navigation.
   Before launching this non-standard layout, we conducted extensive testing with 64 users. The tests compared a version of the site with left-side navigation to one with right-side navigation. Each test session consisted of three parts.
   In Part 1, completion times for five tasks using the navigation were timed with a stopwatch. We believed there would be a significant difference in task completion time for the first task in the two versions of the site, but that by the last task there would be no significant difference. The expectation was that people would need to use the navigation a couple of times to learn how to use the right-side navigation, but the learning curve would be quick.
   What we observed was surprising: there was no significant difference in completion times between the two navigation types for any task, including the first task. The right-side navigation actually performed better than the left in latter tasks.
   In Part 2, we studied where participants focused their attention on the screen. We found people tended to look at the content side of the page more with right navigation than with left navigation.
   In Part 3, we showed both versions of the site to each participant and directly asked them what they thought of right-side navigation. Seven out of the sixty-four people tested actually preferred the right navigation to the left navigation, while only two disliked it. But a majority of participants were indifferent: they didn't seem to care one way or the other. In fact, most didn't seem to notice that the navigation was on the right or the left; they were focused on the task at hand.
   Subsequent usability tests and post-launch user feedback corroborate these findings: There is no apparent difficulty using a right-side menu to navigate the Audi.com and Audi.de sites. From the layout of the page itself, it is clear what is navigation and what is not. With a specific goal in mind, the position of the main navigation on the right—thought technically non-standard—poses no problem.
   This does not mean that all sites should have right-side navigation, however. A left navigation may work best in many cases. If a situation can benefit from a right navigation, it is entirely possible to design a site that utilizes one without sacrificing usability.


[]