Use progressive disclosure to stage complexity across a task, disclosure details for one optional in-place explanation, accordion for several related show-hide sections, and wizard for a controlled sequential setup flow.
Use progressive disclosure to stage complexity across a task, disclosure details for one optional in-place explanation, accordion for several related show-hide sections, and wizard for a controlled sequential setup flow.
Practice the judgment: Imagine this situation: Every section is collapsed to make the page look shorter, so users must hunt for primary controls. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Progressive disclosure | Disclosure / details | Accordion | Wizard |
|---|---|---|---|---|
| UI or UX | UI + UX - Staged reveal of advanced or secondary task complexity | UI + UX - Single in-place reveal for optional supporting content | UI + UX - Grouped show-hide sections for related page content | UI + UX - Guided sequential setup assistant |
| 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. | Render one clearly labelled disclosure control with a visible summary that predicts the revealed content, followed immediately by the hidden explanation, example, or supporting note. | Render each section title as a real button inside an appropriate heading, expose expanded or collapsed state, and connect the button to the panel it controls. | Render a bounded assistant shell with a clear wizard title, current step heading, step list or progress context, step-specific body content, Back, Next or step-specific primary action, Finish, and Cancel or Close. |
| 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. | Use disclosure details when a short explanation, example, eligibility note, or calculation help is useful to some users but would slow most users if always visible. | Use an accordion when a page has several related sections that users may inspect selectively while still needing an overview of all section labels. | Use a wizard when users must be guided through a dependent setup, creation, import, or configuration task where each step prepares the next one and final finish should be gated. |
| Good UI | 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 tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. | A product policy page shows Shipping, Returns, Warranty, and Contact sections as heading buttons with clear expanded states and one open panel. | A connector setup wizard shows Choose connector, Configure access, Test connection, Review, and Finish in a side step list, with Configure access current and future steps disabled until prerequisites pass. |
| Bad UI | A payment form hides currency conversion fees, tax treatment, and the final payer under Advanced options until after submission fails. | A page uses ten Details controls as section navigation, with some triggers revealing text and others opening pages. | Collapsed rows look like navigation links, but clicking them only reveals hidden page text. | All steps are visible as visited while hidden required setup is inserted later, so the step count and current heading are dishonest. |
| Good UX | 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 the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. | A user opens Returns, then Warranty, scans both sections, collapses Returns, and the page keeps focus and open-state feedback stable. | A user selects Zendesk, enters a token, runs a connection test, reviews generated sync settings, goes Back, and the token and test state are preserved or clearly invalidated when changed. |
| Bad UX | Nested reveals bury a control so deeply that users search, abandon, or change the wrong setting. | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. | A user misses eligibility requirements because the only required step is hidden inside a collapsed section by default. | A user goes Back to change the connector and the wizard silently keeps review answers from the old connector. |
| Best fit | The default task has a safe recommended path for most users. | One short supporting explanation belongs in place beside the content it clarifies. | Section headings provide a useful overview and users can choose which details to inspect. | A setup, import, object creation, or configuration task has strict sequencing. |
| Avoid when | The hidden content is required for most users to make the right decision. | The content is required to make the right decision. | There is only one revealable section and a simpler details disclosure is enough. | The task is a short form that users should scan and submit on one page. |
| Required state | Simple default state with essential controls, visible primary action, and recommended defaults. | Closed state with a specific summary label and hidden supporting content. | All collapsed state with every section title visible. | Current guided step with a clear heading, local controls, and step-specific primary action. |
| Accessibility burden | Use native disclosure controls, buttons with expanded state, or clearly labelled navigation routes for revealed sections. | Use native summary behavior or a button that exposes expanded and collapsed state. | Use native buttons for section controls and expose expanded or collapsed state. | Use one clear wizard title and one current step heading; keep browser title, heading, and progress context synchronized. |
| Common misuse | Hiding required fields or primary actions to make a page appear shorter. | Using vague summaries such as More, Details, or Click here. | Hiding content users must read sequentially before completing a task. | Letting users finish before required tests, previews, or review pass. |