A Project of |
Guidelines | Rants | Patterns | Poems | Services | Classes | Press | Blog | Resources | About Us | Site Map |
Home > Guidelines > 6. Make meaningful menus!. > 6f. Confirm the location by showing its position in the hierarchy. |
|
6f. Confirm the location by showing its position in the hierarchy.
|
|
Diagram
|
|
BackgroundShow 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. 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:
—Nielsen (1997d) Image maps with
organizing layouts
can help the reader
understand and use
the document’s
structure. Provide links to all levels of the hierarchy above the current location. Breadcrumb trails serve two purposes: … Without structural
links, pages become
orphans that are not
contextualized. 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. 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 Heuristic Online Text (H. O. T.) Evaluation of Menus
|
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
|
|
Don't make me take an ax to your menu!
|
Home |
Guidelines |
Rants |
Patterns |
Poems |
Services |
Classes |
Press |
Blog | Web
Writing that Works!
|