| UI or UX | UI + UX - Severe-consequence warning copy before an action | UI + UX - Urgent current-task status message | UI + UX - Contextual in-flow feedback | UI + UX - Form recovery summary |
| UI guidance | 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 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 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 top-of-form summary block with heading, linked error list, and matching field-level error messages. |
| UX guidance | 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 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 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. | Help users recover from one or more submitted-form errors without scanning the entire page. |
| Good UI | Before Submit declaration, a warning with an exclamation icon says the user may be fined if they provide false information. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. | An invoice row shows Missing billing contact directly beneath the affected customer with Add contact as the only action. | Top-of-form summary with a clear heading, linked error list, and matching inline field messages. |
| Bad UI | A red sentence says Important below the submit button after the user has already acted. | A vague red strip says Warning with no object, consequence, or next step. | A vague Important message appears above the whole page with no object reference. | Red banner saying fix errors with no links. |
| Good UX | Users see the fine or eligibility consequence before checking the declaration and can pause to verify their answer. | Users can renew the session, save a draft, or inspect details without losing typed work. | Users can reveal why export is limited, add the missing contact, and see the local message resolve without losing table context. | After failed submit, focus or reading order makes the summary discoverable before users scan the form. |
| Bad UX | A benefit-loss warning appears only after submission, so users cannot change the decision it warns about. | The only warning that unsaved work will be lost disappears after five seconds. | The message disappears like a toast even though users still need the invoice reference. | Only showing errors below the fold. |
| Best fit | A user must understand a serious consequence before taking or skipping an action. | A current task has a time-sensitive warning, error, or important status change. | A visible object or section has local status, warning, success, or next-step information. | Form submission can produce one or more errors. |
| Avoid when | The message is a dynamic task status that must be announced when it appears. | The message belongs beside one object, row, field, or local section. | The message is a one-field validation correction. | A single local field issue can be corrected before submit without page-level orientation. |
| Required state | No-warning state where the action has no severe consequence. | No-alert state with the task operating normally. | Neutral local context with no message. | Neutral form before submit with no summary. |
| Accessibility burden | Do not rely on color alone; include visible or programmatic warning wording and a non-color cue such as an icon. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. | Keep the message in the reading order near the context it describes. | Use a heading and alert behavior that makes the summary discoverable. |
| Common misuse | Using warning text for routine hints, explanations, or mild reminders. | Using a disappearing toast for warnings users must act on before continuing. | Using an inline message for a single field error that should be connected to that input. | Showing a red banner or toast with no links to the invalid answers. |