Virtually every website that has more than a few pages uses some structure for organizing the content. The most common (and most easily understood) structure is to categorize pages into groups, often with distinct subgroups. The end result is a hierarchy of content, a structure familiar to most of us from our interactions with organizations, families, and the natural world.

Decisions about exactly how content should be grouped can have dramatic consequences for how your site's structure works (or doesn't work) for users, but these nuances are difficult to understand at first glance. To analyze how a structure will work, we often need to create a visualization that shows a high-level view of how the different pages of a site relate to each other.

Consider these 2 structures: each represents the same amount of information, and shows a perfectly logical way of organizing the content for a website. Yet the end-user's experience of browsing these 2 hierarchies — even if they contain exactly the same information — will be very different.

image of a flat hierarchy and a deep hierarchy
Left: a flat site hierarchy, with few vertical levels. Right: a deep site hierarchy has the same information organized into more sublevels.
Both of these site hierarchies start at the top with a single homepage, but the information below that page is organized quite differently: the website on the left has 8 major categories, but the site on the right has only 4. This side-by-side comparison illustrates what we mean when we talk about flat and deep hierarchies. The flat (or broad) hierarchy on the left looks wide and short, because it has only 3 layers. The structure on the right is deep, with 5 levels, fewer categories and subcategories at each level, and ends up appearing taller and narrower.

Although website visitors never see this type of visualization, the shape of the hierarchy has a huge impact on the end user's experience, for 2 reasons:

  1. Content is more discoverable when it's not buried under multiple intervening layers. All other things being equal, deep hierarchies are more difficult to use.
  2. Categories that are specific and do not overlap are the easiest to understand. This cuts both ways: In deep hierarchies, when there are only a few categories on each level, they tend to be more generic and, thus, more confusing. A flatter hierarchy with more categories at each level usually has more-specific labels that are easier to understand; but in broad hierarchies with a very large number of items, there is often some conceptual overlap between at least a few of the categories. Users can also become overwhelmed with long, cluttered menus.

Three hospitals in Florida illustrate the benefits and pitfalls of different information hierarchies. On the website for the Tampa General Hospital, the Medical Services category lists 32 separate disease areas and treatment centers. This flat hierarchy makes it very easy to discover what kinds of treatments the hospital offers. Visitors can click directly from the drop-down menu in the global navigation to a page that addresses a specific disease. Since most patients are treated for one thing at a time, jumping straight to information about a specific condition is attractive. But the risk with this type of menu is that users may be overwhelmed by so many links, fail to read the whole list closely, and miss the best option. For example, a visitor interested in neonatal care might easily overlook the link for the Jennifer Leigh Muma Neonatal Intensive Care Unit, and end up clicking the Pediatric Center at Healthpark instead. Lists this long can be made easier to scan by providing some grouping — not pushing some items down into sub-categories of the hierarchy, but simply visually organizing related items together.

Tampa General Hospital homepage with drop-down menu showing subcategories under Medical Services
Flat hierarchy: The Tampa General Hospital website shows a long list of more than 30 items under Medical Services. Rather than burying these under a few broad groupings, each distinct treatment area is surfaced and accessible directly from the drop-down menu in the global navigation.
The website for Baptist Health, in Jacksonville, has only half as many items in their Services drop-down menu. This shorter list is much easier to scan, but doesn't offer the same discoverability for specific content. In many cases users will have to click one category and then drill down to a lower level to find specific information, for example about in vitro fertilization or neonatal intensive care. In some cases, it's not even clear which major category would be a good starting point. You could click Cancer Care to get information about prostate cancer, but there is no "Urology" category, so it's not clear where to find information about other prostate conditions.
Homepage for Baptist Health Hospital with drop-down menu showing subcategories under Services
Moderately deep hierarchy: Baptist Health lists only 16 service areas; some specific topics are not listed in this menu, so users will have to click through to lower levels of the hierarchy to find them.
The website for University of Florida Health, in contrast, shows specific disease information only at lower levels of the site hierarchy, beneath Patient Care, then Medical Care, and then Specialty Care. Only 3 levels down do you finally arrive at a page that lists (still fairly broad) treatment areas such as Cancer Specialties, Heart Care Services, and Women's Services.
UF Health webpage showing subcategories under Specialty Care
Deep hierarchy: UF Health website shows the disease-specific information 3 levels down from the homepage: Home > Patient Care > Medical Care > Specialty Care.
Requiring users to click through so many levels to get to specific content usually doesn't work well. Users easily become lost, distracted, or simply decide it's too much work and give up. So, for deeper hierarchies it's critical to provide alternative navigation options: shortcuts that lead directly to lower levels. UF Health does this in the drop-down menu from the global navigation, where users can browse alphabetically for information about a specific disease, or choose one of the Most Viewed Conditions & Services.
UF Health homepage showing the drop-down menu under Patient Care
Deep hierarchy shortcuts: The Patient Care drop-down menu on the UF Health website includes alternative navigation options (alphabetical and Most Viewed Conditions & Services) to help make lower-level content more visible.

In This Article:

Representing Hierarchies in the Interface

With flat hierarchies, it's relatively easy for users to understand how any given page relates to other pages, as long as there are some visible navigation menus. But the deeper a hierarchy becomes, the more likely visitors are to become disoriented. For sites that are more than a few levels deep, breadcrumbs (which show a link for each level of the site from the homepage to the current page) can help users orient themselves and understand the site structure. Sitemaps are another useful way of helping users see the structure of a website.

Flat or Deep?

Should your website's hierarchy be flat or deep? Like most design questions, there's no single right answer, and going too far to either extreme will backfire. Flat hierarchies tend to work well if you have distinct, recognizable categories, because people don't have to click through as many levels. When users know what they want, simply get out of the way and let them find it. You can use card sorting to help decide how to structure the information in the way users think about it. Tree testing can help validate the structure by allowing users to attempt to find information in the proposed hierarchy.

But there are exceptions to every rule. In some situations, there are simply too many categories to show them all at one level. In other cases, showing specific topics too soon will just confuse your audience, and users will understand your offerings much better if you include some intermediate category pages to establish context.

Observing your users — via usability testing, analytics, and search logs — can help you understand what problems your audience needs to solve and how familiar users are with your content. This background knowledge is essential to achieving the right balance between a breadth and depth in your hierarchy.