blog post
blog post
blog post
Key Takeaways
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?
The Navigation Pyramid
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.
Top Level (Global Pages): Top level pages are global entry points. Their primary use is to inform the user about your offering and direct them to the right path for them. Examples are Landing Page, Service Overview, About or Contact.
Section Level (Hub Pages): Hub Pages help users choose the most relevant path. They route users to the right leaf page. Examples are Service Categories, Product Categories or Case Studies. On larger sites, this level can include multiple steps (e.g.: categories → subcategories → collection).
Page Level (Leaf Pages): The leaf pages are the content-heavy pages on a website. They provide detailed written content, FAQs or service / product specific details. Examples are a specific product, a specific service or a specific case study.
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.
The Role of a Landing Page
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:
Orientation: Clarify within seconds what you do, who it’s for, and what makes you different. A strong landing page reduces ambiguity and helps visitors self-select quickly.
Routing: Present a small number of clear paths (e.g., Services, Case Studies, Pricing, Contact) so users can move forward without having to scan the entire site structure or getting stuck on the landing page.
Trust: Reduce perceived risk by including logos, testimonials, outcomes, stats or recognizable partners on your landing page. Users need this demonstration of credibility to feel confident continuing.
To make these goals actionable, here are landing page sections that reliably support them:
Hero-Section: A headline + subheadline that clearly communicates what you do, who it’s for, and the outcome. Pair this with one primary call to action.
Value Proposition: Three to six concrete benefits and differentiators that explain what the customer gets.
Service / Product Overview: For products, showcase 3–4 bestsellers with clear categories. For services, present your 3–6 core services with short descriptions and a link to learn more.
Trust Signals: For software/services, use recognizable client logos, partner logos, or “featured in.” For products, highlight certifications, guarantees, and retail partners.
Testimonials: 3–6 high-quality testimonials that match your target audience. Prioritize specificity (results, context, role) over vague compliments.
Call-to-Action: Offer one primary CTA (e.g., “Contact us” / “Book a demo” / “See pricing”) and one secondary CTA for visitors who need more validation (e.g., “View case studies”).
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.
Primary Navigation Systems
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:
Clean layout: A menu shouldn’t be a sitemap that features every page on your site. Focus on top-level and section-level pages that represent meaningful starting points for user journeys.
Scannable categories: Group links into clear categories so users can scan quickly and find the right path faster.
Interactive Links: Links should look clickable. Use clear styling such as **underlines or color changes to achieve this.
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:
In-page table of contents: Best for long pages such as blog posts, guides, and documentation. A table of contents lets users jump directly to the section they care about.
Related pages: They are contextual links to relevant pages (e.g., related services, related case studies, related articles). This supports lateral exploration while keeping users in the same topic area.
Breadcrumbs: They are a tool that supports upward movement. Breadcrumbs typically sit near the top of the page, just below the header. Each page-level is separated by a slash (e.g. Services / Design / Web-Design) with the current pages highlighted for context.
Next / Previous Links: They are useful in sequential content such as blog posts, case studies, portfolios, or product ranges and encourage continued browsing.
Next-step section: This is a dedicated block that suggests the most likely next action, such as “View related work”, “See pricing” or “Book a call”. Keep one primary action visually dominant, with optional secondary links.
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.
Common Navigation Principles
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:
Where am I?
What sits above this?
What should I do next?
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.
Common Mistakes & Quick Fixes
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.
Vague labels: Rename links/buttons to match the destination (“Services”, “Pricing”, “View case studies”, “Book a call”)
Bloated header navigation: Keep the header to top tasks only and move the rest into a structured menu grouped by category.
Mega-Menus: Only include top level and section level pages, which should be grouped into clear categories. Make sure to include as little links and categories as possible.
Competing CTAs: Make one action visually dominant (e.g. “Buy now”), while keeping the secondary action quieter (e.g. “Compare plans”).
Inconsistent naming: Choose one term per destination (e.g. “Work” vs “ Case Studies”) and use it throughout all navigation.
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.
Website Navigation Checklist
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.
If someone lands on your homepage, can they answer in 5 seconds: what you do, who it’s for, and what the primary next step is (one clear CTA)?
On the homepage, are there visible links to your main paths (e.g., Services/Products, Case Studies/Work, Pricing, Contact) without needing to open a menu?
Does the homepage show at least one trust signal within the first scroll (e.g., client logos, testimonial, outcomes, certifications/partners)?
Does your header stay scannable (typically ~5–7 links) and avoid wrapping/clutter on smaller screens?
Are your nav labels specific enough that users can predict the destination (avoid: “Solutions/Explore/Learn more”)?
Do you use the same term for the same destination everywhere (header, buttons, menu, footer), e.g. always “Case Studies” not “Work/Projects”?
Is your site structure a clear pyramid? Can users always go deeper, sideways, or back up without getting lost?
When you open your menu/mega menu, are links grouped into clear, distinguishable categories?
Does your footer include (a) contact/business info (at least contact method), (b) key paths (e.g., Services, About, Pricing), and © utility links (Privacy, Terms, Imprint, Cookie settings)?
On a deep page (service detail, case study, product), do users have a clear way to go up (breadcrumbs or “Back to …”)
If your site includes search: Is search visible in the header, does it offer suggestions, and does it handle misspellings (show close matches instead of “no results”)?
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.
Frequently Asked Questions
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:
Orientation: quickly communicate what you do, who it’s for, and why it matters.
Routing: show a few clear paths so people can self-select (services, case studies, pricing, contact).
Trust: reduce perceived risk with proof (logos, testimonials, outcomes, partners).
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.