| 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 form hides the only eligibility rule under More details with no hint that it affects the answer. | A page hides every required instruction behind plus icons with no headings, state, or expand-all route. | A generic Step 1, Step 2, Done strip wraps one text field and a Finish button with no dependency, preview, review, or cancel state. |
| 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 | A user misses a required consent field because it is hidden behind a More options link with no indication it affects submission. | 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 clicks Finish before the connector was tested and later discovers the integration never ran. |
| 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. | A page has several related sections and users do not need all details visible at once. | 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. | Not-started state that explains what the wizard will configure and how many major steps follow. |
| 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. | Using divs or links as section toggles without button semantics or expanded state. | Using wizard chrome for a short edit form with no dependent sequence. |