Alert Banner Best Practices (Web Design for Disaster, Part 1)

By Mike McCaffrey,
A stylized collage of alert banner designs.

As the world navigates through a public health crisis, and everyone is forced to respond to unprecedented conditions, it is a good time to evaluate how well your website is working to communicate urgent information to your stakeholders, and how it might be improved going forward. 

The designers and developers at Kalamuna have helped many organizations prepare and respond to emergency situations, and in this series of posts, we are going to share the lessons we have learned and the best practices we are now recommending to our clients.

Why use alert banners?

For many organizations, it becomes imperative to communicate with your stakeholders in the event of an emergency. However, many common website components are not well-suited for presenting urgent information under adverse circumstances. Pop-ups may be blocked or dismissed accidentally, slideshows may fail to load under low-bandwidth conditions, and any text contained within images is inaccessible to screen readers used by blind and low-vision users.

Therefore, alert banners are often the best design pattern for presenting an urgent message or call to action to stakeholders who visit your website. A properly implemented alert banner can quickly and reliably catch the attention of your audience, let them know that an emergency is in progress, provide actionable instructions with the most relevant facts, and direct them to additional resources or updates as needed. 

Banner design best practices

A good alert banner is positioned in a prominent location near the top of the screen and is styled in a way that is immediately noticed upon arrival. It should appear across all the pages of your site—not just on the homepage—since many visitors arrive through direct links to internal content. Persistence is important, since if a message is dismissed or otherwise disappears, the user may find it hard to locate the urgent information again.

SFUSD is prominently displaying an alert message on all the pages of their website, featuring timely details and links to vital resources.
SFUSD is prominently displaying an alert message on all the pages of their website, featuring timely details and links to vital resources.

Visually, an alert banner should stand out, but must do so in a way that is accessible to all visitors. It should be large enough to capture attention and convey a message, but shouldn't take over the browser window or block users from completing other tasks. Allow the banner to scroll along with the surrounding content, since fixed positioning on the page or screen can obstruct other elements or disorient the viewer. 

The font should be large and easy to read. Choose background, text, and link colors that have a high enough contrast ratio to meet the AA standard of the Web Content Accessibility Guidelines (WCAG), which requires a 4.5:1 contrast ratio for for normal text and 3:1 for large text, or ideally the WCAG AAA guidelines, which specify a 7:1 contrast ratio for normal text and 4.5:1 for large text. You can use this online calculator to determine if your colors meet these recommendations.

Some color combinations on this government website fail the WCAG accessibility guidelines for color contrast, even when evaluated using the more-permissive standards for large text
Some color combinations on this government website fail the WCAG accessibility guidelines for color contrast, even when evaluated using the more-permissive standards for large text.

Links should be underlined or made into buttons so they can be easily identified. They should be large enough to be reliably pressed on mobile devices, have a distinct hover state to let mouse users know where they can click, and provide a focus indicator to highlight the active item as a keyboard user tabs through the page. 

If presenting multiple links, make sure they are spaced far enough apart so that users can clearly identify their options and select one without accidentally pressing another. Avoid making the entire banner a link, since users may not realize it is clickable. Links to external resources should be clearly marked, both visually with an icon and with alt text for screen readers, so the user knows they are leaving your site.

The Rocketship Public Schools banner (designed by Kalamuna) is a great example of how you can use multiple links to direct visitors to the resources that are most applicable to their needs.
The Rocketship Public Schools banner (designed by Kalamuna) is a great example of how you can use multiple links to direct visitors to the resources that are most applicable to their needs.

Finally, consider how your banner may need to change over the course of a crisis. Including dates in the design can indicate when an alert has been issued, updated, or resolved, so visitors are assured they are getting the latest information. And after a crisis, you may want the banner to announce that the emergency is over, using cooler colors to indicate that the situation is now less urgent.

This water company alert banner not only alerts customers when action needs to be taken, but also announces when service has returned to normal. Test your emergency response before it is needed
This water company alert banner not only alerts customers when action needs to be taken, but also announces when service has returned to normal.

Test your emergency response before it is needed

Alert banners are functionally and visually different from any other component on your site, so it is important to test the functionality in advance of an actual emergency. You don't want to be releasing bug fixes or design changes while an emergency is underway.

When testing, use an environment that closely resembles your production platform. View the site with a variety of browsers, devices, and screen sizes in order to ensure that the banner is responsive and does not have any obvious layout issues or adverse interactions with other elements, such as popups and dropdowns which may obstruct your message. Browserstack is a handy service we use at Kalamuna to assist with this task.

Try creating multiple variations of the alert using different content. What happens to the layout when the text entered is longer or shorter than expected, or if it spans multiple paragraphs? What happens when several links are added, or if someone tries entering a full url as the text of a link? If your site is available in multiple languages, is the text being properly translated and does it display correctly for both left-to-right and right-to-left layouts?

If your banner contains images, what happens under low-bandwidth conditions when some files may not load? If a background image does not appear, is the text still legible? If a logo or decorative element doesn’t show up, does the layout appear broken? Instead of a png or jpg icon, can you include an <svg> tag in your html markup so that it loads at the same time as the content?

The entire alert banner on the NCAA website is contained in an image, including all of the text, and will not be visible at all if the file fails to load.
The entire alert banner on the NCAA website is contained in an image, including all of the text, and will not be visible at all if the file fails to load.

Just like with images, javascript files may fail to load under low-bandwidth conditions, or the execution of your code may be interrupted by errors in other scripts on the page. If javascript is not available, does your alert banner still appear on the page? Can the content still be read?

Without javascript, all visitors can see is the first few words of the Smithsonian’s dynamic, side-scrolling closure announcement in the top banner. Create an activation plan
Without javascript, all visitors can see is the first few words of the Smithsonian’s dynamic, side-scrolling closure announcement in the top banner.

Create an activation plan

When the time comes to deploy the emergency banner, it should be clear who has the ability  and responsibility to post the message. Designate backups for this critical role, since the primary person may be unavailable or even affected by the emergency itself. 

Like a fire extinguisher, the mechanism used to activate an alert message should be clearly marked and easy to find in the event of an emergency. Since this interface is infrequently accessed, users may not have advance knowledge of its location, or may have forgotten it over time.

And, just like with a fire extinguisher, safeguards need to be put in place to avoid accidentally creating an alert. Consider implementing the virtual equivalent of breaking glass and pulling a pin in order to activate the system, such as clear text describing what will happen and a confirmation step to ensure the user definitely intends to proceed.

In 2018, the Hawaii Emergency Management Agency accidentally sent a missile alert to thousands of cell phones, thanks to the poor design of an administrative interface.
In 2018, the Hawaii Emergency Management Agency accidentally sent a missile alert to thousands of cell phones, thanks to the poor design of an administrative interface.

Hopefully these tips will help you create and deploy effective alert banners, or to improve ones you already have in place on your website. Stay tuned for additional posts in our Designing for Disaster series, covering topics such as emergency landing pages, interface roadblocks, and platform reliability.

 

Mike McCaffrey

Senior Architect

The Internet of the future could be made of stardust or the usual memes, but either way it will work simply and powerfully because Mike will have made it. Whether he’s thinking strategically about business requirements, tracking and prioritizing user stories, solving complicated design problems, analyzing metrics, or releasing new features, he finds the most straightforward and efficient means to pave our path into the 4th dimension.