Part One covered Layout Best Practices. Now let’s get into some tips on how to design navigation structures which are both intuitive and predictable, making them more user-friendly.
The purpose of a product’s navigation is two-fold.
- Help your user easily get to where they need to be.
- Provide visual cues as orientation for where they are now.
The ultimate goal of a navigational structure is for new and returning users to be able to figure out how to get around a digital product easily and efficiently.
This graphic here illustrates some of the questions a user may have when encountering a poorly structured navigation.
Let’s talk now about the specifics of building an effective nav.
Categories vs. Utilities
As you build out your navigation, you’ll want to keep in mind the difference between content categories and what I refer to as an product’s utilities.
Categories are content. They are high-level links to the main sections of your product’s content categories. Utilities, on the other hand are links to important elements of the app that aren’t really part of the content’s hierarchy. This includes tools and ancillary things like help screens, product authentication, error screens or a developer’s api documentation. These are all examples of utilities, and they vary fairly widely per-product.
When you’re structuring a navigation, you’ll want to be sure you’re not mixing these two types of link in your navigation.
Mixing these two types of links in a product’s navigation causes confusion. Eye tracking studies tell user researchers that users expect these two different types of links to be located in different places on the screen.
Twitter and InVision are both good examples of seperation between these two types of links in a product’s navigational structure. Here I highlighted the categories in green and utilities in pink.
User’s generally expect these types of links to be in these relative locations in a traditional web application’s layout.
The Three Most Common Navigation Structures
When it comes to physical placement of your categorical navigation, there are a few best practice “locations” within a screen’s real estate that lend themselves well to specific information architectures.
Let’s discuss the different areas of placement for your navigation. We’ll go through the top three positions, based on user expectations and space constraints.
The first example is the top header placement.
This placement is ideal for your primary navigation because users look here for navigation intuitively. The header is also separated from the pages content, reducing confusion between navigation and content. Finally, the limited horizontal space forces you to organize your information clearly.
The second recommended placement is the top Subnav.
This is useful when the header space isn’t large enough for all of your primary category links.
Similar to the top header pattern, users will still look here intuitively for their primary navigation links.
Finally, there’s the side navigation.
This is a very common pattern, especially useful when you have a lot of category content in the product’s architecture.
It’s vertical structure supports scrolling, when the list becomes too long to fit within a window.
Combining Navigation Patterns
With a complex project, you’ll likely find yourself combining these placements to form your navigation’s structure.
Here are some examples of how this may come together:
Header + Side Navigation — A very common structure with the primary navigation in the header and the secondary navigation in the sidebar.
Header + Sub Navigation — Also common, but use this only when both the primary and secondary navigation will fit in the space.
Sub Navigation + Side Navigation — Here the side navigation acts as our top-level, primary categorical navigation bar. The sub navigation acts as a secondary level, within the context of each screen.
Header + Sub Navigation + Side Navigation — All of the things! A useful pattern to follow within more complex products. Here the Header is primary, sub is secondary and side acts as a tertiary set of categorical navigation.