UX Design

Modal Windows: How to Use This Bold UI Pattern Correctly

.

Can you think of a product or website experience that was ruined by one too many pop-ups? A time when your workflow or browsing experience was interrupted by a full-screen takeover with no escape? A pesky notification just wouldn’t take a hint?

Of course you can. This sort of bad UX behavior is unfortunately common.

Because they have the power to grab attention, modals are often seen as quick fixes to anything that could use a boost in engagement. Annoying modals are like bad gifts disguised in fancy wrapping paper. They scream “look at me!” but lack substance.

Modal windows are meant to be bold—and when used correctly, they are a great way to deliver messages that deserve users’ full attention. Many companies—like Google, LinkedIn, and Mint—use them successfully to onboard users and nudge them toward high-impact actions.

In this article, we’ll talk about what makes a good modal and how you can use this UI pattern to improve your UX and engage (not annoy) your users.

What is a modal?

Modals (also known as modal windows, overlays, and dialogs) are large UI elements that sit on top of an application’s main window—often with a layer of transparency behind them to give users a peek into the main app. 

To return to the application’s main interface, users must interact with the modal layer. Because they are inherently and deliberately disruptive, they should not be used lightly.

Benefits and use cases for modal windows

Modals are best used for noteworthy announcements and essential information—like welcome messages or can’t-miss updates. Since they aren’t attached to any specific element, they tend to work better for broad in-app messages, rather than highly contextual help.

Some common uses cases include:

1. User onboarding

A modal window can be just the thing for a simple welcome message that warmly greets new users. If you have a lot ot say, multi-modal flows or series can be a great way to onboard new users to your product. Progress indicators help motivate users to complete multi-step onboarding or product tours.

This is a screenshot of a modal onboarding sequence from coschedule. The title of the modal is Calendar Setup and there is a prompt to invite teammates
Coschedule uses a series of modal windows to guide new users to perform actions that will help them achieve the value of their product faster—like inviting teammates to collaborate on a content calendar.

2. Feature announcements

Big announcements—like a product redesign or the release of a long-awaited feature—often deserve a big modal splash.

This is a screenshot of reddit's redesign announcement that says "welcome to your new profile" and gives an overview of new features in a modal dialoge window that has a CTA that says show me.
Reddit introduced existing users to their redesigned profile with a large modal window. They opted to give a full overview of the new design in a single modal, rather than use a series.

3. Additional user input

Modal windows can also be used for confirmations, important alerts, and other things that require additional user input, whether that’s a form or a one-click confirmation. These incidents are worth interrupting a workflow for if they have important consequences—like deleting something, saving something, buying something, etc.

This is a screenshot of a modal window that requires user action and confirmation before deleting data. It has the header "delete (PT1) prototype" and requires user input to close the modal.
InVision uses a modal to require additional user input before deleting a prototype. This is an important action, and an attention-grabbing UI pattern is called for to prevent accidental deletion of data.

Some modals take over a user’s full-screen, blocking visibility into your app and focusing a user entirely on the message and user onboarding experience in front of them. We refer to this pattern as a full-screen takeover. This UI pattern is best reserved for mission-critical information or when there are required inputs that a user must fulfill before using your product.

Drawbacks of modals

Modal windows are inherently interruptive.

For small announcements, stick to more subtle UI patterns. Smaller dialogs, or slideouts, are often more fitting to remind users of an overlooked feature.

this is an example of a tooltip to draw attention to a specific page element or feature. it is a screenhot of a hubspot account with a tooltip that explains what the "conversations" button in the toolbar header is for. The tooltip says "stay in touch with your contacts"
For contextual messages that refer to specific page elements or features—like this example from HubSpot—tooltips are often a better choice.

For contextual help, tooltips do a better job at drawing attention to one specific element on a page or guiding users through actions they need to take in the moment. 

You can read all about the small but mighty tooltip here.

Modal design

So what does a good modal design look like? Let’s break it down:

Title

The title should, at a glance, tell users what the modal is all about.

  • For user onboarding modals, start with “Welcome to {your product} or “Welcome, {first name}” for a more personalized touch.
  • For feature announcements, start with “Introducing” or “New”
  • Confirmation modals should restate the intended action clearly. For example: “Delete photo?”

Graphics

One of the biggest advantages of modals is that they can easily accommodate visual content. Images can be added under the title or as a hero image for extra emphasis. Short videos or GIFs can help demonstrate how a feature works, add a human touch, or even just a dose of humor.

Body text

The body text can be as long as a few short paragraphs, or as short as a sentence. As with any UX writing, be clear and concise.

Call-to-action button

Strong, action-oriented language works best for CTAs. While CTAs can be intriguing, don’t be too mysterious. The best ones allude to what comes next in a compelling way.

For inspiration, read more about which power words resonate with users.

Exit(s)

Don’t hold your users hostage. It should be easy for users to leave the modal window and get back to your main application. 

Modals can include both an “X” button and a CTA for exit. They can also be designed to close if the user clicks out of the modal.

Progress bars

For modal series, progress bars keep users motivated and let them know how many more steps are left. Subtle dots (like those Google uses), a simple fraction, or progress bar can all have a big impact on whether or not people complete a modal series.

Take a look at this modal from Google Calendar. There's no progress bar here, but all the other components of a good modal are present: descriptive title, branded graphics, informative body text, calls to action, and an opportunity to exit with or without taking action.

Using modals for high-impact messaging

Modal windows are unabashedly bold. Use them sparingly, and ensure that the messages they contain provide value to engage—not enrage—your users.

There are tons of open-source tools out there to help developers build modals. If you’re looking to create native-looking modal windows without dev help, give Appcues a try.

Katryna is the content marketing manager at Appcues. She's a Boston startup veteran with a passion for good storytelling and engaging content. Her non-Appcues time is spent traveling to strange new places, befriending street cats, and baking elaborate pies.

Try out Appcues