| UI or UX | UI + UX - Cookie and tracking consent control | UI + UX - Top-of-interface broad-scope message | UI + UX - Page-flow service notification before the H1 | UI + UX - Urgent full-width sitewide alert near the top of every page |
| UI guidance | Render a clearly labelled cookie banner at the top of the document before ordinary page content, with service-specific copy, essential-cookie information, equal accept and reject actions for non-essential purposes, and a link to detailed cookie settings. | 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 one notification banner in the page content column immediately before the page H1, using the same width as the surrounding service content. | Render the site alert as a full-width message near the top of the site, before ordinary navigation or page content users might otherwise start from. |
| UX guidance | Use a cookie banner to collect or confirm choices for non-essential cookies, local storage, pixels, service-worker storage, analytics, advertising, personalization, or similar device storage technologies. | 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 notification banners sparingly for information users need before interpreting the page but that is not the main task content on that page. | Use a site alert when urgent public or servicewide information must be obvious and findable from any page, including deep links, refreshes, and routes outside the home page. |
| Good UI | A service banner says it uses essential cookies and asks to use analytics cookies, with Accept analytics cookies, Reject analytics cookies, and View cookies controls at the same level. | A billing workspace shows Scheduled maintenance Saturday directly below the product header across all billing pages, with View schedule and Dismiss when safe. | 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 public benefits site shows Emergency office closures at the very top of every page, with affected offices, updated time, and a link to alternate service channels. |
| Bad UI | A banner has a large Accept all button and a small Manage settings link but no reject action on the first layer. | Three unrelated banners stack above the page heading and push the account task below the fold. | A validation error appears in a notification banner at the top of the page with no links to the invalid fields. | The emergency message appears only on the home page, so users who land on Apply or Help do not see it. |
| Good UX | A first-time visitor rejects analytics cookies and the site loads without optional analytics, while essential security cookies remain explained. | A user moves from Overview to Invoices and still sees the same maintenance banner because the outage affects the whole billing workspace. | A user lands on Evidence overview and sees the upload confirmation before the page heading, then can continue the unfinished service journey. | A user enters through a bookmarked application-status page and still sees the same closure alert before using the service. |
| Bad UX | Reject only closes the banner while ad pixels and analytics continue firing. | A field validation error appears in a banner, forcing users to hunt for the failing input. | The same upload confirmation remains on unrelated pages after the user has already reviewed the evidence record. | Users dismiss a critical emergency alert once and never see a later update because dismissal is not versioned. |
| Best fit | The service sets non-essential cookies or similar device storage technologies. | The message applies across several pages, routes, sections, records, or sessions. | A message should be encountered before the page H1 but is not the page's main task content. | Urgent public, safety, operating-status, outage, closure, or availability information applies to the whole site or service. |
| Avoid when | The service uses only strictly necessary cookies and can explain them on a cookies page. | The message affects only one field, object, row, panel, or local task section. | The message is a submitted-form validation error or field correction. | The message applies only to one product workspace, account, section, page flow, field, row, or task. |
| Required state | First visit with no saved preference. | No-banner state when no broad-scope message applies. | No-banner state when no service-context notice or previous-page outcome applies. | No-site-alert state when no urgent sitewide condition applies. |
| Accessibility burden | Label the cookie banner region with the service name so users know which service is asking for the choice. | Use a labelled region or landmark when the banner is persistent page content that users may want to navigate to. | Use a labelled region for neutral page-load notification banners so screen-reader users can navigate to the notice. | Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation. |
| Common misuse | Accept-only banners. | Using a banner for one field error, one row warning, or one card status. | Using a notification banner for field validation errors instead of an error summary and field-level messages. | Showing a sitewide emergency only on the home page. |