| UI or UX | UI + UX - Highlighted region for key information from a longer page | UI + UX - Urgent current-task status message | UI + UX - Severe-consequence warning copy before an action | UI + UX - Single in-place reveal for optional supporting content |
| UI guidance | Render a summary box as a labelled region with a specific heading, short body, scannable key points or next steps, and only links that directly support the summarized page task. | Render an alert as a visible message in the current task area with a clear severity cue, short title, consequence-focused body, and one direct action or safe dismissal when appropriate. | Render warning text as a short high-emphasis statement with a warning icon, visible or hidden warning label, and explicit consequence copy placed before the relevant action, declaration, or instruction. | 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. |
| UX guidance | Use summary box when users need the essential facts, eligibility notes, deadlines, documents, or next steps from a longer page before reading every detail. | Use alerts when the user must notice a time-sensitive condition that affects their current task, such as session expiry, lost connection, unsaved work risk, failed submission, or a security-sensitive hold. | Use warning text when users must understand a serious consequence before acting or failing to act, such as a fine, loss of access, permanent deletion, eligibility impact, or legal responsibility. | 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. |
| Good UI | A benefits guide has a summary box headed Before you apply with deadline, required documents, and Start application link above the detailed eligibility rules. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. | Before Submit declaration, a warning with an exclamation icon says the user may be fined if they provide false information. | A tax form shows a summary labelled How we calculate household income, revealing a short worked example below the income field. |
| Bad UI | A pale box repeats the entire page introduction, every related link, and several unrelated policy notes. | A vague red strip says Warning with no object, consequence, or next step. | A red sentence says Important below the submit button after the user has already acted. | A form hides the only eligibility rule under More details with no hint that it affects the answer. |
| Good UX | A user scans the box, learns they need photo ID and proof of address, then continues into the detailed instructions with the same terms repeated in context. | Users can renew the session, save a draft, or inspect details without losing typed work. | Users see the fine or eligibility consequence before checking the declaration and can pause to verify their answer. | A user opens the calculation help, reads one example, closes it, and the nearby income field value remains unchanged. |
| Bad UX | Users miss an eligibility rule because it appears only inside a sidebar summary and not in the main instructions. | The only warning that unsaved work will be lost disappears after five seconds. | A benefit-loss warning appears only after submission, so users cannot change the decision it warns about. | Users miss a deadline because the deadline is hidden inside a collapsed disclosure with a vague label. |
| Best fit | A longer page has a small set of key facts or next steps that users need early. | A current task has a time-sensitive warning, error, or important status change. | A user must understand a serious consequence before taking or skipping an action. | One short supporting explanation belongs in place beside the content it clarifies. |
| Avoid when | The highlighted content is an urgent status, outage, validation result, or severe consequence. | The message belongs beside one object, row, field, or local section. | The message is a dynamic task status that must be announced when it appears. | The content is required to make the right decision. |
| Required state | Default summary box with heading, concise body, key points or next steps, and optional task-specific link. | No-alert state with the task operating normally. | No-warning state where the action has no severe consequence. | Closed state with a specific summary label and hidden supporting content. |
| Accessibility burden | Expose the box as a labelled region or group with a heading that fits the page heading hierarchy. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. | Do not rely on color alone; include visible or programmatic warning wording and a non-color cue such as an icon. | Use native summary behavior or a button that exposes expanded and collapsed state. |
| Common misuse | Repeating the whole page in a highlighted box. | Using a disappearing toast for warnings users must act on before continuing. | Using warning text for routine hints, explanations, or mild reminders. | Using vague summaries such as More, Details, or Click here. |