Design Guide: Alerts

The Dos and Don’ts of Alert Design

I booked a last-minute flight to New York last week and of course was rewarded with a seat in the emergency exit row. It was an early flight, so once I boarded the plane, I put my headphones in and started to drift asleep.

This was a rookie mistake. I was shortly awoken by the flight attendant and told to take off my headphones. How could I forget — the dreaded exit row speech. The flight attendant mandated our full attention as she read Delta’s exit row rules, and at the end I needed to explicitly agree to the terms (out loud).

So, what did I agree to? I have no idea.

Let’s recap. I was forced awake, forced to take off my headphones and forced to make eye contact with the flight attendant — and still her message was ignored.

So, in our alerts, how in the world are we supposed to inform and guide our users to make the right decision when they are way more preoccupied than I was on my early flight? Well, by good design of course.

Let’s start with the anatomy of an alert modal:

I’ve seen these components called by other names. Let’s just go with it.

All alerts should contain at the very minimum a Title, a Description and a pair of action buttons (primary / secondary). Before we go into more detail of these components, let’s talk placement and background of alerts.

Placing alerts in the very middle (or slightly above the middle) of the page is best practice. It’s easy to develop, optimizes discoverability for the user and will never be far away from the cursor.

The background should be dimmed to highlight the alert and to signify that this is a modal (required before interacting with the page behind it). I like a black background with 0.55 opacity, but not blurred. You never know if a user may want to see some of the info behind the alert to make a decision. (Not saying that users should need to rely on info behind an alert, but why not accommodate this possibility?)