| UI or UX | UI + UX - Durable user-opened notification history and action drawer | UI + UX - Transient non-modal status message | UI + UX - Urgent current-task status message | UI + UX - Contextual in-flow feedback |
| UI guidance | Provide a persistent notification entry point, usually a bell or inbox control, with a count that represents new unseen notifications rather than every unread item forever. | Render toast notifications in a consistent non-modal region with short status text, clear severity, an optional close control, and at most one concise action. | 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. |
| UX guidance | Use a notification center when users receive enough asynchronous system or collaboration updates that they need a durable place to review, triage, and act later. | Use toast notifications for low-risk, short-lived feedback after an action completes or background work changes state without requiring the user to stop the current task. | 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. |
| Good UI | A bell opens a drawer with Unread and All filters, showing comment mentions, approval requests, export results, and background-job failures in newest-first order. | Export started appears in the top notification region with a timestamp, close control, and View jobs action that remains available in activity history. | 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. |
| Bad UI | A red badge says 42 forever because opening the drawer, reading items, and viewing related work never update the count. | Five unrelated toasts pile up over the Save and Continue controls. | 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. |
| Good UX | Opening the notification drawer clears the new-notification badge while unread items remain available for later triage. | A completed archive action shows a short toast and a specific Undo action because the prior state can be restored. | 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. |
| Bad UX | A payment failure that blocks the current checkout is only stored in the notification center and never appears in the task. | Every autosave tick triggers a toast, training users to ignore real status changes. | 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. |
| Best fit | Users receive multiple asynchronous updates across objects, jobs, collaborators, approvals, or reminders. | Use for short non-blocking confirmation after explicit actions such as save, copy, send, archive, invite, or queue export. | 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. |
| Avoid when | The product has only occasional current-action feedback that a toast or inline status can handle. | The message is the only recovery path for a blocking or high-consequence failure. | The message belongs beside one object, row, field, or local section. | The message is a one-field validation correction. |
| Required state | Closed entry-point state with zero, new-unseen, and unread-but-seen counts. | Idle state with no visible toast and a reachable status or history region when applicable. | No-alert state with the task operating normally. | Neutral local context with no message. |
| Accessibility burden | Give the entry-point control an accessible name that includes new or unread count without relying only on a red dot. | Expose the toast as a status or alert message according to urgency so assistive technologies can announce it without requiring focus movement. | 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. |
| Common misuse | Treating the badge count, unread count, and total notification count as one number. | Using a toast as the only feedback for payment, save, permission, upload, or security failures. | 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. |