Use a cookie banner when the product needs informed consent or refusal for non-essential cookies and similar tracking technologies; use banner for broad interface context, notification banner for before-heading service notices, and site alert for urgent sitewide information.
Use a cookie banner when the product needs informed consent or refusal for non-essential cookies and similar tracking technologies; use banner for broad interface context, notification banner for before-heading service notices, and site alert for urgent sitewide information.
Practice the judgment: Imagine this situation: Analytics and ad pixels fire before users make a choice, making the visible banner disconnected from actual tracking behavior. 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 | Cookie banner | Banner | Notification banner | Site alert |
|---|---|---|---|---|
| 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. | 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 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 says by continuing you accept cookies and fires analytics before any button is clicked. | Three unrelated banners stack above the page heading and push the account task below the fold. | A success toast appears in the corner after redirect and disappears before the user can verify which evidence was uploaded. | Three large red alerts stack above the header, mixing closure, newsletter, and one form error. |
| Good UX | A user changes their mind from Accept to Reject in cookie settings and optional tracking stops for future page loads. | 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. | Deep-linked users miss critical sitewide information because the alert exists only on the home page. |
| 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 service problem, deadline, overdue action, or elsewhere-in-service event affects the user's next interpretation of the page. | 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 | Accept non-essential cookies state. | Informational product or service banner at the top of the related interface. | Neutral Important state for service problem, deadline, overdue action, or elsewhere-in-service information. | Emergency site alert visible at the top of every affected page. |
| 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. |