Use official-site banner when the surface must identify official government ownership and secure connection status; use banner for broad product messages, site alert for urgent sitewide incidents, notification banner for before-heading service notices, security warning for detected unsafe destinations, and service navigation for movement inside a named service.
Use official-site banner when the surface must identify official government ownership and secure connection status; use banner for broad product messages, site alert for urgent sitewide incidents, notification banner for before-heading service notices, security warning for detected unsafe destinations, and service navigation for movement inside a named service.
Practice the judgment: Imagine this situation: The official-site banner is dismissible and disappears before users can expand the .gov and HTTPS explanation. 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 | Official-site banner | Banner | Site alert | Notification banner | Security warning | Service navigation |
|---|---|---|---|---|---|---|
| UI or UX | UI + UX - Top-of-page official identity and secure-connection disclosure for eligible government or public-authority websites | UI + UX - Top-of-interface broad-scope message | UI + UX - Urgent full-width sitewide alert near the top of every page | UI + UX - Page-flow service notification before the H1 | UI + UX - Security-risk warning and safe interruption before unsafe navigation, download, submission, preview, or sensitive action | UI + UX - Service-scoped identity and navigation strip |
| UI guidance | Place the official-site banner at the very top of every eligible page, before the header, service navigation, alerts, and page 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 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. | Render one notification banner in the page content column immediately before the page H1, using the same width as the surrounding service content. | Render a security warning as a high-clarity interruption that names the detected risk, identifies the destination or object, explains the concrete threat, presents the safest action as the primary path, and separates any override behind deliberate risk detail. | Render the service name, service-home link, a compact set of service-level links, current or active service state, and any service-level tools in a navigation strip below the general site or platform header. |
| UX guidance | Use the banner to help users verify official ownership and secure connection status before they share personal, financial, health, legal, or account information. | 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 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. | 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 security warning when a product, browser, operating system, or service has evidence that proceeding could expose credentials, install harmful software, leak sensitive data, bypass trust, or weaken account protection. | Use service navigation to reassure users that they are inside the right service and to let repeated or multi-task users move among the most important service areas. |
| Good UI | A benefits service shows an official government banner above the header with a flag, official-site text, a How you know disclosure, and expanded .gov plus HTTPS explanations. | A billing workspace shows Scheduled maintenance Saturday directly below the product header across all billing pages, with View schedule and Dismiss when safe. | 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. | 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 browser interstitial says Deceptive site ahead, shows the suspicious domain, explains that attackers may steal passwords, and makes Back to safety the primary action while placing Visit unsafe site behind Details. | A benefits service shows the GOV.UK header above a light service strip with 'Apply for support', Overview, Applications, Messages, and a Welsh language link. |
| Bad UI | A private vendor checkout copies government official-site copy while using a commercial domain. | Three unrelated banners stack above the page heading and push the account task below the fold. | Three large red alerts stack above the header, mixing closure, newsletter, and one form error. | A success toast appears in the corner after redirect and disappears before the user can verify which evidence was uploaded. | A red page says Security issue with Continue as the only visible action. | The service strip mixes GOV.UK topics, start-page links, sign out, Help, local page anchors, and admin tools as equal destinations. |
| Good UX | A user expands the banner before entering a tax ID, reads that .gov belongs to an official government organization, checks the HTTPS guidance, and continues with more confidence. | A user moves from Overview to Invoices and still sees the same maintenance banner because the outage affects the whole billing workspace. | A user enters through a bookmarked application-status page and still sees the same closure alert before using the service. | A user lands on Evidence overview and sees the upload confirmation before the page heading, then can continue the unfinished service journey. | A user clicks a payroll link that visually resembles the company domain, sees the suspicious-domain warning, returns to the trusted site, and reports the link to security. | A caseworker switches from Applications to Messages and returns to Applications with draft progress and filters preserved. |
| Bad UX | A staging site uses official banner copy during a user test and participants believe it is a live government service. | A field validation error appears in a banner, forcing users to hunt for the failing input. | Deep-linked users miss critical sitewide information because the alert exists only on the home page. | The same upload confirmation remains on unrelated pages after the user has already reviewed the evidence record. | A user sees a vague warning, assumes it is routine maintenance, proceeds, and enters credentials into a phishing page. | A linear eligibility check exposes service navigation that invites users to leave before completing the required questions. |
| Best fit | The service is eligible to identify itself as an official government or public-authority website. | The message applies across several pages, routes, sections, records, or sessions. | Urgent public, safety, operating-status, outage, closure, or availability information applies to the whole site or service. | A service problem, deadline, overdue action, or elsewhere-in-service event affects the user's next interpretation of the page. | A threat signal indicates phishing, malware, deceptive site, unsafe download, invalid certificate, insecure connection, mixed-content submission, suspicious redirect, file preview risk, or account-security danger. | A named service is used repeatedly by some users. |
| Avoid when | The page is on a staging, prototype, private vendor, partner, non-approved, or non-HTTPS domain. | The message affects only one field, object, row, panel, or local task section. | The message applies only to one product workspace, account, section, page flow, field, row, or task. | The message is a submitted-form validation error or field correction. | The message is only a general severe consequence before a product action; use warning text. | The journey is a simple end-to-end transaction with a clear sequence. |
| Required state | Collapsed official identity state. | Informational product or service banner at the top of the related interface. | Emergency site alert visible at the top of every affected page. | Neutral Important state for service problem, deadline, overdue action, or elsewhere-in-service information. | Safe path state with primary Back to safety, Cancel, Remove, Use trusted route, or Contact admin action. | Default state with general header, visible service name, service-home link, and service navigation links. |
| Accessibility burden | Use the approved semantic structure and labels for the banner landmark or region. | Use a labelled region or landmark when the banner is persistent page content that users may want to navigate to. | Give the site alert a descriptive aria-label or labelledby value so it appears clearly in landmark navigation. | Use a labelled region for neutral page-load notification banners so screen-reader users can navigate to the notice. | Use a heading and text that name the risk before the destination or details, so screen reader users hear the warning context first. | Use a correctly labelled service information region or navigation landmark that reflects the service name and link list. |
| Common misuse | Copying an official government banner onto a private, partner, staging, or prototype site. | Using a banner for one field error, one row warning, or one card status. | Showing a sitewide emergency only on the home page. | Using a notification banner for field validation errors instead of an error summary and field-level messages. | Making Continue the primary or only visible action. | Using service navigation as a site map for every page in the service. |