Discover The Most Popular Navigation Design Patterns

Hamburgers, sandwiches, menus, snack bars… Wait a minute. This post is about Navigation! Your users need it to locate specific features and content on your website or in your app. It seems simple on the surface, but it’s not that simple when you want to build a very efficient user experience in your product or website.

Here are the most efficient navigation patterns and the best ways to apply them to your product or website.

Navigation Tabs

With tabs, you can separate your content by sections. When a tab is selected, the relevant content is shown or loaded inside the content area.

Often times a long content needs to be separated into sections and accessed using a flat navigation structure where you can see the current location.

Tabs mimic the real-life experience of a folder with documents, an organizer with marked pages, and similar physical objects.


It’s wise to use tabs when you have 2 to 9 sections of content. The names of tabs should be short so it’s easy to read them and navigate quickly. Also if you have a lot to sections you need to make sure they fit into the maximum allowed width.


If names of tabs do not fit then you can try to wrap them to a second line. Alternatively, they can go over the available screen or container width and you can provide users with a visual indicator explaining that more tabs outside of the screen or container. One important thing here is that tabs should be in one row only.



In some cases, you can supplements tabs with icons or use only icons if they look self-explanatory and don’t make it difficult for users to understand what content can be accessed in each tab.


Make sure you an active tab is distinctive from other tabs so users can see where are they located.

Do not use tabs in case if you have a sequential content that needs to be read in a particular order.

Menus

Vertical dropdown

It’s a good design practice to have a drop-down menu if the user needs to navigate among sections of a website, but space to show all navigation options is limited.


You can make your dropdown menu options in a more interactive way and even give access to some features.


Also, the layout of a dropdown can be complex rather than simple to improve interaction and engagement with your users.


Horizontal dropdown

Sometimes you can have a sidebar menu and there are sections that can contain subsections or some additional content. Of course, it should be used only in case if you have multiple directions from the section (multiple levels).


You can build your sidebar bar menu and utilize a horizontal dropdown menu in a more interactive way. Of course, it depends on a product, website, and app. It can be easier and faster to interact within the menu to perform some of the actions or having some starting points than going into the full section of the product.


Accordion

It used to be a popular design pattern on websites to show menu subsections menu, but this use case is more common on mobile screens now.

Collapsing each step under an accordion can be an effective way of conveying the form workflow to the users without overwhelming them.



The same works in case of simple content consumption. The accordion element can be very lengthy, and if readers decide to quit reading it and jump to another subtopic, they can close the current accordion and quickly move on to the next one.


If we explore a broader aspect of Navigation then we can find a few other use cases.



It can be efficiently used for top to down wizards and step by step processes.


Also, it’s a good pattern that you can use for filters in the sidebar if you want to show only limited options for each filter so people can see all their filters at first.


Hamburger

This navigation design pattern has a funny name and for those you who don’t know it’s called this way just because often icon for this menu button looks like 3 lines that. So yeah, you can call it a sandwich or something like this, but seems like “hamburger” stuck there as a conventional name.

I recommend using it for mobile apps or mobile versions of products like web apps and websites.

I’m aware that there are a lot of examples of websites with this type of menu, but mostly it’s done for esthetics purposes and on sites that don’t have much content. In cases like this, there are not many valuable menu items or info. Often you can scroll websites like this and use effortlessly without even using navigation. I highly do not recommend to use a hamburger menu if you don’t want to hide your menu and create this extra step for your users to access it.

As for the mobile screens, if you have hidden navigation, it's beneficial due to the economy of screen space. Although, there is an alternative design pattern that can be used instead of the hamburger. You can read more about Hamburger here in this post: Best UX Patterns for Mobile Navigation.


Quick Actions and Shortcuts

Notifications

These design patterns should be used when the user wants to be informed about important updates.

Of course, it should notify users about information that’s outside their current flow or screen.

One important rule here is to minimize interruptions. Do not notify users about technical operations or system errors that do not require any user action. Otherwise, all of this will be redundant.


You can provide your users with certain actions within the notification dropdown. This allows us to do quick micro-interactions and not be distracted too much from the current flow or task.

You can make notifications dismissible and let users disable or quickly change how a specific type of a group of notifications will be delivered to them in the future.

It’s a good practice to give users control over notifications. They need to have an ability to choose what notifications important for them and how often they want to receive them. Of course, there are exceptions as important system updates that can be shown to users despite their settings with a single goal to prevent bad experiences with the system in the future.

Breadcrumbs

This is an important navigation design pattern that helps users to understand their current location within the hierarchical structure of a website.

Breadcrumbs are usually represented as a trail of links at the top of the page, usually just below the global navigation. It’s a good practice to use breadcrumbs together with main navigation.


If users reach a deep page after traveling through the pages, they will have a fairly clear understanding of where they are.

Breadcrumbs are useful in cases when a user has landed on a page from an external source (another website, resource, banner ad).

Search Navigation

Basically, Search can be the main navigation starting point, and users might not need any type of navigation at all. However, there are cases where users don’t know where to start and what to search for. So traditional navigation patterns like a menu, tabs, and similar to them help users to understand where they can go.

Search is one of the most popular design patterns in eCommerce, news sites, and blogs.


Even though the search bar looks like a simple design element, the most difficult part of the whole search experience is on the next step where the user sees the results related to his request. It’s important to design it specifically for your target audience and regular users. So they can get most of it.

Shortcut Dropdown

A dropdown menu as a navigation design pattern can be useful at times when you need to provide shortcuts to the specific functionality of a website or an app. Sometimes, it can be used as navigation when you don’t have enough space for a more traditional navigation bar or visible menu, but I recommend to do so only if you don’t have any other choice.

A good use case is when you have a search bar as a part of navigation, and you need to specify your search queries by categories or specific types. See the example below.



Modal window (pop-up)

A window that prevents the user from his interaction with the original interface (website or app). It’s an effective way to force your users to focus their attention on a specific task outside the original flow.

The main downside of it is that it’s a pure interruption, and if it’s not helping users in any way to proceed with the main task, then it leads to bad user experience. Otherwise, it might be a very efficient pattern that helps to accomplish the main task and avoid mistakes. For example, if there is a case when the user needs to delete a product from their shopping cart, then a modal window can be a way to make sure that they don’t do it by a mistake and that the user is 100% sure about this decision. However, this is not something that works for any case like this. You need to be sure that it’s beneficial for the business and users to create this type of interruption.

In most cases, there is no need to force users into specific actions. As a result, modal windows add unnecessary pain points for your users. However, in some cases, modals might be helpful, for example, to add a specific piece of information that requires several steps to do so, but you don’t want users to leave the current screen or section of the website. You can make it possible with a multi-step modal window. That way, users can stay on the original screen and perform this specific task without leaving the main interface. One good example is the Profile user interface. Let’s say the user wants to add a photo to his profile. A modal window might be a short term wizard with such steps as upload photos, crop, and edit, save changes.

Another example is a quick message.

Fat Footer

Sometimes, the hierarchical structure of a website can cause delays for users to navigate to specific pages or features. Adding links for quick access to other sections is an easy and natural way for users to continue their journey.

I recommend using footer space for shortcuts to the most frequently used pages and functions. This way, you can shorten the path and decrease the confusion moments for your users. Also, it’s a good way to keep visitors on your site for longer. Which is very good for the reputation of your resource.

I’d say navigation or shortcuts below the main content is an easy and natural way for users to continue using your website. This way, they can end one experience by starting a new one.

Of course, using a fat footer is not a panacea, and it’s something that you need to implement with the experiences of your users in mind. To make it work the best consider asking these four questions when creating a footer:



Home Link

Often times, you need to provide your users with the way to go back at the start location of your website or application. Usually, you can do that by making a logo as a hyperlink, but sometimes it’s not obvious for certain groups of users. So it makes sense to add an additional menu option called “Home” or “Dashboard”.

These were the main navigation design patterns. I hope this is useful, and your next project will benefit from this article.

I'm preparing a couple more posts related to design patterns. So stay tuned by subscribing below on future posts. And I'll catch you in the next one!

Join my personal email list and receive an email from me every 1-2 weeks.

So if you like the stuff that I write on the website then leave your email to get it right into your inbox. No BS, spam or tricks... just useful content: