Interaction Cost
scrolling is easier than clicking
Scrolling is easier than clicking A small observation with huge implications: scrolling is easier than clicking.
This affects a lot of things, like whether to place information further down a page or whether to place it behind a drop-down, button, or link. Should we break up our articles like news sites onto 7 different pages? Are people happy clicking through each of the pages to get to another page overloaded with stuff other than what they want to read? How many people now search for the “One Page” option when reading an article on the New Yorker or similar sites?
The evidence is all in favor of scrolling. Not only do analytics support it, usability testing demonstrates it, but every new device is a scrolling machine. iPhones, iPads, and anything with a piece of glass as an interface are made to scroll, and the scrolling gesture is probably the easiest gesture of all. Just slide your finger.
So here is the real difference: scrolling is a continuation; clicking is a decision. Scrolling is simply continuing to do what you’re currently doing, which is typically reading. Clicking, however, is asking the user to consider something new…is this new thing the same as what I’m already doing, or something new? Obviously this is a small interaction…but think about it in scale. Hundreds or thousands of decisions taken together add up to real friction.
And for some reason there is a myth about users not scrolling. It’s a very old myth…and it must have come about around the same time as the “above the fold” myth. This is bunk. If you need evidence just look around. The evidence is everywhere. Simply watch any human being using a mobile or tablet device. People scroll so much you could almost say that they scroll more than they don’t.
UX design principles and heuristics for this purpose.
2. Key UX Principles & Heuristics to Apply
You'll be leveraging several principles from Nielsen Norman Group's 10 Usability Heuristics and other core UX laws.
| Principle/Heuristic | How It Applies to Content & Copy |
|---|---|
| #1: Visibility of System Status | Content should signal what it is and what will happen next. Use clear labels for buttons and links (e.g., "Download Whitepaper (PDF, 2MB)" instead of just "Submit"). |
| #2: Match between system and real world | Speak the user's language. Use familiar terms and concepts. Chunk information in a logical order that matches the user's mental model (e.g., steps in a process should be in chronological order). |
| #3: User control and freedom | Progressive disclosure gives users control. They can choose to "dive deeper" or not. Always provide an easy way to go back or collapse the information (e.g., a "Back to top" link). |
| #4: Consistency and standards | Be consistent in how you chunk and disclose information. If one FAQ section uses accordions, they all should. If all "Learn more" links open a new section, don't make one trigger a modal and another a new page. |
| #8: Aesthetic and minimalist design | This is the heart of it. "Minimalist" refers to the dialogue, not visual style. Remove irrelevant or infrequently needed information. Every word should earn its place. |
| Hick's Law | The time it takes to make a decision increases with the number and complexity of choices. Chunking and progressive disclosure reduce simultaneous choices, speeding up decision-making. |
| Miller's Law | The user's working memory is limited. Chunking respects this limit by grouping information into 5-9 items at a time. |
| Cognitive Load | The total mental effort being used. Your goal is to minimize extraneous cognitive load (poorly organized information) so users can focus on germane load (understanding your message). |
3. A Practical Framework for Implementation
Step 1: Audit and Prioritize Your Content
- Inventory: List all your content.
- User-Centric Prioritization: Use your user research and journey maps to identify:
- Must-know: What is the absolute critical information needed to make a decision or complete a task? (This is your "first layer").
- Nice-to-know: Important details that support the core message but aren't essential immediately.
- Background/Reference: Deep detail, technical specs, long-form reports, legal jargon. (This is your "hidden layer").
Step 2: Chunk the Information
- Group by Topic/Theme: Break your content into logical groups. For a product page, chunks could be: Hero Value Prop, Key Features, Benefits, Testimonials, Technical Specs, FAQ.
- Use Descriptive Headings: Each chunk must have a clear, scannable heading (H2, H3) that allows a user to understand the content without reading the body text.
- Keep Paragraphs Short: Aim for 1-3 sentences per paragraph. Use white space liberally.
- Utilize Lists: Bulleted and numbered lists are the ultimate form of chunking. They are highly scannable.
Step 3: Design the Disclosure
Choose the right UI pattern based on the context and content type.
| UI Pattern | Best For | UX Tip |
|---|---|---|
| Scannable Page with Headings | Most informational pages (About Us, Services). | Use a clear information hierarchy (H1 > H2 > H3). Users will scroll and scan the headings to find their section. |
| "Read More" Links / Expandable Text | Long bodies of text where a summary is sufficient (e.g., blog post previews, news listings). | The linked text should describe what will be revealed, e.g., "Read more about our sustainability goals" instead of just "Read more". |
| Accordions / Toggles | FAQs, lengthy technical specifications, complex form sections. | Heuristic #3: Ensure the accordion is easy to open AND close. Consider having the first item open by default to show the functionality. |
| Tabs | Presenting multiple, parallel categories of information on a single page (e.g., Product details: Specs, Downloads, Reviews). | The tab labels must be extremely clear. Don't hide critical information behind tabs; put it in the main content. |
| Step-by-Step Wizards / Multi-Step Forms | Complex processes (e.g., signing up for a service, configuring a product). | Heuristic #1: Show a progress indicator (e.g., "Step 2 of 4"). This reduces anxiety and tells users how much is left. |
| Tooltips / Popovers | Defining jargon, offering short helpful hints, or explaining an icon. | Don't put crucial information only in a tooltip. They are for supplementary info. Ensure they are accessible on hover and focus for keyboard users. |
| Modals / Overlays | Focusing user attention on a single task or piece of content without leaving the page (e.g., watching a video, signing up for a newsletter). | Heuristic #3: Always provide a clear, obvious way to close the modal (e.g., an "X" button, clicking the overlay, pressing the ESC key). |
Step 4: Write for Scannability
Even within your chunks, write to be scanned.
- Front-Load: Put the most important keyword or conclusion at the start of headings, sentences, and paragraphs.
- Bold Key Terms: Highlight important concepts for users scanning the text.
- Use Visuals: Support chunks with relevant icons, images, or diagrams. A picture really can replace a thousand words.
4. Real-World Example: A "Service" Page
Without Chunking & Progressive Disclosure:
A giant wall of text describing the service, its history, all 15 features, 10 benefits, 5 case studies, pricing for all plans, and a full FAQ all in one continuous stream. The user gets overwhelmed and leaves.
With Chunking & Progressive Disclosure:
- H1: [Service Name] - The Ultimate Solution for [User Problem]
- Hero Chunk (Must-know): A short, powerful value proposition and a primary call-to-action button.
- Key Benefits Chunk (Must-know): 3-4 bullet points with icons. "Save Time", "Increase Revenue", "Reduce Stress".
- How It Works Chunk (Nice-to-know): A simple 3-step diagram. A "See detailed process" link expands an accordion below with more text for interested users.
- Features Chunk (Nice-to-know): Headline: "Powerful Features Built for You". 3-4 high-level features are shown. A tabbed interface allows users to switch between "For Marketing", "For Sales", and "For Support" to see relevant features.
- Pricing Chunk (Must-know): Headlines for the three main plans and starting prices. A "Compare all features" button opens a modal with a full comparison table. This keeps the main page clean.
- Testimonials Chunk (Nice-to-know): 2-3 short, powerful quotes. A "Read more success stories" link goes to a dedicated case study page.
- FAQ Chunk (Reference): 3-4 of the most common questions are in accordions. A "View full FAQ" link goes to the complete page.
This approach respects the user's time and attention, provides clear pathways, and dramatically improves the likelihood of engagement and conversion.