← Visit Appcues.com
×
×

Big, bold UX—using modal windows for in-app user engagement

There's a fine line between being big and bold, and downright annoying. Here's how to design modals your users will actually enjoy.
Skip to section:

Skip to section:

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. 

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—Google, Grammarly, HubSpot, Spotify, etc—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. 

zapier welcome to teams animated modal window with confetti
Zapier adds a touch of delight to their welcome message with a bit of animated confetti.

If you have a lot to say, multi-modal flows 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.

grammarly user onboarding modal flow
Grammarly uses a series of modal windows to introduce new users to important features, while reiterating the product’s core value propositions.

2. Feature announcements

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

calendly new feature followup email annoucement pink modal window
Calendly used a single, simple modal to announce an exciting new feature (automated followup emails). 
INCREASE ENGAGEMENT

Craft pixel-perfect in-app messages

  • Give users a white-glove user experience by providing context and in-app guidance when they need it
  • Make the most out of limited screen real estate with modals
Charts and graphs

3. Additional user input

Modal windows can also be used for success messages, 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 progress, making a purchase, etc.

invision delete prototype action feedback confirmation modal popup
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 useful 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. On desk-top especially, this UI pattern is best reserved for mission-critical information or when there are required inputs that a user must complete before they can perform an action.

The drawbacks

Modal windows are inherently disruptive.

For small announcements, stick to more subtle UI patterns. Slideouts and banners are often more appropriate for providing instant feedback, or making routine announcements (like Datadog does in the example below).

datadog banner card in-app messaging example

For contextual messages that refer to specific page elements or features (as in the example from HubSpot below) tooltips are often a better choice.

new feature tooltip from hubspot

When you want to offer contextual help (like during a product tour), 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.

Tips for great modal design

So now that you know when to use a modal—and when you’d be better off with a smaller UI pattern—it’s worth taking a closer look at what good modal design actually looks like. 

There’s no one-size-fits-all template, of course, but there are a few rules of thumb worth remembering. Let’s break it down:

💯 Title

The modal title should tell users what the modal is all about with just a glance.

  • For user onboarding modals, start with some iteration of “Welcome to {your product} or “Welcome, {first name}.”
  • For feature announcements, use words like “Introducing” or “New” to grab the user’s attention.
  • Confirmation modals should restate the intended action clearly. For example: “Delete photo?” 

🖼 Graphics

One of the biggest advantages of modals over smaller patterns 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 calls-to-action 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

When using a series of modals, a progress bar works to keep users motivated and let them know how many more steps are left in the flow. Subtle dots (like those Google uses), a simple fraction, or a classic  bar can all have a big impact on whether or not people complete a modal series.

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

google calendar confirm working hours modal window

Using modals for mobile apps

Modals can be a powerful tool for mobile app engagement, too. Because mobile screens offer limited real estate, the line between mobile modals, slideouts, and even tooltips can get a little blurred—a large tooltip can start to look a lot like a small modal in the palm of your hand. 

This can be limiting—every in-app message can feel that much more disruptive on mobile devices—but also open up interesting opportunities for app owners and marketers. 

While using a modal window to upsell to a higher tier subscription might feel a little aggressive on desktop, for instance, upselling is a perfectly fine use case for a mobile modal, when handled thoughtfully. 

duolingo premiuim plus upgrade prompt in-app messaging
Duolingo uses a series of playful, animated modals to nudge frequent users towards its premium product.

Permission priming is another common use case for modal windows on mobile: 

skyscanner alerts push notification priming popup modal
Skyscanner uses a partial-screen modal to prompt users turn on notifications after they complete their first flight search in the app.

Want to learn more about using mobile modals? Check out these 8 examples of great mobile modals that will delight and engage your app users for the full scoop.

Save 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.

If you’re looking to create and experiment with modals that look native to your app (and don’t require coding or dev help to get up and running), give Appcues a try!

Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
Skip to section:

Skip to section:

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. 

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—Google, Grammarly, HubSpot, Spotify, etc—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. 

zapier welcome to teams animated modal window with confetti
Zapier adds a touch of delight to their welcome message with a bit of animated confetti.

If you have a lot to say, multi-modal flows 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.

grammarly user onboarding modal flow
Grammarly uses a series of modal windows to introduce new users to important features, while reiterating the product’s core value propositions.

2. Feature announcements

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

calendly new feature followup email annoucement pink modal window
Calendly used a single, simple modal to announce an exciting new feature (automated followup emails). 
INCREASE ENGAGEMENT

Craft pixel-perfect in-app messages

  • Give users a white-glove user experience by providing context and in-app guidance when they need it
  • Make the most out of limited screen real estate with modals
Charts and graphs

3. Additional user input

Modal windows can also be used for success messages, 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 progress, making a purchase, etc.

invision delete prototype action feedback confirmation modal popup
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 useful 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. On desk-top especially, this UI pattern is best reserved for mission-critical information or when there are required inputs that a user must complete before they can perform an action.

The drawbacks

Modal windows are inherently disruptive.

For small announcements, stick to more subtle UI patterns. Slideouts and banners are often more appropriate for providing instant feedback, or making routine announcements (like Datadog does in the example below).

datadog banner card in-app messaging example

For contextual messages that refer to specific page elements or features (as in the example from HubSpot below) tooltips are often a better choice.

new feature tooltip from hubspot

When you want to offer contextual help (like during a product tour), 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.

Tips for great modal design

So now that you know when to use a modal—and when you’d be better off with a smaller UI pattern—it’s worth taking a closer look at what good modal design actually looks like. 

There’s no one-size-fits-all template, of course, but there are a few rules of thumb worth remembering. Let’s break it down:

💯 Title

The modal title should tell users what the modal is all about with just a glance.

  • For user onboarding modals, start with some iteration of “Welcome to {your product} or “Welcome, {first name}.”
  • For feature announcements, use words like “Introducing” or “New” to grab the user’s attention.
  • Confirmation modals should restate the intended action clearly. For example: “Delete photo?” 

🖼 Graphics

One of the biggest advantages of modals over smaller patterns 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 calls-to-action 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

When using a series of modals, a progress bar works to keep users motivated and let them know how many more steps are left in the flow. Subtle dots (like those Google uses), a simple fraction, or a classic  bar can all have a big impact on whether or not people complete a modal series.

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

google calendar confirm working hours modal window

Using modals for mobile apps

Modals can be a powerful tool for mobile app engagement, too. Because mobile screens offer limited real estate, the line between mobile modals, slideouts, and even tooltips can get a little blurred—a large tooltip can start to look a lot like a small modal in the palm of your hand. 

This can be limiting—every in-app message can feel that much more disruptive on mobile devices—but also open up interesting opportunities for app owners and marketers. 

While using a modal window to upsell to a higher tier subscription might feel a little aggressive on desktop, for instance, upselling is a perfectly fine use case for a mobile modal, when handled thoughtfully. 

duolingo premiuim plus upgrade prompt in-app messaging
Duolingo uses a series of playful, animated modals to nudge frequent users towards its premium product.

Permission priming is another common use case for modal windows on mobile: 

skyscanner alerts push notification priming popup modal
Skyscanner uses a partial-screen modal to prompt users turn on notifications after they complete their first flight search in the app.

Want to learn more about using mobile modals? Check out these 8 examples of great mobile modals that will delight and engage your app users for the full scoop.

Save 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.

If you’re looking to create and experiment with modals that look native to your app (and don’t require coding or dev help to get up and running), give Appcues a try!

Author's picture
Katryna Balboni
Content and Community Director at User Interviews
Katryna is the Content and Community Director at User Interviews. Before User Interviews, she made magic happen with all things content at Appcues. Her non-work time is spent traveling to new places, befriending street cats, and baking elaborate pies.
You might also like...