Even the best, most creative, most entertaining, most expensive advertisements are nothing more than interruptions. The viewer did not ask for them and often does not want to see them. But pop-up ads—as the name implies—have a reputation for being especially intrusive. Like a jump scare in a horror movie, they’re an in-your-face surprise. This is why exceptional pop-up design is important: it can make the pop-up not only tolerable but persuasive.
Despite their potential for aggravating site visitors, pop-ups have stuck around for good reason: their conversation rate can average 9% at top performance according to research by Sumo. This makes designing good pop-ups not only essential for mitigating the user’s frustration but for business success. With that in mind, let’s walk through some best practices on how to create pop-up designs that convert.
1. Weigh your options for pop-up design styles
The most basic and common pop-up is the square window appearing in the center of the screen. The advantage here is that it is impossible to miss. Of course, that’s only because it cuts directly across the user’s vision. While there’s nothing particularly wrong with a traditional pop-up, it is often used as the default when there are so many other (potentially more effective) options to consider.
A pop-up can appear at any place on the screen, and each position will carry implications about the nature of the information. The standard front-and-center approach tends to signify something important enough that you are willing to interrupt the user’s browsing. It is typically used for immediate purchases or paywalls on content (as in online journalism).
Conversely, pop-ups can slide in from the top or bottom of the screen, allowing the user to continue interacting with the site while the pop-up is present. With this approach, the visitor can choose when they want to engage with the pop-up, and they are incentivized to do so sooner rather than later if the pop-up covers enough of the page to be distracting. This approach is often used for less pressing actions, such as getting a visitor to enter their email address.
Finally, a pop-up can also appear on the side or in the corner of a page. Given how unobtrusive this approach is, it is generally used for optional content such as instructional tips.
Design by Burhan Khawaja via Dribbble.
Another sometimes overlooked design consideration is animation—how a pop-up arrives on screen can make a huge difference in how it is received. A fade up, for example, is much softer and less jarring than a sudden overlay. A literal pop and bounce animation, meanwhile, feels fun and friendly. Higher effort approaches—like having the different elements of the pop-up appear through separate, unique animations—make the pop-up feel less like an ad and more like a worthwhile, creative feature of the website.
2. Keep the pop-up in line with branding
As if being a pop-up window isn’t attention-grabbing enough, pop-ups (and the desire for immediate conversion) often create the temptation for as many bells and whistles as possible. This can lead to designs that overly highlight the call-to-action (CTA), sometimes with literal arrows, or bold several lines of copy or overuse the color red, all to make extra sure that the user does not miss the sales pitch.
Tactics like these tend to be reminiscent of the Wild West that was the 90s internet, when early pop-up ads were loud and proud with clashing colors and blinking text. They were so bad in fact that the original creator of pop-ups has since apologized to the world. In addition, brands are not alone in using pop-ups—scammers often use ubiquitous pop-ups with alarmist, attention-grabbing designs to trick users into downloading malware.
For these reasons, designers should feel free to let the pop-up conform to the rest of the site branding, even if this results in a more subdued style. Use visual hierarchy to prioritize information and compelling images to entice the viewer’s attention. Not only will this lead to a cleaner looking design, it will establish the pop-up’s credibility so that it comes across as an opportunity and not a trick. All in all, designs that feel that they need to use gimmicky, off-brand techniques to elicit attention signal a lack of confidence in the value of the pop-up’s offer.
3. Use color and shape language effectively
A pop-up’s ad copy—provided it is well written—should be doing the work of persuading a user to perform an action. But words are not the only tools your pop-up has to communicate: visual design elements like color and shape can reach viewers at an emotional level.
If you want to reduce the irritation a pop-up might induce, a calming color like blue or green or some form of pastel can accomplish this. Pure white, meanwhile, can elicit a clean and uncluttered feeling, especially when combined with plenty of space between elements. In terms of shape, pop-up windows—like any computer window—are by default rectangular or square. Changing this to a more rounded shape makes the design appear approachable and friendly given the lack of sharp edges.
Whatever shape or color you decide to go with, it is important that you are aware that your choices are speaking to the viewer, whether you intend them to or not.
4. Keep the content of your pop-up clear and to the point
Because pop-ups are by their nature interruptions, the common knee-jerk response users have is to close them immediately. It is hard enough to persuade visitors to click a CTA under the most ideal circumstances, but pop-ups have an especially small window of time to accomplish their goals. This leads to pop-up design styles that are largely minimalist—clear and to the point. The value of the action you want the user to perform should be obvious at a glance.
In terms of basic structure, it is recommended that a pop-up contains the following:
- A headline announcing the offer or subject of the pop-up
- Supporting copy expanding on the value of the offer
- A compelling image
- Close button
In reality, some pop-ups may need to include more (such as an input field for emails) and many choose to include less (such as ditching the supporting copy or image). Ultimately, it depends on what you are trying to accomplish and how likely your site visitors will stick around to hear your case. Skip ahead to #7 for tips on testing to better understand your viewers.
5. Don’t neglect the close button
Pop-up ads are made to convert (or to be in some way useful), not to be closed. But of course, the ability to close is essential to pop-up design. It’s a matter of good user experience to ensure the user can perform the actions they need to, even if they are actions you don’t necessarily want them to perform.
In terms of design, a simple X in the top right corner will usually suffice. Even if this isn’t the most original design choice, it is the most natural place that a user will look for it. Many designers grey out the close button, and this can be a useful tactic—the ability to exit shouldn’t be hidden, but it also doesn’t have to be the most prominent thing on the pop-up.
Alternatively, the close button is sometimes presented alongside the CTA in a traditional rectangular button shape. Doing so inevitably detracts from the CTA and emphasizes an either/or choice. At the same time, this can be a good approach if you change the text on the close button to make it clear that the user is not only exiting the pop-up but missing out on something (“I don’t want to save 15%”). Sometimes this is placed underneath the CTA in a smaller type.
At the end of the day, if the user wants to exit the pop-up, the design should just allow them to do so, as any added frustration with the pop-up will translate to frustration with the brand. In other words, if you’re going to lose the battle, set yourself up to win the war through good user experience.
6. Design separately for mobile versions
Creating a mobile version of a pop-up involves much more than scaling down the design. The mobile experience is drastically different from the desktop experience.
First, in addition to a smaller size, you should consider aspect ratio: mobile phones are in a portrait orientation whereas desktops are in landscape. This means designs (and especially the copy) must read well in a taller, narrower window. In addition, the visitor will largely default to using one hand and one thumb. This means that form fields—which should be limited enough on desktop pop-ups—will be even more cumbersome for the user. Additionally, pop-ups that appear closer to the bottom of the screen will be easier for the thumb to reach.
Mobile design is not all about restrictions, however: mobile websites also come with more forms of input than desktop—such as swiping, pinching and tapping at different pressures—and pop-up designs can use this for more unexpected interactions.
Mobile pop-ups are commonly placed towards the bottom of the screen. Design by Oğuz Yağız Kara via Dribbble.
All of this is to say that even if you already have a desktop version of your pop-up designed, you must dedicate effort to a separate mobile version. Many designers these days adopt a mobile-first approach in digital design (in which the mobile version is created before the larger screen sizes), and there’s no reason why you can’t approach pop-up design the same way. Doing so allows you to start simple and add on detail as the screen size increases (as opposed to the Sisyphean task of simplifying a detailed version of the design).
7. Adjust your pop-up design based on testing
While (like all design) there is art involved in pop-up design, it ultimately comes down to performance. The only way you’ll ever know your design is good is if it works: which is to say, it is converting customers. The average conversion rate of successful pop-ups is around 3%.
This is why the most important part of the pop-up design process is testing and analysis. Once you’ve evaluated your design’s performance against your goals (for which, you can use past conversion along with the average conversion rate mentioned earlier), you must act on your findings by adjusting the design. A particularly popular method is the A/B test, in which you put two different versions of a design in front of two different segments of users to see which performs better. You can use A/B tests to vary specific elements of the design to discover which recipe might lead to higher conversion.
The bottom line is that it doesn’t matter how great your pop-up looks to you or how theoretically well designed it is—what matters is what your visitors think.
Level up your pop-up design
Pop-ups are not inherently a nuisance for the user to deal with. Like so many other elements of a digital interface, it is the design that decides whether or not the experience is a pain or a pleasure. It’s all a matter of perspective: a pop-up design can either interrupt a viewer with an ad or alert them to an opportunity. While the tips we’ve provided here are a great place to start in getting pop-ups your visitors will actually appreciate, good pop-up design ultimately depends on working with a good designer.