Progressive Disclosure
Revealing information and options only when they are relevant to the user's current task.
Plain English
Progressive disclosure is the design strategy of hiding complexity until it is needed. A text editor shows basic formatting on the toolbar; advanced options appear in a "More formatting" menu. A checkout shows shipping before payment, payment before review. This approach lets experts find depth without overwhelming beginners. The failure mode: hiding things so well that expert users cannot find them.
Research background
Implementation patterns: accordion (hide sections behind expandable headers), tiered settings (basic vs. advanced mode), contextual help (show guidance only when the field is focused), hover/click-to-expand details, and multi-step flows. Key principle: the first disclosure level should cover 80% of use cases. Advanced options should be discoverable via clear entry points, not buried.
UI examples
✓ Applying the principle
A simple CTA that expands to a full form on click, rather than showing a long form on page load — reduces abandonment by showing one decision at a time.
✗ Violating it
An advanced settings panel shown fully expanded by default, with 50 options visible — users cannot distinguish what they need to configure from advanced defaults.
AI Prompt
Paste into Claude, Cursor, Bolt, or v0.
Use progressive disclosure: show basic settings by default with an 'Advanced' section collapsed. Use accordions for FAQ sections. Multi-step forms reveal one group of fields at a time.