CATEGORIES
READING TIME & AUTHOR
60% of consumers abandon purchases due to a poor website user experience, with one of the main drivers being poor navigation and content layout. This is the headline of a survey reported on by PR Newswire featuring 6.000 online shoppers.
In addition, Baymard analyzed more than 180 leading e‑commernce websites in 2024, finding out that 58% of desktop and 67% of mobile websites have mediocre to poor navigational UX performance.
While these studies focus on e‑commerce, the underlying problem is universal: if users can’t find what they need quickly, they leave. Taken together, the studies underline the importance of guiding users through your website effectively. So how can we achieve that?
A helpful way to think about this is the “Navigation-Pyramid” concept that describes the process of gradually and specifically revealing information.
Your website should work like a pyramid: the higher you are, the broader the information. The deeper you go, the more specific the content becomes. Each of the three layers has a different job. The website’s goal is to effectively guide users through these layers one step at a time.
The highlighted path in the graphic shows one typical user journey. The user is being guided from “Service” (Top Level) to “Service Category” (Section Level) and ultimately to a “Specific Service” (Page Level).
Imagine a founder at a B2B company is looking for a partner to redesign their website. They start on your landing page to understand what you do, then move to the Services overview (Top Level) to explore their options. From there, they choose a category like Design (Section Level) and land on the most relevant destination page: Web Design (Leaf Page) with deliverables, process, and FAQs.
Once they’ve found the right service, they may switch paths and look for proof in your Case Studies, starting the journey again from a different entry point. This continues until they either leave or feel confident enough to reach out.
The underlying principle is simple: users should be able to move down into more detail, up to regain context or reorient and sideways to compare options. The key is that users shouldn’t be forced to make decisions across multiple layers at once. Each step should provide the context needed for the next. On the other hand when moving up, users should be able to jump back to an overview quickly.
But the reality isn’t linear. Users enter wherever the internet drops them. A leaf page might rank for a search term, meaning visitors start at the bottom of the pyramid. That means your pyramid can’t be a strict funnel, but rather has to be a structure. Users can enter at any level, but every page should restore context regarding where they are, what sits above them and what the next best step is.
We’ll cover how to achieve this in the ‘Common navigation principles’ section.
A helpful way to think about this is the “Navigation-Pyramid” concept that describes the process of gradually and specifically revealing information (for a visual representation view the graphics below).
For many visitors, the landing page is the first touchpoint with your company and products. Even when users don’t enter on this page, it remains the main orientation anchor they’ll navigate back to when they want more context or reorient.
At a minimum, your landing page should answer three questions fast: “Where am I?” – “What is this?” – “What do I do next?”.These questions translate into three concrete goals every landing page should fulfill:
To make these goals actionable, here are landing page sections that reliably support them:
Our rule of thumb when building landing pages is to help users choose what to explore next while giving them enough credibility to feel confident doing it.
When it comes to structured navigation, most websites rely on three primary systems: header navigation, footer navigation, and on-page navigation. Depending on your site’s size, you may add search as a fourth system. Let’s break them down.
Header navigation
The header sits at the top of every page and should surface the most important paths users can take. Prioritize top-level and section-level pages such as: Services, Case Studies, Pricing, About, Contact.
As a rule of thumb, keep the header around 5–7 links. This keeps navigation scannable at a glance and reduces the chance of links wrapping or becoming crowded on smaller screens.
Menus
If your site has more important paths than your header can comfortably display, use a menu to hold the additional options. Keep the primary header links visible so users can navigate quickly without having to open the menu (see the graphic below for an example).
Best practices for menus include:
Footer navigation
The footer sits at the bottom of every page. Its primary purpose is to provide business information, such as address, opening hours or contact. It’s secondary purpose is to surface key pages (e.g. Services, About, Pricing) and include essential utility links, such as Imprint, Privacy Policy, Terms of Service and Cookie settings.
There aren’t strict rules for how many links a footer should contain. We prefer to keep it slim, using up to nine primary links and five utility links. This makes the footer easy to scan. If you plan to include more links, treat it like a menu: group links into clear categories, prioritize decision-level pages, and avoid turning the footer into a full sitemap.
On-page navigation
On-page navigation depends on the page type and the user’s intent. The goal is the same: help visitors move through your Navigation Pyramid, giving them a way to go deeper, back up or sideways.
Here are on-page navigation patterns that reliably support that:
Note: Make navigation elements obviously interactive (clear link styling, hover/focus states) and use descriptive labels so users know exactly what happens when they click.
Search navigation
Search becomes a navigation system once your site reaches a size where browsing isn’t the fastest path anymore. Done well, search lets users jump directly to the page, service, or topic they have in mind.
The best practices for search navigation include, keeping it visible and predictable (ideally placing the search bar in the header), adding search suggestions and making it accessible. Great search handles common misspellings by returning close matches instead of empty results.
No matter what kind of website you’re building (service, SaaS, ecommerce, content), strong navigation follows the same fundamentals. When users can predict where a click will take them, they move forward with confidence. When they can’t, they hesitate, backtrack, or leave. These principles make the Navigation Pyramid work in practice.
Label Clarity
Navigation labels, such as button texts or header links, should describe the destination in plain language. Avoid clever naming, jargon or vague terms that force users to guess. Examples for good labels are: Services, Pricing, Case Studies, Contact, View Pricing or Book a call.
As a rule of thumb: if a first-time user can’t predict what they’ll see after clicking, the navigation label needs to be more specific.
Scannable Navigation
Navigation is not a sitemap. Your header, menus, on-page links and search should prioritize the paths users actually need. Good navigation keeps a small number of meaningful choices that users can comprehend. If you have more than a handful of choices, make sure you group them into clear categories so users can still quickly scan them.
Consistency
Users learn patterns. This both applies to universal patterns (e.g. underline = link) and your own patterns. If placement, labels or button styles change form page to page users have to relearn every single interface, which creates friction.
As a rule of thumb: keep your primary navigation in the same places everywhere, keep your button styles consistent across the whole site and use consistent naming for navigation labels.
Make the next step obvious
Every page should offer one clear “best next action” plus optional secondary actions. This ensures users keep exploring your website. An example for a primary action is “Buy now”, while a secondary action would be “Compare plans”.
Our rule of thumb is that there should always be one dominant action per decision moment. If two CTAs compete visually, you create confusion for the user.
Context
Users won’t always enter at the top of your pyramid. They might land directly on a service page from Google, a case study from a shared link, or a product page from an ad. Every page must stand on its own and answer:
Use clear page titles, active states in navigation, breadcrumbs where relevant, and contextual links back to hub pages to give users the context they need.
Navigation rarely fails because of one big mistake. It fails through small moments of confusion: unclear labels, too many choices, and competing next steps. Here are five high-impact issues we see most often and how they can be fixed quickly.
If you fix these five issues, your navigation will immediately feel clearer and more intentional. The pattern is simple: prioritize clarity and consistency. Next, we’ll turn this into a practical checklist you can use to audit your own website.
Use this checklist to audit your website in 10–15 minutes. If you can check most boxes, your navigation will feel clear, predictable, and easy to move through.
Don’t try to fix everything at once. Pick the most obvious weak point (usually labels, header bloat, or competing CTAs), improve that, and then run the checklist again. Navigation is a steady process and gets better through constant iteration.
Is the Navigation Pyramid a strict funnel users must follow?
No and it shouldn’t be. The Navigation Pyramid describes how your content is organized, not the exact path every user must take. In reality, users enter wherever the internet drops them: a service page from Google, a case study from a shared link, or a product page from an ad.
The point of the pyramid is that each level has a job (orientation → selection → detail) and your navigation makes it easy to move between them. Users should always be able to go deeper, sideways, or back up without feeling lost.
What’s the difference between “good navigation” and “more navigation”?
Good navigation reduces decision effort. More navigation often does the opposite: it forces users to scan, compare, and guess.
“Good” means the user sees a small number of meaningful choices, grouped in a way that matches how they think. “More” is when your navigation starts behaving like a sitemap, where every page is exposed, the menu becomes a wall of links and users stop moving because they’re doing too much reading.
When should I add another layer to the pyramid (subcategories)?
Add a layer when a hub page becomes too broad to scan quickly. If your “Service Categories” page has so many options that users can’t immediately spot the right direction, you’re asking for a decision that’s too large.
A good rule is: if users need to scroll a lot or carefully read to find the right category, it’s time to introduce another step (categories → subcategories → detail). The key is keeping each step focused on one decision, not piling multiple levels of choice onto one page.
Why does the landing page matter if users often enter elsewhere?
Because it’s still your main orientation anchor. Even if visitors land on deep pages first, many will return to the homepage when they want to understand the bigger picture: what you offer, whether you’re credible, and which path they should take next. A strong landing page also sets expectations for tone, quality, and trust.
What’s the most important job of a landing page?
To help users choose a next step with confidence. That’s why the three jobs matter:
The landing page doesn’t need to explain everything, it needs to make the next step obvious and feel safe.
Do I really need all navigation systems (header, footer, on-page, search)?
Not always. Small websites often work well with a strong header, a predictable footer, and light on-page guidance. Search becomes important once browsing stops being the fastest way to find information. This usually happens when you have lots of blog posts, case studies, products, or documentation. Add it when you can make it genuinely helpful.
Are mega menus bad?
Mega menus aren’t bad by default. They’re bad when they become a sitemap disguised as navigation. A good mega menu is still scannable: it’s grouped into a few clear categories, emphasizes decision-level pages (top-level + hub pages), and avoids listing every single leaf page. Reduce it until it supports quick choices.
