Whats The Trends For Modal Windows On The Web

Modal windows are those popup windows that appear over the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup.

Most websites running modal windows add some type of call to action whether it’s a button or a form or something. But it can also be a simple message about browser features like disabled JavaScript or an adblock extension.

Everything in the window takes precedence over the page so these modals are meant to draw attention. They can be annoying and outright infuriating but numbers don’t lie: they work.

Let’s delve a bit into current trends of modal windows to see how they work and why you’d use them.

 

Dark Backgrounds & Clickable Areas

Modal windows follow a similar design strategy and they’re not very complicated.

They mostly all use a darkened background on the page to bring attention to the modal content. This shouldn’t be a pitch black background because that can feel intimidating.

Instead the user should see a touch of the page behind the background, but it should have a reduced opacity. This could be 90% or 50% depending on how much you want to hide the page.

This isn’t universal but I hate when designers remove or ignore this feature. Yes there’s usually an X button or close button, however it takes more effort to move the mouse onto that button.

It should be possible to just click the background and hide the message right away.

Some modals use fancy animations to appear on the screen. This is usually preferred because it reduces the harshness of a random popup.

Having the modal window slide, fade, or bounce into view makes it a touch easier on the eyes. But don’t drag out the animation either!

Most users will ignore the modal so they don’t want to watch a full 3 second animation. Get to the modal quickly and let the user either read or close the window.

Designs vary from site to site but most of them use a white modal background with dark text. It’s the simplest way to design a high-contrast message that can blend with any website.

Overall these are some basic trends so they’re not absolute. But keep your eyes open as you browse the Internet because you may be surprised how many different styles are out there.

 

Display Techniques

There are some popular trends used by marketers who want to display modal windows for certain visitors.

The vast majority of modal popups happen a few seconds after the pageload. Most visitors haven’t even had time to read through the site to understand what it’s about. This seems like the worst way to do modals unless they’re informational for things like cookies or adblock settings.

Other display styles typically work better since they’re geared towards user behaviors. Here are the three most common techniques:

  • Exit modals appear when the user’s mouse leaves the page
  • Timed modals run after X seconds/minutes
  • Location modals appear when the user scrolls down a certain amount

Each scenario is different and should be used based on the audience.

If you run a blog with lengthy content like Smashing Magazine then you might do a scroll-based popup. Other blogs like WPBeginner actually did the exit modal strategy and saw a huge increase in daily email signups.

There’s no denying that this stuff works. It’s just a matter of how you’re willing to run modals and what the end goal is.