Context

When you quit the NordVPN app on a Mac, you get the following warning modal:

an image of the 'close' popup from the NordVPN app on mac
So close

The things I like:

  • A “Don’t ask again” option 👏
  • Big, obvious buttons, with a clear default option

This is so close to being a great modal, it just need a few tweaks.

The problem

Most users, when presented with a modal, will first read the modal title (“VPN Connection is active”), then read the buttons at the bottom of the modal (“Yes” and “No”). They’ll generally only read the description text if they’re stumped, and if they have to take that step, you’ve already created a bad user experience.

The problem here is that the title and buttons don’t make sense together. Say this out loud:

VPN Connection is active

Yes

Does that make sense?

It’s only after reading the description text (“Are you sure you want to close NordVPN IKE?”), that the buttons make sense.

Don’t make your users do more work than they have to!

A few other minor comments:

  • What is an “IKE”? As a user, it’s just extra jargon I don’t need, leave it out
  • There’s no word limit on a modal, so there’ no need for robotic language like “VPN Connection is active”. Write in human-sounding phrases.
  • Why is there a capital “C” in the above phrase? 🤔

A solution

Here’s my go at writing a better modal for this situation:

an image showing an updated version of the same modal, with clearer language
Easier to follow, unambiguous

Users should now be able to have only the briefest glance at this modal and move on, no need for friction or fustration.