Popups: Hated Since the 90s

Users have hated popups since the 1990s, and they still hate them today. In fact, in a survey we conducted with 452 adult American respondents, we found that popups were among the most hated advertisement techniques. (Just as they were in a similar study from 2004. Nice to know that some things never change, even if it’s the negative emotions caused by popups.)

Over the years, we’ve have heard countless complaints from users about these aggressive advertising techniques.

“Oh, God. Everybody wants you to keep signing up for emails.”

“I’m going to close out that promotion thing.”

“I just never click on popups.”

“Let’s see if I can close this thing here. Just to get it off the screen.”

“These are so tedious, and the info they present is not important.”

In the 90s and early 2000s, popups were new browser windows that could easily cover the user’s entire screen. Today’s popups are technically overlays: a content box that is displayed on top of another page. 

The most disruptive and annoying version of overlays is the modal overlay. In a modal overlay, the content on the page is disabled until the user explicitly interacts with the overlay. This type of popup tends to be the most hated version because it is the most disruptive — it interrupts users and forces them to take an action inside the popup instead of continuing their tasks.

Modal overlays, like this one on Alo Yoga’s site, force the user to stop what they’re doing and interact with the modal.

The web in general, but ecommerce sites especially, are rife with modal overlays — often containing sale promotions or requests to sign up for an email newsletter or text messages. Even nonmodal overlays can cause annoyance, particularly when they’re unreasonably large.

The Guardian’s site used a massive bright-yellow nonmodal overlay to request donations from readers.

Why do designers continue to use these irritating implementations? Teams often turn to modals because they do get attention, even though they’re disruptive and annoying. When designers are encouraged to optimize for newsletter signups, text signups, or registrations at all costs, they sometimes make decisions that prioritize those metrics over all else. However, in the long run, these tactics erode users’ trust and their relationship to the brand.

A Tidal Wave of Popups

While these interruptive designs have been around for decades, they’re worse today than ever before. This is because modern web users are constantly barraged by different types of overlays coming from multiple sources, some important, some less so — but all blocking their view. 

There are several types of popups that a user is likely to encounter in a session on the website:

  • Privacy-related popups, pertaining to cookies, GDPR, location access, push notification requests, and other permissions 
  • Marketing, donation, or sales-related popups such as requests to chat, subscribe to a newsletter, make a purchase, donate, or use a promotion
  • Browser-initiated popups (often triggered by plugins that the user may have installed) such as password managers or deal finders

While using one or two popups may seem innocuous or only mildly intrusive to a designer, if you add up all these together in a single session, you can see how the experience is degraded. For example, one participant in our study encountered all three types of popups while she shopped on the Magnolia home décor site.

Privacy-related popups: When she arrived on the site, the participant encountered a (nonmodal) privacy–related overlay in the lower left corner of the page, notifying her about the site’s use of browser cookies.
Marketing-related popup: After spending a few minutes browsing the site, a modal overlay took over the Home Décor listing page. This popup implementation is typical of ecommerce sites, and are intended to convince users to sign up for newsletter promotions.
Browser-initiated popup: Many participants in our ecommerce studies used deal plugins like Honey in their browsers. These plugins cause extra modals to appear while users shop. When the shopper reached the checkout flow, her Honey plugin triggered yet another modal.

Stacked Overlays Fight Each Other

In recent research, we’ve repeatedly seen users get frustrated with these popups; many even had to fight off several overlays stacked on top of each other.  Not only do these overlays double user annoyance, but they often are buggy and work against each other.

Best Buy showed two overlays: one, nonmodal, for asking for permission to use location and another one, modal, inviting the user to sign up for the newsletter. 

In our testing, the problem of overlapped overlays was even worse when users were on small devices with limited screen space — smartphones, tablets, and even some smaller laptops. Some of our participants who were using small laptops (e.g., Chromebooks) were especially annoyed by stacked overlays. Popups are annoying even when you have ample screen space, but doubly so when you don’t.

Local Eclectic stopped one participant from shopping on its site, blocking her with a full-page newsletter prompt as well as a smaller app download prompt — two things to close out of before she could begin shopping.
On LocalEclectic.com, the chat and the Get 10% off floating buttons overlapped. When multiple different-purpose overlays are used on the same site, they often end up being buggy and even fight each other. 

One participant was shopping for a mattress on Leesa.com, and he was annoyed to see a typical newsletter prompt overlay.

Like many, many sites, Leesa.com used a modal overlay that appeared and covered the screen immediately after a user arrived for his first visit.

He moved his mouse to dismiss the overlay, but before he could, another overlay appeared. This one encouraged him to Never miss a deal! by allowing Leesa.com to send him notifications. 

Users frequently have to contend with multiple, overlapping overlays at the same time. These two on Leesa.com left one participant extremely frustrated.

At this point, he was furious.

“This thing popped up. It is so intrusive and it’s just frustrating. And there’s another one here. So rather than me just moseying along, I had to click those two things. Which is, from my perspective, frustrating.”

Stalking Overlays

Sometimes, users will dismiss an overlay, only to have it shrink down and follow them around the site. If users tell you that they don’t want a dialogue element, then it’s beyond obnoxious to keep pushing it on them.

During a sales event, first-time visitors on Leesa’s site saw an enormous full-page overlay advertising 20% offand encouraging users to sign up for emails. Once that overlay was dismissed, it appeared on the screen again as a small floating nonmodal overlay in the lower left corner of the screen. A chat icon overlay floated on the right.

On mobile, Leesa’s site immediately loaded a full-page overlay (left) and then kept it floating on the screen after it was dismissed (right).

One overlay is annoying enough, but when users face a barrage of multiple modals in different forms, sometimes even overlapping and stalking them, the experience is extremely frustrating. This problem is compounded because users are often visiting multiple sites in a single session.  When they continually encounter many popups across the sites they see, the cumulative effect is exhausting.

Later, after visiting a few other sites with overlapping popups, that mattress-shopping participant was wearied from fending off never ending streams of overlays. He said:

“Some of these websites, I feel like they’re too smart for their own good. Sometimes simple designs and [fewer] things popping up at me is better than all these fancy fifty things.”

We’ve Said it Before, We’ll Say it Again

It’s frustrating that we (repeatedly, consistently) have been hearing negative feedback about popups over decades, and yet the problem keeps getting worse.

Remember, it isn’t just one overlay. Your users are likely to see two or more of these types of overlay prompts at the same time:

  • Notification requests
  • Location sharing requests
  • Cookie and privacy policy agreements
  • Deal browser plugins
  • App download prompts
  • Chat prompts
  • Feedback survey prompts

Some of the modals that users see are outside of our control — we can’t prevent people from installing browser plugins, and we might be bound by law to alert visitors of our privacy policy. However, we can empathize with this cumulative negative experience and take the following steps to reduce overlay overload:

  • Understand your current modals, and determine whether your site causes competing or stalking popups. An easy, fast way to do this is to open a browser in private mode and walk through some top tasks on your site. Count the number of modals you encounter along the way, and what types of modals they are. A more thorough approach would be to conduct remote usability testing on your site. That way, you can see which problems modals appear to participants using their own devices
  • Don’t ask for location or notification permissions unless it’s truly necessary and desirable for users. 
  • Consider alternative implementations for marketing- or sales-related messages. A popup isn’t your only option — explore alternatives that might work just as well, without annoying users.

You may think that a specific popup is acceptable because it will be good for users. Sadly, so many other sites have hurt users so much with unacceptable (and multiplying) popups that they have poisoned the well for all other websites. Remember Jakob’s Law of the Internet User Experience: users spend most of their time on other websites than yours. The cumulative experience from these other sites dictates how users will view your popups: they’ll hate them. And since brand is experience in the digital age, every popup experience will degrade their opinion of your brand.