| UI or UX | UI + UX - Single in-place reveal for optional supporting content | UI + UX - Grouped show-hide sections for related page content | UI + UX - Contextual in-flow feedback | UI + UX - Curated onward links connected to the current content |
| UI guidance | 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 the message inside the same row, card, panel, form section, or task region that it describes, with a clear tone, concise title, body text, and at most one local action or detail disclosure. | Render a short, labelled collection of links whose destinations are closely related to the current content, using destination-specific link text and optional relation labels such as service, guidance, external, or PDF. |
| UX guidance | 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 inline messages when users need contextual feedback while continuing nearby work, such as a row-level warning, section-level success, local policy note, or task-specific next step. | Use related links to support users who have finished or understood the current content and need a relevant next page, adjacent service, reference, or follow-up resource. |
| Good UI | 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. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. | A benefits guidance page ends with Related links: Check eligibility for support, Upload evidence for your claim, and Appeal a support decision, each with a concise relation label. |
| Bad UI | 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 vague Important message appears above the whole page with no object reference. | A page ends with More information containing Home, Contact us, Apply now, Old 2018 guidance, Help, and an unrelated account settings link. |
| Good UX | 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. | Users can reveal why export is limited, add the missing contact, and see the local message resolve without losing table context. | A user reads claim renewal guidance, chooses Upload evidence for your claim, and sees why that destination is the next useful service page. |
| Bad UX | 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. | The message disappears like a toast even though users still need the invoice reference. | Users follow a generic More information link and land on an unrelated policy collection. |
| Best fit | 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 visible object or section has local status, warning, success, or next-step information. | The current page has a few genuinely adjacent pages, services, programs, or resources users often need next. |
| Avoid when | The content is required to make the right decision. | There is only one revealable section and a simpler details disclosure is enough. | The message is a one-field validation correction. | Links are only loosely associated by topic tags or organizational ownership. |
| Required state | Closed state with a specific summary label and hidden supporting content. | All collapsed state with every section title visible. | Neutral local context with no message. | Default state with a labelled, curated related-links block and descriptive link text. |
| Accessibility burden | 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. | Keep the message in the reading order near the context it describes. | Use descriptive link text that makes sense out of context. |
| Common misuse | Using vague summaries such as More, Details, or Click here. | Using divs or links as section toggles without button semantics or expanded state. | Using an inline message for a single field error that should be connected to that input. | Using related links as a catch-all further-reading dump. |