UX Patterns Guide
UI + UX Disclosure And Attention Management standard

Progressive disclosure

Stage complexity by showing the essential path first, revealing secondary controls only after clear intent, preserving the user's context, summarizing revealed changes, and surfacing hidden blockers or consequences before they can surprise the user.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The default task has a safe recommended path for most users.
  • Advanced controls are useful to some users but would distract, confuse, or increase errors if always visible.
  • Hidden controls can be summarized, reset, validated, and reopened reliably.
  • The product needs to support both novice completion and expert control in the same task surface.

Avoid when

  • The hidden content is required for most users to make the right decision.
  • The hidden controls alter cost, permissions, safety, or legal consequences without a visible summary before commit.
  • The task is a strict sequence that needs wizard behavior.
  • The content is one short local explanation better handled by disclosure details.
  • The product cannot reliably reveal hidden validation errors, preserve hidden state, or summarize changed advanced options.

Problem it prevents

Complex products often contain advanced, rare, expert, diagnostic, or risky controls that clutter the default path for most users, yet hiding them poorly can make important state, consequences, or recovery paths undiscoverable.

Pattern anatomy

What a strong implementation has to make clear

User need

The interface supports both common users who need a clear default path and expert users who need optional control.

Pattern promise

Stage complexity by showing the essential path first, revealing secondary controls only after clear intent, preserving the user's context, summarizing revealed changes, and surfacing hidden blockers or consequences before they can surprise the user.

Required state

Simple default state with essential controls, visible primary action, and recommended defaults.

Recovery path

Users cannot complete the task without opening an advanced section, despite the default path appearing complete.

Access contract

Use native disclosure controls, buttons with expanded state, or clearly labelled navigation routes for revealed sections.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A backup setup page shows destination, schedule, retention, estimated storage, and Start backup first, then reveals Advanced retention, encryption, bandwidth limit, and dry-run settings with a visible changed-settings summary.
  • A search page starts with query and sort, then offers Advanced filters for file type, owner, date range, and archived content while keeping active advanced filters visible as chips.
  • A novice user completes the default backup with recommended retention while an expert opens Advanced retention, changes encryption, sees Advanced settings changed near Start backup, and can reset to recommended.
  • A user opens troubleshooting details only after a sync failure, copies diagnostic logs, then closes the section without losing the main retry path.
Weak implementation

Vague, hidden, hard to recover from

  • A payment form hides currency conversion fees, tax treatment, and the final payer under Advanced options until after submission fails.
  • A page collapses all sections by default, including required fields and the primary action, so the first task is finding the interface.
  • A user misses a required consent field because it is hidden behind a More options link with no indication it affects submission.
  • A user changes an expert setting, collapses Advanced, and later cannot tell why the generated quote changed.
UI guidance
  • Render the default task with the essential controls, status, cost, risk, and primary action visible, then provide clearly named reveal controls for advanced settings, rare commands, diagnostics, expert filters, or optional configuration.
  • Make each reveal level preserve context: keep the trigger, changed advanced values, reset path, summary of hidden changes, and route back to the simple path visible enough that users know what the revealed controls affect.
UX guidance
  • Use progressive disclosure when exposing every option upfront would overwhelm most users, but hiding advanced controls until users ask for them keeps the main path learnable and reduces accidental errors.
  • Do not hide required fields, severe consequences, submission blockers, legal duties, safety warnings, or primary recovery paths unless the interface intentionally surfaces them before they become necessary.
Implementation contract

What the implementation must handle

States

  • Simple default state with essential controls, visible primary action, and recommended defaults.
  • Advanced closed state with a specific trigger that names what is hidden and whether any hidden values differ from defaults.
  • Advanced open state with grouped secondary controls, context copy, and reset or restore recommended settings.
  • Changed advanced state with visible summary near the primary action.

Interaction

  • The default path remains usable without opening advanced or secondary sections.
  • Reveal triggers use specific labels such as Advanced retention settings or Troubleshooting details, not vague More labels.
  • Opening a section reveals controls in place or in a clear secondary route without moving users away from the owning task context.
  • Closing a changed advanced section keeps a visible summary of hidden changes and an edit path.

Accessibility

  • Use native disclosure controls, buttons with expanded state, or clearly labelled navigation routes for revealed sections.
  • Expose whether advanced settings are open, closed, changed, blocked, or reset through visible text, not color alone.
  • Keep the reveal trigger in the keyboard order before the controls it reveals.
  • When validation targets a hidden control, open the relevant section or move focus to a visible error link that opens it.

Review

  • Which controls are essential for a common successful completion?
  • What advanced, rare, expert, diagnostic, or risky controls can safely wait for user intent?
  • Can users tell from the trigger what will appear and what it affects?
  • What hidden values are changed, and where are those changes summarized before commit?
Interactive lab

Inspect the states before you copy the pattern

Stage advanced controls behind clear intent

Complete the default backup path, reveal advanced retention and encryption settings, collapse them with a visible changed summary, reset to recommended defaults, trigger hidden validation, reveal diagnostics, and compare hidden-required, vague-trigger, buried-change, nested-levels, no-reset, and focus-jump failures.

Progressive disclosure
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Simple default state with essential controls, visible primary action, and recommended defaults.

Keyboard / Access

Tab reaches the reveal trigger in the main task order.

Avoid Generating

Hiding required fields or primary actions to make a page appear shorter.
Evidence trail

Source-backed claims behind this guidance

Full agent/debug reference

Problem Context

  • The interface supports both common users who need a clear default path and expert users who need optional control.
  • Advanced controls are useful but not required for most successful completions.
  • The product can keep hidden state, changed advanced values, summaries, validation, and reset behavior synchronized.
  • Users need to understand when a hidden option affects output, cost, permissions, safety, or final commitment.

Selection Rules

  • Choose progressive disclosure when the task benefits from a simple default path plus optional advanced controls or details revealed on demand.
  • Use disclosure details when there is only one short optional explanation beside a local field or paragraph.
  • Use accordion when several peer sections should each be independently opened, scanned, summarized, or expanded together.
  • Use conditional reveal fields when a selected form answer owns a short follow-up field that becomes part of submitted data.
  • Use wizard when the task has sequenced dependencies, draft preservation, tests, review, cancel, and finish behavior.
  • Use details panel, preview panel, or full page when hidden content is selected-object inspection, rendered content preview, or deep reading.
  • Do not hide primary completion actions, required answers, severe warnings, or legal consequences behind an advanced reveal.
  • Do not hide advanced changes once made; summarize them near the primary action and provide reset or edit access.
  • Avoid stacking several reveal levels unless each level has a specific purpose, predictable label, and escape path.
  • Prefer defaults, presets, or simpler options over hidden expert settings when most users cannot safely judge the advanced controls.

Required States

  • Simple default state with essential controls, visible primary action, and recommended defaults.
  • Advanced closed state with a specific trigger that names what is hidden and whether any hidden values differ from defaults.
  • Advanced open state with grouped secondary controls, context copy, and reset or restore recommended settings.
  • Changed advanced state with visible summary near the primary action.
  • Hidden validation blocker state that opens or points to the responsible revealed control before submission fails.
  • Troubleshooting or diagnostics revealed state after a problem occurs.
  • Collapsed-after-change state where the changed summary remains visible.
  • Reset advanced state that returns hidden controls to recommended defaults without clearing essential answers.
  • Narrow-screen state that keeps the default path and reveal trigger reachable without burying the primary action.

Interaction Contract

  • The default path remains usable without opening advanced or secondary sections.
  • Reveal triggers use specific labels such as Advanced retention settings or Troubleshooting details, not vague More labels.
  • Opening a section reveals controls in place or in a clear secondary route without moving users away from the owning task context.
  • Closing a changed advanced section keeps a visible summary of hidden changes and an edit path.
  • Submission or commit validation opens, links to, or clearly names any hidden control that blocks progress.
  • Reset advanced returns only secondary controls to recommended defaults unless the user explicitly resets the whole task.
  • Revealed controls use ordinary form, menu, table, or disclosure semantics rather than a custom invisible interaction model.

Implementation Checklist

  • Classify each control as essential, secondary, expert, diagnostic, dangerous, or required before deciding what can be hidden.
  • Design recommended defaults so the simple path is genuinely complete for common users.
  • Write reveal labels that name the hidden control group and its consequence.
  • Track whether hidden values differ from defaults and expose that state near the primary action.
  • Open or link to hidden fields when validation, errors, search results, or deep links target them.
  • Provide reset, restore recommended, or clear advanced controls without clearing the main task.
  • Test novice completion, expert reveal, collapse-after-change, validation on hidden controls, reset behavior, keyboard access, screen-reader announcements, and small viewport layout.
  • Measure whether hiding a control increases support, search, abandonment, or wrong submissions before leaving it hidden.

Common Generated-UI Mistakes

  • Hiding required fields or primary actions to make a page appear shorter.
  • Using vague More or Advanced labels that do not tell users what kind of control is hidden.
  • Hiding changed advanced settings after collapse with no summary near the final action.
  • Treating progressive disclosure as a substitute for information architecture, section headings, or a wizard.
  • Stacking several nested reveals until users cannot predict where an option lives.
  • Hiding warnings, consent, destructive scope, or cost changes users must understand before committing.
  • Creating a reveal control that looks like a link, menu, tab, or drawer but does not follow that pattern's behavior.

Critique Questions

  • Which controls are essential for a common successful completion?
  • What advanced, rare, expert, diagnostic, or risky controls can safely wait for user intent?
  • Can users tell from the trigger what will appear and what it affects?
  • What hidden values are changed, and where are those changes summarized before commit?
  • What happens when validation, search, or an error targets a hidden control?
  • Would this be clearer as one disclosure detail, an accordion, conditional reveal field, wizard, or separate page?
Accessibility
  • Use native disclosure controls, buttons with expanded state, or clearly labelled navigation routes for revealed sections.
  • Expose whether advanced settings are open, closed, changed, blocked, or reset through visible text, not color alone.
  • Keep the reveal trigger in the keyboard order before the controls it reveals.
  • When validation targets a hidden control, open the relevant section or move focus to a visible error link that opens it.
  • Do not rely on animation, chevrons, indentation, or icon rotation alone to communicate hidden state.
  • Ensure changed hidden settings are summarized in text near the primary action so screen reader users can review them before commit.
  • Avoid deeply nested reveals that make heading, landmark, and focus order hard to understand.
Keyboard Behavior
  • Tab reaches the reveal trigger in the main task order.
  • Enter or Space opens and closes button-like reveal controls.
  • After opening, Tab proceeds into the revealed controls in logical order.
  • Closing a changed section keeps focus on the trigger or the action that closed it and leaves a visible changed summary.
  • Validation on hidden controls opens the owning section before focus moves to the first invalid revealed control or error link.
  • Reset advanced is keyboard reachable and returns focus to the advanced summary or trigger.
  • Escape is optional and should not be the only way to close a persistent advanced section.
Variants
  • Advanced options reveal
  • Show more settings
  • Expert mode
  • Troubleshooting details
  • Optional filters reveal
  • Recommended default with advanced edit
  • Progressive toolbar commands
  • Staged onboarding controls
  • Disclosure after error
  • Collapsed changed settings summary

Verification

Last verified: