Best Practices for Designing UI Modals

As a rule of thumb, use modals in high-stakes situations and avoid using them in all other cases.

Use modals to:

• Display important warnings — for example, notifying users that their system is about to restart
• Prevent or correct critical errors like failing to save changes
• Confirm destructive or irreversible actions like account deletion
• Request information critical to continuing the current process — for example, requesting login credentials for users to be able to save items to their wishlists
• Request information that will make the user experience better in the run, such as users' skill level, goals, interests, etc.
• To simplify complex workflows for users — for example, collecting user information step by step with an onboarding/sign-up wizard.^[1]

Depending on the trigger, modals can be divided into 2 types: user-initiated and system-initiated.

• User-initiated modals appear on the screen after an action from users (e.g., tapping or clicking on a button). Users know that these modals become visible as a result of their actions.
• System-initiated modals appear after a system trigger, like a timed subscription form or reminder to update. They interrupt users' tasks, and users might have no idea why they appeared. Avoid this type of modal unless absolutely necessary and urgent — for example, letting users know that their system is about to restart.^[2]

Make the modal's title clear and to the point, as it sets the stage for what users are expected to do next. Since users often skim or skip the body text, the title should be self-explanatory.

Additionally, ensure that your call-to-action (CTA) buttons align with the title's message. If your title is framed as a question, shape the button labels as potential answers to that question. This consistency between the title and CTAs helps users quickly understand their options, leading to a smoother, more intuitive experience.

Keep the modal's body text for secondary details, like explaining why an action is needed or adding extra context. This text shouldn't echo the title but support it. Be aware that users often skim through the body text, as it sits lower in the visual hierarchy. If there's vital information that users absolutely need to grasp the modal's purpose, include it in the title.

Essentially, your title should capture attention and convey urgency, while the body text offers supplementary insights, without relying on users to read it thoroughly.

When designing modals, align the primary button label with the title to clarify the action for users. Opt for explicit labels that specify the outcome of clicking the button, eliminating any ambiguity. For instance, if the modal asks, "Discard draft?," go beyond generic options like "Yes" or "Cancel." Make it crystal clear with labels like "Yes, Discard" and "No, Cancel." This small tweak reinforces the action, making it easier for users to understand what will happen next.

Add a dark overlay to the modal to make it pop. There are several benefits of adding dark overlays to modals:

• It obscures the rest of the screen, allowing users to focus on the content at hand
• It prevents interactions with elements outside the modal
• It acts as a Close/Cancel button^[3]

Modals can be overwhelming for users, no matter how well-intentioned they are. So, make sure you allow users the chance to close them as easily and intuitively as possible. Provide multiple controls to close the modal in the form of:

• A Cancel button
• A Close button
• A keyboard accessible control: the Escape key on desktop and the Back button on mobile^[4]

When a modal opens on desktop, it's essential to shift the keyboard focus inside the dialog. Placing it on the primary action not only encourages users to choose it but also aids in accessibility, especially for users with motor disabilities. Keyboard navigation should be seamless, allowing users to access all functional controls within the modal. Adding a colored fade-in frame to the primary button can be particularly effective; it lends extra visual emphasis, guiding users toward the most likely action.

Limit the number of actions in a modal to ideally just two. This helps users focus and make decisions more efficiently. Introducing a third action, like "Learn More," can create a diversion that increases the chance of users leaving the task at hand incomplete. By keeping actions minimal, you make the user journey more straightforward and less prone to drop-offs.

Make alert modals for critical actions highly visible to emphasize their importance. Otherwise, users might not realize how crucial the alert is and automatically dismiss it.

The color red is often used in UI to grab users' attention and convey importance and urgency. It immediately stands out to us because of the ways our eyes work — about 64% of the cones in our eyes are sensitive to red light wavelengths. So, use red to convey the importance of critical or urgent alerts. 

Another way to reinforce the importance of the message is by adding icons like the circle X mark, the exclamation point, or the sad emoji.

A success message is like a pat on the shoulder saying, "Great job! You're doing everything right." But it doesn't necessarily have to take the form of a modal. The better option here would be to display success states inline or on a new page.

If, for some reason, you do decide to use a success modal, remember to add a supportive text clearly explaining what the congratulations are all about and a distinct button to close the modal and move forward.