UX toolkit: modals

Imagine this: you’re starting to browse a new shop online, then all of a sudden a window pops up and stops you.

“Sign up with our mailing list and get 15% off!” Sounds like a pretty good deal, so you enter your email in the box and click Submit. And you go back to doing what you were doing, hoping for a sweet coupon to show up in your inbox…

Have you ever stopped to think what the hell that window is? Is it an annoying pop up? Or something with more structure than the flashy, Java-powered pop-ups of the early internet?

Truth be told, they’re an important UI element in the content designer’s toolkit. And we call them modals.

What’s a modal?

A modal can go by other names: pop-up, flyout, dialog window (and any other name you can pull from every other design system). But they all do the same thing: interrupt a user’s workflow with important information that needs a decision from them.

Modals are an important element in UX design. They jump into the user’s central line of sight, disables all content behind it, and forces them to make a choice before continuing.

Though they may be disruptive, but they’re actually very important in helping the user make decisions. That’s because they halt the user in their steps to deliver important information. It’s similar to a construction worker holding up a “Stop” sign to halt them from continuing on that road (because there may be workers taking a lunch break ahead).

What’s in a modal?

Modals have a few distinct pieces to them:

• The title: asks a question, tells the user what they have to do, or gives them some information they should know
• The copy: tells them some additional information that might be pertinent to the title
• The buttons: let’s the user take an action (like responding to the question in a title)
• The X button: let’s the user close out of the modal and cancel (seriously, don’t forget this otherwise you’ll have some pretty upset users and an inaccessible modal)

When should I use a modal?

Knowing when to use a modal can be difficult. Honestly, it’s a loaded question, but here are some instances where you might want to use one:

• When a user needs to confirm something
• When a user is deleting something without an “undo” option
• When a user is trying to leave without saving
• When a user can sign in to populate data
• When a user is adding something new to their workflow
• When a user is deleting something with massive implications to other things
• When the user may have unknowingly done something that affects the output
• When the user should be reminded of important information

This certainly isn’t an exhaustive list. And sometimes, a modal isn’t the right component after all.

What are some other options instead of a modal?

Here are some other UI elements you can consider in place of a modal:

• Alert: banner message that passively lets the user know something has happened
• Toast: a time-constrained message that lets the user know an action has occurred
• Error message: appears under a specific field to let the user know their input doesn’t meet the set standards (let’s not say invalid, please)
• Badge: small visual indicator that shows the user something has changed (like in a user menu)
• Email: if it REALLY doesn’t matter to the user’s current process (but you still want to inform them) then maybe send them an email

And you certainly shouldn’t get yourself in a situation where a modal appears on top of a modal. Then you’re getting into some type of inception…

This is only a brief introduction to modals

You’ll likely start noticing them all over the place. And while they’re a key part of a design system, i’ll leave you with a word of caution: don’t get modal-happy and start plastering them everywhere like Banksys.