“Design is more than just a few tricks to the eye. It’s a few tricks to the brain.”
This quote by famous designer Neville Brody sums up what pop-up design is all about.
When designing pop-ups, you must both please the eye of your visitors and convince them to take action.
Let’s review how you can do it.
Ready for better pop-ups?
First things first: why pop-ups matter in the first place
If you’re new to website pop-ups, it’s important to start from the beginning.
Why use pop-ups in the first place?
Email marketing is king…
Their importance lies in the success of email marketing. Email is still the number 1 way to generate online sales.
The numbers speak for themselves: 81% of North American adults check their email at least once a day. 38% of them check them more than 3 times a day.
Not only do people check their email, they’re also interacting with them. About 4% of emails opened lead to a visit.
Compared to the 0.35% click-through-rate of the display ads or the 1.91% of AdWord ads, it gives us a good idea of the trust online customers put in the emails they receive.
That probably explains why email is still considered the most profitable communication channel by online marketers.
…And pop-ups are its best ally
Email marketing is key to turning visitors into buyers.
But before you can actually send emails, you need to build your email list.
That’s when things get complicated.
Depending on the sources, the average sign-up rate (the percentage of visitors subscribing to a newsletter) ranges from 0.5 to 2%.
That may sound pretty low. But a quick example will explain why.
Let’s take Under Armour’s home page. Their sign up form is at the bottom of a 4,290 pixel-long page (that’s the small rectangle we highlighted at the bottom):
According to Chartbeat data, less than 5% of visitors will see an element placed so far away from the top of the page.
That’s when opt-in pop-ups make their entrance.
Our internal stats show that using opt-in pop-ups marketers convert on average 5.9% of the people who see them into subscribers.
Why are pop-ups so powerful?
First, because users have fewer chances to miss them.
Second, because they can be combined with advanced targeting scenarios to improve their efficiency.
And lastly, because they allow more creativity than traditional forms.
Speaking of creativity, let’s see how design can help you create better pop-ups.
Part two: 7 rules to design pop-ups which convert
Pop-up design is not something to overlook.
Firstly because like any element of your website, they contribute to your brand’s perception.
This example says it all. No visual, a format that you’ve seen on lots of websites, boring colors.
As a visitor, I wouldn’t perceive the brand who displays this pop-up as innovative or creative.
Assessing this aspect of pop-ups is difficult as it’s widely subjective.
On the other hand, the impact of design on the performance of pop-ups themselves can be quantified.
Let’s take these 2 sweepstakes pop-ups from one of our clients, a large personal finance company. Our client AB tested these two pop-ups: one with a plain background, the other with a Christmas-themed background.
 |
 |
The version on the right got 11% more clicks.
In other words, by simply adding a pattern to the background they collected 11% more leads.
Here’s another example from a different client, a box subscription company.
They tested adding a picture of one of their customers to their email pop-up.
The results? +5.6% of emails collected in the version with the picture
 |
 |
Now, let’s see how you can maximize the results of your pop-ups.
Rule 1: prepare a specific design for mobile
Let’s start with a basic rule: create separate designs for mobiles and desktops.
First motivation for keeping separate campaigns? Google’s mobilegeddon.
Early 2017, Google updated its algorithm to penalize websites which used intrusive pop-ups. Google’s objective with this release was to help users access the content of mobile pages.
Here are some examples of the kinds of interstitials that should be avoided on mobile according to Google’s new rules:
And here’s a real-life example of such a mobile pop-up on Lee’s British website. The pop-up displayed on landing clearly hides the page content.
It makes sense to create separate campaigns for UX reasons as well.
On mobiles, we use touch instead of mouse pointers. What this means is that controls must be larger to be actionable. Apple recommends in their guidelines using controls that are at least 44 pixels squared to make sure they’re easy to tap.
Space is also more limited on smartphones. Statcounter data on screen resolutions highlights the gap:
- For mobiles, the most popular resolution is 360×640 resolution.
- On desktops, the most popular resolution is 1366×768.
This means you can’t use long sentences or large pictures for your mobile campaigns.
Let’s see how this translates in practice with Dockers.
Here’s their desktop pop-up. It’s a large lightbox taking over the entire screen.
Now, take its mobile equivalent. A small pop-up displayed at the bottom of the screen.
Rule 2: pick the right format
There are quite a lot of pop-up formats. Let’s review them and see when they work best.
Let’s start with side pop-ups. These pop-ups, as their name suggests, are displayed on the side of the screen. They’re non-intrusive, which means you can use them on landing without any risk for your conversion rate. We recommend them if you worry pop-ups could degrade your user experience.
Lightbox pop-ups are quite the opposite of side pop-ups. Displayed on top of an overlay which blurs or dims the background and positioned at the center of the screen, they’re very visible and intrusive. We recommend them on desktops when you’re collecting emails on exit. Being unmissable they maximize the chances your visitors will see your message, even when they’re about to leave.
Closer to the side pop-up format, we have email bars. Displayed on top or at the bottom of the page, they provide a subtle invitation to sign up. If they don’t take too much screen estate, you can display them over a few pages of the same session (here an email bar on Negative Underwear’s website)
Let’s finish with the least intrusive format: call-to-action pop-ups.
These pop-ups are preceded by a call-to-action. The modal itself won’t show up until the user clicks the call-to-action. They’re particularly adapted to mobile screens and are your best option on these devices (in an AB test we did with Skechers, CTA pop-ups outperformed other pop-up formats by +48%).
Moreover, as they take limited space, you can display them on every page of your website which increases your chances of converting your visitors.
 |
 |
Rule 3: use visuals (on desktop)
Visuals play a big part in email pop-up success.
First, because they make them more appealing. Here’s a quick illustration:
| A side pop-up on Southern Marsh Collection | A lightbox pop-up on Maison Talulah |
 |
 |
They can also help you raise your visitors’ interest and get them to focus on your message.
Let’s take this opt-in pop-up on Carbon38. The visual grabs our attention right away. And as the model is looking towards the pop-up, our attention is then diverted to the pop-up and its main message.
Of course, you can’t always afford a photo shoot for these visuals. If that’s your case, feel free to explore image banks. Some of them like Unsplash or Pixabay provide free high-definition pictures that you can reuse.
Let’s close this section on visuals with a quick note about mobiles. Again, when it comes to visuals, mobiles should be treated differently. On average, the bandwidth available to mobile visitors is almost 3 times lower than those available to people browsing from a fixed connection (source). Visuals on mobile pop-ups may just take too much time to load. So we recommend avoiding them and sticking to basic HTML elements.
Rule 4: match your colors and fonts
One risk, when using pop-ups, is to have your visitors confuse them with an ad. After all, some websites have been using the same kind of formats to display ads.
To avoid this kind of confusion, there’s one simple rule to follow: use elements which show that the content they’re seeing is part of your website. Visuals and logos can be a first option.
But you can also rely on the colors and the font family. Here’s an example on Society6’s blog.
Rule 5: hierarchize your content
Think of the whole subscription process as a funnel:
- Step 1: your user pays attention to your message
- Step 2: she acknowledges the benefits associated with a subscription
- Step 3: she makes sure it’s safe to join (optional)
- Step 4: she takes action
All the elements of your pop-ups should be hierarchized to push your visitors through this funnel (example taken from Inkbox):
And here’s another example with step 3 (example taken from WorldOfWatches):
To hierarchize your elements, you can rely on a few techniques:
- Position the element which will grab the attention at the top or on the upper side of the popup
- Make your attention grabber and your headlines are bigger than the other elements of the pop-up
- Make your call-to-action visible
The last point makes an excellent transition to the sixth rule.
Rule 6: use contrasting colors for your call-to-actions
Remember the last step of the signup process?
Take action!
To drive action, we must make sure your call-to-action is visible.
To do so, we recommend using a color which contrasts with the rest of the pop-up. Here’s an illustration on DOSE:
Flash colors are also more than welcome. Here’s an example on MeUndies:
Rule 7: add actionable closing options
As a visitor, being stuck with a pop-up that you can’t close is a frustrating experience (I believe we’ve all been there).
That’s why as a marketer, you need to allow the user to dismiss your pop-up easily.
Let’s take a look at a counterexample of this. This pop-up on Schott NYC is very difficult to dismiss as the closing X is very close to the edge of the screen and it’s very small.
By contrast, here’s a good example of what should be done on Under Armour:
Wrap-up
Today we shared some basic design principles.
If you want to bring your pop-up design to the next level, we recommend you experiment through continuous AB testing. Start with the obvious (formats, positions) and progress until you’ve tested every element of your popup.
Read more: Windows Pop-Up Legit