Every second, on average, around 6,000 tweets are published on Twitter. This corresponds to over 350,000 tweets per minute, 500 million tweets per day, and around 200 billion tweets per year. Around 300 hours of new videos are uploaded to YouTube every minute and over 6 billion hours of YouTube videos are watched every month. Every day, over 40 million new photos are uploaded to Instagram, 350 million uploaded to Facebook, and 400 million sent via Snapchat. More than 30 billion messages are exchanged in WhatsApp every day.

We are experiencing an attention crisis. For the first time in history, there is simply more content available to humans than they could ever conceivably attempt to consume. As a result of this, designers are having to change the ways in which they approach problems like time and usage. Some of the solutions that we’ve seen in recent years have been groundbreakingly innovative, thoughtful, and creative. Others, however, haven’t quite lived up to that standard. And some of those lower quality solutions have become commonplace in modern design.

Popups and Modals

One of the most prevalent negative design patterns today is the modal. But it was preceded by another design pattern that, while not directly related from a technological perspective, is very closely related from a design and business perspective. That predecessor is, of course, the dreaded popup. And while the popup was a very successful design pattern for many years, it eventually met it’s end when popup blockers started being directly integrated into browsers. This rendered the popup almost completely ineffective. But the need for a disruptive element was still there.

Enter the modal. It does the same thing as the popup, but it appears inside the existing browser window, rather than creating it’s own external “pop up” window. While a nice technological solution was eventually devised to kill the popup, we haven’t yet created an effective technological solution to kill the modal. So, for the time being, web users are having to live with it.

But are users really just accepting that they have to live with modals? Some recent research that I conducted began to indicate that they aren’t. While a technological solution for blocking modals doesn’t exist, I have been able to observe behavioral solutions in users. While conducting my research, I saw user after user encounter a modal and, without thinking, immediately move the mouse to the upper right hand corner and close it. No matter how good the content was, it went ignored. Users just don’t like to be disrupted during their browsing sessions, regardless of whether it’s a popup or a modal doing the interrupting. As a result of these findings, one would begin to assume that modals may be nearly as ineffective as popups. And I would agree with that sentiment in most instances. Engagement and conversion rates on modals are, relatively speaking, horrendous. However, when executed properly, I have seen modals work. So I’m going to talk about that a little.

How to Create an Effective Modal

While modals are in most instances unnecessary (a better solution could be devised) and ineffective (very few users pay attention to them), they can be pretty powerful when they’re created and implemented appropriately. I’ve devised a set of “best practices” for using modals and I’m going to share them with you today. Before I go into that however, I want to point out that, as with any list of best practices, these are simply guidelines and they very well may not apply to your scenario or resonate with your audience. Ensure that you exercise your due diligence and test these recommendations within the context of your unique audience, product, and business. With that said, these should be able to help you gain a general grasp for what goes into making an effective modal.

• Don’t use modals. Whenever you’re considering implementing a modal, your first step should be to not use a modal. Begin by considering how you may be able to accommodate your goals elsewhere in the design, in a more thoughtful way. Rethink your content strategy, taxonomy, information architecture, etc. Try organizing your information in a way that will allow the user to discover it naturally and in a more enjoyable way. If that doesn’t work, try utilizing new modal alternatives like fold-out or expanding content.
• Devise a solution for mobile. The negative effects of modals are subjected to a multiplier effect when applied to mobile experiences. Content gets cut off (where it’s off screen or covered by a keyboard), awkward scrolling glitches occur, and it’s sometimes impossible to exit the modal. For this reason, you should again begin by not using a modal. If you must use a modal, ensure that you implement something that is fully responsive or try an alternative, like an inline accordion.
• Leverage user behaviors. When determining what will trigger your modal to appear, try to always incorporate user behaviors into the process. The modal should never appear without the user summoning it first, be it through a direct action (clicking a button) or a behavior pattern (displaying an intent to exit).
• Keep the content relevant. Only serve content in the modal that is relevant to the user and what they’re doing in that very moment. If a user has already subscribed to your newsletter, you shouldn’t be hitting them with modals requesting that they subscribe to your newsletter. Furthermore, if you do trigger the modal using a link or a button, ensure that there is consistency between what the button says and what is contained within the modal. For example, if your button says “Subscribe”, you should also have content in your modal that mentions subscribing. This will help the user to create the association between their action and the new foreign element on the screen.
• Distinguish the modal from the rest of the page. Make sure that the user can very easily tell that the modal is separate from the rest of the page. You don’t want them to get confused and think that the page they were on suddenly just changed. There needs to be relative visual depth to the modal in order to help the user understand that the modal is simply overlaid on top of the content they were viewing. In order to achieve this, you can apply subtle drop shadows, strokes, and full screen background overlays to the modal.
• Provide multiple clear ways to exit. Every modal should have a high contrast “X” close button in the top right hand corner. Users should also be able to click anywhere outside of the modal and have it close for them. In certain cases, allowing the ESC key to close the modal or including a “Cancel” button or link may be beneficial as well. Since you’re effectively changing what’s in the user’s direct field of view, you need to make it very easy for them to get straight back to what they were originally looking at.
• Code it well. The only thing worse than a modal is a buggy modal. Make sure that you code your modal well and test it across all different devices and browsers. Don’t make the window too tall or wide, so as to ensure that the user isn’t confused by what they’re looking at. Ensure that the underlying content is fixed when the modal is active to prevent double scrolling. Do not embed content within the modal that would fire a real popup, thus causing double popups. If you place a form in your modal, have the input fields automatically save any content entered into them so that nothing is lost when the user closes the modal or navigates away from it.

By implementing these general practices, you should have a pretty good shot at creating an effective modal that serves the needs of both the user and the business. But just in case you’re still not completely sure about whether or not you should use a modal, I’ve put together a handy dandy flow chart for you. Have a look and decide from there.

‍