Disclosure / details
One short supporting explanation belongs in place beside the content it clarifies.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle in-place reveal for optional supporting content
Test in lab 21 documented entries 5 anti-pattern checks
Disclosure And Attention Management
Progressive disclosure, overlays, warnings, focus, and interruption management.
Browse all problem familiesLearn the family
Which information belongs in view now, and what deserves interruption?
Attention is part of the task. Disclosure reveals supporting detail when it becomes useful; interruption earns prominence when the person must decide or act before continuing.
Use this method
- Identify the decision at the current step.
- Keep essential information visible near that decision.
- Place optional detail behind a clear disclosure label.
- Reserve blocking surfaces for consequential interruptions.
Compare the outcome
Strong: A booking page shows the price and cancellation rule beside Reserve, while a labeled disclosure holds the full venue policy.
Weak: A booking page hides the cancellation charge in a tooltip and opens a modal for routine help while the visitor chooses a room.
Try it: Mark each item on a page as essential now, useful on request, or requiring an interruption, and explain the task consequence.
Read these patterns first
- Progressive disclosureThe default task has a safe recommended path for most users.
- AccordionSection headings provide a useful overview and users can choose which details to inspect.
- Modal dialogA short task must interrupt normal page interaction but should return users to the same context afterward.
Complete study route · 21 entries
Work through the family in order
Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.
0 of 21 studies complete
Start this family →6 entries
Build the foundation
Learn the shared task and the core interaction choices.
Accordion
Section headings provide a useful overview and users can choose which details to inspect.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardGrouped show-hide sections for related page content
Test in lab Progressive disclosure
The default task has a safe recommended path for most users.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardStaged reveal of advanced or secondary task complexity
Test in lab Details panel
Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardPersistent selected-object inspection panel
Test in lab Tooltip
A compact control needs a brief supplemental explanation.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardShort noninteractive description tied to a trigger
Test in lab Modal dialog
A short task must interrupt normal page interaction but should return users to the same context afterward.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardFocused modal task layer
Test in lab 10 entries
Apply the patterns
Choose a specialized form for the context and follow its complete behavior.
Popover
A local control needs brief explanatory content or light editing while page context remains visible.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardSmall anchored contextual overlay
Test in lab Hover card
Users need to inspect object metadata before choosing whether to open a link, mention, file, row, issue, or reference.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardRich preview surface on hover or focus
Test in lab Preview panel
Users repeatedly inspect files, messages, PDFs, images, videos, audio, invoices, contracts, designs, or attachments from a list or grid.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardPersistent rendered-content preview pane
Test in lab Menu button
A local object or toolbar has three to eight secondary commands.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardButton-controlled popup menu of actions or links
Test in lab Context menu
Objects or selections have secondary commands that experienced users expect near the target.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardLocation-invoked contextual command menu
Test in lab Alert dialog
An urgent current-workflow condition requires acknowledgement, cancellation, retry, sign-out, review, or another explicit response before continuation.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedBlocking urgent-response modal
Test in lab Sheet
The surface needs adaptive size, edge attachment, drag or detent behavior, or a clear temporary child-task mode.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardAdaptive temporary sheet for a context-bound child task
Test in lab Bottom sheet
Mobile users need extra contextual detail or controls while staying oriented to a map, feed, route, media item, or selected object.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardMobile bottom-anchored contextual overlay with detents
Test in lab Drawer
Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardSupplemental edge panel for current-context detail or light actions
Test in lab Full-screen takeover
A temporary task needs the whole viewport for capture, immersive preview, focused setup, scanning, or dense editing.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardTemporary full-viewport modal task mode
Test in lab 5 entries
Review the quality risks
Study failure cases and identify the better recovery route.
Icon-only ambiguous action
Use this anti-pattern entry to audit toolbars, row actions, cards, command bars, mobile action sheets, and generated UIs with symbol-only controls.
- Type
- UI-UX
- Sources
- 3
- Trail checked
anti-patternAmbiguous action anti-pattern
Test in lab Modal for nonblocking content
Use it when a generated UI wraps ordinary messages in dialog components because the design intent was underspecified.
- Type
- UI-UX
- Sources
- 6
- Trail checked
anti-patternUnnecessary modal interruption anti-pattern
Test in lab Carousel auto-advance without pause
Use it when a design review needs concrete evidence that motion is interrupting reading, form entry, recommendation feedback, or assistive-technology output.
- Type
- UI-UX
- Sources
- 6
- Trail checked
anti-patternAnti-pattern where timed carousel rotation changes visible content without user control
Test in lab Tooltip-only required information
Use this anti-pattern entry to review forms, checkout, applications, settings, data tables, eligibility flows, upload flows, and disabled actions where required information is hidden in a tooltip.
- Type
- UI-UX
- Sources
- 6
- Trail checked
anti-patternRequired-content-hidden-in-tooltip anti-pattern
Test in lab Drawer with no close or return path
Use this anti-pattern to review temporary drawers, inspectors, side sheets, and mobile drawer layouts for missing close and return behavior.
- Type
- UI-UX
- Sources
- 6
- Trail checked
anti-patternUnrecoverable drawer anti-pattern
Test in lab Try another phrase
Try fewer words, clear the filter, or search across all pattern families.
Search all patterns