UI Design Update
Newsletter April, 2003
Human Factors International
Straub, Ph.D., CUA, Chief Scientist of HFI, and Susan Weinschenk,
Ph.D., CUA, Chief of Technical Staff for HFI, revisit the issue of
Web site breadth vs. depth.
||Dr. Eric Schaffer, Ph.D., CUA, CPE, Founder and CEO of HFI offers practical
on breadth vs. depth
last 5 years a controversy has been brewing concerning the breadth
vs. depth in menu design for Web sites. Which is best? A site that
is broad and shallow, presenting a lot of choices to the user right
away, but only requiring a few layers? Or is it best to have narrow
and deep, which means presenting only a few choices at a time, but
requiring many layers in? As is usually the case, the answer turns
out not to be so simple. In this issue of the newsletter we explore
the variables that are emerging as important in the debate.
history of breadth vs. depth
In the March
1999 issue of this newsletter, Bob Bailey concluded that breadth
was better than depth. He reported on two studies that also surveyed
past literature and concluded that it was better to have lots of
categories in Web menus at the highest level and therefore reduce
the number of clicks needed to get to the end point. (Zaphiris and
Mtei,1998; Larson and Czerwinski, 1998).
by Snowberry, Parkinson & Sission (1983) demonstrated that in
addition to performance and preference declines, navigational error
rates increased significantly as hypertext depth increased. This
study further demonstrated the value of categorical grouping in
shallow structures, showing that participants had an easier time
finding resources in a 64 item list that was functionally organized
than in a list with random presentation.
(Kiger, 1984; Jacko & Slavendy 1996; Zaphiris and Mtei 1997)
continued to demonstrate that:
- users found
resources faster in broader, shallow sites than in narrow deep
- users understood
broader, shallow sites better than they understood narrow deep
studies also began to demonstrate that although shallowness is a
unique and defining parameter for success in learning hierarchies,
sites can also be too shallow.
suggests that there is more to it. When we focus specifically on
people browsing the Internet we change the question slightly. Instead
of just asking "Which menu structure is best?" we really
need to ask, "Which menu structures helps users quickly derive
a conceptual model of the site hierarchy?" Creating an accurate
representation of the structure and organization of the site results
in a more successful and efficient navigation through the resource.
are thought to influence users' success in learning and traversing
information hierarchies. These do include the breadth/depth of hierarchy,
but additional critical factors are: the transparency of the category
and sub-category labels, qualities of information scent, relative
size of categories, and the shape of the hierarchy.
scent and moderation in everything
of Snowberry et. al. suggests that an alternative explanation for
participants' success with a shallow design may be that the category
labels were discrete enough to support reliable decision making.
It seems that users conceptually manage broader category sets when
the names of the elements within the set are discrete and easy to
compare. Clear category names provide road signs or 'scent' cues
about what lurks behind the link. Good 'scent,' in turn, supports
successful category selection. Larson and Czerwinski (1998) tested
the hypothesis that there is an interaction between structure, scent
and category soundness by measuring speed, click-stream accuracy
and perceived 'lostness' while varying breadth/depth parameters
of presentation in a well defined information space. They observed
that the distinctness of category names was particularly helpful
at the highest levels of the information hierarchy, since selecting
an incorrect path at the first hierarchical level often resulted
in multiple-click backtracks. Note, however, that even with clear
and distinct category labels, Larson, et. al. concluded that moderate
breadth affords optimal user performance.
The claim that
moderate depth supports optimized performance is further buttressed
by Zaphiris (2001) computational models of user performance in menu
search. Using behavioral values from previous HCI studies, Zaphiris'
model predicts that menu design on either extreme (very deep or
very broad) will undermine learnability and usability for users.
This is postulated to be particularly so for older individuals
the fastest growing segment of Internet users.
Initial and final selection menus should be broadest
parameter of site structure design that is currently drawing more
attention is site shape. Consensus is that the initial age should
balance breadth with layout/white space to offer a moderate selection
of navigational options. Work on the optimal shape of a hierarchical
site suggests that concave designs are optimal. A concave shape
presents a broad initial selection screen, followed by category
decisions over small categories and then followed with a terminal
option set that is again somewhat broad. Norman and Chin (1988),
and more recently Bernard (2002), demonstrate that for browse-oriented
tasks, concave designs take users less time to navigate, and evoke
less wasted clicks. In contrast, they observed no differences in
ability to successfully navigate the various menu structures for
explicit, target-specific scenarios.
navigation efficiency through sites of varying depths and breadths
broadly converges on the findings that users find roughly 16 (ungrouped)
top-level links leading into 2-3 subsequent menus the most efficient,
learnable and least error prone. This knowledge is well and good,
but what does that really mean for designers? Today? Now?
First, we can
derive some broad (and largely intuitive) design guidelines from
deep is too deep: users have a more difficult time encoding,
and consequently navigating, deep sites.
broad is too broad: conversely extremely broad sites (which
may encourage satisficing) also present a challenge to efficient
sub-grouping reduces perceived breadth: grouping navigation
elements thematically improves performance for even the broadest
labels improve navigation accuracy: creating clear and distinct
labels for navigation elements enhances performance.
careful consideration of the specific tasks used in these studies
suggest that the breadth/depth findings map directly to effective
Intranet design. Consider the typical participant's task in
these studies: find an explicitly named target (search navigation)
or navigate to an implicit, user-selected token within a specified
category (browse navigation). Since Internet users frequently come
to the Web looking for information about a concept, but without
a specific page in mind, it is commendable that researchers have
begun to focus more extensively on browse-driven exploration. However,
it also must be noted that both implicit and explicit search tasks
are still essentially serial tasks. That is, the research participants
in these studies completed well-defined, single tasks, returning
to the home page before initiating the subsequent task. This approach
maps directly to the serial task completion behavior patterns observed
for the frequently executed Intranet tasks: find a phone number;
download a form; check the stock price; change personal benefits
information, find a policy.
Thus, the breadth/depth
research speaks directly to optimal structure for Intranet design.
Further, the cumulative findings of the research challenges the
widely implemented approach that Intranets should focus corporate
or institutional news wrapped in what is typically a tab-based (or
tab plus left side navigation) functional navigation design. Instead,
this research suggests that moderately broad site structures, consisting
essentially of functionally grouped, transparently labeled link
lists will provide the most effective navigation structure with
the best perceived usability on Intranets. Anecdotal user-centered
field analysis and prototype validation provides additional support
for this approach to Intranet design.
want to know how to take advantage of the depth/breadth research
need to think about the kinds of tasks that people do on their sites,
and how people approach doing those tasks. Do users tend to do one
task at a time? Do they finish that task before they start another?
(Intranets are one example of a site type where this serial task
completion model holds.) If so, then the task approach on your site
is parallel to the task flow that was tested in the depth/breadth
work. Therefore, these results apply and a broad, shallow menu architecture
should provide users the most efficient and learnable access to
resources on your site. In this case, however, the specific type
of site is less important. In applying these results it is more
important to think about what people do, and how they do it on your
(2002) Examining the effects of hypertext shape on User Performance.
Usability News, 4.2. Original
and Slavendy, G. (1996). Hierarchical Menu Design: breadth, depth
and task complexity. Perceptual and Motor skills, 82, 1187-1201.
(1984). The depth/breadth tradeoff in the design of menu-driven
interfaces. International Journal of Man-Machine Studies,
Larson, K and
Czerwinski (1998). Web page design: Implications of memory, structure
and scent from information retrieval. Proceedings of the Association
for Computing Machinery's Computer Human Interaction Conference,
L. and Chin, J. P. (1988). The effect of tree structure on search
performance in a hierarchical menu selection system. Behaviour
and Information Technology, 7, 51-65.
K. Parkinson, S. and Sisson, N. (1983). Computer Display Menus.
Ergonomics, 26, 699-712.
(2001). Age Differences and the Depth-Breadth Tradeoff in Hierarchical
Online Information Systems. In C. Stephanidis (Ed.), Universal Access
in HCI. Mahwah, NJ: Lawrence Erlbaum.
and Mtei, l. (1997). Depth v. Breadth in the Arrangement of Web
Research into Practice seminar
at this issue before in the March, 1999 newsletter...
Keep using hierarchical menus, with 18-24 overall choioces, grouped.
Have up to 10 choices in a group.
NOW, we see
it is really important that the top-level group headers stand out
and create a crisp overall picture of the site structure. Good point.
Reducing the user's feeling of 'lostness' can mean increased sales,
increased Intranet usage, increased likelihood of buying an application,
and other delightful outcomes.
It is fascinating
to see research on site structure move beyond just the home page
design. We need to look at the overall flow. I am far from convinced
that a concave structure is always best. But it is good to think
deeper when we design structures.
HFI editors at