Design & UX

Why Pop-ups Are Ruining the User Experience

Popups are the most hated feature of websites. This has consistently been the case for at least a decade now, so the question is - can we turn it around? Can you implement a popup that won't hurt the user experience? The answer is both yes and no. The animosity towards popups is deeply engraved in people's minds. However, certain design and feature choices can help you salvage some of their usability.

Actually, let’s reiterate the first sentence of this article.

People don’t hate pop-ups – they hate how pop-ups are executed.

Most of them interrupt the user journey, appear at the wrong time and distract the visitors.

Third-party services have made it incredibly easy to create a pop-up, which led to more and more inexperienced people using them on websites. They’ve accustomed visitors to bad pop-up experiences. It has been going on for years and it’s hard to turn it around.

It’s become a habit for the visitors to dismiss intrusive pop-ups. And quite frankly, you can’t blame them.

But before we tell you why this happens and how to make the most out of your pop-ups, we’ll need a little bit of context.

Pop-up types

We can single out four general pop-up characteristics:

  1. Modal – one of the culprits of the animosity towards pop-ups. Modal pop-ups are ones that block the user from interacting with the content of the website until he dismisses the pop-up.
  2. Nonmodal
  3. Lightbox – pop-ups that don’t use dimmed background, meaning the content appears “as is” to the visitor, even though there is an overlay on their screen.
  4. Dimmed – dimmed pop-ups disrupt the visual appearance of the website but not only displaying an overlay but also “hiding” the body of the site.

If you think about some of the pop-ups you’ve encountered recently, you’ll find out that modal and dimmed ones were the most annoying. Unfortunately, they aren’t necessarily losing popularity among website owners and designers.

Common pop-up issues

When researching the examples for this article, queries like “block pop-ups”, “pop-up blocker chrome” or “allow pop-ups” were some of the most popular ones. They illustrate the problem perfectly.

People search for ways to disable pop-ups all the time. Alternatively, they want to enable them again, which means something prompted them to block pop-ups in the first place.

Intrusive nature

The idea of pop-ups is intrusive enough. If you consider they can be modal and dimmed on top of that, it becomes unbearable.

Modal cookie consent popup used on Mashable's website.
Mashable doesn’t have a good track record of using pop-ups. Currently, they use a slightly dimmed and modal cookie consent pop-up.

It’s almost as if you’ve opened a new tab in the visitor’s browser without their consent. The path to close a pop-up is slightly shorter, but the concept is virtually the same. You’ve interrupted their interaction with your website.

Considering an average session duration on websites is between one and three minutes, the traditional pop-up display is unacceptable. You’re definitely familiar with retail employees approaching you at the store.

They have good intentions (and your pop-up might too), but more often than not it’s an interruption to which you reply “no, thanks”.

Of course, there are exceptions. One of our clients has an average session duration of over 7 minutes in 2019 so far. This gives them much more time to show a pop-up at a reasonable time. But for most websites, full-blown overlays are not only intrusive, but it’s almost never a good time to show them.

Displaying a pop-up before an interaction

This issue is more common than you might think. Many websites display a pop-up when the visitor has just visited the website – sometimes even asking for personal details already.

Mashable using a Chrome notifications popups before users have the chance to interact with the site.
To make things even worse, right after accepting the cookies Mashable asked us if we want to receive notifications in our browser. Two strikes in quick succession.

They didn’t even get time to get to know your business. Whether you’re asking them to sign up to a newsletter or offering a discount, 30 seconds in they haven’t consumed any content yet nor had the ability to browse your store. That pop-up is not only deemed to fail, it will also annoy the visitor.

They feel like advertisements

Here at Nerd Cow, we’re advocates for the content-first approach. Writing for the Web is much different from traditional marketing. Most pop-ups are created by marketing teams struggling to truly understand the difference.

Your visitors can’t feel like your selling to them, rather than solving their problems. Especially if it’s an unwanted interaction, such as an intrusive pop-up.

Nowadays people understand that an email offer isn’t a really a “free” gift. It doesn’t mean they’re not willing to “pay”, though. But if the first thing they see on your website requires payment and it isn’t something they wanted, you can imagine how they’ll feel.

Which pop-ups should you avoid?

Here’s a list of the worst pop-up practices:

Best pop-up practices

Pop-ups aren’t doomed just yet. It will take a collective effort of web agencies and website managers to revert the damage that has been done over the years, but good pop-ups can still deliver results.

And it’s easier than you may think:

Don’t assume you need a pop-up

You really don’t. Your visitors are being attacked by them on most websites already. They’ll be relieved.

Think of alternative methods. Test, test, test. You might find that your pop-ups are great. But never assume they are. Just because everyone is doing it doesn’t mean you have to follow the crowd.

Need another pair of eyes?

If your digital marketing is struggling, our team of experts is at the ready to assist you. From website maintenance, through creating landing pages, all the way to full site conversion rate optimisation and new website builds, our goal is to help you grow your business.

Originally published Oct 17, 2019 12:58:39 PM, updated October 23 2020.

Google rating Navigation line
Menu Scroll button