| UI or UX | UI + UX - Page-flow service notification before the H1 | UI + UX - Top-of-interface broad-scope message | UI + UX - Urgent current-task status message | UI + UX - Form recovery summary |
| UI guidance | Render one notification banner in the page content column immediately before the page H1, using the same width as the surrounding service content. | Render the banner at the top of the interface or content area it governs, below required global chrome and before the page content that should be interpreted with that message. | 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 a top-of-form summary block with heading, linked error list, and matching field-level error messages. |
| UX guidance | Use notification banners sparingly for information users need before interpreting the page but that is not the main task content on that page. | Use banners when users need broad context before continuing across several pages or sections, such as maintenance, service delay, account setup, rollout, policy, or official-site identity information. | 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. | Help users recover from one or more submitted-form errors without scanning the entire page. |
| Good UI | A case-management page shows an Important notification banner immediately before Manage evidence, saying evidence upload may be delayed and linking to service status. | A billing workspace shows Scheduled maintenance Saturday directly below the product header across all billing pages, with View schedule and Dismiss when safe. | A session alert appears above the active editor, says the session expires in 2 minutes, and offers Save draft while keeping the editor usable. | Top-of-form summary with a clear heading, linked error list, and matching inline field messages. |
| Bad UI | A validation error appears in a notification banner at the top of the page with no links to the invalid fields. | Three unrelated banners stack above the page heading and push the account task below the fold. | A vague red strip says Warning with no object, consequence, or next step. | Red banner saying fix errors with no links. |
| Good UX | A user lands on Evidence overview and sees the upload confirmation before the page heading, then can continue the unfinished service journey. | A user moves from Overview to Invoices and still sees the same maintenance banner because the outage affects the whole billing workspace. | Users can renew the session, save a draft, or inspect details without losing typed work. | After failed submit, focus or reading order makes the summary discoverable before users scan the form. |
| Bad UX | The same upload confirmation remains on unrelated pages after the user has already reviewed the evidence record. | A field validation error appears in a banner, forcing users to hunt for the failing input. | The only warning that unsaved work will be lost disappears after five seconds. | Only showing errors below the fold. |
| Best fit | A message should be encountered before the page H1 but is not the page's main task content. | The message applies across several pages, routes, sections, records, or sessions. | A current task has a time-sensitive warning, error, or important status change. | Form submission can produce one or more errors. |
| Avoid when | The message is a submitted-form validation error or field correction. | The message affects only one field, object, row, panel, or local task section. | The message belongs beside one object, row, field, or local section. | A single local field issue can be corrected before submit without page-level orientation. |
| Required state | No-banner state when no service-context notice or previous-page outcome applies. | No-banner state when no broad-scope message applies. | No-alert state with the task operating normally. | Neutral form before submit with no summary. |
| Accessibility burden | Use a labelled region for neutral page-load notification banners so screen-reader users can navigate to the notice. | Use a labelled region or landmark when the banner is persistent page content that users may want to navigate to. | Use role alert for urgent dynamic text and avoid putting interactive controls inside the role-alert node itself. | Use a heading and alert behavior that makes the summary discoverable. |
| Common misuse | Using a notification banner for field validation errors instead of an error summary and field-level messages. | Using a banner for one field error, one row warning, or one card status. | Using a disappearing toast for warnings users must act on before continuing. | Showing a red banner or toast with no links to the invalid answers. |