When, Where, and How to Use Modals in UX Design

This story addresses the problem of overusing modals in UX design by drawing designers’ attention to alternative tools designers have in their toolbox.

A modal in UX design

Modals are overused on the web today. Looking closely at their use cases, it is easy to realize there are misconceptions around their proper application.

Modals are a strongly discouraged UX pattern. By design, they interrupt a user’s workflow. When a modal is active on a page, user is blocked from interacting with the page outside the modal and cannot return to their workflow unless they complete the modal task or dismiss it. While modals could be effective when used correctly, they should be used judiciously to limit workflow disruption.

Modals grab users’ immediate attention. They are meant to be bold and should be reserved for cases that deserve users’ undivided attention.

I conducted a UX Audit of the unauthenticated space of a public website and found the misuse of modals to be particularly widespread.

I used the Double Diamond Model of Design for this investigation. Using this framework, I was able to identify both a problem statement and its holistic solution. The problem statement pivoted around the overuse of modals on the audited website. The holistic solution had many parts including a Modals Decision Framework (MDF) that highlighted 1. alternatives to modals, 2. use cases where modals were appropriate.

To keep the anonymity of the audited website, I haven’t included that website’s screencaps in this story. Instead, my collaborators and I crafted wireframes in Figma, mostly around ecommerce and SaaS concepts, to provide context around this story’s points. Some of these wireframes include timed animations to better illustrate the transitions from the parent pages to the modal screens. We used Lorem ipsum when the copy did not play a role in the point being made.

Problem space — divergence

When going through the divergence phase of the problem space, I scoured the audited website and made some sporadic observations.

Figure 1: The information icon (i)

• Modals were used to de-clutter pages when other means of progressive disclosure such as accordions were more appropriate.
• There was an overabundant use of the information icon (i) on the audited website both to access modals and pop-up tips.
• When content used on some of the sites’ modals was searched for on Google, those modals appeared in search results. On occasion, they were ranked higher than their parent pages.
• The audited website used modals considerably more than any of its major business competitors.
• The modals on the website featured a variety of content formats, including text and video.
• The audited site had many content-heavy modals that were being used in place of full page designs. Vertical scroll bars were a common feature. Upon inquiry, the design team disclosed that their clients frequently supplied verbose content, which they were advised to cram into modals.
• Some modals on the site did not follow the standard anatomy outlined in UX literature. This anatomy is illustrated in Figure 2.

Figure 2: The modal anatomy

Some violations were:

1. Burdening users with lengthy content in modals without providing clear titles in headers to put that information in context.
2. Placing CTAs somewhere within the body of modals rather than their footers.

Problem space — convergence

Putting all these observations together, I converged on the problem statement “user-initiated modals were overly and poorly used on this website.”

At the time of investigation, more than 1,700 user-initiated modals were identified on the audited website. These modals differed from one another in terms of visual and content design, their SEO properties and implementation details.

Why was the overuse of user-initiated modals on a site a problem?

There were three sides to this problem: UX, SEO and content strategy.

UX

Based on UX best practices, modals are purposefully interruptive and should be used sparingly for these reasons:

• Compared to on-page content, modals on the audited site often hid essential details needed by users for completing their tasks. An example was concealing the details of subscription plans in a modal. This bad practice could have negatively impacted conversion especially when the hidden information was critical to users’ decision-making processes.

Figure 3: On this page, users were expected to convert to the subscription plan best matching their needs using the “Get started” CTAs. However, the details of plans were hidden in a modal that would not appear unless users clicked on the (i) icon next to “Find the best plan for you.”

• Compared to on-page content, users need an extra click to access content offered in modals and this slows them down and could negatively impact conversion. The GIF above shows an example of this.
• Modals are rendered as overlays and so users cannot easily look at their content and the parent page at the same time. This becomes especially problematic when modals are used to provide further explanation about a specific term on the parent page. Pop-up tips on the other hand allow users to look at their content and the parent page at the same time, offering a better alternative for this sort of contextual help. Figure 4 is an example of misusing modals to elaborate on an acronym.

Figure 4: If users needed help understanding the acronym “CRM,” they could click on the (i) icon on the page. This opened up a modal that had the definition. The problem was that users could not look at the content of the modal and the parent page at the same time.

• Users cannot look at the content presented in two modals in parallel. For example, details of different programs should not be put inside modals as this takes away a user’s ability to look at multiple options simultaneously and compare them. The following GIF shows an example of misusing modals for this purpose.

Figure 5: On this page, the details of each program were offered in a separate modal that could be accessed via “Learn more”, taking away user’s ability to look at the details of multiple programs at the same time and compare them.

• Modals by design don’t have shareable URLs . So, if a user finds the information in a modal beneficial and wants to share it with someone else, they have to provide the URL of the parent page as well as instructions on accessing the modal from that page. Figure 5 shows a use case where there was a need to share information and having a more direct way of sharing information was definitely preferred. Not having standalone URLs also prevents modals from being bookmarked for ease of access in the future.
• Clicking outside of modals on their parent pages or misclicking on their close icons could have unintended consequences for users. For example, with modals used as containers for playing videos, such as Figure 6, users could lose their place in the video and have to start over when these misclicks occur while the video is being played. With modals used to display information critical to users such as order/request numbers after they have filled in forms and submitted them, such as Figure 7, these misclicks could mean users losing access to critical pieces of information.

Figure 6: When users clicked on the play button to the left of the video link on the parent page, a modal opened as a container for playing that video. Users would have had to start the video over if they accidentally clicked outside of the modal while it was being played.

Figure 7: Users who completed and submitted the inquiry form were presented with a unique number in a modal for tracking purposes. They might accidentally close the modal through misclicks and lose access to important information that way.

• Frequent use of modals can cause users to disregard them intentionally; this is referred to as “modals fatigue,” which is problematic when crucial pieces of information are displayed in modals like Figure 7.

SEO

The SEO properties of modals on the audited site were set in two ways, both of which were contentious:

1. Non-searchable modals with no-index and/or no-follow as their SEO properties: When modals’ SEO properties were set this way, their content did not contribute to site’s SEO ranking.
2. Searchable modals with standalone URLs in the backend: When modals’ SEO properties were set this way, traffic from Google search was directed to non-branded, dead-end, out-of-context pages. These pages were considered non-branded since unlike full-screen pages, they did not have branded headers and footers, taking away users’ ability to navigate to other site’s pages. Furthermore, since most of these modals had no call to actions (CTAs), they were more of a dead end.
   Additionally, providing users with direct access to these user-initiated modals through search engine results pages (SERPs) would rob users of the context provided on the modals’ parent pages as well as the journey leading up to them. In other words, these modals were designed to be part of a flow and providing direct access to them did not make sense. An example was a modal that appeared in SERP when I did a branded Google search on the name of one of the site’s forms. The content of this modal acknowledged that the user’s business request was received and thanked them for submitting it. It also mentioned how the business might respond to their request. This example clearly demonstrated the problem. User-initiated modals are meant to be displayed to users after they have gone through a couple of steps and seem random when taken out of context and accessed directly as part of SERP.
   What’s worse is that in many cases, the parent pages of these modals and the business processes they used to support had been decommissioned and there was an oversight in ensuring that their associated modals with standalone URLs were removed as well. This led to directing users to obsolete pages via SERP.

Content strategy

From a content strategy perspective, thinking of modals as chests for hiding content can be problematic.

• Often multiple modals on the audited site contained the same piece of content and it was easy to overlook this replication since it was hidden. This increased the effort required for maintaining these modals and keeping them in sync especially when they contained business rules, such as eligibility requirements, that changed over time. The following GIF shows an example of this.

Figure 8: On this page, the eligibility requirements for the $0 fee option were listed in a modal accessible via the (i) icon next to “requirements” on the parent page. These requirements change over time and need to be updated in every modal across the site after each change. This update was time-consuming and error-prone.

• Since modals could fit lengthy content, designers of the audited site were generally less motivated to trim down content and use a more user-friendly and concise language.
• Modals on the audited site were used as band aids to compensate for poorly-written and unclear language on pages. The copy on every page should be adequately lucid; modals shouldn’t be required to make things clearer. The following GIF demonstrates an example of this.

Figure 9: The phrase “Satisfaction guaranteed” was added to the page to make users feel more confident about their purchases and nudge them towards checkout. “Satisfaction guaranteed” was ambiguous on its own, and users had to click the (i) icon to understand what it exactly meant.

Solution space — divergence

During the divergence phase of the solution space, I had to deepen my understanding of when and how user-initiated modals were being used on the site at the time of investigation. I also had to look for patterns that could substitute them and provide a better user experience.

I started by looking at how modals were being used on the audited site and categorizing their use cases into the following buckets:

1. Modals used to offer clarification, further details or explanations about a topic on the parent page. This was the primary use case for modals on the audited site. They included content and, occasionally, calls to actions. I will refer to them as Basic Modals. Figure 3 is an example.
2. Modals used for playing videos. I will refer to them as Video Modals. An example is Figure 6.
3. Modals that provided feedback to users after they submitted forms. I will refer to these as Form Submission Feedback Modals. Figure 7 is an example.
4. Modals used to alert users that they were leaving the current website and navigating to an external one. Users were asked to confirm their transition intentions. I will refer to these as Transition Modals.

I also explored alternatives to modals and thought about redesign possibilities. Here is the recap:

Alternatives to Basic Modals:

1. Content immediately visible on the same page
   Place this additional content in an immediately visible manner on the page in a position that makes the most sense contextually. This might require editing this additional content and making adjustments to its visual layout so that it fits nicely into the page. Consider the use case of showing the details of plans. Figure 10.b shows these immediately on the page as opposed to Figure 10.a that uses a separate modal for each plan.

Figure 10.a: Different plans are listed on the parent page along with an (i) icon next to each one. Clicking on each (i) opens a modal explaining that plan’s details.

Figure 10.b: At the top of the page, different plans are listed as anchored links to sections of the same page. When users click on each plan name, they would be taken to the section of the page elaborating on that.

As an alternative to Figure 3, Figure 11 shows an example where explanatory content is placed on the page such that it is immediately visible to help users’ decision making.

Figure 11: Rather than putting plan details in a modal (as done in Figure 3), inserting descriptive content on the page helps users’ decision-making and might increase conversion.

As an alternative to the modal in Figure 9, Figure 12 shows how the need for a modal could be eliminated by using clear language on the page.

Figure 12: Rather than using the vague term “Satisfaction guaranteed” on the page and a modal to clarify it (as done in Figure 9), assurance is provided on the page using clear language.

Think about displaying testimonials to users. It is common for designers to place a quote from a testimonial on the page while offering the full version in a modal. Figure 13.a shows an example of this. While this could work especially if there are multiple testimonials on a page, there is an alternative. Figure 13.b shows the alternate of trimming testimonial content and placing it on the page such that it is immediately visible; making it more likely to be seen by users.

Figure 13.a: There is a quote from the testimonial on the page along with a “Read full testimonial” button showing the full version in a modal.

Figure 13.b: Trims down testimonial content and places it in an immediately-visible fashion on the page.

2. Content on another page

This content:

A. May be present on an existing page in other sections of the audited website, especially in generic sections such as articles, glossaries and FAQs. Consider the need to spell out eligibility requirements. Figure 14 uses existing content on on another page by linking to it from the current page versus Figure 8 that uses a modal for this purpose.

Figure 14: Rather than spelling out requirements in a modal (as done in Figure 8), clicking on “requirements” would take users to existing content in the generic sections of the site.

B. May require a net-new page to be created on the site to accommodate it. Consider the use case of surfacing program details. Figure 15 uses pages created specifically for presenting programs’ details and links to them from the current page. Whereas, Figure 5 uses a modal for this purpose.

Figure 15: Rather than inserting program details in a modal (as done in Figure 5), clicking on each program’s “Learn more” link would take users to a newly created page that provides its details.

Think about publishing users’ reviews of a product or service provider. Usually only a handful of these reviews are displayed on the product or service provider page and the full set is displayed to users upon their request. As shown in Figure 16.a, a modal could act as a container for displaying the full set of reviews with the caveat being that it could become really content-heavy especially if new reviews were to be added over time. As shown in Figure 16.b, another focused-view alternative is creating a net new page specifically for reviews and navigating users from the product or service provider page to that page. Amazon uses this pattern.

Figure 16.a: Three most recent users’ reviews are displayed on the product page and clicking on the “Read all reviews” chevron link displays a modal with all reviews.

Figure 16.b: Three most recent users’ reviews are displayed on the product page and clicking on the “Read all reviews” chevron link navigates users to a separate page that has all reviews. There is a back link from the reviews page to the product page.

3. Other means of progressive disclosure

Use alternative means of progressive disclosure to reveal additional content. These include accordions, pop-up tips, journey selector dropdowns and tabs. Depending on how they are implemented, these could address some of the drawbacks associated with modals.

Consider the need to elaborate on the available shipping methods. In both Figure 17.a and Figure 17.b, there are one-sentence definitions on the page with the former using modals to explain further and the latter using accordions.

Figure 17.a: Clicking on the chevron link related to each shipping method opens a modal that further explains it.

Figure 17.b: Clicking on the chevron related to each shipping method expands the accordion that provides further explanation on it.

Figures 18.a and 18.b are two ways of showing the shipping fee breakdown table, using a modal and a single accordion, also known as the “show more” construct.

Figure 18.a: Shows the breakdown of shipping fees as a table in a modal after users click the button.

Figure 18.b: Shows the breakdown of shipping fees as a table on the page after users click on the chevron.

Figure 19 shows a way of redesigning the use case in Figure 4 using a pop-up tip.

Figure 19: Rather than using a modal to educate users on the acronym “CRM” (as done in Figure 4), a pop-up tip is used.

Consider the requirement of directing users to the right number that they can call depending on their inquiry type. Figure 20.a uses modals to show the phone numbers. While, Figure 20.b uses a journey selector dropdown. The item chosen from this dropdown dictates the content that should appear on the page.

Figure 20.a: Lists various inquiry types as buttons on the page. Clicking on any of these buttons opens a modal displaying the corresponding phone number.

Figure 20.b: Uses a journey selector dropdown for displaying users’ various inquiry types. When a user has selected their type of inquiry from the dropdown, the relevant information appears on the screen, pushing the rest of the content down.

Think about the requirement of surfacing additional information on different aspects of a product. Figure 21.a uses modals for this purpose and Figure 21.b uses tabs.

Figure 21.a: Lists various aspects of a product on the page. Users can click on each link to open a modal and learn more about that specific aspect.

Figure 21.b: Uses tabs to show additional content about different aspects of a product.

Drawers, also know as slideout panels, are the other option if displaying the additional content in a separate container is preferred. According to Adobe’s Admin Design Pattern Library, drawers are more suited when dealing with high-volume content. An example is showing user reviews’ of a product or service provider in a drawer that opens as an overlay on the page. An example is shown in Figure 22.

Figure 22: Uses a slideout panel (drawer) to show the all reviews of a product.

Alternative to Video Modals:

Inline playing on the page

The benefit of this approach is that it allows users to scroll up and down the current page and skim through its content as the video is being downloaded. This is especially helpful in cases where the download of the video is slow. This pattern also allows users to browse the page’s content while listening to the video in the background once it has been downloaded.

As an alternative to the modal in Figure 6, Figure 23 shows an example of playing the video inline on the page.

Figure 23: Rather than using a modal for playing the video (as done in Figure 6), the video could be played inline on the page.

Alternative to Form Submission Feedback Modals:

A separate page

This alternative uses a net-new page to display important information such as an inquiry number to a user after they fill in a form and submit it. Figure 24 shows a redesign of Figure 7 using a net-new page.

Figure 24: Rather than showing form submission feedback to users in a modal (as done in Figure 7), feedback is placed on a newly created page which is shown to the users after they fill in the form and submit it.

Alternative to Transition Modals:

External link icon

This alternative uses an external link icon next to the element that navigates users to a page external to the site that they are currently on. This is a conventional way of setting users’ expectations and allows for the transition between the sites to happen in a more subtle and less-intrusive way.

This is a viable option only if there are no legal or compliance requirements to overemphasize the impending transition between the sites.

As an alternative to Figure 25 that handles the mentioned use case via a modal, Figure 26 uses an external link icon.

Figure 25: Uses a modal to inform users and ask for confirmation regarding the transition from the current site to the external one.

Figure 26: Uses an external link icon to set users’ expectations in terms of navigation.

Solution space — convergence

To help UX designers decide between user-initiated modals vs. alternatives, we created the Modals Decision Framework (MDF). We are not recommending that modals be phased out entirely, but using them less often and only when no preferable option is available.

The purpose of the MDF is to 1. look into the current use cases for modals on the audited site and recommend alternatives where appropriate, 2. pinpoint the most effective scenarios for using modals. The recommendations in the MDF are based on UX guidelines and best practices.

The MDF is structured conversationally to engage designers in a dialog consisting of a series of questions asked in a logical order. The purpose of these questions is to better understand the specifics of the situation before making a recommendation. The questions are in black and the recommended solutions are in blue. To help designers apply these recommendations, solution nodes reference relevant examples from this story.

To keep the MDF at a legible size within Medium’s width constraints, I’ve split it into four based on categories discussed in this story. The original one-piece version of the MDF could be accessed at:

Modals_Decision_Framework.png

Part 1 of the MDF — for Basic Modals

If the answer to the question “are you considering using a modal to display additional content about a topic on the current page?” is yes, then this branch of the MDF will be useful to you.

Figure 27: This branch of the MDF provides a structured way of deciding when to use a modal vs. alternatives for displaying additional content about a topic.

Part 2 of the MDF — for Video Modals

If the answer to the question “are you thinking of using a modal as a container for playing a video?” is yes, then this branch of the MDF will be useful to you.

Figure 28: This branch of the MDF demonstrates the two alternatives available to designers for playing videos.

Part 3 of the MDF — for Form Submission Feedback Modals

If the answer to the question “are you thinking of using a modal to give feedback to users about the result of a form submission they started on the current page?” is yes, then this branch of the MDF will be useful to you.

Figure 29: This branch of the MDF provides a structured way of deciding between a modal vs. a new page for displaying form submission feedback to users.

Part 4 of the MDF — for Transition Modals

If the answer to the question “are you thinking of using a modal to alert users of the impending transition between sites and ask for confirmation?” is yes, then this branch of the MDF will be useful to you.

Figure 30: This branch of the MDF provides a structured way of deciding between a modal and an external link icon for drawing attention to the transition from the current site to an external one.

The main MDF in this story was specifically put together to address the needs of the audited website and the business it needed to support. The use cases considered reflected how modals were being used across the site and the ones likely to occur based on precedents. For example, one of the common use cases for modals is asking for confirmation when a user requests a record to be deleted. As no transactions were happening on the audited website at the time, this use case was not considered. However, the MDF is scalable and new use cases could easily be added as they arise.

In suggesting a holistic solution, here are additional recommendations based on the observations made on the audited website:

Visual design and content strategy guidelines

1. The (i) icon should be reserved for pop-up tips while modals should open when users click on buttons and links.
2. Although having titles in headers is optional for modals, we recommend adding them to modals on the audited site as they help set context for users.
3. CTAs should only be placed in the footers of modals.
4. Modal content should be concise and there should be guardrails around number of characters allowed. For example, Telus’ Design System recommends 150 characters for titles and 400 characters for body text.
5. Vertical scroll bars should be added to modals when content doesn’t fit their viewport height.

Development guidelines

If we want to reap SEO benefits from modals’ content, the development method should change so Google search traffic is directed to their parent pages. This is a special point of consideration when it comes to Basic Modals.

This is not an exhaustive list of all modal guidelines. For example, the accessibility guidelines are not mentioned because they were not violated on the audited site. This story does not touch upon all content and visual design guidelines either. It only focuses on the ones that could be better applied to the audited site.

Conclusion

The overuse of modals on the audited site was indicative of design problems. They were used to make life easier for designers rather than users. Instead of phasing them out, we suggest they should be used properly and only when required.

This MDF is an attempt to limit the use of user-initiated modals to cases where they are absolutely necessary and recommend alternatives. This MDF may not fit your specific design space requirements. However, it is an attempt to steer designers towards the best alternatives.

I’d like to thank my collaborators, Hossein Sharafi, Masoud Jahani and khadijeh Hamidi for their valuable contributions to this story.

References

https://www.nngroup.com/articles/popups

https://carbondesignsystem.com/components/modal/usage

https://developer.adobe.com/commerce/admin-developer/pattern-library/containers/slideouts-modals-overlays/

https://ux.stackexchange.com/questions/124260/is-it-better-see-a-video-on-modal-or-in-a-new-page

https://designsystem.telus.com/community/index.html#!/Modal

https://medium.com/@debajyotim/modal-design-for-enterprise-part-i-267aa07d54e9

https://medium.com/@debajyotim/modal-design-for-enterprise-part-ii-568b0a7c1dd2

https://medium.com/ux-planet/modal-vs-page-a-decision-making-framework-34453e911129

https://www.appcues.com/blog/modal-dialog-windows

https://www.nngroup.com/articles/popups/