Ines runs a small physiotherapy practice in Porto. Her new website has a menu with nine items: Home, About, Approach, Treatments, Team, Blog, Prices, FAQ, Contact. It looked thorough in the design file.
On a phone, the nine items live behind three little lines in the corner. A patient with a sore back opens the page on the tram, scrolls past a photo of the treatment room, past a paragraph about holistic care, and wonders whether this costs 40 euros or 140. She never taps the three lines. She books somewhere that put the price on the page.
Meanwhile a German visitor, who would happily travel for a specialist, looks for the Impressum out of habit. He finds it eventually, in a menu inside the menu.
Ines and her patients are imagined. The research, laws and court ruling below are real.
Navigation is a strange design problem. Nobody visits a website to use its menu, yet the menu decides whether they find what they came for. Too little and people get lost. Too much and the menu becomes the page. This chapter is about finding the right amount, and about the few links the law insists on whatever you decide.
One page or many?
Before you design a menu, decide what kind of site you are building. There are really three shapes, and each needs a different kind of navigation.
A landing page has one job: one offer, one action. Someone arrives from an ad, an email or a search result with a single question in mind. The page answers it in order and asks for one thing. It barely needs a menu at all.
A one-page site has several sections a visitor may want to jump between: services, prices, reviews, contact. A short menu of anchor links that scroll to each section works well here.
A multi-page site has content that genuinely does not fit on one page: twenty treatments, a blog, a shop. It needs a real menu, and probably a search box.
Most small businesses picking up this playbook need the first or second shape. A plumber, a physio, a wedding photographer or a bookkeeper usually has one main service and a handful of questions to answer. If you are unsure what order those answers go in, the section order chapter covers it.
What to do: write down every page you think you need. Next to each, write the question it answers. If two pages answer questions the same visitor asks in the same visit, they probably belong on one page.
When a page needs no menu
Paid traffic changes the maths. If you pay per click to bring someone to a page about one offer, every link that leads somewhere else is a door out of the room you paid to fill.
Oli Gardner, co-founder of the landing-page company Unbounce, gave this a name: the attention ratio. In a 2014 Unbounce webinar, he defined it as the number of interactive elements (links) on a page compared with the number of conversion goals, which for a campaign page is one. A homepage with fifty links has a ratio of 50:1. A focused landing page aims for 1:1.
It is a useful lens, and it is a practitioner's rule of thumb, not a research finding. We know of no controlled study that measured attention ratio as a variable and isolated its effect. Treat it as a question to ask of every link: does this help the person do the one thing this page exists for?
Links that pass that test can stay even on a 1:1 page: an anchor link down to the prices, a phone number, a link to a reviews section on the same page. They all serve the same goal.
Links that fail it: Blog, Careers, Our story, a row of social icons in the header. They may be lovely. They belong on your main site, not on the page you are paying to send people to.
Two kinds of links survive no matter what. The first is the legal footer: imprint, privacy policy and, where you sell online, your terms. We will get to the law later in this chapter. The second is a way home, usually your logo, for the visitor who wants to know who you are before they commit. Both sit quietly where people expect them and cost very little attention.
What to do: count the links on your landing page. For each one, ask whether it serves the page's single goal. Remove or move to the footer anything that does not.
Put things where people look
Users spend most of their time on other websites, so they expect yours to work the way those sites already do. Nielsen formulated it in 2000. It is an observation about learned habits rather than an experiment, and he notes that a new pattern can win only if it is substantially better, because people learn new patterns slowly.
Your visitors arrive trained. They have used thousands of sites, and those sites taught them where things live. The logo is at the top left and takes you home. The main menu runs across the top on a desktop. Contact is often the last item on the right. Legal and small-print links live in the footer.
None of these conventions is a law of nature. They are habits, and habits are fast. When things are where people expect, they spend no effort looking. When you move them, every visitor pays a small search tax.
This matters most for the boring parts. Be original in your headline, your photos and your offer. Be thoroughly predictable in your navigation. A menu labelled "Journey", "Craft" and "Say hello" makes visitors decode your poetry before they can find your prices. NN/g's menu design checklist (Laubheimer, 2024) makes the same point: use familiar, specific labels and front-load the important words, because people scan the first word or two.
What to do: read your menu labels aloud to someone who has never seen your site. Ask what they expect behind each one. Rename any label that gets a pause.
Hick's law, read properly
Reaction time grows with the logarithm of the number of equally likely choices. Hick lit one of up to ten lamps arranged in a circle; participants pressed a matching Morse key with a different finger for each lamp. Hyman had people name aloud which of eight lights had come on, and varied how probable each light was. Reaction time tracked the information in the choice, measured in bits.
Hick's law is the most quoted and most misquoted idea in navigation design. The popular version goes: more choices, slower decisions, so cut your menu. That is not quite what was measured.
Look at the experiments. Participants knew every option in advance. Each lamp always meant the same key. They practised. The task was to react to a signal, not to read, interpret or search. Under those conditions, doubling the choices adds a roughly constant amount of time, because the brain can split the options in half, then half again.
A website menu is a different task. The visitor does not know your options yet. They must read labels, guess which one hides their answer, and sometimes guess wrong. Scanning an unfamiliar, unordered list is closer to linear: each extra item adds about the same reading time. The logarithmic speed-up applies when people already know the options well or the list is ordered so they can skip, such as an alphabetical list of countries.
So the lesson is not "fewer items always". If you cut a nine-item menu to four by stuffing five items under "More", you have not removed any choices. You have added a step and a guess. Research on web structure points the same way. In a 1998 study at Microsoft Research, Kevin Larson and Mary Czerwinski found that adding depth to a site's hierarchy hurt search performance, while a medium mix of breadth and depth beat the broadest, flattest structure. Neither extreme won.
What Hick does support is removing meaningless choices. Two links to the same page, three labels that sound alike ("Services", "Solutions", "What we do"), a menu item nobody clicks: each adds reading time and doubt, and contributes nothing.
Find the named item as fast as you can. Try a few rounds with 4 items, then with 12. The order shuffles every time, like a menu you have never seen.
| Menu | Rounds | Average time |
|---|---|---|
| 4 items | 0 | – |
| 12 items | 0 | – |
A toy, not an experiment: your times include reading, pointing and luck. Notice how much longer 12 shuffled labels take than 4. That gap is mostly scanning, which is why clear, ordered labels matter as much as the count.
What to do: look for duplicates and near-synonyms in your menu and merge them. Do not hide useful items behind "More" just to hit a number.
The 7±2 myth
Miller reviewed experiments on absolute judgment, such as identifying which of several tones was played, and on immediate memory span, such as repeating back a list of digits. Both kept landing near seven items. He was writing about holding things in your head, not about choosing from a list in front of you.
Somewhere along the way, Miller's paper became a design rule: never put more than seven items in a menu. It is one of the most persistent myths in web design.
The problem is simple. A menu sits on the screen. You do not need to remember its items, because you can see them. That is recognition, not recall, and recognition is far less limited. Jakob Nielsen called the seven-item menu rule a common misconception in a 2009 NN/g article on short-term memory: menus can be longer precisely because they spare people from remembering. In a 2019 NN/g video, Page Laubheimer says the right number depends on several factors, and explicitly calls seven a myth.
Seven is not wrong, it is just arbitrary. The right number depends on your content, on how distinct your labels are, and on screen space. A local bakery may need four. A hardware shop may need fifteen categories, grouped well.
What to do: stop counting to seven. Instead, check that every label is distinct, specific and in words your customers use. If a long list feels hard to scan, group related items visually rather than burying them.
First and last get noticed
In free-recall experiments, people given a list of unrelated words and asked to recall them in any order remember the last items best (recency) and the first items well (primacy). The middle fades. Murdock's 1962 paper mapped this curve across list lengths.
Designers often borrow this to argue that the first and last menu items get the most attention. It is a reasonable hunch, with a caveat: the original research is about remembering a list you heard or read once, not about scanning a menu you can see. We could not find a controlled study that measured serial position effects in website menus specifically, so treat this as a sensible tie-breaker, not a proven law of navigation.
The practical version lines up with convention anyway. People read menus left to right (in left-to-right languages), and NN/g recommends front-loading the important words in each label so scanners catch them. The far right of a header is a well-worn home for the action: Contact, Book, or a button.
What to do: put your most-used item first, your main action last, and the less important items in the middle. Then check analytics to see what people actually click and reorder accordingly.
Hidden menus get used less
The three-line "hamburger" icon is everywhere. It saves space. It also hides your navigation, and hidden things get used less.
In 2016, NN/g's Kara Pernice and Raluca Budiu tested this with 179 participants on six live websites, on desktop and on smartphones, run with the remote testing firm WhatUsersDo. They compared hidden navigation (behind a menu icon), visible navigation and a combination of both.
The results were consistent. Hidden navigation was used less on both devices. Content discoverability was more than 20% lower with hidden navigation than with visible or combined navigation. On desktop, tasks with hidden navigation took at least 39% longer. On mobile, they took 15% longer than with a combination design. Participants also rated tasks as harder when the menu was hidden.
Two details are worth keeping. First, the damage was biggest on desktop, where there is no space excuse for hiding anything. Second, on mobile the effect varied a lot by site. In a follow-up analysis, the authors found that the worst mobile performer had a small, low-contrast menu icon next to its logo that some people mistook for part of the banner. Larger, prominent, labelled menu controls did better.
What to do: on desktop, show your navigation. On mobile, show your two or three most important destinations as visible links or a bottom bar, and put the rest behind a clearly labelled "Menu" button, not a bare icon. On a landing page with no menu at all, the question disappears, which is one more argument for that shape.
Sticky headers and anchor links
A sticky header stays at the top as you scroll, so the menu is always one tap away. On a long one-page site, that can be genuinely useful. It also takes screen space on every scroll position, which is precious on a phone.
NN/g's Page Laubheimer published five guidelines for sticky headers in 2021. In short: keep it small, give it an opaque background with clear contrast, keep motion minimal, consider a "partially persistent" header that hides on scroll down and returns on scroll up (good on mobile), and ask whether you need one at all. His content-to-chrome comparison on an iPhone is a handy test: The New Yorker's header left a reasonable 13:1 ratio of content to header, while a 2:1 example was excessive.
Sticky headers have one accessibility trap that matters a great deal and is easy to miss. When a keyboard user tabs through a page, the browser scrolls the focused link into view. If a sticky header sits on top, the focused element can end up hidden underneath it. The person pressing Tab cannot see where they are.
WCAG 2.2 added a success criterion for exactly this. 2.4.11 Focus Not Obscured (Minimum), Level AA, says a component that receives keyboard focus must not be entirely hidden by author-created content. Sticky headers, sticky footers and cookie banners are the usual culprits. The W3C lists CSS scroll-padding as a sufficient technique.
The same CSS fixes anchor links. When someone taps "Prices" in your header, the page jumps to the prices section. Without padding, the section heading lands underneath the sticky header, so the visitor sees the middle of a paragraph and wonders where they are.
html { scroll-padding-top: 5rem; } /* at least your header height */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}Smooth scrolling is optional. NN/g's 2023 guide to tables of contents notes that it shows continuity and removes any doubt that you have been taken to a new page. Wrap it in a reduced-motion query, as above, so people who have asked their device for less motion get an instant jump. The motion chapter explains why that matters.
Two more anchor-link habits from NN/g's research: label in-page links clearly so people know they stay on the page, and do not mix in-page links and links to other pages in the same menu. A visitor who taps "About" and lands on a different page, after "Prices" merely scrolled, has to rebuild their sense of how your site works.
What to do: tab through your own page with the keyboard. If the focus outline ever disappears under the header, add scroll-padding-top. Click every anchor link and check the heading lands in view.
The links the law requires
Whatever you decide about menus, some links are not optional. In the EU, the e-Commerce Directive requires online service providers to make basic information about themselves "easily, directly and permanently accessible".
Information society service providers must give their name, geographic address, contact details including an email address, trade register and number, VAT number where relevant, and details of any supervisory authority or regulated profession. Each EU country implements this in national law, so the exact wording and penalties vary.
Source: EUR-Lex, Directive 2000/31/EC. General information, not legal advice. Check your own jurisdiction.
Germany is the strictest and best-known example. Its Impressum duty now sits in § 5 of the Digitale-Dienste-Gesetz (DDG), which replaced the Telemediengesetz on 14 May 2024 without changing the substance. The information must be easy to recognize, directly reachable and permanently available. A breach can be fined up to €50,000 under § 33 DDG.
So how "directly reachable" is direct enough? The Federal Court of Justice answered that for navigation in 2006.
The case concerned an online magazine for doctors and patients whose provider details were reached through a "Kontakt" link on the home page, then an "Impressum" link. The court held this can satisfy the requirement: both labels had become established terms people understand as leading to provider information, and reaching the details took no long search. The ruling was made under the predecessor law; the same principles are applied to § 5 DDG today.
Source: BGH, I ZR 228/03 (full text at lexetius.com). General information, not legal advice.
The safe pattern is simple: put "Impressum" (or "Imprint", "Legal notice", depending on your audience and language) and "Privacy" in the footer of every page, including landing pages. One click, from everywhere, with a label people recognize.
What WCAG adds
Accessibility rules say similar things about consistency and escape routes. Under the European Accessibility Act, which has applied to e-commerce websites and apps since 28 June 2025, compliance is assessed against the standard EN 301 549. The version in practical use, V3.2.1, references WCAG 2.1 Level A and AA. Version 4.1.1, aligned with WCAG 2.2, was published on 2 September 2026 and becomes the benchmark once it is cited in the EU's Official Journal. The accessibility chapter covers who is in scope.
| Criterion | Level | What it asks, in plain words |
|---|---|---|
| 2.4.1 Bypass Blocks | A | Give people a way to skip repeated blocks such as the header menu. The usual answer is a "Skip to content" link as the first focusable element. |
| 2.4.5 Multiple Ways | AA | On a site with several pages, offer more than one way to find a page: menu plus search, a sitemap, or links in the footer. A single landing page is not a "set of pages", so this starts to apply once you have several. |
| 3.2.3 Consistent Navigation | AA | Navigation repeated across pages appears in the same relative order each time. |
| 3.2.6 Consistent Help | A (new in 2.2) | If help options such as contact details, a contact form or an FAQ appear on several pages, keep them in the same relative place. |
| 2.4.11 Focus Not Obscured (Minimum) | AA (new in 2.2) | A focused element must not be completely hidden by sticky headers, footers or banners. |
A skip link costs three lines of code:
<a class="skip" href="#main">Skip to content</a>
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:16px; }What to do: add a legal row to the footer of every page, landing pages included. Add a skip link. Keep the header and footer identical in order across pages.
What to change tomorrow
Pick your shape
Landing page, one-pager or multi-page site. If most visitors come for one thing, build for that and drop the menu on campaign pages.
Count and justify every link
For each link on a landing page, ask whether it serves the single goal. Move the rest to your main site or the footer.
Use boring labels
Prices, Services, Reviews, Contact. Merge synonyms. Ignore the seven-item rule; aim for distinct words your customers use.
Show the menu on desktop
On phones, show the top two or three destinations and label the rest "Menu", not just three lines.
Order by use
Most-used item first, main action at the right end. Check your analytics and adjust.
Fix the sticky header
Keep it short and opaque. Add
scroll-padding-topso anchor targets and keyboard focus land in view. Make smooth scrolling respect reduced motion.Add the legal footer and a skip link
Imprint and privacy on every page, one click away, with recognizable labels. A "Skip to content" link first in the tab order.
Ines does not need nine menu items. She needs her prices on the page, a "Book" button that is always visible, and a footer that answers the German visitor in one click. The patient on the tram never has to look for a menu at all.
What the research supports
Strong: hidden navigation reduces use and discoverability, especially on desktop (NN/g, 179 participants, six sites). Solid but often misread: Hick–Hyman describes reaction to well-known options, not reading unfamiliar menus; very deep structures hurt search. Myth: menus must have seven items or fewer. Practitioner heuristics, not tested laws: attention ratio, and applying the serial position effect to menus. Legal requirements for provider information are clear in the EU and especially in Germany.
Sources
- Hick, W. E. (1952). On the rate of gain of information. Quarterly Journal of Experimental Psychology, 4(1), 11–26. Bibliographic record and published descriptions of the ten-lamp apparatus consulted.
- Hyman, R. (1953). Stimulus information as a determinant of reaction time. Journal of Experimental Psychology, 45(3), 188–196. Record and method descriptions consulted (eight named lights, varied probabilities).
- Miller, G. A. (1956). The magical number seven, plus or minus two. Psychological Review, 63(2), 81–97. Consulted for what the paper actually reviewed.
- Murdock, B. B. (1962). The serial position effect of free recall. Journal of Experimental Psychology, 64(5), 482–488. Consulted for the original task (free recall of word lists).
- Larson, K. & Czerwinski, M. (1998). Web page design: implications of memory, structure and scent for information retrieval. CHI '98, 25–32. Abstract consulted for the depth and breadth finding.
- Nielsen, J. (law formulated 2000; restated on his Substack). Jakob's Law of the Internet User Experience. Consulted for the wording, origin year and advice on when to deviate.
- Nielsen, J. (2009). Short-term memory and web usability. NN/g. Consulted for the seven-item menu misconception.
- Laubheimer, P. (2019). How many items in a navigation menu? NN/g video page. Consulted for the "not 7" summary.
- Laubheimer, P. (2024). Menu-design checklist: 17 UX guidelines. NN/g. Consulted for labels, front-loading and visibility advice.
- Pernice, K. & Budiu, R. (2016). Hamburger menus and hidden navigation hurt UX metrics, plus desktop and mobile follow-ups. NN/g. Consulted for participants, conditions and all figures quoted.
- Laubheimer, P. (2021). Sticky headers: 5 ways to make them better. NN/g. Consulted for the five guidelines.
- Wang, H.-H. & Brown, M. (2023). Table of contents: the ultimate design guide; Wang, H.-H. (2023). In-page links for content navigation. NN/g. Consulted for anchor-link and smooth-scroll guidance.
- Engley, R. & Gardner, O. (2014). The 3 landing page mistakes that 98% of marketers are making. Unbounce webinar slides. Consulted for the attention ratio definition.
- W3C (2024). Web Content Accessibility Guidelines (WCAG) 2.2 and Understanding 2.4.11. Consulted for the text and level of 2.4.1, 2.4.5, 2.4.11, 3.2.3 and 3.2.6.
- European Union. Directive 2000/31/EC (e-Commerce Directive), Art. 5. EUR-Lex text consulted.
- Germany. Digitale-Dienste-Gesetz § 5 and § 33. Official text consulted for the duty and the fine.
- Bundesgerichtshof (2006). Urteil vom 20. Juli 2006, I ZR 228/03, "Anbieterkennzeichnung im Internet". Full text consulted for the facts and reasoning.
- Davis Wright Tremaine (2026). New technical standard for European Accessibility Act compliance released. Consulted for the publication date of EN 301 549 V4.1.1.
Sources checked 18 October 2026. We could not locate a specific NN/g article on the serial position effect in navigation, so that section relies on the original memory research and is labelled as a heuristic. Ines, her practice and the footer are fictional; all figures are original illustrations, and Figure 3 is redrawn from NN/g's published numbers.