Modal elements are elements that pop up above the main content. They are more commonly known as pop-ups or pop-up windows. They are usually used to advertise a specific product, promotion, or for clarity when displaying terms of use and privacy policies.
Modal elements are made up of the following components:
Title
The title of modal elements, just like the titles of an article, advertisement, or any other title, should be short, clear, and explain in a clear way what this modal element is for.
Demonstrating creativity in pop-up titles, just like in advertising, does not always lead to the desired result. No matter how impressive a title is, if your target audience cannot understand it, it will not work.
Action object
Something in your modal should imply an action by the user. Otherwise, why is it there? Even if the goal is to share some information with your users, you should leave at least one “Close” button.
At any given moment, users should have an idea of where they will be redirected and what will happen when they interact with a link or button.
If you are using buttons with text that can be perceived in a more general way, such as “OK” or “Cancel”, it would be a good idea to write text near the button(s) explaining what will happen when they click it.
Close
The ability to close the modal without interacting with it in the way you want is of great importance. How to close the pop-up should be obvious to every user. Also, keep in mind that it is now common practice that when the mouse is clicked outside of a modal element, it should close it. This is a common expectation from users.
However, it is also good to have a button that clearly indicates that when clicked, the user will be able to continue interacting with the site.
Responsiveness (adaptive design)
Consider how the element would look on mobile devices of different sizes. It is clear that phones with small displays like the iPhone 13 mini will see the pop-up in a very different way than what people will see on the Samsung Galaxy Fold and everything in between.
On mobile devices, modal elements usually take up the entire screen. However, this is not required. Consider the user experience as well.
Change the background behind the modal element
It is generally accepted that in order to make the pop-up stand out, the background behind it is darkened, blurred (blur is added) or lightened. The important thing is that the background is changed in such a way that the user has no doubt that the pop-up is exactly that – separate from the main design element.
Content
Of course, this is the main… the only reason this element exists and that you want to put it on your site. Content is what you want to communicate, show, promote. As you probably know, content comes in many different forms – text, images, video.
Make sure that the content is short, but descriptive and clear. Communicate what you have to communicate in as few words as possible. The exception, of course, is the terms of use, which, unfortunately, are rarely clear and concise.
