How to create pop-ups that don’t suck
Make pop-ups that convert, but DON’T drive your visitors away.
Most users hate pop-ups. Especially email pop-ups.
And for a good reason: most pop-ups are designed from an email marketer’s point of view. Their only objective is to maximize the number of emails collected. Period. The problem with this approach is that it ignores all the negative impacts a pop-up can have on a website.
Fortunately, it doesn’t have to be this way.
In this article, I’ll explain how you can create pop-ups that convert, but DON’T drive your visitors away.
Design: Respect UX basic principles
Let’s start with the design of your pop-up. It has to respect UX fundamentals.
Optimize the loading time
Website loading speed matters a lot. 47% of consumers expect a web page to load in 2 seconds or less. And an email pop-up that you display on your website adds to the list of elements which are loaded on the user’s side.
To make sure your pop-up doesn’t slow down your website, we recommend you follow these rules:
- Use compressed images. You can rely on websites such as CompressJPG to reduce their size.
- Implement your pop-up script at the end of your <body> so that it doesn’t prevent other priority elements of the page from loading.
- If you’re using an in-house solution, use a cache and optimize your script as much as possible.
Include visible closing options
The average conversion rate for our email pop-ups is 6%. That’s great. But if you stop for a second and think, it means that 94% of your visitors close a pop-up without taking action.
As these users represent a vast majority of your visitors, you need to provide a simple way for them to dismiss your pop-up.
Here a few tips that will make their life easier:
- Implement a closing option that is visible (we recommend you use colors that contrast with the pop-up’s background)
- Add a closing link to complement the closing X
- Test on a few different devices to make sure the closing options are accessible
An opt-in pop-up form on Traveldoo.com that includes a visible closing ‘X’
Create mobile-optimized campaigns
Have you heard of ‘fat thumb’ syndrome?
It’s what you experience on a mobile device when the button you’re trying to select is too small and you end up clicking an unrelated item. The same problem can happen with pop-ups.
If you display pop-ups on your mobile site, make sure to respect the following rules:
- Use call-to-actions that are larger than 40 pixels square
- Test your closing options; they shouldn’t be too close to the edge of the screen
- Respect Google’s guidelines for mobile interstitials
A mobile email pop-up on Beyondyoga.com
Size doesn’t always matter
For quite some time, marketers preferred using lightbox pop-ups or fullscreen pop-ups. Their advantage? These formats catch user’s attention.
We successfully tested the power of these formats ourselves, especially on exit pop-ups.
But in some situations, a bar or a smaller pop-up can work better, especially if you display it on more than one page.
An email bar on Wix.com
Don’t always assume a bigger pop-up is better; A/B test different options.
Test your pop-up’s UX
If your pop-up displays well on your own device, that doesn’t mean it will work great on all devices.
It’s important for you to take the time to test your pop-up on multiple browsers, operating systems and devices.
If your time is limited, you can either recruit testers or focus on the most popular configurations. Online tools such as StatCounter can help you identify the top browsers, OS and screen resolutions and make your life easier.
Targeting: Set limits
Most pop-ups are dumb. They appear as soon as you open the website. This is not optimal because the user may not be ready to share her email yet.
Let’s see how you can make your pop-ups smarter.
A pop-up displayed when landing on reddressboutique.com
Test different triggers
You don’t have to display your form as soon as your visitors land on your websites.
You can display it on exit, when your visitors are about to leave – after they have scrolled down your page or when they have spent more than 30 seconds on your website, etc.
Our internal stats show that, on average, exit pop-ups convert 5% better than the ones displayed on landing. This means that your visitors will not only appreciate that you’re not interrupting their navigation, but you’ll end up collecting more emails.
Again, testing different options will help you identify the optimal configuration.
Set frequency limits
Seeing a pop-up once can be irritating if you’re not ready to subscribe. But seeing the same pop-up each time you visit a website is even worse.
As a marketer, you need to make sure to set your pop-up to appear no more frequently than every seven days or so.
We also recommend that you activate a limit for your pop-ups. After your user has seen your pop-up five times without converting, we can assume they will never convert. So why not set a limit?
A screenshot of the frequency and capping settings available in WisePops
Exclude your existing subscribers as well. This could sound obvious, but a lot of marketers forget it. If your pop-up solution doesn’t offer this option, at least make sure to exclude users who come from your newsletter by excluding the URLs that include your newsletter’s tracking code.
Wording: Keep it short and simple
Pop-ups are simply the combination of a background, a call-to-action, a form, and… wording.
And, from a user’s standpoint, the wording is just as important as the rest of your campaign. That’s why you need to optimize it.
Use FOMO sparingly
If you’re not familiar with FOMO, it’s the fear of missing out. Marketers use it to prompt users to take action immediately instead of reporting their decision. It usually plays on the suggestion that users can benefit from a one-time opportunity that may be not be presented again.
Here’s an example on TheNewYorker.com. The magazine replaced the traditional closing X with a long closing call-to-action: “I don’t want the latest from The New Yorker.”
The closing link plays on the user’s fear of missing out on the latest stories.
The problem? As a user, it takes longer to read and is harder to close. I have to read the entire pop-up to find the closing link. It makes sense from a marketer’s perspective, but I’m pretty sure the NY’s visitors will hate it.
Keep it short
Let’s start this section with an example that I found on Lancome.com.
Its problem?
There’s too much information! The text lists the discount, the conditions that apply to the discount, the full list of benefits for subscribers and a terms notification… All when it could simply mention the discount and exclusive benefits.
When crafting your copy, think as a user. How much time does it take to read the pop-up? Does it state clearly and simply the benefits for potential subscribers? Is there anything you could remove and/or simplify? Ask yourself these questions, and adjust your copy accordingly.
Optimize for reading
Most readers read a webpage the same way. Knowing this, you can adapt your pop-up copy to make it easier to read.
There are two recommended patterns to optimize visual content: the F pattern and the Z pattern.
Make sure to have them in mind when organizing your pop-up content. Position your headline at the top and the final call-to-action at the bottom. Position secondary elements on the right.
Analysis: Metrics
This is probably the most important part of this article, because the metrics you choose to evaluate your pop-up strategy are very important to evaluating its success, especially when it comes to measuring the impact of your pop-up on the UX.
Look at the big picture
Most pop-up users are email marketers.
This thread on Reddit sums up their attitude pretty well:
In the debate about pop-ups, marketers always bring up the same argument. Pop-ups bring a lot of subscribers. I won’t deny this claim, because most of the time it’s true, and it’s a good reason to use pop-ups.
But this vision is a bit limited. To fully assess the success of your pop-up strategy, we recommend including additional elements.
To evaluate the impact of your pop-up on the user experience, you can monitor its impact on your average session duration and on the bounce rate. These two metrics will tell you right away if users leave your website earlier because of your pop-ups.
To evaluate their impact on your email marketing efforts, you can monitor the opening rate and reactivity rate of the emails you send to the users who subscribed through your pop-up. This will help you make sure that your new subscribers are really interested in your brand.
Set up control groups
One way to evaluate the impact of pop-ups is to look at your metrics before and after you implemented them. But it can be difficult to compare because of seasonal effects. And if you decide to implement pop-ups for good, you’ll lose your reference.
So in the long run, it makes more sense to set up a control group. A control group is a portion of your traffic which won’t see your pop-up. With this control group, you’ll have a reliable way to compare your website performance with and without pop-ups.
Wrap-up
I hope this article will have convinced you that pop-ups don’t have to be annoying.
Luckily, a growing number of marketers are taking their users’ opinions on pop-ups into consideration. This trend is reflected in the increasing share of smaller and smarter pop-ups.
Let’s hope it’s only the beginning!
A subtle side pop-up on Iterable’s blog
Deliver exceptional digital experiences with UserZoom
