Over the years, modals have improved web usability and also frustrated users in almost equal proportion. However, we can all agree modals have become an integral component of the modern web.
A modal window is a graphical control element subordinate to an application’s main window. Modals create a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application. This avoids interrupting the workflow on the main window.
User interfaces typically use modal windows to command user awareness and to display emergency states. — Wikipedia
Modal Types
1. Confirmation Modals
These type of modals serve as a decision bridge. You’re either affirming that a specific action be carried out or you’re aborting that operation. These modals come with two (2) buttons to that effect. e.g Accepting or Rejecting Terms & Conditions of a product or Agreeing or Declining to sell your house 😀
The primary & secondary buttons are usually determined based on the context around the modal itself.
As a rule of thumb, users are not allowed to click outside these type of modals to close them as a decision is required to be taken at this point.
2. Information/Alert Modals
These modals are used to serve important information which is usually alerts and feedback about an action you are trying to carry out. Most times, they have just one button (e.g OK, Close, Dismiss) which is to close or dismiss the modal after the information it carries has been consumed by the user.
3. Forms in Modals
This has increasingly gained more traction over time and the more common forms found in modals are used for “Authentication”.
4. Page in Modals
It is also quite becoming a recent trend that web pages are sometimes rendered as modals. It often doesn’t take as much time to load as traditional web pages and also feels more accessible as it allows users to take a quick view of the content, consume as much as they like to & click outside of the modal to go back to their previous content. Boom! Easy right? 💯
Modal Anatomy
Modals vary in purpose, content, and size but there are basic elements that should be present while crafting your modals to make sure your users are having a good time.
i. Title: This is the first text in a modal. In information/alert modals it is usually feedback (e.g. Error! or Success!) while in confirmation modals it is usually a question which triggers hesitation before a decision is made.
ii. Icon: Sometimes modals have icons integrated with the titles. This makes the modal visually appealing but more importantly, it highlights the action about to be performed (e.g. a bin icon beside a delete confirmation modal).
A picture is worth a thousand words, right?
iii. Body/Content: This is the accompanying text that further explains the title. It highlights consequences that might occur during the process (e.g. the body of a delete modal should tell users they can’t recover their files if they proceed)
iv. Buttons: These are the actions the user can carry out in response to the title of the modal.
v. Close: The close option is a visual component of the modal which can either be an ‘x’ icon or a ‘Close’ button
vi. Escape zone: The escape zone is the dark or light background behind the modal. Users can click on this area to close the modal
When to use Modals
Here is a list of scenarios when using modals are ideal.
i. Decision bridges: You can use modals when you need users to make a decision confirming that a specific action should be carried out and the impact of their decision moving forward.
ii. User’s attention: You can use modals when you want to interrupt a user’s current task to draw their full attention to something equally important. e.g change in rates midway through a cryptocurrency transaction.
iii. Collect data: You can also use modals to get data from the user e.g. a sign-up or login forms.
iv. Information: Modals are useful when you want to abstract the user from their current content to feed them something different but related e.g. a modal for ‘tips’ in an app.
Best Practices
Here is a list of best practices to ensure your next modal is user-friendly 😊
i. Don’t shock users with modals: Only pop modals with user-generated actions such as clicking a button or link.
As seen below, Medium acknowledges it’s a wrong move to surprise you with a modal while you’re trying to read a post but they asked nicely so we can pardon them right?
ii. Create depth: Fading the background of the modal helps the user focus easily. A dark background is more common while the light background fade is a more recent pattern as seen on Medium modals.
iii. Closing the modal: Always provide a clear close option for users by using a button or an ‘x’ icon at the top right of the modal.
iv. Allow users to click outside of the modal to close it: Allow users to close the modal by clicking outside of it except it’s a confirmation modal (where users are required to compulsorily make a decision).
PS: Hitting the Esc button on your keyboard to close modals is also a great option.
v. Match titles to buttons: Matching modal titles to the buttons reduces cognitive load for the user. Buttons should always be a direct answer to the title.
vi. Don’t serve error messages w/modals: Try to attach error messages to their source. It makes it easier for users to consume & fix. Imagine having multiple error messages in a single modal 😭
vii. Don’t serve ads/request mailing address: This is probably the first thing most people remember about modals and it is a serious pain-point for the average web user. Don’t serve ads or request people’s mailing address with a modal as it distorts the user’s flow for a solely selfish purpose.
Imagine the year is 2039. You’re reading a webpage & poof! Mr. Ad-in-modal covers the whole content. Sometimes it even takes more than a click to go back to your content that describes how you can save the world. This is the problem of the web. Ads. Ugh, more ads!!
All product images here are neither for promotion nor defamation purposes. This content is solely for educational purposes.
Enjoyed the read? Leave some ‘claps’ below so others can find this post 🙂 Check out my previous post, Creating User-friendly forms ✌🏽
