Modal Windows: Tips for Designing the Bold UI Pattern

Written by: Julia Chen Julia Chen 

Keep tabs on our content. One or two emails a week:

We can all think of products that have been ruined by one too many pop-ups. An irrelevant full-screen takeover with no escape. A pesky notification that shows up time and time again. Overlapping widgets that obscure the message.

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 cheap gifts disguised in fancy wrapping paper. They scream “look at me!” but lack substance.

Modal windows are meant to be bold UI patterns, and they serve messages that rightfully deserve the attention. Google, Airbnb, LinkedIn, and many other products use them effectively to onboard and nudge users towards the most high-impact activities. 

What is a modal? 

Modal windows (also known as modals, overlays, and dialogs) are large UI elements that sit on top of an application’s main window. 

Wikipedia explains how they work:

“It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window.”

Google’s Material Design Guidelines describes the purpose of modals/dialogs:

“Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.”

Benefits and use cases for modal windows 

Modals can’t be missed and are best used for very noteworthy announcements. Unlike tooltips and hotspots, modal windows can be applied anywhere in the product and aren’t attached to any specific element. They tend to work better for broad in-app messages, rather than highly contextual help. 

User onboarding

A single modal window can be just the thing for a simple welcome message that warmly greets new users.

modal-2.png

Check out these best practices for building an effective welcome page.

For a more informative approach, modal series are very popular for user onboarding.

Google often uses them throughout its suite of products to show off key features and highlights.

google hangouts modal welcomegoogle hangouts modal welcomegoogle hangouts modal windowgoogle-hangouts-modals-4.png

Modal series provides a concise overview of Google Hangouts’ features. 

Want more walkthrough examples? Check out our picks for the 5 best.

Feature announcements

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

hubspot new feature modal

HubSpot uses eye-catching modals to introduce big changes.

Additional user input 

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

MailChimp uses a modal window after users click “Send” to confirm the action. Since blasting an email campaign off is a big deal, an extra confirmation click can ease anxiety and restate important information.

MailChimp Modal Send Email

MailChimp’s mascot also adds an extra dose of delight.

Drawbacks of modals 

Modal windows can be interruptive. For small announcements, stick to more subtle UI patterns. Smaller dialogs, or slideouts, are more fitting to remind users of an overlooked feature. 

Google Calendar slidoeut

Google Calendar sticks to a small slideout for this lifecycle nudge.

Modal windows aren’t the best for specific contextual help either; tooltips do a better job at drawing attention to one specific element on a page and guiding users through actions they need to take in the moment.

slack-tooltip.png

Here’s our guide to designing tooltips. 

Modal design 

Let’s break down the components of a modal window to see what goes into a good modal design.

couchsurfing modal

Header

The header should, at a glance, tell users what the modal is all about. User onboarding modals can start with “Welcome to {the product} or “Welcome {first name}” for a more personalized touch. 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 accommodate visual content well. Images can be added under the header or as a hero image for extra emphasis. Short videos featuring founders or employees can provide an added human touch during onboarding, while GIFs can show how something works quickly.

Body text

The body text can be as long as a few short paragraphs, or as short as a sentence. Avoid getting too detailed. As with any UX writing, be clear and concise. Couchsurfing’s text focuses on the mission of the product and avoids getting into how to use the product. 

Call-to-action 

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

For inspiration, see what power words resonate with users and check out HubSpot’s list of snappy CTAs.

Exit(s) 

It should be easy for a user to perform the desired action and/or leave the modal window. Modal windows could include both an “x” button and a CTA for exit, like in Couchsurfing’s. They can also be designed to close if the user clicks off it and back onto the main window.

Additional components

User input

Modal windows can be great at collecting user input through multiple choice or short text surveys, NPS, and final selections.

amplitude nps survey form

Amplitude uses an Appcues-built modal to collect in-product feedback.

airbnb modal

This is a great use case for Airbnb—dates would clutter up the main window but would be out of context on a different screen.

Progress bars

For modal series, progress bars hit on the Zeigarnik effect and let users know how much further there is to go. Google often uses a subtle dots approach, though a simple fraction or colored progress bar work too.

google inbox modal progress

Progress bars are simple but can have a big impact on whether or not people complete a modal series.

For more tips on designing modals, check out Google Material Design: Dialogs, Best Practices for Modals, and 5 Essential UX Rules for Dialog Design.

Creating Modals for Impact

Modal windows are unabashedly bold. Ensure that the messages they carry provide value, or users will be annoyed by the interruption. For bigger impact, use modals sparingly in your product. 

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

user onboarding academy

The User Onboarding Academy

Everything you need to know about user onboarding in 7 weekly emails.

Recommended reading