The interaction cost: Scrolls vs Clicks

The "clicks vs scrolls" question is one of the most persistent debates in interaction design. Treating it as a binary ("which is better?") is a dead end—the research consistently shows that neither is universally superior. The real question is interaction cost: the total mental and physical effort a user must spend to reach their goal. Scrolls and clicks are two different currencies for paying that cost, and the optimal mix depends on task type, content structure, device, and user intent.

This article compiles findings from NN/g eyetracking studies, academic cost models, Baymard usability testing, conversion data, and domain-specific pattern research across SaaS, AI, and B2C, and uses interaction cost as the spine for a practical, guide-style blog.Web Designer Depot

The Interaction Cost Framework

What Interaction Cost Actually Means

NN/g defines interaction cost as "the sum of efforts—mental and physical—that users must deploy in interacting with a digital product in order to reach their goals." It includes:NN/G

• Reading and comprehending content
• Scrolling and visually searching for relevant information
• Clicking or tapping without error
• Typing
• Page loads and waiting
• Attention switches between windows or panels
• Memory load—remembering information across steps

The relative weight of each component depends on the user (e.g., motor impairments increase clicking cost; low vision increases scanning cost) and the device (a page load on a slow mobile network costs far more than on broadband desktop).

Expected utility. Users make micro‑decisions by weighing expected benefits against expected interaction costs. They tend to minimize estimated interaction cost when benefits are equivalent. For example, many people type extra characters rather than scroll an autocomplete list, because the perceived cost of scanning and selecting feels higher than typing. At a site level, if interaction cost appears high, users leave—unless motivation is extremely high (e.g., buying from the only vendor of a product). Marketing raises motivation; usability lowers cost. Both increase expected utility.

Interaction Cost vs Sense of Control

Reducing interaction cost is not always the right call. Sometimes adding a deliberate click (an explicit "I'm doing this now" action) increases the user's sense of control and confidence. Minimalist layouts can lower cost but also strip away navigational landmarks and orientation cues, leaving people unsure where they are or what else exists. Good interaction design balances:

• Cost reduction (fewer, easier actions, less thinking, faster loading)
• Sense of control (clear steps, explicit choices, visible structure and wayfinding)

Multi-step forms are the canonical example where more clicks but better structure dramatically improve outcomes (we'll come back to this).One Thing UX Planet

Scrolling: What the Research Actually Shows

Attention Distribution on Pages

NN/g's 2018 eyetracking study (130,000+ fixations, 120 participants) found that 57% of page-viewing time occurs above the fold, down from 80% in 2010. However, 74% of viewing time still falls within the first two screenfuls (up to about 2160px on typical displays). On general websites, over 42% of viewing time lands in the top 20% of the page; on search results pages (SERPs), the top 20% captures 47%. Attention decays sharply after the fold and this pattern has stayed consistent despite bigger screens and "people scroll now."NN/G

The Fold Still Matters

NN/g's "Fold Manifesto" puts the impact at an 84% average difference in how users treat content above vs below the fold. Their eyetracking data shows the 100 pixels just above the fold are viewed 102% more than the 100 pixels just below it. A Google display advertising study similarly found 73% viewability for ads just above the fold vs 44% just below—a 66% drop.NN/G

The fold is not a fixed physical line; it's a concept: "What is visible without any action is what encourages us to scroll." Users don't scroll out of blind optimism; they scroll when above‑fold content signals that more value exists below.NN/G

False Floors and Scroll Stoppers

Minimalist designs can inadvertently create false floors—visual cues that make users think they've reached the end of the page. Common scroll stoppers include:June UX

• Full-screen hero images that fill the viewport with no visual hint of more content
• Excessive negative space near the fold
• Sticky footers or bars that visually mimic a page endJune UX

Avoiding these requires signifiers: cut‑off text, partial images, a visible headline peeking from below the fold, or scroll indicators that explicitly invite further scrolling.NN/G

Cognitive Science of Scrolling

Scrolling has become instinctual, especially on mobile where roughly 63% of internet traffic now originates. Cognitive load theory is relevant here:Chuck Pearson

• Scrolling through familiar vertical layouts reuses existing mental models and maintains flow.
• Pagination requires locating a button, deciding to click, waiting for load—each step breaks flow.Chuck Pearson

But this naturalness has downsides. Long scrolls can induce cognitive tunneling: deep engagement with local content at the expense of global orientation. Users forget where they are on the page, struggle to re‑find items they saw "somewhere above," and lose track of how much content remains.Smashing Magazine

Scroll Fatigue and Zombie Scrolling

Beyond UX metrics, chronic scrolling has measurable cognitive and emotional effects. "Scroll fatigue" describes users becoming overwhelmed, mentally exhausted, or disoriented from long, uninterrupted scroll experiences. Two patterns often show up:UX4Sight

• Zombie scrolling: mindless, purposeless scrolling while disengaged from contentPMC
• Rage quitting: abandoning a site or feed out of frustration with the scrolling experienceUX4Sight

Studies on "brain rot" and zombie scrolling show that sustained, low‑engagement scroll behavior depletes sustained attention and produces lingering effects like eye strain, emotional disconnection, and difficulty focusing. Meta's internal engagement data (cited in marketing literature) suggests users can scroll through hundreds of feet of feed per day while pausing on fewer than 2% of items. From a UX perspective, infinite scroll without structure actively encourages this disengaged state.Newport InstituteLinkedIn

Medium and others have responded with breaks: read‑time estimates and structured checkpoints that segment long content and give readers psychological rest stops. These "UX breaks" respect cognitive limits and actually improve completion and satisfaction measures.Blessing Okpala

Clicking: What the Research Actually Shows

The 3‑Click Rule Is a Myth

Joshua Porter's 2003 study analyzed 8,000+ clicks and found no correlation between click count and user success or satisfaction. Users sometimes visited 25 pages, sometimes 2–3, without any special clustering around three. NN/g's usability testing even found that increasing product path depth from 3 clicks to 4 clicks improved findability by 600%, because the deeper path had better-labeled categories and stronger information scent.UX Myths

A better heuristic is: "Every click should take the user closer to their goal while eliminating as much of the non‑destination as possible." What matters is information scent: how well link labels, headings, and cues predict the destination.UX/UI PrinciplesUX Myths

• Strong scent: reduces navigation time by 30–50%.Step Two
• Weak scent: increases abandonment by 40–60%.NN/GUX/UI Principles

Fitts's Law and Click Effort

Fitts's Law says the time to acquire a target is proportional to the distance to the target and inversely proportional to its size. Practical implications:StackademicLogRocket

• Primary buttons should be large and near related content.
• Frequently used controls should live close together.
• Small, far‑away, infrequently used controls cost more.

On mobile, Fitts's Law meets thumb zone ergonomics. Around 49% of users operate phones one‑handed and 75% of interactions involve the thumb. The comfortable zone is the bottom 40% of the screen; top navigation often requires grip changes and increases mis‑taps. This makes each click physically more expensive on mobile than on desktop.ElarisTechAhead

Hick's Law and Decision Cost

Hick's Law shows that decision time increases logarithmically with the number and complexity of options. A click preceded by "Which of these 18 nav links should I choose?" carries heavier mental cost than a simple "continue" action. Overstuffed navigation fails not because clicking is bad, but because deciding where to click becomes the bottleneck.Emil ForsmannUxcel

Hidden vs Visible Navigation

NN/g's quantitative testing found that hiding navigation behind hamburger menus cuts discoverability roughly in half. On desktop, users engaged with hidden navigation only 27% of the time vs 48% for visible nav. Hidden nav also led to 21% higher perceived task difficulty and longer times. Again, clicking isn't the enemy—hiding the things users need to click is.NN/G

A Formal Cost Model: "Two Scrolls or One Click?"

Azzopardi and Zuccon (2016) built a formal model of the scroll‑vs‑click tradeoff for search result pages. They measured three actions:

• Inspect a snippet: ~2.5 s
• Scroll to the next snippet: ~0.25 s (mouse wheel)
• Click "Next page" and wait: ~2 s (point + click + load)

Let C_scr be scroll cost, C_c click+load cost, and k the number of snippets you'd scroll past instead of paginating. Azzopardi & Zuccon

Their key conditions:

• If k × C_scr > C_c: scrolling is more expensive; better to paginate and show fewer results per page.
• If k × C_scr = C_c: costs are balanced; many page sizes work.
• If k × C_scr < C_c: clicking+loading is more expensive; better to use longer pages or infinite scroll.

On desktop, scroll cost (~0.25 s) is ~8× cheaper than click‑and‑load (~2 s). This helps explain why Google's default of 10 results per page sits near the cost minimum: short enough for orientation, long enough that scrolling beats paginating. On mobile, scroll is even cheaper relative to tap+load, pushing designs further toward scroll‑heavy experiences with fewer hard page breaks.

Pattern‑by‑Pattern Analysis

Infinite Scroll

Benefits

• Reduces interruptions from "Next" links; preserves momentum.NN/G
• Lowers physical interaction cost (especially on mobile swipes).NN/G
• Suits discovery‑oriented experiences: social feeds, inspiration galleries, news streams.The Alien

Problems

• Hard to re‑find items; no page landmarks.NN/G
• Hides the footer and any global navigation living there.NN/G
• Accessibility failures: keyboard-only and speech users often can't trigger new content loading; screen‑reader users may never realize more content exists.Deque
• Performance: DOM bloat over long sessions, memory pressure, sluggish scrolling, increased network load.NN/G
• Encourages zombie scrolling and cognitive depletion.Gulf NewsUX4Sight

Best for: homogeneous, open‑ended browsing where there is no clear "I must get back to that specific thing" requirement—social media, entertainment feeds.The Alien

Bad for: search with specific goals, comparison tasks, catalogs where refinding matters, and any audience with significant accessibility needs.DequeNN/G

A pragmatic variant is "Load more": keep a scroll‑first experience but require an explicit click at chunk boundaries. This restores footer reachability and gives low‑bandwidth users control over network requests at a tiny cost increase.Joshua Hailpern

Pagination

Benefits

• Clear orientation ("Page 4 of 10").
• Easy bookmarking and sharing of specific states.
• Supports comparison ("open page 2 and 3 in two tabs").
• More predictable server load and SEO‑friendly URL structures.Ninja Tables

Problems

• Interrupts flow; adds 2+ s click+load cost per transition.Azzopardi & Zuccon
• Can feel slow on mobile or poor networks.Azzopardi & Zuccon

Best for: SaaS dashboards and tables, admin tools, ecommerce catalogs, forums, and knowledge bases where orientation, refinding, and state sharing trump raw browsing speed.

Tabs

Tabs work well when there are a few content sections with substantial content each and users understand the categories. But on ecommerce product pages, Baymard's testing uncovered a serious issue: 27% of users completely overlooked content hidden in horizontal tabs, making this the worst‑performing PDP layout they tested. Horizontal tabs were overlooked about 3× more than vertically collapsed sections (accordions).BaymardNN/G

Tabs also prevent scanning content across sections; users can only see one tab at a time.Stack Overflow

Accordions (Progressive Disclosure)

Accordions align naturally with vertical scrolling and fit mobile extremely well: the header doubles as both label and control; content expands inline. They implement progressive disclosure: show high‑level labels by default and reveal details on demand.LogRocketSean Rice

Compared with tabs, accordions were overlooked far less often in Baymard's testing. But they still hide content—and if users are in skimming mode, they may not expand them.Baymard

NN/g recommends accordions for content‑heavy pages where users don't need multiple sections open simultaneously, and for checkout flows where each accordion section acts like a "step" in a linear journey.Baymard

One Long Page with Sticky TOC

Baymard's product page research found this layout performed best: only 7% of users missed a sticky table of contents, vs 27% missing content in horizontal tabs. The pattern:Baymard

• A sticky TOC or "On this page" nav anchored near the top or side
• All sections expanded by default down the page (long scroll)
• The current section highlighted as you scrollNN/G

Users who notice the TOC can jump via clicks. Users who ignore it still encounter all content by scrolling. NN/g's research on long articles likewise shows sticky TOCs with current-section highlighting maximize usability for long pages, especially on small screens where content spans more screens.NN/G

Jump Links, Back‑to‑Top, and Hybrids

Anchor links / "Jump to section" menus give users an overview and let them hop directly into relevant content, effectively turning a long scroll into a set of targeted jumps. Even users unfamiliar with the pattern understand it after a single click.MailchimpNN/G

Back‑to‑top buttons help on pages taller than 2 screens (desktop) or 4 screens (mobile). They should appear after a threshold (e.g., 300px of scroll) and float at bottom‑right, supplementing rather than replacing navigation.UX PatternsNN/G

Multi‑Step Forms vs Single Long Forms

Forms are where the "more clicks can be better" argument is most strongly quantified.

Breaking a 24‑field form into 4 steps of 6 fields each can raise completion from 14% to 56%—roughly a 300% increase with the same questions. HubSpot, Zuko, and others report 80–200%+ lifts when properly implemented.Ivy FormsYouTubeReddit

Mechanisms:

• Progressive disclosure: only a manageable chunk is visible at each step, lowering cognitive load.Sean Rice
• Sunk cost: once users complete 2–3 steps, they are more likely to finish.Ivy Forms

However, for very simple forms (1–5 fields), single-step designs work best; multi‑step introduces needless friction and complexity.InsiviaIvy Forms

Carousels

Research across NN/g and Baymard shows only about 1% of users click carousel slides, with ~84% of clicks on the first slide. Carousels can work as in‑task controls (e.g., product image galleries where users actively use the arrows), but perform poorly as "hero" marketing devices. Static grids, card layouts, or well‑structured long content often outperform them.Smashing MagazineEleken

Mobile vs Desktop: Platform‑Specific Costs

The same layout behaves differently depending on device because physical and cognitive costs shift.

On mobile, scroll is almost always cheaper than click+load, pushing toward longer pages with progressive disclosure (accordions, "Load more", in‑page wizards). On desktop, the ratio is more balanced, making structured click navigation (tabs, pagination, split‑panes) viable and often preferable for complex tasks.Adam FardAzzopardi & Zuccon

Domain‑Specific Applications

SaaS & Enterprise

• Data tables & dashboards: Pagination or virtualized scrolling with clear pages/sections. Infinite scroll often makes refinding rows hard and complicates data refresh.Joshua Hailpern
• Settings & admin panels: Grouped sections with accordions or side navigation rather than one monolithic scroll page.LogRocketSean Rice
• Onboarding & complex forms: Multi‑step wizards for 6+ required fields; single‑step forms for simple leads.NuminamInsivia
• Search in SaaS: Pagination with result counts and filter chips, so users can cite "page 3", bookmark, and share stable URLs.Ninja Tables

Example – Linear. Linear's recent UI redesign reduced sidebar noise, increased hierarchy, and introduced a customizable sidebar: users can reorder items, hide those they don't use, and tuck rarely needed links under a "More" menu. On mobile, Linear exposes a customizable bottom toolbar where users pin key views like "My Issues" or specific projects. This is interaction cost budgeting in practice: essential routes become one tap away; less critical paths cost an extra click rather than cluttering every view.LinearLinear

AI & Conversational Interfaces

Full‑page chat has become the dominant pattern for generative AI (ChatGPT, Copilot, etc.). Here, scrolling is the primary way to review history. But as tasks grow more complex, chat alone breaks down.Emerge Haus

Split‑screen agents. The emerging dominant pattern for AI agents is a split-screen layout: chat on the left, "workspace" on the right.Emerge HausUX for AIOpenAI

• Left (scroll‑dominant): conversation history, prompts, quick clarifications.
• Right (click‑dominant): documents, code, dashboards, tools, agent actions.OpenAI HelpEmerge Haus

OpenAI's Canvas mode is a canonical example: when content exceeds a certain length or requires editing, ChatGPT opens a canvas alongside chat. Users scroll the conversation for context and click/drag in the canvas to edit, run, or reorganize content. Microsoft's HAX framework similarly distinguishes:OpenAIOpenAI Help

• Immersive copilots (full‑screen, like Security Copilot) for critical, high‑context tasks.Groto
• Assistive side‑panel copilots embedded next to primary work surfaces.Microsoft
• Embedded micro‑interactions (tooltips, rewrite buttons) that cost a single click.Groto

The principle: "The more important the task, the more real estate is required." Important tasks deserve full screens and split‑screen layouts; minor assistance can live in panels or inline controls.UX for AIMicrosoft

B2C & Ecommerce

Product detail pages (PDPs). Baymard's testing shows that a long page with a sticky TOC outperforms horizontal tabs for PDPs: only 7% of users missed content with a sticky TOC vs 27% with horizontal tabs. Vertically collapsed accordions were the next best option. Despite this, about 28% of sites still use horizontal tabs, with consistently worse discoverability.BaymardBaymard

Best‑practice PDP layout:Fox Ecom

• Above the fold: hero image, title, price, key benefits, primary CTA.
• First scrolls: storytelling blocks, lifestyle images, social proof.
• Deep scroll: specs, dimensions, FAQs, usage guides, in accordions or sections.
• Sticky elements: "Add to Cart" stays visible while scrolling; TOC or anchor links for long pages.BaymardBaymard

Search & catalogs.

• Discovery/browsing → infinite scroll or "Load more" for momentum.NN/G
• Goal‑oriented search/comparison → pagination or chunked loading for structure and refinding.Joshua Hailpern

Marketing & landing pages. Page length should match audience awareness: shorter pages can convert dramatically better for warm traffic (tests have shown 81% vs 61% conversion for a shorter, focused layout), while cold audiences often need longer pages with strong scroll cues; Crazy Egg reported a 30% uplift after making a page ~20× longer with better storytelling and CTAs distributed through the scroll.IxDF

Measuring Scroll vs Click in the Wild

To move beyond opinion, you can measure both behaviors directly.

Scroll Metrics

• Scroll depth (GA4): Track 25%, 50%, 75%, 90% thresholds. For content pages, >50% indicates solid engagement; >75% is strong.LogRocket
• Scroll maps (Hotjar, Contentsquare, etc.): Visualize where users stop scrolling and detect false floors or under‑viewed sections.Helio
• Effect of sticky nav/TOC: A/B tests often show increased scroll depth and content discovery when sticky navigation is present.GSQI

Click Metrics

• Click maps: Reveal dead zones, overloaded nav, and CTA performance.Reffine
• First‑click tests: If users' first click is correct, there's roughly an 85% probability they'll succeed in the task. This is a cheap way to validate nav labels and IA before building complex flows.Sigma

Combined Analysis

• Triangulate: use scroll depth + adjusted bounce rate + time on page to understand whether people are actually engaging or just "zombie scrolling."LogRocketGSQI
• Per‑flow A/B tests: for example, long single page vs multi‑step wizard; horizontal tabs vs sticky TOC; infinite scroll vs pagination. Compare completion, task time, error rates, and satisfaction.Numinam

How to Use This in Practice: Interaction Cost Budgeting

Instead of asking "scroll or click?" treat each flow as having an interaction cost budget:

Where This Fits in the Existing Blog Landscape

Most existing articles treat "scroll vs click" as a shallow pros‑and‑cons comparison and end with "it depends." NN/g has deep research on interaction cost, information scent, scrolling, and the fold—but not a single, applied decision guide. Azzopardi & Zuccon's cost model lives in academic literature and has barely been translated into practitioner language. Baymard's product page evidence sits behind paywalls and rarely surfaces in free UX writing.NN/GThink DesignVWONN/GBaymardNN/GAzzopardi & Zuccon

What's missing—and what this article is designed to enable—is a mid‑level UX argument that:

• Uses interaction cost (mental, physical, orientation) as the unifying framework.
• Anchors claims in real data: 84% fold impact, 57% time above the fold, scroll ≈ 0.25 s vs click ≈ 2 s, 206%+ conversion lifts from multi‑step, 27% tab miss rate, 7% sticky TOC miss rate.NN/GIvy FormsNN/G
• Applies the same lens across SaaS, AI, and B2C.
• Treats hybrid patterns—sticky TOC, "Load more," accordions + scroll, multi‑step wizards, split‑screen agents—as the default answer, not edge cases.