Banner

A banner is a persistent notification element that spans the full width of an interface to communicate important information, alerts, or status messages that users need to be aware of.

What is a banner in UX design?

A banner is a full-width notification element positioned at the top or bottom of the interface to communicate persistent, important information to users. Unlike toast notifications that appear briefly and disappear, banners remain visible until the user dismisses them or the condition they communicate changes. Banners are used for system-wide alerts, cookie consent notices, subscription upgrade prompts, service outage warnings, important feature announcements, and other information that applies to the full interface rather than a specific action.

When should you use a banner in UX design?

Banners are appropriate for information that is genuinely important and applies to the entire interface or session, such as a service disruption, an expiring trial, a required action like email verification, or a critical security alert. They are less appropriate for promotional content, optional suggestions, or information that applies only to a specific section of the interface. Overusing banners trains users to ignore them, a phenomenon called banner blindness, which reduces the effectiveness of genuinely important banners when they appear.

How to write effective banner copy?

Banner copy should be concise and lead with the most important information. State clearly what has happened or what is required, why it matters to the user, and what action they should take. If the banner requires action, the call to action should be the most prominent element. If the banner is dismissible, the dismiss control must be clearly visible and accessible. Avoid vague language like "Important notice" without specifying what the notice is about. Users who have been conditioned to dismiss banners quickly will only engage if the first few words communicate clear relevance.

Related terms

Related guides