← Back to Patterns

Progressive Disclosure

Progressive disclosure is an interaction design technique that helps maintain the focus of a user's attention by reducing clutter, confusion, and cognitive workload. This improves learnability by presenting only the minimum data required for the task at hand.

In the context of long-form narrative or complex technical documentation, we use progressive disclosure to hide secondary context, deep dives, or supplementary data until the reader explicitly requests it.

Implementation Strategy

Avoid generic "Read More" links. The trigger must clearly indicate what information is hidden. Use native HTML <details> and <summary> tags for robust accessibility without requiring JavaScript.

Example: The Details Disclosure

View statistical methodology

Data was gathered from a cohort of 1,200 users over a 6-month period. Reading speed was measured using eye-tracking hardware calibrated to a standard 96dpi display.

When to use

Scenario Recommendation
Core argument or thesis Never hide. Must be visible by default.
Supplementary data tables Hide behind descriptive summary.
Historical context in a news piece Ideal use case for progressive disclosure.