The goal of this post is to put in writing a conversation we’ve had a few times recently about modal windows with backdrops that appear automatically on a landing page. We’ve seen this trend recently, along with the annoying shaking “sign up” buttons, on sites that appear designed to drive collecting email addresses.

Twitter modal dialog

Twitter may be the most memorable example you come across, but unfortunately it’s now a standard practice.

The most annoying offenders are those that have delays between page load and showing the modal. Take, for example, this startup’s landing page. On first load it looks like a typical “log in now!” landing page:

Landing page first load at Rocket Miles

However, after a few seconds (somewhere between 3 and 5), the site shows a modal popover asking again to “no, really, log in now!

Landing page after a few seconds

The second pop-up is ridiculous because it’s repeating most of the content from the first page. There is no new information. There also is a small bug that the dismiss action depends on the optimizely startup JavaScript code being present, but we typically run with privacy extensions in Chrome and was unable to close the dialog. The experience went from bad to worse.

Another news-ish site does the same thing, again automatically showing a modal window after a few seconds:

Another landing page with an automatic modal dialog

We argue this is bad user experience. It’s basically the re-appearance of the old pop-up window. These modal backdrops hijack the user’s experience to show an advertisement. It just happens that the advertisements presented so far are house-ads intended to get you to sign up, but don’t worry, other people are using them for third-party ads:

Modal advertisement

Or this one which pollutes google search results and then hides the content:

Pinterest modal dialog

These experiences are so poor, that even the US Government has a well-done design guidelines website that says:

Give Users Clues about Behavior before Actions are Taken

Considering we took no action on these sites before they navigated away to different content, I think these sites violate that guideline. Let’s be clear: We believe the modal backdrops conceptually are navigating to a new state, and we hope you would agree that automatically navigating without the user’s permission is disrespectful to the user. Let us read your hand-crafted landing page at my pace, don’t pressure us to convert. We are more likely to drop off and discount your content.

How to do better?

What alternatives are available to using the modal backdrop? The Seattle-based business Redfin sometimes shows modal pop-ups (it’s an edge case that we think they are phasing out), but more often Redfin changes the layout to draw an inline advertising panel (the yellow box asking the user to log in):

Redfin is reforming its modal use

We still would prefer to see Redfin without the panel, but at least the site shows me the house detail page as we expected.

So, may we implore you to stop using modal backdrops automatically on landing pages? If you have issues converting, may we suggest either improving your landing page, providing a compelling value prop, or enabling a demo that doesn’t require signing up?