Web Writing That Works!

           A Project of
           The Communication Circle

Guidelines Rants Patterns Poems Services Classes Press Blog Resources About Us Site Map

HomeGuidelines > 6. Make meaningful menus!. > 6f. Confirm the location by showing its position in the hierarchy.          

 

Diagram

Background

Examples

Audience Fit

Challenges

Bonus! Hot Text chapter (217K, PDF, 4 minutes at 56K)

6f. Confirm the location by showing its position in the hierarchy.

  • Provide breadcrumbs, so that Hansel and Gretel can find their way home—or at least they can see how they would have come to this page, if they started at the home page.
  • Show where I am in the major hierarchy. Use images with text to map my location.
  • Identify your site, and the section, on every page.
  • Write titles and headings so that the user can see why the page belongs in this section, department, or area.

  Diagram

 
 

 

 

Background

Show the users where they are. One way to do this is to highlight the current location in a table of contents that shows the main levels of your site.
Apple (1987)

Since browsers provide lousy navigation support, you need to go beyond the call of duty if you are a content designer. Websites need to include extensive navigation support to help users overcome the limitations of their software.

Here are some things you can do yourself today:

  • Include a site identifier on every page to let users know where they are relative to the Web as a whole …
  • Make it easy to get to landmark pages (home & search) …
  • Emphasize the structure of your information architecture: make every page show what subsite (or other structural element) it belongs to … .

Nielsen (1997d)

Image maps with organizing layouts can help the reader understand and use the document’s structure.
Bricklin (1998)

Provide links to all levels of the hierarchy above the current location. Breadcrumb trails serve two purposes:

  • The content of the current page (how it is nested) allows users to interpret the page better (you don’t just know that you are looking at product 354, you also know that it belongs to the widget product family)
  • The links allow users to go directly to a higher level of the site in case the current page is not what they wanted, but they do want something similar.
  • Without structural links, pages become orphans that are not contextualized.
    Nielsen (2000a)

    Going down any path involves uncertainty. It’s important to have road signs along the way to let people know when they’re on the right track and when they need to change paths. Uncertainty causes people to make bad decisions. Feedback through page headings, page load or download delay warnings, and reminders about system status (for example, "There are 5 people in Chat A," or "Audio Off") will help keep people on track and feeling oriented.

    Use highly visible page headers to provide location feedback.

    Keeker (1997)

    Button bars can also display location information much the way running chapter headers do in printed books. —Lynch & Horton (1999)

    "Don’t assume that viewers will grasp the structure of your Web site," says Black. "You may design an intricate hierarchy, boasting a home page and various theme pages, subtheme pages, and so on. But once people have left the first page and begin frantically clicking around, they’ve lost all concept of your organization; all of the pages are completely equal. Your linear hierarchy is reduced to a horizontal mess in a matter of seconds.

    "It’s very important to always tell the viewers exactly where they are and how to get back."
    Black & Elder (1997)

    Don’t assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user. —Nielsen (1996)

    The importance of orientation information in text comprehension has been established by Bransford and Johnson (1972) and others. …

    Web users often wish to confirm that they have indeed followed a relevant link (or else determine that the site is not relevant). …

    Provide orientation information on lower-level pages to support continued exploration of your site. …

    Designers should help users recognize what level and what branch of the hierarchy they have reached.—Farkas and Farkas (2000)

    See bibliography: Apple (1987), Black & Elder (1997), Bransford and Johnson (1972), Bricklin (1998), Conklin (1987a, 1987b), Farkas and Farkas (2000), Keeker (1997), Nielsen (1995, 1996, 1997b, 1997d, 2000a), Omanson et al (1998), Siegel (1996), Utting & Yankelovich (1989), Zimmerman (1997)

    Other ways to make your menus meaningful:

    6a. Think of a heading as an object you reuse many times.

    6b. Write each menu so it offers a meaningful structure.

    6c. Offer multiple routes to the same information.

    6d. Write and display several levels at once.

    6e. When users arrive at the target, make it obvious.

    Resources on menus

    Taking a Position on Menus

    Heuristic Online Text (H. O. T.) Evaluation of Menus

    Poster

     

    Examples

    Original document menu

    Overview

    Background

    Problem Analysis

    Requirements

    Proposed Solution

    Design Phase

    Design Phase Deliverables

    Design Phase Schedule

    Implementation Phase

    Implementation Phase Deliverables

    Implementation Phase Schedule

    Maintenance Phase

    Maintenance Phase Deliverables

    Maintenance Phase Schedule

    Conclusion

    Specifications

    Revised document menu as clickable image map

     

    Example: IBM Investors Financials

    You have chosen Investors, then Financials. The dropdown menu on the left highlights your location.

    When you show the choices made, from the top level to this level, users know at a glance how they got here—or how they would have gotten here if they had walked down the staircases from the top level, rather than making a hyper-jump here. The menu, acting as an object map, re-enforces their sense of knowing where they are; of navigating through a stable structure.

    Example: Yahoo! Directory breadcrumbs

    Breadcrumbs show you where you are in the dominant hierarchy.

    Example: Dean and Deluca

    Breadcrumbs just under the banner at the top show the path from the home page. On the right, an alphabetical menu shows the categories under Fine Foods, emphasizing this section, Chocolates and Confections. Neither goes below the subcategory, to confirm arrival at the product page, which is devoted to the Ballotin.

    Example: Inktomi

    The breadcrumbs, above the major heading for this page, indicate the path from the top, although the last item does not match the heading. In addition, the SOLUTIONS menu item is highlighted, and on the left, the subtopics within Solutions show up, with the current one selected. Of course, Customer Self-Service, the menu item, does not match "Inktomi Solutions for Self Service." These inconsistencies may raise some doubt as to whether the customer has actually arrived at the intended page.

    Original Navigation Bar & Menu for Departments Page

    None of these submenus was visible from the home page. You had to guess that Depts would open up a page with all this content.

    The home page shows only the top menu bar, with Home, Depts, Search, and Help. Not very revealing.

    Revised Navigation

     
     

    Audience Fit
     
    If visitors want... How well does this guideline apply?
    To have fun Only the programmer and game player enjoy the complex challenge of getting lost.
    To learn Knowing where you are in an intellectual structure helps you learn.
    To act To move the world, we need a place to put our feet.  In your writing clear the ground and put up a signpost, welcoming visitors.
    To be aware The mind uses the experience of the body moving through space as a model for even the most intellectual activities.  Forgive the senses and cater to them by telling people where they are.
    To get close to people If you forget to show people where they are in your structure, they consider you thoughtless or rude.

    Ready for some challenges?

    Don't make me take an ax to your menu!

     

     

     

    Home | Guidelines | Rants | Patterns | Poems | Services | Classes | Press | Blog |
    Resources | About Us | Site Map

    Web Writing that Works!
    http://www.WebWritingThatWorks.com
     © 1999-2004 Jonathan and Lisa Price
    The Communication Circle
    Discuss at HotText@yahoogroups.com
    Email us directly at ThePrices@ThePrices.com
    Order Hot Text (the book) from Amazon