Design, UI, UX, Insights, Inspiration
Modal UI Design in a Nutshell: The Basics, Types of Modals and Best Practices
The Pocket Guide to Modal UI Design
When used carefully, modals are a valuable tool for engaging users and communicating your brand with them. However, at the same time, modals also get in the user’s way and cause them to do extra work in order to proceed to your website or app. This is why designing your modal right is critical to communicating your message while keeping your users happy. In this blog post, we’ll look at the basics of modality, the types of modals, and the 5 best practices for modal UI design.
What is Modality?
A modal is a website or app element that pops on top of the on-screen content. As it disables the content on the screen, it requires the user to engage with it by completing an action.
Usually, modality comes in the form of a modal window as an overlay. It may appear as a slide-in or a pop-up, triggered either by clicking or hovering over a specific element of the page.
With this being said, modal windows are one of the most effective means to bring your visitor’s focus to an important action on your website or application. Users must engage with the modal by either closing it or completing a specific action (filling a form, choosing an option, or/and clicking a button), which interrupts their experience. This is why it’s crucial for a modal to communicate a message in a clear and quick manner.
Duplicate Group Modal by Patrick Marx
Types of Modal Windows
Modality in UI can be found in different shapes and sizes, depending on the overall design and function. Here are the most common modal window types:
Fullscreen Modal Views
As the name suggests, these modal windows appear on top of the on-screen content, taking up the entire screen. Usually, websites and apps use fullscreen modal views to give additional information about a certain topic on the on-screen page, instead of pushing that content to a separate page.
Fullscreen modals are not separate screens, instead, they are child views, subordinate to the main screen, and disable that main screen when triggered.
Users need to click the exit icon to go back to the on-screen content.
Brad Guesman Portfolio Modal Full-Screen Window
Popups and Lightboxes
Popups and lightboxes are windows that appear on top of the on-screen content without an intentional action from the user. The difference between the two types of modality is that popups usually serve to alert or notify the user for cookies, alerts, or login, while lightboxes serve marketing purposes. In terms of execution, they are the same thing.
You can use popups and lightboxes to push alerts, notifications, surveys, discount codes, coupons, or other means to promote content or share info.
Peak Mood Drinks Discount Offer Popup
Pop-Overs
Popovers, unlike popups, don’t unnecessarily disable the on-screen, rather they appear above the content on the screen with varying text and interactive elements. They usually come as base layers such as tooltips, menus, or drop-down menus to display additional information about a particular element.
The windows that appear next to your password input when you sign up to an app or website, informing you what letters and symbols you should use, are pop-overs. This means pop-overs can be designed as modal as well as non-modal elements.
Dialogs and Multi-Step Dialogs
In web design, dialog refers to the conversation between the user and the system and usually serves to request an action from the user. The modal dialog appears on top of the on-screen content and disables it. Users need to complete the “conversation” before returning to the main content.
Figma UI React Modal Concept by Roman Kamushken
You can also use modals to help users complete particular actions. For example, platforms like YouTube use modal windows for most video content-related actions such as users’ options to share the video or options to save it in a particular collection.
Now, that we’ve cleared what a modal window is, let’s see what isn’t.
What is a Non-Modal Window?
Nonmodal windows are quite useful when users need to switch between modes or access certain info. They are much less disruptive than modal screens as they allow users to continue their activity in the background.
For example, Gmail uses a nonmodal window for composing messages. The notification windows in your preferred platform are also non-modal, as you need to trigger them manually and you can still scroll on-screen content even when the notification window is active.
Modal Window by Michal Parulski
To sum up the difference between modal and non-modal windows:
Interaction: Non-modal windows allow users to go back to the parent screen without the need to engage. Modal windows, on the other hand, require users to complete an action before returning to the on-screen content.
Visibility: Non-modal windows don’t add a background overlay to obscure the on-screen content, while modal windows (especially lightboxes) tend to do so.
Best Practices for Modal UI Design
There isn’t a one-size fits them all template for making a well-designed modal window, however, there are a few practices that will help you get creative in the right direction.
1. Know When NOT to Use a Modal Window
Every design element should contribute to the user experience. There are some instances where modal windows aren’t beneficial to the user experience or even disrupt it.
Avoid modal windows when you:
❌ Put additional information: A non-modal tooltip is a much better choice than a modal pop-over as it doesn’t disrupt the user experience.
In the following example, the additional info is triggered by clicking a specific element.
Seacat Superyacht Concept Non Modal Window
❌ Put a large amount of information: If you wish to communicate a larger amount of information, you should consider another option: a fullscreen modal view triggered only by an action; an email, a blog post, etc.
For example, the following website packs all the info in a bigger modal that appears only if the users chooses to click the button.
❌ Request an out-of-context task that the user hasn’t triggered: Avoid promoting users to complete tasks unrelated to their experience. These things should always be optional.
The following concept is for a modal screen that requests users to choose settings directly related to their experience, which is appropriate.
Interface Mode Settings Modal by Oleg Frolov
❌ Already have a modal window in the same session: A modal window that triggers another modal window adds way too much complexity to the UX. Although it’s pretty fun to build, avoid using nesting modals.
The following example shows a sample of nesting modals in jQuery. For science purposes only.
2. Give Clear Instructions
Explain to your users why the modal window is there and why it is important to interrupt their session. Your instructions should be short and descriptive, allowing users to know where they are or what is required of them.
Action confirmation: Use modal dialogs to ask users to confirm an action. The instructions as well as the action buttons should be clear and short.
Company Settings Modal by Vishnu Prasad
Error/Alert Message: If something goes wrong, let the users know what happened and give them clear instructions on how to proceed.
Podspace Payment Issue Modal by Marcus Gellermark
3. Make Dismiss Controls Visible
One of the most annoying things to a user is the need to search around for a way to close a modal window. Ads usually obscure the Close button as a cheap trick. However, to give users a great experience, make sure the Close/X button is visible and big enough to click without the need for users to go surgical on it.
The following examples add an explicit ’X’ button at the top right corner of the window.
Payment Method Settings Modal by Kevin Dukkon
Consider also supporting clicking outside the window to close it.
Notifications Share Modal by Diana Palavandishvili
4. Give your Modal the Full Focus
Find creative ways to draw the user’s attention immediately without resolving to make it cover the entire screen.
A great way to bring the modal further to the foreground is by using shadows, background dimming, or blurring.
Luca Sammarco Portfolio Modal Windows
Integrations Modal by Diana Palavandishvili
5. Size Your Modal Appropriately
Since modals appear as a layer on top of the parent window, you need to know their clear role before deciding how to size them.
If your modal is basically a page that users open in the same URL to read more info about a certain section, then size it like a page.
If your modal is a popover instructional message, respectively, make it smaller with smaller fonts.
In terms of a perfect size for a typical modal window with settings, however, go for up to 50% of the browser window width and approximately the same case for the height.
Meeting Modal Creator by Michal Parulski
Connect Wallet Modal Interaction by MoRas
6. Prioritize Content and Functional Elements
Since modal windows give you significantly less space to organize the options you want to present to your users, make sure you structure it properly to show minimum content on one window screen.
In cases where you need to feature a lot of settings, avoid situations when the content in the window requires a scrollbar. Instead, use tabs or drop-downs to separate and organize all the options.
Appearance Settings Modal by Vasile Labici
Task Popovers and Pickers by Attio
You can also use multiple screens (steps) for the modal.
Report Window CE Flow by Alex Lauderdale
To Sum Up
Modal windows are designed to grab users’ attention and compel them to interact with them. Since every design element should contribute to the user experience, make sure you recognize where modal windows aren’t beneficial.
In the meantime, you can visit some of the UI/UX-related articles for some more insights and inspiration: