Use a notification banner for a service/page-flow notice immediately before the H1; use a banner for broader interface scope, an alert for urgent current-task status, and an error summary for submitted form validation recovery.
Use a notification banner for a service/page-flow notice immediately before the H1; use a banner for broader interface scope, an alert for urgent current-task status, and an error summary for submitted form validation recovery.
Practice the judgment: Imagine this situation: A previous-page success confirmation is sent as a toast and expires before the redirect target loads. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Notification banner | Banner | Alert | Error summary |
|---|---|---|---|---|
| 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 | Reserve the pattern for service-wide problems, personal deadlines or obligations elsewhere in the service, and outcomes from a previous page when the journey continues rather than ends. | 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. | Move users from the summary to the exact field, group, or first invalid control that needs correction. |
| 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 success toast appears in the corner after redirect and disappears before the user can verify which evidence was uploaded. | Three unrelated banners stack above the page heading and push the account task below the fold. | Users miss an urgent condition because the message auto-expires or appears far from the affected task. | Summary and field messages visually disconnected or contradictory. |
| 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. | When the connection returns, the alert downgrades to a success status and then can be dismissed safely. | 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 service problem, deadline, overdue action, or elsewhere-in-service event affects the user's next interpretation of the page. | 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. | The message is a system failure, permission problem, or outage rather than a validation issue. |
| Required state | Neutral Important state for service problem, deadline, overdue action, or elsewhere-in-service information. | Informational product or service banner at the top of the related interface. | Advisory or success state that uses calmer status semantics rather than assertive alert semantics. | Failed-submit state with summary visible near the form heading. |
| 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. | Replacing field-level messages with only a top-level summary. |