Site alert

Problem Context

• The message applies to the whole public site, service, agency property, or critical operating channel rather than one workspace, record, form, or route.
• Users can arrive through search, bookmarks, shared links, notifications, or deep links and still need the warning before using the site.
• The condition is urgent, time-sensitive, public, or operationally critical enough to appear above ordinary navigation and page content.
• The message may need updates, timestamps, or grouped related links while the same sitewide condition remains active.

Selection Rules

• Choose site alert when urgent sitewide information must appear by default on every affected page near the top of the site.
• Use emergency treatment for public safety, closures, evacuation, payment suspension, system outage, or other high-consequence service availability messages.
• Use informational site-alert treatment for important sitewide operating status that is not an emergency but still must be seen across the site.
• Use banner instead when the message is broad but limited to a product, account, workspace, section, or official identity scope.
• Use notification banner instead when the message belongs immediately before the H1 in one service page flow.
• Use alert instead when a current task dynamically changes and users need immediate notice inside that task.
• Use error summary and field messages instead for submitted form validation errors.
• Show one site alert per affected site scope; combine related urgent facts into a short list rather than stacking multiple site alerts.
• Let users dismiss only noncritical site alerts or alerts that remain recoverable from a stable status page, and store dismissal by alert id, version, audience, and site scope.

Required States

• No-site-alert state when no urgent sitewide condition applies.
• Emergency site alert visible at the top of every affected page.
• Informational site alert for non-emergency servicewide operating status.
• Slim site alert for a short urgent message with a single detail link.
• Expanded or list state for several related urgent updates inside one alert.
• Dynamic update state with changed timestamp and appropriate alert or status semantics.
• Dismissed state for safe informational alerts, versioned so new urgent updates reappear.
• Resolved state where the alert is removed or replaced by a low-impact status page reference.

Interaction Contract

• The site alert appears before ordinary page content and is reachable from any affected route, not just the home page.
• The alert heading names the sitewide condition rather than a generic severity label.
• The body states who is affected, what users should do now, when it was updated, and where to get details.
• Related links are grouped inside the same alert when multiple urgent facts share one sitewide condition.
• The alert does not stack with unrelated marketing, validation, or page-flow messages.
• Dynamic emergency updates use alert semantics sparingly; advisory updates use status or labelled region semantics.
• Dismissal never hides unresolved critical conditions permanently and never suppresses newer alert versions.

Implementation Checklist

• Define the alert's site scope, audience, severity, owner, start time, update cadence, expiry condition, and fallback channel.
• Place the alert in the site shell above page-specific content and test deep-linked pages, not only the home page.
• Write a short heading that names the urgent condition, such as Emergency office closures or Online applications unavailable.
• Include updated time, affected areas, immediate next step, and one stable link to more detail or alternate contact.
• Combine related sitewide facts into one list or expandable detail region instead of stacking separate alerts.
• Choose role alert only for important dynamic changes that need immediate attention; use status or labelled region for advisory updates.
• Version dismissal state by alert id, update version, audience, and site scope, and disable dismissal for unresolved critical conditions.
• Test mobile wrapping, zoom, keyboard reachability, screen-reader landmark labels, skip-link order, route transitions, cache invalidation, and resolution removal.

Common Generated-UI Mistakes

• Showing a sitewide emergency only on the home page.
• Using a site alert for form validation, task success, local workflow feedback, or one account issue.
• Stacking multiple unrelated site alerts at the top of every page.
• Using bright emergency styling for routine announcements, newsletters, or low-impact notices.
• Letting users permanently dismiss a critical unresolved alert.
• Leaving a stale emergency alert after the condition has ended.
• Changing site-alert content mid-session without a programmatic status or alert announcement when the update is important.

Critique Questions

• Does this message truly apply across every affected page, including deep links?
• Is the condition urgent enough to sit above ordinary site navigation and page content?
• Should this be a site alert, a product banner, a before-H1 notification banner, a current-task alert, or an error summary?
• What single highest-priority site alert should users see right now?
• Who owns the update timestamp, expiry, alternate contact route, and resolution notice?
• Can users dismiss it safely, and what update version should make it reappear?