As an example of hierarchical structure, a corporate site may be
divided into high-level categories such as product information,
employment information, and information for investors. Because
the home page is the top level of the hierarchy, these main
categories form the second level of the structure. The product
information might again be divided into different product
families (the third level of structure), and each product family
would be divided into information for the individual products
(the fourth level of structure). Finally, each product may have
pages for specifications, pricing and configuration options,
customer case stories, and service information (the fifth level
of structure).
Consider a page with pricing and configuration options for the
SuperWidget product. This page belongs to five levels of the site
structural hierarchy:
- The company's website (as opposed to being at some other site)
- The "products" category (as opposed to, say, employment info)
- The Widgets product family
- The SuperWidgets product
- Pricing and configuration
My preference is to show all five levels in the navigation user
interface because they are all useful in trying to understand the
user's current location. Even better is a design that also shows
alternative choices at one or more of the levels; such
alternatives make it clear to users not just what they are seeing
but also how it should be interpreted in relation to the other
options on the site. Also, of course, listing alternatives makes
it easy for users to go directly to one of the alternatives if it
should prove a better match with the user's needs.
In my example, listing the alternative choices on the fourth
level of the site structure would show the user that the Widget
product family contained MiniWidgets and WidgetClassic in
addition to the SuperWidget. If the user wanted a MiniWidget, he
or she could then go directly to the relevant product page and
navigate from there to the relevant pricing and configuration
page.
Importance of User-Centered Structure
In one e-commerce project I worked on, the draft home page had
three ways of getting to the products: one search function and
two navigation schemes, both of which were presented as simple
lists of choices. One navigation scheme was structured according
to the way most users think about the domain; the other scheme
was structured according to the way many of the manufacturer's
own staff members thought about their product lines.
Results from usability testing showed that the success rate was
80 percent when people used the navigation scheme structured
according to most users' mental model and only 9 percent when
using the navigation scheme structured according to the company's
internal thinking.
Conclusion: The second navigation scheme was dropped from the
design, even though this pained some of the project members. The
second scheme had its advantages for those people who used it
correctly, but it led most users into trouble, so it did more
harm than good.
Comparison of the two success rates of 80 percent and 9 percent
leads to the conclusion that user-centered information
architecture had about nine times as high usability as internally
oriented information architecture. Of course, the exact
difference between the two approaches will vary from project to
project, but the difference is often large. We're not just
talking a few percentage points here; we're talking about the
difference between success and failure for anybody trying to sell
anything on the Web.
Breadth Versus Depth
Currently, the most common navigation design is to list all the
top levels of the site, often in a stripe down the left side of
the page as was done in the original design of news.com. The
benefit of this breadth-emphasizing design is that users are
constantly reminded of the full scope of services available on
the site. This is particularly useful for users who do not enter
at the home page but go directly to a page deep within the site.
Although this is a benefit, I do find it excessive to dedicate 20
percent of an interior page to a listing of top-level options,
all of which can be accessed from the home page at the cost of a
single additional click.
The colored stripe serves a dual purpose as a site branding
mechanism, which makes it easy for users to recognize that they
are on this particular site. Thus, the stripe doubles as a kind
of logo to help users identify their location relative to the Web
as a whole.
Whereas news.com had a breadth-emphasizing navigation design, the
useit.com navigation bar is completely depth-emphasizing. It
shows the full hierarchical path from the home page down through
all the levels to the current page. Thus, users get a full sense
of their current location relative to the site structure, and
they can jump up to any desired higher-level page in a single
click. This navigation support scheme is often called breadcrumbs
after the Hansel and Gretel fairy tale.
A breadcrumb navigation list has the benefit of being extremely
simple and taking up minimal space on the page, leaving most of
the precious pixels for content. After all, content is king, and
my usability studies show that users tend to ignore navigation
options and look directly at the page body when they go to a new
page. Breadcrumbs are useful only for hierarchical information
architectures because they require nested levels of progressively
smaller subsites. But for such structures, the list of all the
higher levels truly shows the context of the current page and
helps users understand it, and it also helps users quickly move
away from the page if it was not the right one.
The LookSmart design combines depth and breadth by showing many
levels of navigational hierarchy (depth) and listing all the
alternative options for each level (breadth). The main downside
of this approach is that it takes up a lot of space on the
screen. Thus, a combined depth-breadth display is probably more
suited for a dynamic presentation that abandons simple HTML.
Dynamic HTML can be used to combine permanent visibility of all
the levels (depth) with a temporary pop-up of the alternatives
(breadth) on any given level when the pointer is over that
level's name.
A final example is Sun Microsystem's page template, which
provides navigational breadth at both the highest and lowest
levels of the site structure. Top-level breadth is shown across
the top of the page which lists all the high-level categories on
the site. Low-level breadth is shown down the left side with
links to all the content at the level of the current page,
including a few associative links to "see also" material.
Finally, the design provides a small amount of depth by
indicating the names of some (but not all) of the levels of
structure above the current page.
I would recommend use of this elaborate set of navigation
mechanisms only for very large sites with highly heterogeneous
content. (Currently, I would classify sites with more than 10,000
pages as "very large.") Sites with fewer pages will be easier to
use with a simpler navigation design. Even the largest sites will
be better off with simpler navigation if their content is so
homogeneous that users can easily understand the structure of the
information. For example, a site with the collected financial
filings of all public companies in the United States could have a
very simple structure to support navigation in hundreds of
thousands of documents because they all had similar attributes.
Unfortunately, some sites combine quite disparate material-and
lots of it-and so end up with a complex structure that needs a
lot of navigation support. This is often the case for large
companies with multiple product lines that address different
customers.
Site Structure - Page 14
Designing Web Usability
Breadth Versus Depth: Examples - Page 16
