in

How to Use Modals Without Hurting Your UX | by Eric Chung | Mar, 2023

Best practices for effective modals and alternatives to consider

(Source: Chameleon)

Modal windows are a common design pattern used in user interfaces to present information or actions that require the user’s immediate attention. A modal window is a type of dialog box that requires the user to take an action before they can continue interacting with the application. Modal windows are typically used to display error messages, confirmations, and alerts, or to collect information from the user.

Modals are distinct from other types of dialogs, such as pop-ups or modeless dialogs. Pop-ups are similar to modal windows in that they require the user’s attention, but they typically appear without the user’s input and can be closed without taking any action. Modeless dialogs, on the other hand, do not require the user to take any action before continuing to interact with the application.

While modals can be useful for certain tasks, they also have some disadvantages. One of the main drawbacks is that they can interrupt the user’s workflow and cause them to lose their place in the application. When a modal window appears, the user’s attention is focused on the modal and they may not be able to continue interacting with the application until they have completed the task in the modal. This can be particularly frustrating if the user was in the middle of a task or had just completed a complex interaction.

Modal fatigue

Modals can also be overused, leading to “modal fatigue” where users become frustrated with constant interruptions. If modals are used too frequently or for non-critical information, users can become frustrated with the constant interruptions and may start to ignore or dismiss the modals without reading the information presented. This can lead to important information being missed or users becoming desensitized to the messages presented in the modals.

Accessibility

Additionally, modals can be problematic for users who rely on assistive technologies such as screen readers, as they may not be able to access the modal content or may become disoriented when the modal appears on the screen. If your product uses modals, ensure that they are keyboard and screen reader accessible by placing the focus on the modal when it appears and providing a clear way to exit the modal.

To avoid these drawbacks, designers should use modals sparingly and only when necessary. They should also consider if the modal is relevant to the user’s context and ensure that it does not disrupt their workflow. If possible, designers should provide an option for the user to save their progress before the modal appears or to allow the user to complete the task in the modal without losing their place in the application.

Here are some examples of modals being used effectively.

1. Tumblr’s “delete account” confirmation modal

(Source: GoodUX by Appcues)

First off, this modal incorporates Tumblr’s tone of voice into the copy, adding a bit of personality to the messaging. It also requires the user to enter in their email and password before deleting their account. Adding friction to this action prevents users from accidentally deleting their accounts, which makes this modal effective.

2. Gmail’s “forgot to attach a file” error prevention modal

(Source: Digital of Things)

Modals are great for displaying an error or warning message that requires the user’s immediate attention. In this case, Gmail warns the user that they mentioned an attached file in their email when they haven’t attached any file. This simple check done before sending an email can save users embarrassment and prevent errors from occurring.

3. ClassPass’ “leave a review” feedback modal

(Source: GoodUX by Appcues)

This modal is scheduled to pop up when a user returns to the ClassPass app for the first time after taking a class. This way, their experience of the class is still fresh in their mind, which makes it more likely that they will leave a review in the modal. As well, the information above the modal is personalized with the user’s name and scheduled class, which further increases the likelihood of the user engaging with the modal.

When implementing modals, it is important to consider the following:

  • Make sure the modal is visually distinct from the rest of the application, to ensure that it stands out.
  • Keep the modal simple and easy to understand.
  • Make sure the user has a clear way to dismiss the modal if they choose to.
  • Avoid using modals for non-critical or secondary information, as this can lead to frustration for the user.

Overall, modals can be a useful tool in a designer’s toolkit, but they should be used judiciously to avoid overwhelming the user and detracting from the overall user experience.

While modals can be a useful design pattern, they are not always the best choice for every situation. Here are some alternatives to using modals:

1. Inline messaging

Instead of using a modal window to display information or confirm an action, designers can consider displaying the information directly in the application, either above or below the content that the user is currently interacting with. This approach can be particularly useful for providing contextual help or guidance to the user.

(Source: UX Writing Hub)

2. Toast notifications

Toast notifications are small messages that appear briefly on the screen and then disappear. They can be used to provide users with quick updates or alerts, such as when a task has been completed or an error has occurred. Toast notifications are less intrusive than modals and do not interrupt the user’s workflow.

(Source: MagicBell)

3. Slide-out panels

Slide-out panels, or side drawers, are similar to modals in that they require the user’s attention, but they do not cover the entire screen and can be dismissed by the user without losing their place in the application. Slide-out panels can be used to provide users with additional information, such as cart details, or to allow them to complete a task, such as filling out a form.

(Source: Paul Rogers)

4. Progressive disclosure

Progressive disclosure is a design pattern that involves presenting information or functionality to the user in a series of steps, with each step revealing more information or functionality. This approach can be useful for complex tasks or information, as it allows the user to focus on one step at a time without being overwhelmed.

(Source: Justinmind)

In general, designers should consider the context and purpose of the information or action they are trying to convey and choose the design pattern that best fits the situation. Modals can be effective in certain cases, but they are not always the best choice, and designers should be aware of the potential drawbacks of using them.

Modals are an effective design pattern for displaying information, confirming actions, and providing users with additional functionality. However, their overuse or improper use can cause several drawbacks, such as disrupting the user’s workflow, causing frustration, and increasing the bounce rate of your application. Designers should think about the context, timing, size and placement, accessibility, and user testing before using modals.

In addition, consider alternatives to modals, such as inline messaging, toast notifications, slide-out panels, and progressive disclosure, that can provide a more streamlined and less disruptive user experience.

By properly considering the use of modals and their alternatives, designers can create an effective and enjoyable user experience that meets the needs of users without disrupting their workflow. Ultimately, the key to effective modal use is to strike a balance between providing users with the necessary information or functionality and respecting their time and attention.

Thanks for reading!

Be sure to SUBSCRIBE to never miss another article on UX design, career tips, life lessons, and more!

Here are a few more to read next:

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings