Navigation is one of the fundamentals that have a direct connection with usability. Without a good navigation system in place, users will struggle whenever they interact with a website. That’s why all websites should be designed in a way that allows users to both navigate easily and find what they are looking for through searching and browsing.

Intuitive navigation doesn’t happen by chance. It’s a result of detailed research and planning. In this article, I want to describe what to consider when working on website information architecture to help you design an intuitive navigation structure for your website.

Why is your site navigation structure so important?

A site or an app without a defined structure is just a random collection of pages. The structure will help users understand the relationship between individual pages and navigate from one page to another.

The difference between website Information Architecture and navigation

UX designers sometimes merge the concepts of information architecture (IA) and navigation. It’s true that these concepts are closely related, but they are not the same. Information architecture informs and guides the website navigation design.

Information architecture is the way that we arrange the parts of something to make it understandable.

Abby Covert, How to Make Sense of Any Mess

IA defines site content and functionality, while a website’s navigation is a collection of user interface components and patterns that helps visitors find information and functionality. Navigation components include global and local navigation menus, breadcrumbs, contextual links, and so on. In order to be effective, navigation should always accommodate the full scope of content and functionality of a site.

A diagram explaining how information architecture connects people to content they are looking for.
Example of Information Architecture. Image credit interaction-design.

Guiding principles for website navigation structures

The primary goal of navigation is to help visitors find information through functionality and encourage them to take desirable actions.


When working on navigation, remember that no matter which page the visitor comes from, they must be able to find what they need on that page and other pages of the website. Good navigation should feel like an invisible hand that helps users find their way around a website.


Hidden navigation patterns (such as hamburger menus) increase the chances that users can overlook navigation options. It’s a well-known fact that what is out of sight is out of mind. Even when the users know that navigation is hidden behind a certain element such as a hamburger icon, they can easily forget navigation options because they are not in direct view. That’s why the navigation should be visible and placed where users expect to find it on a website.

Before and after comparison showing a hamburger menu when it is opened and when it is closed to show it's ability to stay hidden when not in use.
Visible navigation always wins over hidden navigation. Image credit LukeW.

Content organization models

A content organization model is an organizational structure that defines the relationship between web pages. A model of the content organization serves as a foundation for website navigation structures. The product design community established some efficient models of the content structure. Knowing them is important to choose an appropriate information structure for your website.

Let’s take a look at the most common models.

Single page model

A single page contains all required information and navigation options. The single page model is ideal when a digital product requires minimum content. This model works best for landing pages.

Flat model

In the flat structure, all the pages are equally important, and they are put at the same level of hierarchy in the navigation system. This model works best for small websites.

Two circles with the word page written in it connected by a square with the word home page written in the middle.
Flat structure content organization model. Image credit WebFX Blog.

Hierarchical model

A hierarchical model shows the information hierarchy from the main elements to their sub-categories. It is the default model for large websites.

It’s possible to define a strict hierarchical model and a co-existing hierarchical model. In the strict hierarchical model, child pages are only linked from its parent page.

Square with the words home page written inside being split in to smaller circles with the word page written within and smaller circles broken off of the circles to show a hierarchical look.
A strict hierarchical model for content. Image credit WebFX Blog.

In the co-existing hierarchies model, child pages may be accessible from multiple parent pages/higher-level pages.

A Large square broken into three connected circles broken into smaller connected circles.
Co-existing hierarchies pattern. You can travel from page to page on the same hierarchical level. Image credit WebFX Blog.

How to create a good navigation structure

Website information architecture has a direct connection with navigation—IA helps create a solid foundation for the future navigation system. That’s why it’s vital to define the IA before designing navigation. IA will help to handle the volume and complexity of the content and design better navigation.

1. Create taxonomy

Taxonomy is the practice and science of classification. Creating a taxonomy is an extremely important step in building your website’s structure. In the case of IA, it’s an attempt to group different unstructured pieces of information and give them descriptions to create a more structured design. The most important technique that allows taxonomizing the content is card sorting.

IA should always be formulated with the target user in mind. Thus, as soon as you have the content, conduct a series of card sorting sessions with your target audience to arrange it. The point of the activity is to see how users perceive the website’s content pieces.

When you understand how your content should be organized, you can design proper pages and define a logical URL structure.

2. Define website’s structure

After you create a taxonomy, you need to define a website’s structure. A website’s structure should clearly define a website’s various page levels, priorities, categories, and hierarchies. The goal at this stage is to define the essence of a website’s hierarchy.

It’s recommended to take a broad to narrow approach in organizing your content because this is well-aligned with the way people expect to interact with content (going from general to specific).

Screenshot of website's different category pages filled with various technology.
Amazon uses a broad-to-narrow organization of content. The homepage acts as a navigation hub for the various categories of products. Image credit Amazon.

3. Creating navigation elements

Once a website’s hierarchy is established, the next step is to implement it in design. The navigation structure should offer a natural flow of information, and this happens when designers select a proper navigational element for each type of content.

Consider various types of navigation:

  • Primary navigation. Primary navigation is global navigation that is available on all pages. This navigation contains global navigation options and enables users to get to the main sections of a website from every location.
  • Secondary navigation. Secondary navigation supports primary navigation by providing context-relevant options.
  • Contextual navigation (also known as tertiary). Contextual navigation supports content by providing specific options. Those can be local links for product details pages on a search results page.
Comparison of two web pages showcasing the correct and incorrect way to structure primary, secondary, and tertiary navigation.
Primary, secondary and tertiary navigation. Image credit Steveschoger.

Things to remember when designing website navigation structures

Strong homepage

Your homepage should act as a navigation hub for your visitors. It’s vital to link to the most valuable pages from your homepage. By doing this, you improve findability (your visitors are more likely to find the relevant content) and show search engines what pages are the most important.

Mental model of the users

A mental model is an explanation of someone’s thought process about how something works in the real world. Mismatched mental models are a common problem among product designers. Product team members tend to fall into the trap of the false-consensus effect. Often times projecting their behaviors and reactions onto users, design layouts, and navigation according to their needs, not the needs of their users.

To create a strong website navigation, you must start with thorough user research. Begin by learning your users’ needs and behaviors and map your content to the persona that represents your target audience.

Three-click rule

The three-click rule suggests that a user of a website should be able to find any information with no more than three mouse clicks. This rule will help you prioritize information. Ideally, your important pages should be 2-3 clicks away from your homepage, and anything that is 4-5 clicks away should be less important.

Communicate current location

Failing to indicate the current location is probably the single most common mistake. “Where am I?” is one of the fundamental questions users need to answer to navigate successfully. Assure visitors that they’re in the right place by making it clear where they are.

You can make your site’s navigation structure clearer by adding breadcrumbs to your pages. Breadcrumbs are clickable links that are usually visible at the top of a page. They reflect the structure of your site and help visitors determine where they are on your site.

Screenshot of Best Buy's website showcasing a specific product page for a laptop.
Breadcrumbs are an integral part of many large websites such as eCommerce online stores; BestBuy uses breadcrumbs for its product categories. Image by Best Buy.

Be consistent

Be consistent in the navigation format and design decisions. Consistency increases the predictability of the website. Predictability makes users feel safe and secure. Thus, if you choose to use the top-aligned menu on the home page, don’t suddenly make it a sidebar on other pages.

Consider cognitive abilities

There is not much information that a human brain can hold forefront at a given time. The number of objects an average human can hold in short-term memory is 7 ± 2. It means that if you have a lot of navigation options in your navigation structure, you cannot provide all of them all at once. When the navigation system contains too many links or is too wordy, it becomes difficult to scan and comprehend. As a result, content becomes less findable. Instead of showing everything at once, you should chunk the information and provide it to users gradually.

Screenshot of Verizon's homepage.
Verizon uses a technique of progressive disclosure for the top-level navigation options. Image credit Verizon.

As soon as a user hovers over the “Small and medium” option, two nested options become visible.

Proper labeling for navigation options

The correct label gives users a proper understanding of what to expect from clicking on a link. It’s recommended to use simple and concise labels for navigation options—one or two words written in a way that everyone can understand the meaning. Ensure you use a standardized naming convention. For example, when users want to find a page with a list of products, they expect to see an option with a label “Products,” not “We offer.”

Evaluate website navigation structures in the context of the user journey

Users’ journeys are rarely linear. Most of the time, their path to conversion involves multiple entry points and touchpoints, and this has a direct impact on the navigation system. When navigation and labeling are ready, outline the whole structure, and create a sitemap. Define a scenario of interaction and evaluate what pages users will visit to complete this scenario.

Color coordinated breakdown of top level squares and connected smaller squares to show relationship between them all.
A template for the travel agency website. Image credit Visual Paradigm.

Use your analytics data to inform your navigation structure

It’s always important to keep your business goals in mind (what you want people to do on your site) when working on your navigation. Match business goals with actions that people actually take on your site and design IA around that. It’s possible to utilize analytics for that. Use tools like Google Analytics or Hotjar to understand whether your current navigation model is working for your users and your business goals.

Screenshot of a website with heat marks on the page to show where users are interacting the most on the site.
Hotjar shows what objects visitors interact the most. Image credit Hotjar.

Follow mobile-first thinking when working on navigation

When you start with IA for a mobile device, it forces you to put what’s most important on the page. Mobile-first thinking will help you prioritize both content and navigation options. So at the time when you start working on desktop design, you will have a clear picture of what navigation options you will include and in what order you want to show on individual pages.

Three boxes displaying the progression of web page options available on mobile and desktop design.
The Guardian website has a well-prioritized list of navigation options. Image credit justuxdesign.


Navigation is a conversation between users and the system. A good navigation structure is an effective conversation that reflects user behavior. That’s why the process of navigation design should put the user front and center. Users should be involved in all steps of product design—from creating an information architecture to the final testing of website navigation on various types of devices. And always measure the effectiveness of your navigation design from the user perspective—adapt it to user mental models, evaluate navigation in context of a user journey, support user on every step by indicating their location and optimize navigation for mobile browsing.