Recently we’ve had some requests to build sitewide alert banners from some of our clients. This kind of alert message is used for conveying urgent information to an organization’s audience. In the current context, our clients are using these banners to alert their website visitors to any closures or disruptions to normal business operations caused by the COVID-19 crisis.
There are a number of different options to consider when adding an alert banner to your site. The location and look of the banner are the first concerns. You will want the alert to be highly visible, to not get lost among other page elements and also not compete or interfere with your cookie banner or navigation. Our recommendation is to have the alert banner displayed above the top of the site, pushing the rest of the site down. We also recommend a bright color for the background of the alert and a clear, large heading that is in a high contrast color to the background. There are other good options for positioning and design. Some companies will have an alert show on top of their site or the bottom of the window browser. Whatever you choose, the goal should be visibility. Users must see and read this message.
As their name suggests, a sitewide alert banner will (and should) show on every page of your website. But you may decide to have it hidden after a visitor has clicked some kind of “OK” link or button. However, we recommend that there is a relatively short timeframe for how long that click suppresses the display of the message. Something like 1-2 hours. Crisis communication can change rapidly and you will want updates to get out to your audience in a timely manner. For that reason, we also recommend the alert contain a “last updated on” date and time stamp. That will help your visitors to understand the importance of the alert and its timeliness.
Finally there is the option to include transitions, movement or animation to the alert banner. Movement draws the eye very effectively so a message that slides into or onto the page after the page has loaded will be noticed by more visitors. You can also consider subtle flashing or brightening/darkening of the message content after it’s loaded. Effects like these can be very useful for getting attention but they have aesthetic drawbacks that make us wary of their benefits.
One more note, the alert banner should be tailored to be accessible to differently abled visitors. Pay attention to the color contrast of the element and its text to make sure it’s highly legible for the visually impaired or color blind. Also, make sure the alert is included at or near the top of the page’s tab hierarchy. This will allow visitors browsing with screen readers to get the message without having to read the entire page.
If you have any questions about sitewide alert banners, please give us a call or send an email to info@tenrec.com. We’d be happy to help and will do our best to help you get an alert system up quickly.