The main thing I think whenever I see a modal taking all of my screen is: "What. What is so important that requires every possible space available on my screen". Is it a modal to sign me up into the website's "World Best Handbook of X"? Maybe it's a modal to tell me "How dare you using AdBlock, deactivate it, now!" or "Do you accept our cookies policy". And when I see these, I just think "Why.".

Hi! I'm Codedgar, and today I want to talk of the cons of having a UI with a ton of modals and what can we do to stop this and give the user a more pleasant and fluid experience on our website.

First, let's get 2 things straight:

1- Are modals bad?

Nope. Modals are surely needed if the users are about to press a button that they might not be sure to press, so in cases of "You are about to delete your entire account!" or "You will delete this file and you can never access it again" are totally needed.

2- Do I hate modals?

I only hate the modals that interrupt the flow of the user without actually needing to, and I think that modals are being abused by marketers, and I can't stand some of the usages to they given them. Modals are very important, but the misuse of them lead to a lot of people hating modals no matter what they show.

Now that we took that out of the way, let's talk about ways that modals are used incorrectly, and what can we do to replace them with something better. I've separated this article on two parts: How to know when to show information in modals and examples of modals used incorrectly and how to replace it with something more natural.

When should I display information on a modal?

To know if you should display information on a modal, I would advise you to ask yourself these questions:

Could the action of the user be mistaken or dangerous?

If the user clicked "I want to delete my account" or "I want to delete this forever" a modal is totally needed. Because it will stop the user to think about the action that will take place and check twice.

Is the information that I'm showing urgent or really important?

When I say important, it doesn't mean "Hey I'm giving this book out". I mean things like "We are moving to another domain soon", "This article is old, here's a new version" or "This is a beta of the app". This is information that can have an impact on what the user is seeing and how interacts with the content directly. And is something that needs to be said before the user continues the journey through the website.

Do I need all the attention of the user?

There's a big con to modals and it's that modals take all the attention of the users out of whatever they were doing, so if you are interrupting whatever the user is doing, make it worth it.

Examples of bad usage of modals.

Email collecting modals

I hate these. Don't get me wrong, sometimes email collecting is necessary but I do believe that this is a really "In your face" approach. And allow me to elaborate with an example:

I'm reading an article that says "It is safe for cats to eat soup?" but that doesn't mean that I want to download the book/guide for "impressive cat training", and the moment I stop scrolling it gets all of my screen telling me if I want it. My cat just jumped on the table and took some soup, I just wanted to know if it was safe (No cats were harmed during this example).

This approach of showing everybody that you are giving away a book/guide is really bad because you are just telling them that you are giving a free book/guide on the main topic of the website, but it might not have anything to do with the topic of the article.

What can we do instead?

We can tell the user in a section of the article that the information we are telling also appears on our book/product or whatever, like so:

"If your cat constantly eats your food, we have a section that talks about what your cat can eat in our free book 'Impressive cat training'". Now I know that if I put my email, I will have more information on the specific topic that I'm currently visiting, so if I'm looking to know more about this specific topic, this is nice. And this works great for segmentation of audiences.

Also, this is a great moment to tell you that if you are liking this article you should totally follow me on Twitter ( @Codedgar_dev ) because I will drop more articles on the topic "Please use wisely" and I will post them in Twitter when I publish them. (See? Way more subtle than a big modal, haha).

Login or Register modals

I once had the opportunity to work helping to create a frontend where the login, register, add a product, add a series of products, and everything was on modals. And this was horrible from a developer and user perspective since it required several steps to do anything, which meant several modals changing between them. If the user reloaded the website, the modal would close and he would have to open it again, so a user would be one click away from being where they were. Plus, if the user where to click outside of the modal, it would close, so he would have to open the first modal, and click next and next to reach the section of editing.

What can we do instead?

Create a dedicated subpage for these things. Where the focus is only and completely the action that the user is currently doing, and if the user reloads the page, it will appear exactly where it was. You don't need your user to stay on the same page at all times.

"Why are you using AdBlock?" modals

One thing I really believe is freedom of choice. I have entered websites that completely block you if you use AdBlock, and I evade them entirely. While opening new websites I tend to have Adblock enabled so I won't enter an ad-filled article or website. And if the number of blocked ads is really low, I deactivate AdBlock on that site. But if a user comes to your site and it's not allowed to see your website because it has an adblocker, your bounce rate may go up.

What can we do instead?

I know that for some people the ad revenue is their primary source of income, but blocking users entirely from using your website just for that it's not cool. In some websites, I've seen banners that say "We run thanks to ads" and I find this nice, they tell you "It's okay that you use Adblock, but if you like our articles consider deactivating it" and in a lot of times I've found myself disabling Adblock in that website because I enjoyed the article and don't mind seeing others with ads.

"Changed of focus" modal

This is the one that I hate most of all. You go and change the song you are listening on Spotify, and come back to the website and a big modal telling you "BEFORE YOU LEAVE..." is there. This is very invasive and it cuts completely the flow of the website and journey of the user.

What can we do instead?

If you are going to use this modal, please allow the users to click outside of it to close it, instead of having to search for a small "x".

But what if I have to use modals?

If you need to use modals, try to follow these tips to make it less hard on your users:

1- Make the info as specific and short as you can:

Don't try to over-explain everything in a modal. This applies even more if the content of the modal does not fill all the space. Keep it short and clean.

2- Don't make a modal open another modal:

Think of this: If the user clicks outside of the modal and it has been 4 modals at this point, the user will have to reopen the first, then the second, the third one and so on.

3- Make modals close when you click outside of them:

This an easy way of helping the users cancel an action fast if they didn't meant to click the button. And also in modals like "Download my book" or "Before you leave" it makes people that are not interested continue with their journey.

4- Make the close button accessible:

One of the main issues I have with modals is that some of them have really really small close buttons, so I have to precisely put my mouse over it and close it, instead of going fast to the close button and clicking it simply.

Conclusion

Please remember and have in mind that modals are a powerful tool, that should not be used in everything. If we are going to interrupt a user, try to make it for something important and make it easy for the users to click outside of it if they are not interested in the information of the modal.