A modal window is a powerful tool. It commands attention and prompts users to take action.
Anatomy of a Modal Window
1. Escape Hatch
Give users a way to escape by giving them a way to close the modal. This can be achieved in the following ways:
- Cancel button
- Close button
- Escape key
- Click outside the window
2. Descriptive Title
Give context to the user with the modal title. This allows the user to know where he/she is because they haven’t left the original page. button label (which launches modal) and modal title should match
3. Button
Button labels should have actionable, understandable names. This applies to a button in any instance. For modals, a ‘close’ button should be present in the form of a labeled ‘close’ button or an ‘x’.
4. Sizing & Location
- Location — upper half of the screen because in mobile view modal may be lost if placed lower.
- Size — Don’t use more than 50% of the screen for the overlay
5. Focus
When you open a modal use a lightbox effect (darken the background). This draws attention to the modal and indicates that the user cannot interact with the parent page
✅ Do’s
- Use modal dialogs only for important warnings, as a way to prevent or correct critical errors or for irreversible errors.
- Use modal dialogs to request the user to enter information critical to continuing the current process. When missing information prevents the system from continuing a user-initiated process, a modal dialog can prompt the user for that information.
- Modal dialogs can be used to fragment a complex workflow into simpler steps. When it comes to workflows, faster isn’t always better. For time-consuming and mentally (and emotionally) involved tasks, it can be overwhelming to ask for lots of information all at once. In those situations, modal dialogs can be used to break complex information up into simpler, more digestible chunks.
- Use modal dialogs to ask for information that, when provided, could significantly lessen users’ work or effort. Modals can work effectively when the information being requested or presented is relevant or can streamline the completion of the current task.
⛔ Dont’s
- Do not use modal dialogs for nonessential information that is not related to the current user flow. Modal dialogs that are not directly related to users’ goals are perceived as annoying and can diminish trust in the company.
- Avoid modal dialogs that interrupt high-stake processes such as checkout flows. Checkout is a high-stakes process for both users and businesses: users want to ensure that the process is seamless, secure, and error-free, and businesses want to ensure the user follows through on their purchasing decision. Modal dialogs, if unwarranted, can distract users at best and erode user confidence at worst.
- Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal. Modal dialogs should be used for short, direct dialogs with the user. If a modal requires the user to do complex research or consult additional sources of information (potentially blocked by the modal), then it’s not the right UI element for that interaction.
- Do not use modals to show error, wait, or success states. Modals aren’t effective for this purpose because they block the parent screen.
- Don’t use nested modals. Never design a modal window that triggers a modal window. When you follow such approach, you add visual complexity to your design.
Consider Nonmodal Dialogs Instead
Nonmodal (or modeless) dialogs and windows do not disable the main content: showing the dialog box doesn’t change the functionality of the user interface. The user can continue interacting with the main content (and perhaps even move the window, minimize it, etc.) while the dialog is open.
👉 Modal & Nonmodal Dialogs: When (& When Not) to Use Them