Editor’s note: This article was updated by Oscar Jite-Orimiono on 13 November 2024 to cover both general modal UX design and specific cases, provide actionable best practices, discuss detailed examples of different modal types, answer common questions about modal UX design, and more.

👁 Modal UX Design Patterns Examples And Best Practices

What is a modal and why does it matter for UX design?

A modal is a window that is displayed over the main content on a website or application. Modals display additional actionable content to assist the user.

Modals are ubiquitous in modern digital products — it’s nearly impossible to use any website or app and not come across one. But from a user perspective, modals can be quite disruptive, especially when they prompt or “force” the user to complete a task or perform an action before they can continue interacting with the rest of the UI.

By nature, modals are disruptive because they sit on top of the main application. However, modals are most annoying when they’re:

• Disorganized — Users may feel lost if they can’t quickly navigate modal content to find what they’re looking for
• Difficult to close — Not providing an easy way to exit out of a modal can create friction and frustration. A modern practice for many apps is to reduce double confirmation modals. For instance, applications now auto-save work instead of asking the user to save manually before exiting
• Persistent — A modal that keeps reappearing may negatively impact UX, especially if there’s no way to hide it for a prolonged period. If you must implement this type of modal (for example, if there’s an important reminder you need users to see), it may help to time the modal’s appearance strategically and provide a Snooze button so the user can opt to turn off these reminders
• Unclear — If the modal copy is not concise and clear, navigating it is confusing. The best practice is to review good samples of microcopy and follow common language used in other websites and applications to match the user’s mental model (i.e., what they’re used to from previous experience)

It’s important to understand and practice good modal UX design principles to avoid negatively impacting user experiences.

Consider these two kinds of modals:

1. Installation modals
2. Interruptive modals

Installation modals guide users through multi-step processes. If you try printing this page, for example, with ctrl (or command) + p, you would have to define multiple variables, like color, orientation, and the number of pages. These types of modals are self-activated or initiated.

Interruptive modals, as the name suggests, appear unexpectedly or are auto-triggered. Interruptive modal examples include app permissions, error messages, warnings, or urgent alerts. Good modal UX design must be implemented to minimize user frustration.

Overview of modal design best practices

When designing a modal, you must determine its purpose. It will help you decide if it should be blocking or non-blocking:

• Blocking modals present critical actions or information like confirming file deletion or account verification. These types of modals block out the main content, demanding the user’s full attention until they complete the task
• Non-blocking modals are for optional, non-critical tasks that users can skip. They’re important but not urgent, so don’t have to be disruptive. An example is a newsletter opt-in pop-up that appears when you’re scrolling through a blog post

Effective modal UX design requires balancing principles like clarity, accessibility, control, and more:

👁 Modal UX Best Practices

Let’s look at some examples and explore some best practices for implementing modals, while learning how and when to use them well.

Keep modals simple

Modals don’t need too much information, so minimize the content and options facing the user:

• Include only necessary buttons — A primary (action) button and secondary (dismiss) button are the most common. You can add a third button in some cases, but use these sparingly and ensure they don’t clash with the main buttons
  👁 Keep Modal Simple With Only Necessary Buttons And Content
  
• Avoid nested modals — A modal within another modal may be acceptable when implementing double confirmation for destructive or critical actions like deletion or password confirmation
  👁 Nested Modals Example
  
• Consider alternative content placements — If the content you intend to include in a modal is excessive or involves multiple steps, you might want to move it to a dedicated page or use an expandable sidebar or a mega dropdown

  👁 Alternative Content Placements
  

At the same time, in situations where the modal content doesn’t require too much space, you should try utilizing more subtle, non-modal UI elements like tooltips, notification bars, or snack bars.

Use clear messaging

Since we know modals are disruptive, make modal content easy to understand with a clear, descriptive but concise title. It’s also good practice to include instructional subtitles for the user to help them understand their context and purpose:

👁 Labeled Example Of Clear Modal Messaging Showing Clear Title, Brief Context, Primary Button, And Cancel Button

---

---

Pop-up modal messaging should be direct and conversational. For instance, a delete confirmation should ask, “Are you sure you want to delete?” and not, “Free up storage?” The first question does a better job of ensuring the user fully understands that the action they’re about to take is irreversible.

Make modals easily dismissible

A modal should be easy to dismiss or close. Give the users multiple options like a cancel button, a close (X) button, using the escape key, or clicking outside the window:

👁 Example Of Making Modal Easily Dismissible

Here’s an interruptive modal example that may help convey why this is so important:

👁 Interruptive Auto Triggered Modal Example From Glassdoor With Limited Information And No Ability To Dismiss

This auto-triggered modal pops up when you try to view a company’s job vacancies without completing your Glassdoor profile, asking you to add a review or salary before continuing. While Glassdoor’s overall UX is usually great, this aspect could use some improvement.

Not only are auto-triggered modals the worst kind of modal (which we’ll talk about a little more next), you also can’t dismiss it, and they don’t give a clear reason why you must complete this task. The only button on the modal redirects you to a new page where you’re finally given a reason why you must leave a review (after a few more clicks).

These extra steps take users further away from their primary activity. And what about users who have never been employed? What happens when they can’t provide the requested information?

All these could be prevented by implementing the modal the moment you click on the company name. There should be a tooltip explaining why leaving a review is important, and users should be able to dismiss it and continue on the site.

Avoid auto-triggered modals

Users like to be in control of their actions, and intrusive, auto-triggered modals can disrupt their flow.

In the Glassdoor example we covered above, the navigation bar suggests that you can search for hiring companies as you can search for jobs. But when the company page opens, the auto-triggered modal immediately appears.

This can be jarring and extremely frustrating, especially for first-time users. We’ve already discussed that this particular modal is problematic because it might force them to abandon their search or switch to another site.

Only implement auto-triggered modals in scenarios where users will appreciate the disruption. If the modal helps them avoid mistakes, like forgetting to save a file before closing a tab or alerts them of a security breach, then they’ll value the interruption.

Ensure accessibility

Users should be able to navigate through modals. Ensure the focus is shifted to the modal when it is active so every user can properly interact with it.

If you hit the tab key on your keyboard when on a website, the browser should cycle through every clickable or interactive UI element. This should also happen within a modal when it’s open. Disable the focus state of the main page until the user dismisses the modal.

Consider how you position modals

The position and size of a modal should be able to properly direct the user’s focus without creating visual clutter. Good modals will have ample whitespace and clear visual hierarchy.

If it’s a lightbox modal where the background is dimmed, then focus is quite easily achieved. For non-blocking and small modals, where the background is still visible, it’s a good idea to use motion to draw the users’ attention.

Modals must be scalable

More than half the amount of web traffic comes from mobile devices and modals should be able to adapt to different screen sizes.

Modals can have pagination or steps on smaller screens, where users can click Next to move to more steps. In such cases, there must be a progress bar so the user’s expectations are properly managed and they understand where they are in the process. It’s also a good idea to autosave the user’s last entered data to avoid frustration.

Modals should not generally be used to display error messages, loading, or success states because these can occur frequently, disrupting the user experience by blocking the main screen. Instead, embed such messages directly into the existing UI.

For example, a loading state can be reflected in the button that triggers the action, while error or success messages can appear within the main UI. Modals are best reserved for irreversible actions or situations that require explicit user confirmation, ensuring user focus and reducing errors.

Types of modals: Understanding when and how to use different modal types

Modals can be classified based on their specific use cases and characteristics. Let’s go through three types and when best to use them: dialog modals, lightbox and pop-up modals, and fullscreen modals.

Dialog modals

Like a conversation between people, dialog modals communication with users, prompting them to enter information or make a decision using UI elements like buttons, text fields, select inputs/controls, and forms.

Dialog modals can be input dialogs or confirmation dialogs. These two formats serve different purposes. They’re generally blocking objects, meaning the user must acknowledge or close them before proceeding with any other tasks.

Input dialogs require users to enter information by providing a form or select options. For example, checkout forms on an ecommerce site typically ask you to enter billing information and more:

👁 Checkout Modal Example Allowing User To Input Payment Method

Confirmation dialogs prompt users to confirm or cancel an action. For instance, if you try to leave a site or app with unsaved work, a dialog modal might appear asking you to confirm if you want to leave and check if your data was saved:

👁 Confirmation Dialog Modal Example

Lightbox and pop-up modals

Lightboxes and pop-ups dim the main content in the background to make the modal content the primary focus. They are often used for ads or promotions:

👁 Lightbox Modal Prompting User To Upgrade Dropbox Plan

Lightboxes generally contain non-critical information and usually appear automatically without any user action, such as an opt-in form on a website. However, they tend to be very easy to dismiss by clicking on a close or skip button, or clicking outside the modal:

👁 Advertisement Popping Up As A Lightbox Modal

Lightboxes and pop-ups also have a habit of appearing repeatedly. To prevent bad UX, keep the following points in mind when implementing pop-ups:

• Don’t show pop-ups right after a user enters a screen
• Ensure pop-ups don’t interfere with critical user interactions
• Time pop-ups properly so they don’t create user frustration

Fullscreen modals

Fullscreen modals occupy the entire screen or browser window, hiding the main content completely. These modals are particularly useful when we want the user’s undivided attention and don’t want them distracted by the underlying content.

For example, this fullscreen pop-up shows when a user moves the cursor outside the body area of the website (i.e., when the user is trying to exit the website):

👁 Fullscreen Modal Grabbing User Attention When Exiting Page

Installation modals: Designing modals for user-friendly installation flows

Installation modals guide users through multi-step processes without overwhelming them. These processes include onboarding new users, purchasing items online, installing new software, customizing an app, managing subscriptions, and more.

Let’s go through some best practices for designing user-friendly installation modals:

• Provide clear instructions — Often, users are dealing with a process they’re unfamiliar with, so the modal must have clear, brief, actionable instructions and visual cues such as progress indicators to guide them
• Keep them non-intrusive — Give users a sense of control over their actions by making installation modals self-triggered, minimizing the potential for frustration. If you must use auto-triggered modals, implement them strategically, and include options to skip or dismiss:
  👁 Non Intrusive Modal With Option To Skip
  
• Direct user focus by chunking information — The goal is to avoid overwhelming the users, so it’s a good idea to display each step in the process one at a time. Breaking complex processes into easily digestible and manageable steps increases the chances of users completing the task:
  👁 Onboarding Modal Example Chunking Complex Process Into Multiple Steps
  

Interruptive modals: Examples and best practices for designing non-intrusive interruptive modals

Interruptive modals, as the name suggests, disrupt the user’s flow or task to present information. These types of modals must be only used for critical information or urgent tasks to avoid distracting the user from their primary task.

Some best practices include:

• Proper timing — Interruptive modals shouldn’t interrupt high-engagement tasks like filling out a form. Imagine a modal popping up every time you miss something in a form — would you complete the form or abandon it out of frustration?
• Keep it short and direct — Users should be able to instantly understand the purpose of a modal when it pops up on their screen. Use clear and action-oriented language and highlight the action required:

  👁 Short And Direct Interruptive Modal Showing User Critical Information
  

• Make them easy to dismiss — Add clear options for dismissal so the users are not frustrated by the modal

Comparison: Modal vs. non-modal dialogs in UX design

At this point, we’ve established that modal dialogs can be disruptive, distracting, interruptive, and more. Non-modal dialogs are, in most cases, the opposite.

Modal and non-modal dialogs can have the same purpose and perform the same task. The main difference between them is how they treat the main content. Modals disable the main content in the background while non-modal dialogs do not.

Modal dialogs

Here’s an example of a modal from Temu containing information about cookies:

👁 Cookie Modal Dialog Disables Background

This modal disables the background so you can’t shop unless you accept or reject the cookies.

One of the benefits of implementing modal dialogs is that they demand the user’s full attention. It’s hard to miss critical information and they can help prevent errors.

The downside is that modals are intrusive and disruptive. They often demand immediate action, interrupting the user’s workflow. Modals block/disable the main content in the background and users can’t continue with their initial task

Non-modal dialogs

Here’s an example of a non-modal cookie notification from Figma:

👁 Image

Figma’s cookie notification doesn’t take up much space, and users can continue interacting with the main content with the dialog open.

Non-modal dialogs should be used for non-critical tasks because of how easy they are to ignore and dismiss. They can be used for search bars, notifications, and error messages.

Here’s an example:

👁 Non Critical Non Modal Dialog Example

Non-modal dialogs have a few benefits:

• They don’t impose content on the users
• Users can ignore non-modal dialogs and continue their task
• Non-modal dialogs are easily dismissed

Accessibility best practices for modals

When designing modals, you must ensure that every user can interact effectively with them. Accessible modals will help create an inclusive experience for users with disabilities, and those who use keyboards and screen readers. A few things to consider are:

• Focus management — When a modal is triggered, ensure focus switches to and stays within it. This ensures users don’t navigate outside the modal. It’s also a good idea to save the user’s last active state so that the user can pick up where they left off after closing the modal
• Keyboard navigation — Ensure interactive modal elements like buttons and input fields are navigable using the tab key. Define clear hover or select states for each element to serve as important visual cues for users to understand where they are performing their actions
• Aria labels — Aria labels help provide text labels for interactive objects on a website so assistive software, like screen readers, can read the appropriate labels for each object

Aria labels can be a bit confusing, so let’s discuss them in a little more detail. The aria labels you can add to modals include:

• aria-labelledby — Defines the title of the modal.
• aria-describedby — For additional information
• role= "dialog" and role= "alertdialog" — Define the role of the modal container. The alertdialog role is for critical tasks like delete confirmation, while dialog is for other (reversible) actions like a login form
• aria-label="Close" — Defines the close button
• aria-hidden — Disables the background content

Here’s a CodePen from Harvard University demonstrating how aria labels work.

For installation modals, provide progress indicators with aria progressbar roles like aria-valuetext, aria-valuenow, and aria-valuemax. Include clear instructions for each step in the process and ensure users can easily navigate between them. It’s also a good idea to provide options to exit or skip for non-essential steps.

For interruptive modals, provide clear context and keep the content minimal. Use the appropriate aria labels and ensure there’s always a way to dismiss.

FAQs about modal UX

We’ve covered quite a lot of information about modal UX design and best practices. Here are some answers to a few common questions you might have:

• What is modal UX?
  Modal UX is the design and implementation of windows that are displayed on top of the main content on a website or application.
• How do I design accessible modals?
  Ensure focus switches to the modal immediately when it’s triggered. Ensure every interactive element is navigable with the tab key. Use aria labels to help screen readers. Make sure there are clear dismiss options.
• When should I use a modal vs. non-modal dialog?
  Modal dialogs should be used for tasks that require immediate actions and complete attention, while non-modal dialogs should be used for non-critical tasks.
• What use cases are best for modals?
  Modals should be used only when the user will value the disruption like displaying critical information, confirming irreversible actions, and verifying user inputs.
• What should I avoid when implementing modals?
  Avoid nested modals, auto-triggered modals, modals with large amounts of information, displaying unrelated tasks, and disrupting high-interaction tasks.

If you have any other questions, feel free to comment below!

Summary

To implement modals that don’t hurt UX, we must maintain good modal anatomy. Modals must have a well defined purpose, contain clear messaging and have dismiss options. They should be triggered at appropriate times to not interrupt key user interactions.

The most important aspect of the modal design is deciding when modals are appropriate to use. Consider non-modal alternatives for non-critical tasks.

Well-designed installation modals will simplify multi-step processes, offering clear guidance without overwhelming the user. Including Skip or Dismiss buttons can make user experiences feel less restrictive.

Similarly, interruptive modals should only be used for confirmations or critical alerts. They must be concise, easy to dismiss, and timed properly to minimize frustration.

Modals should be accessible to every user, especially those you rely on assistive technology. Ensure users can access every interactive modal element by pressing the tab key.

By following and implementing these practices, you can create modals for websites and applications that enhance user experiences.

👁 Image