Flat navigation and deep navigation are two primary classes of navigation to be analyzed for your information hierarchy strategy.

Flat navigation often has few layers in the information hierarchy (usually 1-3) and fewer navigation points overall. On the other hand, deep navigation has more layers (4 or more) in the information hierarchy and subsequently more navigation points overall.

Some information heavy websites are complex. While deep navigation might be inevitable to organize a highly complex set of information, it has its downsides. We recommend flat navigation hierarchy because it’s generally faster and easier to use.

Flatter Navigation Consolidates Pages by Making Use of Vertical Real Estate

One key benefit of consolidating pages and making use of vertical real estate is that it makes navigation easier.

As we’ve argued in another post, web pages are often scanned rather than read. Users want to quickly scan and find the information that is relevant to them. Flat navigation enables this. While individual pages are often longer, this is beneficial because related content is divided up in different page sections that can be quickly scanned. It eliminates the need to navigate separately to different sections, each of which would have its own page.

We see a lot of 1 page sites today that are actually 7 pages or sections on one scrolling page. In a deep navigation, you’d have seven other pages and a larger amount of wait time to access the content.

Combining pages with related content helps in removing layers of navigational hierarchy. This often increases usability. As such, we suggest thinking about how to group related content in vertically longer pages versus simply dividing the content into multiple pages. Why create many pages when you can create one longer page that is quick to scan and rich with connected information? Bottom line, more related content on a page can create for less navigation.

Flat Navigation Decreases the Layers of Navigation and Often the Number of Pages

The benefit of decreasing layers of navigation and the number of pages is speed. By reducing the number of layers, users have a clearer path to the specific layers they’re interested in. By reducing the number of steps necessary to find a specific page, users can quickly find the information they need.

A website with flat navigation might have 1-3 layers of navigation. A website with deep navigation might have 4-6 layers of navigation hierarchy with significantly more pages. The biggest downside of deep navigation hierarchy is the number of steps it takes to navigate to a new page.

These steps take time. Each time a user refreshes a page, it takes an average of 6 seconds to reload. It could take 4 to 5 clicks to find the specific content they need. You could be asking users to wait up to 30 seconds before finding the page they are looking for.

We’re seeing a trend in web design toward creating strong first and second layers of a website. Filter and search functions provide deeper access to more specific content.

The simple first layer of a website – the homepage – enables easier entry to the larger second layer. The homepage of a website with flat navigation gives users a view of a small sitemap of the different categories of the site. By hovering over the different navigation elements, they can see all the key pages of the site without clicking through to find the content they’re looking for.

It’s not that flat navigation doesn’t always have a lot of pages. For example, within mega menus, users can often choose from a dozen options organized in various categories, each with its own page. The key is that users can quickly navigate to the page of interest without refreshing the page multiple times.

Flat/Less Navigation Caters More to the Variety of Ways People Find and Hone Information

The benefit of catering to the way people normally find and hone information is that your navigation hierarchy will be easier to use. Deep navigation caters mostly to the idea that people are only going to browse for your content, whereas having less navigation recognizes that users utilize internal web page searches, search engines, and filtering to find the specific content they need.

For example, take Fresh Consulting’s website and the variety of ways a user may find information. A user may search on Google and type in a query about web applications services at Fresh Consulting, and be taken directly to that specific page. They may also search our blog or filter our portfolio for a specific example they want to share. They may go directly to a page or a link from another ad or site. In the process, on almost all of our pages (services, portfolio, technology, bio pages), they may see related information of interest in content sections on the page that is not in the navigation itself. They may scan one of our home page sections and footer and go directly to another page from there. Case in point, we haven’t even discussed our 1st top level navigation and 2nd level navigation in our mega menu as the method for finding what they’re looking for.

There are a variety of entry points to a web page. The top level navigation and homepage isn’t your only landing page.  It’s unsafe to assume that they will follow your deep hierarchy. By having less manual navigation, you’ll enable people to access the mechanisms they already use or want to use.

Flat navigation still needs to make content easy to discover. Tools such as mega menus, a drop down interface from which users can navigate to sub-pages, may reduce the cognitive load of finding a specific page. Without even clicking once, users can hover over a mega menu, choose from the drop down menu, and directly access the page they are looking for.

Flat Navigation Requires Less Inputs to Get Content

The key benefit of requiring less user input for users to navigate is that it makes your website faster and easier to use. However, you should still allow users to find what they want – via search, filtering, or scanning.

One form of inputs is clicks. Clicks are a part of navigating the web, but unnecessary clicks negatively impact usability. Clicks that require page refreshes are especially expensive in usability. By “expensive,” we mean that clicking takes a toll on users in terms of time and effort in navigating to information they are looking for.

Flat navigation can allow users to get where they need to go in a shorter amount of time. In designing the homepage of the Fresh website, one goal was to make it easy for users to find specific services. Hovering over the Services tab in the main navigation drops down a mega menu. The 2nd layer of navigation available on hover allows users to see all the site options in one large interface without clicking again.

Without navigating back to the homepage, a site visitor could hover over the Services tab at the top of the page and see the other 15 services that we offer. Just because a website has a flat navigation hierarchy doesn’t mean that you lose or minimize content. It’s simply a more efficient way of allowing users to access what matters to them.

Generally, most of us are looking for the quickest and easiest route to find what we need. Requiring less inputs expedites the process of seeing results, and flat navigation hierarchies play a huge role in turnaround time.

Summary

When considering your flat navigation hierarchy, remember the following benefits. A flat navigation hierarchy:

1. Consolidates pages and maximizes the user of vertical real estate
2. Decreases layers and the number of pages
3. Caters to the variety of ways people find and hone information
4. Requires less input from users, which can be expensive in usability

Depending on the purpose of your website, you may have the option to choose between flat or deep navigation. With consideration of UX best practices and emerging trends in web design, we suggest flat navigation.