Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Progressive Disclosure

progressive-disclosure

Add to comparison +
Interaction patternsScope: Flowprogressive-disclosure · v0.1.0

Show primary content or options first, and make secondary content available when people need it.

Interactive specimen · Fictional product FIELDNOTES

Notification settings

Advanced settings

The time you entered is retained when this section is closed and reopened.

Recognizing it

  • Primary options stay visible
  • A clear entry point to secondary options
  • State survives expanding and collapsing

Concept boundary

Hidden content needs a discoverable entry point. Essential prices, risks, and actions must not disappear in the name of simplicity.

When to consider it

  • Primary and secondary settings can be distinguished
  • Beginners and experienced people share the same interface

When to be cautious

  • Everyone must repeatedly expand the same section to complete a task
  • Information needed for a decision is classified as advanced content

Tradeoff

The initial amount of information is smaller, at the cost of discovering and opening secondary content.

Conditional rules · Editorial advice

When A section is collapsed and reopenedMustPreserve the information already entered.
When Information is necessary for a decisionMustMake costs and important consequences visible before the decision.

Related entries

Recognition Rather Than Recall ↗Works with · Designing an expansion control

The control should help people recognize what is inside.

Inline Edit ↗Works with · Editing secondary settings after expanding them

Disclosure and editing can address different problems in the same flow.

Hidden Costs ↗Can be misused as · Hiding unavoidable fees until after a commitment

Concealing information cannot be justified as progressive disclosure.

Sources and what they support

NN/g · Progressive Disclosure ↗

Defers secondary options so the initial interface can focus on primary options.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "collapsed",
    "expanded"
  ],
  "a11y": [
    "The control works with a keyboard and exposes its expanded state"
  ],
  "motion": "Expansion does not depend on animation"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.