What are Modals in UI Design and How to Use Them?

Modals are important UI elements that every UI/UX designer should be familiar with. In this article, we will discuss what they are, how they act, and when it is most appropriate to integrate them into a UI design.

We often find ourselves scrolling through a website or an app, and as we are concentrating on a piece of information, we suddenly notice a window opening up, completely interrupting the activity we were performing until then.

The general reaction whenever somebody is asked about how they feel about popups and other elements that disrupt their digital activity, the feedback is going to be pretty negative. However, not all elements of a UI UX design that pop up on the screen need to annoy or make users feel in bad way. Some popover types can signal to us that important actions need to be taken, which is more than useful, just as modals do.

This disruptive UI design element focuses user attention on a singular task, which prevents them from carrying on until they complete it. It is structured on a layer above the page, and it is also known as a dialog.

Modals can pop up on the screen at any given time of the user experience, and they can come up in various forms such as signup forms, confirmation boxes, and notification windows. Even though there is a widespread opinion that modals could be harmful for the user experience, this is far from the truth. Well, as long as they are designed right - but more of that a bit later.

Modals generally vary based on the type of message they are sending out, whether it is an error, warning, or a request from the system, such as log-in credentials. Based on layout, there are two types of modals:

• With primary action. The first type of modal displays to users a single action they will need to take that is described in a straightforward manner. 
• With primary and secondary action. In comparison to the first type of modal, this type will display an additional action that the user needs to perform.

• Purpose. A modal, no matter what type it is, should always prompt users to perform a certain action. From its layout to the copy included in it, all the way to the color theme, all these elements should come together to deliver the role of the modal in the context of a user interface.
• Title. Modals generally follow a simple and accessible structure of verb + noun. The language is clear and familiar to all users because they need to understand what the modal is asking from them without putting in effort.‍
• Body. The strategy that should be used for the body of text is to begin it with an imperative verb - that way, users perceive the importance of taking action. The language we use in modals should also be as suggestive as possible so that users know exactly what will happen if they press a button. One good example of this is for a modal that would show an error message - choosing the color red is intuitive and would help users identify what the idea is quicker.
• ‍Priority. Because modals present critical messages, it is essential to bring the most important information to the forefront. This could be either by including the information in its heading, or even by making the priority text in bold or in a different color.‍
• Scannability. Redundant words can be left out. Modals have to be straightforward and should not include additional words that make it less likely for the user to read them, such as a and the.‍
• Dark Overlay. One of the easiest ways to increase the readability of a modal is to add a dark overlay to the background whenever it is triggered.

• Warnings. One of the most common usages for modals is to warn users about important changes that will be implemented in the very near future, such as the fact that the system needs to be updated or restarted.
• Simplifying Processes. It may be redundant to always integrate sign-up wizards for users. Instead, modals allow them to follow a more intuitive and simplified flow.
• Errors. A good strategy that is often implemented in design systems is the prevention of possible errors that might occur. We can use modals to signal to users that the data they have been modifying could be lost if they do not choose to save it.
• Requesting Information. In certain cases, for users to be able to carry on using a website or app, they would need to perform an action, such as logging in. Modals can be integrated to request this type of information.
• Irreversible Actions. There are cases in which users want to perform actions that have permanent consequences, such as deleting an account on a social media platform. Modals warn them about the fact that these choices are irreversible.
• When to Avoid. Naturally, there are a couple of contexts in which UI UX designers should avoid integrating modals. There is no need to implement a modal for information that is tertiary or not essential. By overusing modals, the user experience may be negatively impacted.

We at uinkits understand the importance of great user experiences and creating amazing UI designs. That’s why we’ve developed a Figma UI Kit with design components that include these essential UI elements that enable you to design intuitive and user-friendly interfaces effortlessly.

“You press the button, we do the rest.” – Kodak.

Inspired by this iconic tagline from Kodak, we believe in simplifying the design process for you. Our Figma UI Kit, uinkits, is a complete design system with UI components that allows you, as a UI UX designer, to create your products as quickly as pressing a button.

Our design system includes UI components, icons, variables, cards, buttons and everything you need for your design process. All you have to do is take your UI design component needed, and you’re ready to use it in your designs!