Above-the-Fold UX
Above-the-fold UX is the discipline of treating the first viewport as scarce real estate — every element has to earn its place against the primary conversion goal.
Above-the-Fold UX
The design discipline of deciding what belongs in the first viewport — the part of a page visible before a visitor scrolls.
Above-the-fold UX is the practice of treating the first screen of a landing page or product detail page as scarce real estate. Every element — headline, hero image, price, badges, navigation, CTA — competes for attention against the primary conversion goal, so each one has to earn its slot.
The term comes from newspaper layout, where the most important story sat above the physical fold. On the web, the fold is a moving target that varies by device, browser chrome, and zoom level, but the principle is the same: what a visitor sees before scrolling decides whether they engage or bounce.
On a Shopify PDP, the fold typically has to carry product title, price, variant selector, primary image, and Add to Cart — five jobs in roughly 700 vertical pixels on a mid-range Android. Anything else (reviews, shipping copy, upsells, sticky nav) has to displace one of those five or wait until the second screen.
The fold isn't sacred — research from NN/g and others shows people do scroll. But attention decays sharply: the first viewport captures roughly 57% of total page viewing time, and the second viewport drops to around 17%. What sits up top sets expectations for whether the rest of the page is worth the scroll.
Fold Score = (Conversion Elements Visible / Total Elements Visible) × Clarity Weight
CEV
Conversion Elements Visible
Count of elements in the first viewport that directly support the primary goal (headline, hero image, price, primary CTA, trust signal).
TEV
Total Elements Visible
Total distinct visual elements in the first viewport including nav, banners, chat widgets, cookie bars, badges.
CW
Clarity Weight
Subjective 0-1 score for whether the primary value proposition is understandable within 5 seconds (the 5-second test).
An apparel brand's PDP shows: product title, price, hero image, Add to Cart, review stars (5 conversion elements), plus mega-nav, announcement bar, chat bubble, currency switcher, and a 'free shipping' badge (5 non-conversion elements). The value prop is clear in under 5 seconds.
Conversion Elements Visible (CEV): 5
Total Elements Visible (TEV): 10
Clarity Weight (CW): 0.9
→ 0.45
A fold score of 0.45 is mediocre — half the visible elements aren't pulling weight toward conversion. Collapsing the mega-nav and removing the currency switcher would push the score above 0.6 without hurting usability.
The fold score is a directional heuristic, not a law. Use it to compare variants in a heatmap audit or to challenge designers who keep adding to the hero. As a parent topic, this sits inside landing page optimization, but the same logic applies to PDPs, category pages, and even checkout-step UX.
Typical above-the-fold elements by page type (mobile, 390×844 viewport)
| Page type | Must-have elements | Common bloat to cut | Target fold score |
|---|---|---|---|
| Shopify PDP | Title, price, hero, variant picker, Add to Cart | Currency switcher, mega-nav, announcement bar | 0.60-0.75 |
| DTC landing page (paid traffic) | Headline, hero image, sub-headline, primary CTA, social proof | Top navigation, blog links, footer teasers | 0.70-0.85 |
| Category / collection page | Filter bar, 2-3 product tiles, sort control | Hero banner, brand story copy, newsletter modal | 0.55-0.70 |
| Homepage | Value prop, hero visual, primary CTA, category entry points | Carousel slides 2-5, press logos, full-width video | 0.45-0.65 |
| Checkout step 1 | Cart summary, email/shipping field, continue button | Upsell carousels, cross-sell rails, chat widget | 0.80-0.90 |
Notice the pattern: pages closer to the purchase decision (checkout, paid-traffic landers) demand higher fold scores because intent is already high and friction is the enemy. Homepages tolerate more variety because visitors arrive with mixed intent and need wayfinding.
Above-the-Fold UX FAQ
Yes. People do scroll, but the first viewport still captures the majority of viewing time and sets the bounce decision. NN/g eye-tracking studies consistently show roughly 57% of attention lands above the fold, dropping sharply with each subsequent screen.
There's no single line — it depends on device, browser chrome, and the address bar state. A common working assumption is 600-700px of usable height on a mid-range Android and 700-800px on an iPhone 14. Design for the smaller envelope and test on real devices.
On paid-traffic landing pages and PDPs, yes — the visitor is already qualified and needs an obvious next step. On long-form content or considered purchases, the CTA can sit below the fold once the value prop has been established, often repeated as a sticky bar.
Show someone the first viewport for 5 seconds, then ask what the page is about and what they'd do next. If they can't answer both, the fold is failing. It's the cheapest above-the-fold UX check you can run and works well alongside heatmap audits.
Landing page optimization covers the full page — fold, body, social proof, FAQ, footer CTA. Above-the-fold UX is the highest-leverage sub-discipline because it gates everything below: if the first viewport doesn't earn the scroll, the rest of the page never gets read.
It depends on load time and audio behaviour. A muted, looping background video under 1.5MB can lift engagement on premium brands. An autoplaying video with sound, or one that delays LCP past 2.5 seconds, almost always hurts conversion on mobile.
On a focused landing page, aim for 5-7 distinct visual elements. PDPs typically run 6-9 because they have to display product details. Above 10 elements, you're usually adding noise — try a fold score audit to see which elements you can demote.
For paid-traffic landers, yes — or strip it to a logo only. Full site navigation gives visitors easy exits before they see the offer. For organic and homepage traffic, keep navigation but make sure it doesn't dominate the fold visually.
They eat 40-60px of vertical space and rarely earn it. If your announcement bar is promoting a discount that's already in the hero, remove it. If it's promoting something else entirely (shipping cutoff, sale), test whether moving it into the hero block performs better.
Scroll-depth heatmaps show where attention actually dies. Session recordings reveal rage clicks and dead zones in the hero. A simple Chrome DevTools device emulator plus a 5-second test on five users will catch most fold-level problems before you spend money on a formal test.
Get an AI expert review of your site
Paste your URL — Metricuno's AI runs the same heuristic checks a senior CRO consultant would, scoring your page and prioritising the fixes that'll move conversion fastest.