Website Navigation and Structure: 13 Tips So People Find What They Need

You open your own website on your phone and try to find a page you ordered yourself six months ago. The menu is behind a hamburger, it has nine items, two of them are called “Solutions” and “Products”, and you no longer remember how they differ. You’ll find it, because you know the page is there. Someone arriving from Google for the first time doesn’t know that. They’ll go back to the search results and open the next site.

Navigation is invisible while it works, so it rarely comes up in meetings. But it’s what decides whether a person gets from the first page to an enquiry or a cart. Below are 13 tips in the order people run into navigation: from the menu in the header to the pop-up covering half the screen. There’s one made-up example throughout: the website of a company that sells and installs backup power equipment. Solar panels, inverters, batteries, generators, turnkey installation, a few hundred products and two audiences: homeowners and small businesses.

The visitor’s experience (website usability). People arrive with a task: “I need a 5 kW inverter”, “how much does it cost to install a power station for a shop”. Good website structure gives them the feeling they’re on the right road. Bad structure makes them guess, and every guess costs attention, which someone with three competitor tabs open doesn’t have much of.

Enquiries and sales. A product nobody finds won’t sell. A typical situation: a popular battery sits under “Components” because that was convenient for the manager who filled the catalogue. The buyer looks for it under “Energy storage systems”, doesn’t find it and goes wherever they did find it.

Search engine optimisation. Google finds pages through links and recommends that every important page be linked from at least one other page on the site (Google Search Central). Structure doesn’t replace SEO, but without it content and technical fixes work at half strength.

Before you draw a menu, write down the tasks people come to you with and check that each one has a clear path. Not “which pages do we have”, but “which questions do people search for us with”.

The main menu is the table of contents people see first. Its job isn’t to show everything, it’s to show where to start.

The common advice is 4-7 items. There’s no magic number, but the logic is simple: the more items, the longer they take to read and the more often they overlap in meaning. For a services website six or seven items are usually enough. For a shop, what matters more is how the catalogue opens up.

Bad, in our example: “Home, About the company, Products, Solutions, Equipment, Services, Projects, News, For partners, Contacts”. People can’t tell “Products”, “Solutions” and “Equipment” apart, and “News” and “For partners” are needed by a minority.

Better: “Catalogue, Ready-made stations, Installation, Completed projects, Delivery and payment, Contacts”. Each item answers a separate question.

For a large catalogue, Nielsen Norman Group recommends mega menus instead of multilevel dropdowns (NN/g, Mega Menus). In a mega menu people see all the subcategories at once, while on the third level of a cascade the cursor slips off and the whole thing closes.

What to check: can you explain the difference between any two items in one sentence; are there items left over “from the old site”; does the enquiry button stand apart from the informational items.

How it’s done on our site: the main menu of grandma.agency has six items (Services, Cases, Why Us, About Us, Blog, Contacts) and a separate button to get in touch.

Breadcrumbs are the line above the heading along the lines of “Home › Catalogue › Inverters › Hybrid inverters”. It answers two questions: “where am I?” and “how do I go one level up?”. They’re most useful where the structure is deep: in shops and catalogues. Someone lands from Google straight on an inverter product page and wants to see other hybrid models. One click, and they’re in the right category, without going back to the homepage.

Rules from NN/g research (NN/g, Breadcrumbs):

• Breadcrumbs show the page’s place in the structure, not the browsing history. If someone reached the inverter from a blog article, the breadcrumbs still lead into the catalogue.
• The current page is the last element, not a link, and looks visibly different.
• Breadcrumbs complement the menu, they don’t replace it.
• On a phone a long trail can be shortened to the last one or two levels, but don’t shrink the links to a size nobody can hit with a finger.

What Google sees. If you duplicate the breadcrumbs with BreadcrumbList markup in JSON-LD (at least two elements), Google may show the trail in search results instead of the page URL (Google Search Central). A detail most older articles miss: since January 2025 Google doesn’t show breadcrumbs in mobile search results, only the domain is visible there. On desktop they’ve stayed, and Google advises keeping the markup (Google Search Central Blog, 2025). So the markup is useful, but the main point of breadcrumbs is still the person on your site. We covered how to add and test this markup in our article on Schema.org and rich snippets.

How it’s done on our site: service pages have BreadcrumbList markup with the trail “Home › Services › service name”.

The best-known navigation advice: people must be able to reach any page in three clicks at most, or they’ll leave. It sounds convincing, but the data doesn’t back it up. Nielsen Norman Group calls the rule false outright: no published study has confirmed it, the earliest mention they found was in a 2001 book with no evidence, and in Joshua Porter’s 2003 test people didn’t abandon a task more often after the third click and weren’t any less satisfied (NN/g, 2019).

The myth survives because it’s convenient: clicks are easy to count, a person’s confidence that they’re on the right track is hard to count. And not all clicks are equal: opening an accordion and waiting for a new page on a weak mobile connection are completely different experiences. Following the rule blindly breaks the structure: to get everything “within three clicks”, twenty items get crammed into the menu, and people can’t choose any of them.

What works instead:

• A clear next step. NN/g calls this “information scent”: the link label should hint at what’s behind it. Five steps where the person is sure of each are better than three where they guess at each.
• A short path for the main tasks. “Choose a station for my house” and “order installation” are reachable from the homepage and key pages, not only through the catalogue.
• Hub pages. For complex choices: “Stations for business” with ready-made kits, selection by load and completed projects.
• Fast loading. One click followed by waiting is more irritating than three quick ones.

For most websites the phone is already the main device. For Google too: it indexes and evaluates a site by its mobile version, and recommends that it have the same main content, headings and markup as on desktop, saving space with accordions and tabs rather than by cutting blocks (Google Search Central).

On a phone the menu almost always goes behind a hamburger. That’s fine, but it comes at a price. In a 2016 NN/g study, hidden navigation reduced menu use on both desktop and mobile (less so on mobile). On one of the test sites with a combined menu 89% of participants used the navigation, on a site with fully hidden navigation 44% (NN/g, 2016).

What to take from this:

• If you have four or five items, think about whether you can show them on screen without a hamburger.
• If you need a hamburger, make it noticeable and label it with the word “Menu”.
• Put the main actions (search, phone, cart) outside the hamburger.
• Buttons are easy to hit with a finger, and the phone number starts a call with one tap.

A ten-minute check: take your phone, turn off Wi-Fi and go through the site’s three main tasks. For our example: find a 5 kW hybrid inverter, find out the installation price, leave an enquiry. Note where you hesitated or missed. If pages load slowly, start with speed: the best navigation won’t save a page that takes ten seconds to open.

How it’s done on our site: on a phone the six menu items hide behind a hamburger button.

A logo in the top left corner that leads to the homepage is one of the most stable conventions of the web. People click it when they’re lost. A logo that leads nowhere, or to “About the company”, gets noticed by everyone.

You’ll often read that a separate “Home” link is outdated because everyone knows about the logo. NN/g is more careful: not everyone understands a clickable logo, especially less experienced users, so it’s worth having both a logo link and an explicit link to the homepage. That can be the first element of the breadcrumbs. In the main menu, though, a “Home” item is usually unnecessary (NN/g, Homepage Links).

Check: the logo is clickable on every page, including the cart, the checkout and the 404 page, and it stays available when the header shrinks on scroll.

A page called “Solar station installation for business” might contain stages, prices, timelines, equipment, warranty, projects and questions. Someone who only needs the price shouldn’t have to scroll through seven screens.

• A table of contents with anchors. A list of sections at the top, each leading to its heading. On long pages it can be pinned to the side.
• A marker for the current section. Colour or underlining shows where the person is and how much is left.
• Headings that explain. “How much installation costs” beats “Our approach to pricing”: people scan with their eyes, they don’t read.
• A “Back to top” button on very long pages, especially on a phone.
• No dead end at the bottom. The page ends with the next step: an enquiry, a related service, an example project.

Check every anchor: after the jump, the heading shouldn’t hide under a sticky header.

How it’s done on our site: blog articles have a table of contents with anchors to every section.

Some people don’t want to work through the catalogue themselves. The owner of a small shop needs the lights to stay on, not to compare battery capacities in kilowatt hours.

• Entry by task, not by product. Next to “Inverters” and “Batteries”, offer “Choose a station for my house” and “Station for business”. That’s navigation in the buyer’s language.
• Filters that answer real questions. Not only “Brand” and “Price”, but also “Power”, “Hours without electricity”, “Single phase grid”. Explain any industry term in a filter with a tooltip.
• A chat with someone behind it. The invitation can be tailored to the page: on an inverter page, “Want help choosing a battery for this inverter?” rather than a generic “How can I help?”. Quick reply buttons save people the effort of phrasing a question.
• A form for out of hours. If nobody is in the chat at night, say so honestly and offer to leave contact details. A chat that stays silent until morning is worse than no chat.

A separate note on widgets: chat and messenger buttons in the bottom right corner often cover “Add to cart” on a phone. Check on a small screen. And if people reach the catalogue but don’t buy, the reason may go beyond navigation; that’s covered in our article on why no one buys from your online store.

The name of a menu item or category is a promise: people click because they’ve decided they’ll find their thing there.

Typical problems:

• Internal jargon. “Solutions”, “Products”, “Directions”: for the company these are different departments, for the buyer they’re the same thing.
• Marketing names. “Energy of freedom” instead of “Ready-made solar stations”. Pretty, but nobody searches like that.
• Synonyms in different places. “Installation” in the menu, “Fitting” in the footer, “Setup” in the text, and people aren’t sure it’s the same thing.

Name sections the way customers name them in emails, calls and search queries. A simple test: show the menu to someone outside the company and ask them to say what’s behind each item. Where the answer doesn’t match, the name should change. It works for search too: a clear section name usually matches how people phrase their query, and becomes a decent page heading and anchor text for links to it.

The menu leads into sections, while links in the text take people further along the road they’ve already chosen. Someone is reading the article “How many batteries do you need for a house” and reaches the paragraph about hybrid inverters. A link to that category right there is more useful than any banner.

For Google, internal links are the main way to find a page and understand what it’s about. Google recommends making anchor text descriptive, short and relevant to both pages, checking whether it makes sense out of context, and not writing “here” or “read more”. There’s no ideal number of links per page (Google Search Central).

The last row matters more than it seems: Google can’t reliably extract a URL from an element without href, so a “link” that only works through a script may not exist for a search engine. And look for broken links regularly: a product gets removed, a category gets renamed, and a dozen articles lead nowhere. That’s part of a technical audit; we explained how to run one in our article on the SEO audit before content.

Someone sets filters: from 5 kW, hybrid, in stock. They open the fourth inverter, look at the specs and press “Back”. And they see the catalogue with no filters, scrolled right back to the top.

Baymard Institute writes that people perceive every filter or sort change as a new screen and expect “Back” to undo the filters one at a time. 27% of the sites in their study don’t do this, and 59% violate at least one of four expectations about the “Back” button (Baymard Institute, 2020). After returning from a product page, people expect to land in the same place in the list. 13% of sites throw them back to the top, and in Baymard’s tests this directly led to people abandoning the site (Baymard Institute, 2020).

What to write in the task for your developer:

• “Every filter and sort changes the page URL, so that ‘Back’ and links to a filtered list work.”
• “After returning from a product page, the person lands in the same place in the catalogue.”
• “‘Back’ closes a pop-up or quick view instead of leaving the page.”
• “In a multistep checkout, ‘Back’ returns to the previous step and entered data doesn’t disappear, including after an error or a page reload.”

How to implement it is the developer’s call. All you need to do is go through these scenarios yourself.

A 404 page appears when an address doesn’t exist: a product was removed, a link was printed with a typo, addresses changed after a redesign. The error itself isn’t a disaster. The disaster is a grey server page saying “Not Found” and nothing else.

What a good 404 page needs:

• A human sentence about what happened, without “You entered an incorrect address”.
• The site header and menu, so people stay on the site.
• A way forward: the homepage, main sections, popular categories or products.
• Search. NN/g has recommended it on error pages since 1998 (NN/g), and the advice hasn’t aged.
• A way to get in touch: “Didn’t find what you were looking for? Write to us.”

A technical detail: the error page must return a real 404 code. If it looks like an error but the server replies “200, all good”, Search Console will flag it as a “soft 404” (Google Search Central).

Related states. Maintenance (503): briefly explain that the site is being updated and roughly when it’ll be back. A 503 code tells Google the problem is temporary, and the search engine slows down crawling, but if the errors go on for a long time, pages can drop out of the index. An empty category or a filter with no results: offer to remove the filter or show similar products.

During a redesign or a platform change, 404s turn into a flood if the old addresses aren’t redirected to the new ones. So before any move, map every old URL to its new counterpart and set up the redirects before launch, not after.

How it’s done on our site: the 404 page on grandma.agency returns a 404 code, keeps the header with the menu and offers to go to the homepage, services, cases, the blog, or to write to us.

For a shop, search is the second navigation, and for some people the first. Some know the exact model and don’t want to go through categories. Some type “generator for a boiler” and expect the site to understand.

• A visible field at the top of the page. On a site with a large catalogue an input field is better than a magnifying glass people still have to notice. On a phone the field can be collapsed, but the magnifying glass stays in the header.
• Suggestions while typing. Someone types “inv”, the site suggests categories and popular models.
• Typos and synonyms. “Invertor”, “inverer”, “power converter” lead to the same place as “inverter”. Keep adding to the synonym list from real queries.
• Not only products. People search for “delivery”, “warranty”, “installation Kyiv”. A “No products found” answer to these queries looks odd.
• “Nothing found” without a dead end. According to Baymard Institute, about half of online shops build this page in a way that frustrates people and drives them away. They recommend showing related categories, alternative queries, popular products and contacts for help (Baymard Institute).

Site search queries show which words customers use for your products and what’s missing from the catalogue. That’s almost free research.

If building your own search is hard, there are ready-made options, for example Google Programmable Search Engine, which searches the sites you specify using Google technology. For a blog or a services website that may be enough. A shop with filters, stock levels and prices usually needs search built into the platform.

A discount, a newsletter, a chat, cookies, “install our app”, all in the first five seconds and on top of the content the person came to read. A pop-up is a powerful tool, which is exactly why it’s so easy to abuse.

Google describes what gets in the way: full screen pop-ups that cover the content, ad dialogs that interrupt access to the content (including prompts to install an app), and redirects to a separate page for consent or data entry. Instead, it recommends small banners. Required dialogs, such as age verification where the content calls for it, don’t fall under these recommendations (Google Search Central).

Does Google penalise such pop-ups? In 2017 Google introduced a separate ranking signal against intrusive interstitials on mobile. The documentation now says there’s no single “page experience” signal, and apart from Core Web Vitals, other aspects of experience don’t directly raise rankings (Google Search Central). At the same time, Google warns that intrusive pop-ups make it harder for search engines to understand the content and can hurt search results, and people come back less often to sites that are awkward to use. So the main reason not to annoy people with pop-ups is the people themselves, not fear of a filter.

How to use pop-ups without doing harm:

• Not right away. Show the offer once the person has already looked at something.
• One at a time. If a cookie banner is already up, the discount can wait.
• Easy to close. The close button is visible and easy to hit, and a closed pop-up doesn’t come back on every page.
• A banner instead of a pop-up. For an offer like “free installation until the end of the month”, a strip above the header is often enough.
• On the page’s topic. On a battery page, “Want help choosing an inverter?” makes sense; a subscription to company news doesn’t.

Go through the list on a phone and on a computer:

• A menu of a few items, each answering a separate question; a large catalogue opens up as a mega menu.
• Breadcrumbs on categories, products and services, with BreadcrumbList markup.
• Every step towards the main tasks is clear, and nobody counts clicks.
• The mobile menu is noticeable, the main actions sit outside the hamburger.
• The logo leads to the homepage from any page.
• Long pages have a table of contents with anchors and end with a next step.
• There’s an entry “by task” and a chat or form with someone behind it.
• Section names make sense to someone outside the company.
• Links in the text sit where the question comes up.
• “Back” returns to the same filters and the same place in the list.
• The 404 page returns a 404 code and has a menu, search and a way forward.
• Search is visible, understands typos, and “nothing found” offers a way out.
• Pop-ups don’t appear in the first second and are easy to close.

Good navigation answers two questions for people at every step: where am I and where next. A pretty menu and counted clicks don’t guarantee that. Most of the problems can be found in half an hour with a phone in your hand.

If you’d like a fresh pair of eyes, start with a free website check. And if the structure is easier to rebuild than to patch, write to us about website or online store development: we’ll work out which tasks people come to you with and build the navigation around them.