Modal - UI Element

The modal is a disruptive UI element that focuses on user attention based 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 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.

• With primary and secondary action.

‍

• Purpose. A modal, no matter what type it is, should always prompt users to perform a certain action.
• 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 for a modal UI 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.‍
• Priority. Because modals present critical messages, it is essential to bring the most important information to the forefront. ‍
• 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 it 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. There is no need to implement a modal UI component for information that is tertiary or not essential. By overusing modals, the user experience may be negatively impacted.

‍

Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find modals and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!

So, get your uinkits package and start designing now!

‍