Popups - do or don't?

Popups - do or don't?

Call it a day...

Daniel Westlake

12 October 2022

Are the days of pop-ups numbered?

It’s not often you’ll hear a tech creator apologise for their work – but that’s exactly what happened in 2014 with pop-up inventor Ethan Zuckerman. In an essay for the Atlantic, he expressed his contrition, telling frustrated internet users everywhere that his intentions to run ads were good.

Since they first came to be way back in the 1990s, pop-ups have always suffered a bad reputation. The first pop-ups were shown to host ads on the website Tripod.com. By the turn of the millennium, pop-up blockers were commonplace.

So, in a world where UX comes first, what are the advantages of pop-ups? How can we convince users that not all pop-ups are synonymous with spam or malicious experiences?

Done right, pop-ups can add valuable touchpoints to the user journey. It’s all about understanding where to use them, and how to guarantee a smooth user experience.

Pop-up vs modal

Not all pop-ups are made equal. You may have heard of modal vs pop-up vs overlay, but essentially it comes down to two key differences:

  • A modal or modal window is an element that displays in front of all other page content, rendering the other content inaccessible. If this content is dimmed, this pop-up is known as a ‘lightbox’.

  • A non-modal pop-up is an element that is displayed over content, but still allows users to interact with other elements on the page.

Generally, we hear the term ‘pop-up’ to describe both. But there are subtle differences between these, from web vs mobile applications to specific calls-to-action.

Modal window radius

Types of pop-ups

You’ve probably heard a million reasons why pop-ups are bad – but done properly, they can increase conversions and re-engage users.

Popovers

Popovers appear in mobile applications. They provide a brief notification over the top of other content when users click on a certain area. They might add extra information or functionality, for example, calendar event popovers.

Popover
Why users get frustrated

With these pop-ups, there’s no guarantee whether or not a user’s input will be saved when they exit. If they click outside of the popover, it will automatically close – so they are left none the wiser. 

If there are multiple popovers, this can be even more confusing for the user, and they may not understand what element they’ve opened.

How to improve popovers
  • Make sure the popover is in the right place, with arrows pointing directly to the right element.

  • Use close and cancels effectively, making sure progress is only lost if users click cancel.

  • Don’t add another element on top of the popover.

  • Don’t use popovers to show warnings, as users may click on them.

Entry pop-ups

Entry pop-ups appear on websites as soon as a webpage loads. Usually, you’ll find these on ecommerce sites, where they might alert users to promotions or email sign-ups. They may also appear on sites that rely heavily on advertising, such as news and publishers.

Entry radius
Why users get frustrated

Entry pop-ups appear before anything else, so they can block the viewer from using the page as they’d intended. Likewise, it’s often not clear how to exit an entry pop-up – such as hidden ‘X’ symbols. In slow-loading sites, entry pop-ups may be delayed, which means the user might be in the middle of something when they appear.

How to improve entry pop-ups
  • Use entry pop-ups sparingly – for example, a 10% off discount to new users on ecommerce sites.

  • Make sure the design is clear with a simple, visible exit button.

  • Personalise the pop-up so that users get a relevant experience, such as non-subscribers being invited to sign up to an email newsletter.

Exit intent pop-ups

Exit pop-ups appear just as the user is about to leave a website. The site detects when the user is about to leave, for example, hovering their mouse near the ‘X’ button or address bar. This ‘exit intent’ pop-up may try to convince users to stay.

Exit intent radius
Why users get frustrated

These pop-ups might appear at the wrong time, for example, before the user has done anything meaningful. They also stop the user from leaving, which can be considered annoying.

How to improve exit intent pop-ups
  • Allow users to give feedback after they have completed specific tasks, rather than simply exiting the website.

Allow location tracking

Allow location tracking is a notification appearing in mobile applications from iOS 13 or AP1 and above. It asks users whether or not they consent to having their location tracked while using an app.

Allow tracking device
Why users get frustrated

Location tracking is an overused feature, and sharing one’s location doesn’t always enhance the app functionality. Likewise, this can cause safety concerns, as we’ve seen in the past with apps like Tinder.

How to improve allow location tracking pop-ups
  • Ask users to track their location only if it will enhance the app – for example, with running and cycling apps.

  • Avoid privacy and safety issues by making location sharing specifically opt-in.

Allow notifications

We see permissions for notifications popping up on mobile apps and websites. These ask the user if they would like a notification when something happens, for example, if a full gym class becomes available on a class booking app.

958350b3 7bb1 4c3c b32d ea5478af37db 321x628
Why users get frustrated

These consent pop-ups often appear when users open a mobile app or website for the first time. At this stage, they may not know if they want to allow notifications.

Sometimes, these pop-ups appear more than once despite the user opting out of notifications. Too many notifications can be distracting.

How to improve allow notifications
  • Make sure you only ask once, and respect the user’s preferences.

  • Use notifications to genuinely add value to the user experience, not to bombard them at every opportunity.

So, are the days of pop-ups numbered?

While we can appreciate the disadvantages of pop-ups, we can also see the benefits. What’s essential, as ever, is to consider user advocacy – putting yourself in the user’s shoes and acknowledging how they would feel about these pop-ups.

Use them sparingly, and only to guide website or app visitors along their journey. Do it right, and you won’t have to apologise.

Yellow background with wavy top

Articles, tips and knowledge delivered straight to your inbox

Yellow background with wavy top

Articles, tips
and knowledge delivered straight to your inbox

Yellow background with wavy top

Articles, tips and knowledge delivered straight to your inbox