UX laws applied to a landing page: Hick, Fitts, Jakob, Miller, Gestalt…

This guide brings together our articles on the laws and principles of user experience (previously one article per law). For each one: the study behind it, its real scope (some are often over-interpreted) and how it applies to a landing page.

For the full structure of a page, see the anatomy of a landing page that converts.

Banner blindness: when your own block looks too much like an ad

You polished your finest block: big colored panel, rounded corners, contrasting background, perfectly written copy. And nobody sees it. Since the late 1990s, ergonomics research has had a name for this: banner blindness. The problem, on a landing page, is that it doesn't hit other people's ads — it hits your own arguments.

The phenomenon was described as early as 1998 by Jan Panero Benway in a paper with a deliberately ironic title, "Banner Blindness: The Irony of Attention Grabbing on the World Wide Web", published in the proceedings of the Human Factors and Ergonomics Society annual meeting. The setup is simple: participants are asked to find a piece of information on a site, while the link leading to it takes the form of a large, colored, visually distinct, banner-like element. Against every designer's intuition, participants miss it. Benway notably observes that banners placed higher up the page — and therefore further from the other content links — are missed more often than those placed lower down, and that participants barely look at them when clicking them isn't required to complete their task. So making an element salient, if it's salient in the manner of an ad, can make it less visible, not more. This is the practical limit of the Von Restorff effect: standing out works when the difference signals "important content", and fails when it signals "advertisement".

High-risk zones and formats

• The top strip, above the actual content — this is the historic home of the ad banner; anything sitting there inherits the suspicion. An offer message placed there is structurally less read than the same message built into the hero headline.
• The side column — the most avoided location on a goal-directed task. On mobile it ends up stacked at the bottom of the page anyway, where nobody scrolls.
• Anything that scrolls or blinks automatically — carousels, animated counters, ticker bars. Movement not triggered by the user is the single most reliable marker of "advertisement".
• Rows of generic badges — five logos lined up side by side read as decorative trim, not as information: see trust badges and secure payment.
• Panels cut off from the reading flow — a block that shares neither the width, nor the background, nor the typography of the surrounding text flags itself as external to the argument; the visitor treats it accordingly.

Fitts's Law: why CTA button size and position change everything on mobile

Two landing pages with the same headline, the same offer and the same CTA can still convert differently for one reason alone: the size of the button and its distance from the visitor's thumb. That's what Fitts's law has measured since 1954 — and what one-handed mobile usage studies have since confirmed.

Psychologist Paul Fitts showed, in a study that has become a classic reference in ergonomics (Fitts, 1954, Journal of Experimental Psychology), that the time needed to reach a target with a movement depends on only two factors: the distance to travel and the size of the target. The farther the target, the longer the movement takes; the smaller it is, the more precision — and therefore time — is needed to hit it without missing. The result is a simple intuition, but its consequences for an action button are direct: a CTA close to the thumb and wide enough is tapped faster and with fewer errors than a distant or tiny one, even if the button text is identical.

The thumb zone: what one-handed mobile studies added

• Easy zone — the bottom third of the screen, reachable without changing grip. This is where a sticky bottom CTA gets the most out of the thumb zone, as detailed in our article on the mobile sticky CTA.
• Stretch zone — the middle third, reachable by extending the thumb, with reduced precision: it's the most forgiving zone for a slightly generous button size, but not the fastest.
• Hard zone — the top of the screen, which often requires changing grip or using the other hand. A single CTA placed only there, without a repeat lower on the page, starts with a measurable disadvantage.

Hick's Law on a landing page: why fewer choices convert better

A visitor torn between five menu links, three offers and two buttons isn't hesitating out of a lack of interest: they're hesitating because every extra option mathematically lengthens their decision time. That's what Hick's Law has measured since 1952 — and what it says, very precisely, to do about a landing page that's too generous with choice.

British psychologist William Edmund Hick showed, in a study published in 1952 in the Quarterly Journal of Experimental Psychology, that the time needed to choose among several options grows logarithmically with their number — not linearly. Concretely: going from two to four choices slows the decision down noticeably, but going from eight to ten choices slows it down proportionally much less. Each added option weighs heaviest at the start; that's precisely why a landing page that goes from a single CTA to three different CTAs loses more, all else equal, than a page that would go from eight to ten menu links.

Where Hick's Law applies on a landing page

• The navigation menu — every extra link is one more option to evaluate before the visitor has even read the offer; our guide to a landing page navigation menu details why most conversion-focused landing pages don't need one at all.
• The number of CTAs — "Book a call", "Download the brochure" and "Watch a demo" on the same screen force the visitor to settle on one of three intentions before even settling on the offer itself; our article how many CTAs on a landing page quantifies the trade-off.
• Pricing tiers — beyond three plans, comparison time grows faster than the clarity gained; our study of the compromise effect in a pricing table shows how to structure three options without slowing the decision.
• Form fields — every extra optional field is a micro-decision (fill it in or not) added before submission; see our guide on how many fields in a form.

Jakob's Law: why an "original" landing page converts less

A visitor lands on your page carrying the memory of the hundreds of pages they saw before yours. They never learned them consciously, but they already know where the logo belongs, what a buy button looks like, and where to click to go back. Jakob's Law simply says this: every time your page contradicts that memory, it bills the visitor a learning cost they never planned to pay.

The statement fits on one line: users spend most of their time on sites other than yours, so they expect yours to work like all the others. That's not an aesthetic principle, it's an observation about how time is distributed. A visitor may spend forty seconds on your page; they spent the previous twenty years on thousands of other pages. That massive exposure has built a default mental model — where the logo sits, what a link looks like, what a cart icon does — and your forty-second page has no chance of reprogramming it. It can only conform to it, or contradict it and pay the price.

The conventions a French-speaking visitor expects in 2026

Miller's law on a landing page: the real point isn't "7 items", it's chunking

"Seven, plus or minus two" is probably the most quoted and most misunderstood statistic in UX. George Miller's paper doesn't prescribe a maximum number of on-screen elements: it describes a limit on immediate memory, and above all how to get around it — chunking. On a landing page, that nuance changes everything: instead of counting items, you make sure the visitor has nothing to remember.

The founding paper is "The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information", published by George A. Miller in Psychological Review (1956, vol. 63, pp. 81-97). Miller pulls together work on two distinct capacities: absolute judgment (how many levels of a stimulus — the pitch of a tone, the intensity of a taste — you can tell apart without error) and immediate memory span (how many items you can repeat back after a single hearing). He observes that both plateau around the same zone, somewhere near seven, and he openly jokes about it: he speaks of being "persecuted by an integer" rather than of a law of nature. The genuinely important passage comes next: Miller shows that the limit isn't on the amount of raw information but on the number of units, of chunks. A string of twenty-one binary digits can't be held as such; grouped in threes and recoded, it becomes seven units and becomes memorable again. In other words, capacity is fixed, but what you put inside each unit is not — and that's where design has room to work.

Consequence #1: ask for no memory effort at all

• The price stays visible at the moment of commitment — repeat the price, the duration, and what's included right next to the button, instead of relying on the pricing table two sections above, and do it at every repeated button on the page.
• The form restates the offer — a bare signup form with no reminder of what you're signing up for forces the visitor to hold the offer in memory while typing an email address. A one-line summary above the fields is enough to offload that.
• No comparison at a distance — if two pieces of information have to be related (a price and what it includes, a feature and its benefit), they must be physically adjacent, not separated by a screen of scrolling.
• Labels make sense on their own — a "Continue" button requires remembering what you're continuing; "See all 10 templates" makes sense with no prior context.
• Nothing to copy over — a reference number, a promo code, or an email to carry from one screen to the next is the most expensive case: it has to be shown at the moment it's needed, or pre-filled.

The Pareto principle on a landing page: where to actually focus your optimization effort

A team spends a full week polishing the footer link colors while the hero headline — seen by 100% of visitors — hasn't changed in a year despite a mediocre conversion rate. This priority imbalance has a name over a century old: the Pareto principle. Here's what it actually says about a landing page, and where it stops applying.

In 1896, Italian economist Vilfredo Pareto published the first volume of his Cours d'économie politique, in which he documented that land and income distribution in Italy followed a striking regularity: a small minority of owners held the vast majority of it. Pareto drew a statistical observation from this — later generalized under the "80/20" shorthand — describing a highly unequal distribution rather than an exact physical law: in many systems, a minority of causes explains the majority of effects.

The few elements that carry the majority of conversions

• The hero headline and value proposition — seen by 100% of visitors, it decides within seconds whether the page is worth reading further. See our guide on writing a value proposition.
• The primary CTA — its wording, color and placement, covered in our articles on button color and how many CTAs to show.
• The first piece of social proof visible without scrolling — a number, a client logo or a rated review, detailed in our article on social proof.
• The hero image or video — the second element people look at right after the headline according to eye-tracking research, covered in our guide on the hero image.

Parkinson's Law on a landing page: why a deadline changes buying behavior

"Work expands so as to fill the time available for its completion" — that's Parkinson's Law, coined in 1955 to poke fun at British bureaucracy. Applied to a landing page, it explains why an offer left open indefinitely almost always ends up put off until tomorrow — and what a well-built deadline actually changes about a buying decision.

British naval historian Cyril Northcote Parkinson formulated, in a satirical essay published in 1955 in The Economist, the principle that "work expands so as to fill the time available for its completion". His now-famous example: someone with nothing else to do can spend an entire day writing and mailing a simple postcard to their niece, while the same task takes someone busy just two minutes. The mechanism isn't about motivation or ability — it's the available time itself that dictates the time actually spent on the task. On a landing page, the "task" is the buying decision, and the "available time" is how long the offer stays accessible with no condition attached. An offer left open indefinitely doesn't make the decision easier: it just makes it easier to put off, again and again, until it's forgotten entirely.

How to apply it this week

• Give every offer a deadline, even a generous one — a discount, bonus or early-access perk with no end date displayed loses the entire Parkinson effect; the date doesn't need to be short, but it needs to exist and be visible.
• Prefer a finer time unit in the final hours — hours, minutes and seconds rather than "3 days left" once the deadline is close, in line with the effect Chou (2019) measured on perceived time remaining.
• Set a deadline for lead follow-up, not just for the offer itself — our speed-to-lead guide shows the same mechanism plays out on the seller's side: without an internal callback deadline, sales follow-up stretches out too, until it stops happening at all.
• Give a webinar a firm registration cutoff rather than leaving sign-ups open until the day of the event — the webinar and masterclass template ships with this countdown built in by default.
• State a precise response time after a form submission ("reply within 24 hours" rather than "we'll get back to you"): the deadline applies to the visitor's perceived wait too, not just to their own decision.

Tesler's law on a landing page: complexity never disappears, it changes hands

"We simplified the form, it's just an email now." Half true: the form is shorter, but the information you removed is still needed — it will be collected by phone, by follow-up email, or by hand. That is exactly what Tesler's law says: every system holds an irreducible amount of complexity, and the only question is who carries it.

What research does contribute is a measure of what that complexity costs once it lands on the user's side. In a study published in 1988 in the journal Cognitive Science, psychologist John Sweller laid the foundations of cognitive load theory: working memory has a limited capacity, and effort spent on operations unrelated to the task — what he calls extraneous cognitive load — comes directly out of the resources available for the task itself. On a landing page, every decision the visitor makes on your behalf — guessing which category they fall into, reconstructing a price, arbitrating between three poorly differentiated plans — consumes attention that won't go to your offer. Our guide to cognitive load on a landing page covers that mechanism, and our article on Hick's law gives you the stopwatch version.

A shorter form removes nothing, it relocates

Weber-Fechner's Law on a landing page: what price discount a visitor actually notices

Two €10 discounts: one on a €20 item, the other on a €300 item. The first changes everything, the second barely registers — and that's not a hunch, it's a law measured in the lab since 1860. What it says precisely about a discount, a pricing table, or an order bump.

In the 1830s, German physiologist Ernst Heinrich Weber showed that a person doesn't perceive the difference between two stimuli (a weight, a brightness, a sound) in absolute terms, but as a proportion of the starting stimulus: the larger the initial stimulus already is, the larger the absolute change needed for it to become "just noticeable." Psychophysicist Gustav Fechner formalized that result in 1860 in his foundational book Elemente der Psychophysik (see the study), showing that the perceived intensity of a stimulus grows logarithmically with its actual physical intensity: past a certain point, each additional unit added to an already-large stimulus is noticed less and less. Applied to a price, the principle translates as follows: what determines how a discount is perceived isn't the amount subtracted, but its ratio to the starting price.

Where this actually changes a landing page

• The strikethrough price — a discount displayed below the proportional threshold ("-€8" on a €250 item) adds almost nothing to how the offer is perceived; our article on strikethrough pricing and its regulation covers the "rule of 100" (percentage under €100, amount above) — Weber-Fechner's Law is the precise psychophysical reason behind that empirical rule.
• A multi-tier pricing table — the gap between two plans also needs to be proportionally noticeable for a visitor to clearly tell their respective value apart; see our study of the compromise effect in a pricing table.
• Order bumps and upsells — an add-on offered at checkout is noticed less the smaller it is relative to the amount already committed; that's exactly what makes a well-sized order bump feel almost painless, while the same amount offered on its own, without anchoring, would feel like a real decision.
• Monthly vs. annual pricing — announcing a saving "of €96 a year" reads very differently from "€8 less per month" on the same service, even though the total amount saved is identical; our monthly vs. annual comparison covers this framing effect.
• A bundle vs. a single product — an €80 discount on a €229 bundle (roughly 35%) comfortably clears the noticeable threshold; the same €80 off a €900 item would stay below that threshold and barely register.

The Yerkes-Dodson law: why too much urgency drives visitors away (and too little never converts them)

A landing page that's too flat gives no one a reason to act now. A landing page stacked with countdown timers and popups scares visitors off before they even read the offer. Between the two lies an optimal point, described as far back as 1908 by a law of experimental psychology still cited today: the Yerkes-Dodson law.

In 1908, psychologists Robert Yerkes and John Dodson published a study that became a classic of experimental psychology (Yerkes & Dodson, 1908, Journal of Comparative Neurology and Psychology): performance on a task increases with the level of arousal (activation, pressure, stress) — but only up to a point. Beyond that point, more pressure no longer produces better results: it produces worse ones. Plotted, the relationship between arousal and performance traces an inverted U: too little stimulation leaves performance low for lack of motivation, a moderate level pushes it to its peak, and too much stimulation drags it back down through overload, anxiety or avoidance.

The peak of the curve: the level that actually converts

• One urgency signal at a time — a deadline or a scarcity cue, never both stacked with a third signal (live purchase notifications, exit popup) on the same page.
• A verifiable deadline — a displayed date, a countdown that matches a real window close, as detailed in our guide on dark patterns to avoid.
• A tone that informs rather than commands — "the offer ends Sunday" activates more than "don't miss this," which already starts to read as social pressure rather than information.
• Breathing room in the page — a social-proof or FAQ section between the pitch and the final CTA lets the visitor's tension ease off slightly before deciding, rather than keeping them wound up from the hero all the way to the button.

Nielsen's 10 usability heuristics applied to a landing page

Most conversion guides talk about copywriting, social proof, or A/B testing. There's an older, more general framework, built to catch problems in an interface before it's ever tested on real visitors: Jakob Nielsen's 10 usability heuristics.

In 1990, Jakob Nielsen and Rolf Molich published Heuristic evaluation of user interfaces, a study presented at the ACM CHI conference showing that a small group of evaluators, checking an interface against a list of ergonomic principles, catches most usability problems without needing to recruit real users. One finding stands out: a single evaluator only spots 20 to 51% of the problems, but a group of three to five independent evaluators covers most of them — which is why it pays to have several people read your page rather than just one. Nielsen refined the method in 1994 and settled on ten principles, a list that has since become a standard for UX audits, well beyond the software it was originally designed for.

The 10 heuristics, translated for a landing page

Gestalt principles on a landing page: visitors perceive groups, not elements

Put a price forty pixels away from its offer and ten pixels from the next block: visitors will attach that price to the next block, whatever the copy says. That's not carelessness, it's normal perception. Gestalt principles describe how the eye groups the elements of a page before it even reads them — and how badly chosen spacing, framing, or contrast can rewrite your message without changing a single word.

The founding idea of Gestalt psychology is that perception doesn't build a scene by adding up isolated points: it imposes an organization from the outset, and that organization comes before content recognition. Max Wertheimer formalized it in "Untersuchungen zur Lehre von der Gestalt II", published in 1923 in Psychologische Forschung and later translated as "Laws of organization in perceptual forms": using nothing but rows of dots and lines, he showed that perceived grouping follows predictable factors — distance, resemblance, closure, good continuation. A century later, Johan Wagemans and his co-authors (2012) devoted a two-part review in Psychological Bulletin to that legacy: grouping principles and figure/ground organization are described there as solidly established phenomena, broadly confirmed by modern experimental vision science, even though their original formulation remains qualitative. For a landing page, the consequence is direct: your page is first perceived as a set of blocks, and only then as text. That's also what makes the 5-second test so revealing — in five seconds, the visitor only had time to perceive structure.

Diagnosis: seeing the groups that are actually perceived

• Squint at the page from fifty centimeters away, until you can no longer make out the text: only gray masses remain. Those are the groups the visitor actually perceives, before any reading.
• Blur a screenshot with a 6 to 10 pixel Gaussian blur for the same result, in a version you can share and compare from one iteration to the next.
• Count the masses you get: above seven or eight within a single section, the page has no perceptible structure and you need to group before adding anything.
• Check the pairings one by one: is each price in the same mass as its offer, each label in the same mass as its field, each button in the same mass as the promise that justifies it?
• Identify the figure: on the blurred image, the most salient element should be the CTA. If it's an illustration or a promotional banner, the hierarchy is inverted.
• Confirm with a real visitor through a 5-second test: what the person recalls from memory almost always matches the visual groups, never the text.

The paradox of the active user: why your visitors will never read your instructions

You wrote a clear "How it works" section, a walkthrough before the first click, a complete FAQ right above the CTA. Almost nobody reads them. That's not a lapse of attention on the visitor's part: it's a documented behavior known since 1987 as the paradox of the active user, and it changes how you should write a landing page.

The same research team tested the practical consequence of this finding. In a 1987 study published in Human-Computer Interaction, "The Minimal Manual", Carroll and his co-authors (Smith-Kerker, Ford, and Mazur-Rimetz) compare novice users learning word-processing software either with a classic exhaustive manual or with a reduced guide covering only what's needed to get started, organized around real tasks rather than features. Users given the minimal manual completed their tasks faster, succeeded more often, and scored better on a later comprehension test — while a notable share of the "full manual" group's time was spent recovering from errors that the shorter version simply avoided by never opening the path that led to them. The lesson isn't about length as such: it's that support organized around what the user is trying to do beats support organized around everything the system can do — exactly the difference between a landing page structured around the promised outcome and one structured around a feature list.

Classic mistakes on a landing page that assumes people will read it

• A "How it works" section placed before the main CTA — useful as a supplement, costly as a gate: it should inform a visitor who's already hesitating, not condition access to the action button.
• A forced tutorial or guided tour on first load, before the visitor has had a chance to see the product or offer for themselves — the production paradox predicts exactly this drop-off point.
• Hidden format instructions in small print under a form field ("use DD/MM/YYYY format") instead of a field that accepts any reasonable format, or a visible example inside the placeholder itself.
• An FAQ answering questions asked too late — if three questions in the FAQ re-explain what the offer even is, that's a sign the top of the page doesn't stand on its own, and no visitor scrolls down to the FAQ to fill that gap.
• A button label that doesn't say what it produces — "Continue," "Next," or "Submit" require having read what came before to make sense, whereas a label describing the outcome ("Get my quote," "See the demo") is self-explanatory without context, as covered in our guide to CTAs that convert.

Z-pattern or F-pattern: which visual layout for your landing page?

Before reading a single word, a visitor's eyes have already traced a path across your page. Eye-tracking research points to two dominant patterns — the Z and the F — and they call for different layouts.

The F-pattern was documented in a study by Shrestha, Lenz, Chaparro and Owens published in 2007: tracking participants' gaze across e-commerce pages mixing text and images, the researchers observed a path made of two or three decreasing horizontal sweeps near the top, followed by a vertical sweep down the left edge — the shape of an F (see the study). A second study, by Buscher, Cutrell and Morris, presented at the CHI conference in 2009 across 361 web pages viewed by 20 participants, confirms that attention concentrates heavily in the top-left area, with the exact distribution shifting depending on whether the visitor is searching for something specific or browsing (see the study). Neither study describes a universal law, but both point to a strong tendency: without a visual hierarchy steering it elsewhere, the eye follows the path of least effort, from the top-left corner downward.

The Z-pattern: the one to design for on a landing page

1. Top-left: the logo or offer name — the first landmark that reassures visitors where they are.
2. Top-right: a secondary trust or minimal-nav element (phone number, badge, login link) — never the main CTA, which would land too early on the path.
3. Central diagonal: the headline and subheadline, sitting right on the eye's own trajectory — see our method for writing a headline that hooks.
4. Bottom-left: a reassurance point or social proof that confirms the headline's promise.
5. Bottom-right: the main CTA — the natural landing point of the Z, where the eye's path ends after reading the promise and its proof.

Above the fold: what to place on a landing page's first screen?

"The fold" — the lower edge of what displays without scrolling — never stopped existing, even in the age of infinite scroll. What sits above it is seen by everyone; what sits below, only by those the first screen convinced to keep going.

Eye-tracking research confirms how attention concentrates at the top of the page. A study by Djamasbi, Siegel and Tullis published in 2010 in the International Journal of Human-Computer Studies tracked participants' gaze on real web pages: fixations concentrate massively on the area visible without scrolling, and the pages rated most appealing combined a strong main image, little text and a clear visual hierarchy in that zone (see the study). This doesn't mean nobody scrolls — most visitors do — but the decision to scroll is made above the fold, within seconds, on the strength of that first screen. It's the same initial-triage mechanism described in our article on time spent on a landing page.

The 5 elements of a landing page's first screen

1. The headline: the main promise, phrased from the visitor's point of view. It's the most-read element of the whole page — our full method is in the headline article.
2. The subheadline: one line specifying for whom and how. It turns a seductive promise into a credible one.
3. The main CTA: visible without scrolling, even though the visitor will often only click after reading further. Its presence announces the expected action — the phrasings that work are in our CTA examples.
4. One proof element: a rating, a customer count, a media logo — a single line of social proof is enough at this stage.
5. A visual that shows the offer: a product screenshot, a photo of the result, a preview of the document — not a decorative illustration that could accompany any offer.

Cognitive load: why a landing page that makes people think makes them leave

Your visitor arrives with a limited mental budget for understanding your page. Every option, every animation, every piece of jargon consumes a share of it — and whatever is spent on understanding is no longer available for deciding. Here's how to spot and remove that invisible tax.

Cognitive load theory was formalized by psychologist John Sweller in a foundational article published in 1988 in the journal Cognitive Science (Sweller, 1988). His finding, drawn from studying problem solving: human working memory is tightly limited, and the way information is presented determines the mental effort required to process it — the same content can be easy or exhausting depending on its form. The theory distinguishes three types of load, easily translated for a landing page:

The three types of cognitive load, without the jargon

• Intrinsic load: the real complexity of your offer. A B2B payroll platform is objectively harder to explain than a €19 ebook. This load can't be removed; it can only be chunked and paced.
• Extraneous load: the unnecessary complexity added by design and copy — competing options, confusing layout, jargon, decoration. It's pure waste, and it's what this article goes after.
• Germane load: the effort that genuinely helps the decision — comparing your offer to their situation, picturing themselves using it, resolving an objection. It's the only effort you want your visitor to spend.

Text width on a landing page: what's the ideal line length for readability?

A centered text block stretched across the full width of a 27-inch screen, and the visitor's eye struggles to find the start of the next line. The "50 to 75 characters per line" rule has circulated in design guides for decades — but the studies that actually tested it on real web pages tell a more nuanced story than the rule itself.

A second study, by Shaikh and Chaparro (2005, Human Factors and Ergonomics Society), cuts against the most common intuition: testing lines of 35, 55, 75, and 95 characters on online news articles, it was the longest lines (95 characters) that produced the fastest reading speed. Reported satisfaction didn't track speed, though: participants showed a marked preference for the two extreme lengths — very short or very long — over the middle-ground compromise most style guides recommend.

Putting it into practice, section by section

• Hero headline — let it breathe across the full width of its container (often 700-900px); at that font size, a 40-50 character line already fills the visual space without any reading issue.
• Subheadline and intro paragraph — constrain to roughly 60-70 characters per line (often a max-w-xl to max-w-2xl class in Tailwind, or max-w-prose, which targets 65 ch): this is where the perceived comfort documented by Ling and van Schaik matters most.
• Benefit and argument blocks — same logic as the intro paragraph; avoid a three-sentence block spanning the full width of an 800px column when the text isn't broken into a list.
• Bulleted lists — less sensitive to width: each item is short and scanned on its own rather than continuously, so the constraint can be looser.
• FAQ — answers benefit from staying in the same range as the intro paragraph; see our article on the landing page FAQ section for the full section structure.

Keyboard navigation on a landing page: visible focus, tab order, and traps to avoid

Pressing Tab and watching where focus lands is the fastest accessibility test you can run on a landing page — and one of the least often performed. Invisible focus, inconsistent tab order, a modal that lets focus escape: three concrete problems, their fixes in Next.js, and why they matter well beyond screen reader users alone.

Shari Trewin and Helen Pain, in "Keyboard and mouse errors due to motor disabilities," published in 1999 in the International Journal of Human-Computer Studies (see the study), document the typing and targeting errors users with motor impairments encounter when an interface assumes precise mouse control — a finding that directly justifies why the keyboard needs to remain a fully functional path through a page, not a bare-minimum fallback. Jonathan Lazar, Aaron Allen, Jason Kleinman, and Chris Malarkey, in "What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users," published in 2007 in the International Journal of Human-Computer Interaction, show that poorly labeled forms and unpredictable focus behavior rank among the top sources of frustration reported by the study's 100 blind participants — and since a screen reader is piloted almost entirely by keyboard, that finding connects directly to how focus behaves on a page.

Common mistakes to fix first

• outline: none; with no replacement — removes visible focus for everyone rather than styling it; :focus-visible lets you customize the indicator without ever removing it entirely.
• A modal with no focus trap — tabbing keeps moving behind the overlay, making the page unusable by keyboard while the popup is open.
• Focus that doesn't return after closing — closing a modal without moving focus back to the trigger element forces the user to retab from the top of the page to find their place again.
• A sticky mobile banner or CTA inserted out of order — a fixed element added late in the DOM can end up outside the logical tab order relative to the content it visually overlaps.
• A focusable honeypot field — an invisible field meant to catch bots needs to be pulled out of the tab order (tabindex="-1" and aria-hidden="true"), otherwise a keyboard user lands on it with no idea what it is.

LanderKit templates apply these principles by design: one goal per page, one dominant call to action, single-column reading on mobile.