Popups are an incredibly powerful tool for generating website conversions and increasing sales. But more often than not, they’re poorly designed, annoying, and seem completely irrelevant. On top of that, unless you’re willing to shell out for a developer, they all tend to look the same. Don’t worry! Today we have some inspiring pop-up examples to help you design gorgeous pop-ups that work like magic for your online store.
Unless you’re willing to get creative.
For whatever reason, we often forget pop-ups are just as much part of your brand’s image as your website itself. In fact, if pop-ups are a big part of your online marketing, I’d argue their functionality and design are even more important.
The good news is because you can customize pop-ups to the visitor, the sky’s the limit.
Keep reading to learn about what mistakes to avoid in a pop-up’s UX and what design elements can help you stand out from the crowd.
First, the Ugly
Unfortunately, most pop-ups fall into this category.
The biggest mistake we see in the pop-up world are marketers, entrepreneurs and even designers using templates and never customizing them.
Seriously, how many times have you seen this bad boy…?
Or this one?
The problem with templates isn’t necessarily the design itself; it’s that there’s literally no way to differentiate them from your competitor.
You wouldn’t settle for a non-customized website template, right? Then why settle for an out-of-the-box pop-up?
These templates are attractive on their own, but they were never meant to be used without changes. When visitors see the same pop-up over and over, you’ve created a recipe for a generic brand. And no one wants that.
On top of that people have developed what is called “banner blindness” and we believe it applies to to pop-ups, too.
So what’s the solution?
Most tools are easy to customize so that you can add your own fonts, brand colors, and imagery. Don’t be lazy here. To get the conversion rates you want from your pop-ups, it can’t look like a spam box. Your pop-up should seamlessly integrate with your website’s design while including some special touches to bring it to life (more on that below).
And god-forbid, don’t let those pop-ups all appear at once
There’s nothing that puts your pop-up into “annoying” territory than making them pop-up in a million different ways. You want people to take ONE action. Don’t start confusing people.If you’re using multiple apps and systems, do take the time to go through and make sure they’re set to appear once per session. And, god forbid, make them easy to close. No one wants a forced opt-in.
The Bad Pop-up Examples
Sometimes what we think is good marketing, actually makes you look terrible. This is no less true in the pop-up world.
We’re talking about “negative calls to action.”
Negative calls to action = take the opposite of your call to action, and create an opt-out link instead of an easy exit.
If a reader isn’t interested, this is a slightly guilt-inducing opt-out in small print.
For example, if you’re offering a free guide on how to redecorate your home for kids, your NCTA might be, “No thanks, I don’t want a kid-friendly home.”
These little phrases help increase conversions because they make visitors question their choice. It forces users to think twice about whether they actually want to decline your offer.
Some marketers call these “playful” or “irreverent,” think about your brand identity before adding a link like this. Telling your readers that they don’t care about their kids, or don’t want to make more money or don’t like puppies, you’re essentially accusing your readers of not caring about themselves or the world around them.
The problem with NCTA is that they’re inherently bullying, and that’s not the right tonal fit for every brand.
What about teenagers on your junior’s clothing store? Or moms shopping for baby formula?
Again, NCTAs aren’t all bad, but when creating pop-ups, don’t just copy what everyone else is doing—be thoughtful about who you’re targeting and if this direction is the right fit.
Remember, your pop-up copy is just as integral to your UX and brand as your design.
The Good Pop-up Examples
Enough teardowns. Let’s get inspired!
The sky really is the limit with pop-ups, and in our years creating WisePops we’ve stumbled across some crazy inspiring ideas for using pop-ups to boost your brand, rather than take away from it.
Subtle, delightful animations have been one of the biggest value-adds for us. Not only are they pretty to look at, but they increase conversions by drawing attention to the call to action.
For example, check out this bouncing button link on Stripe Checkout:
2. Transparent Backgrounds
Subtle is the new aggressive marketing tactic, which is why we’re obsessed with this new pop-up trend of transparent backgrounds.
It’s the easiest sign-up form ever.
Unlike a traditional pop-up, a fully transparent background gives readers more time to decide if they want to subscribe. Instead of suddenly being given a pop-up in their face and given just a second to decide, these pop-ups are a subtle nudge. You could even add an animation in here, so it’s both subtle and apparent.
We love the simplicity and full website integration.
Plus, they’re gorgeous.
(We created this demo version in WisePops. To do it yourself, choose any template, set it to display in the bottom right, then set the background opacity to 0.)
If you want to include a bit more information, but love the transparency effect, check out this design from Florists.com—a gorgeous integrated design that barely feels like a pop-up!
Part animation, part urgency, countdown pop-ups allow you to create a pop-up with a bonus offer or discount code as a visitor exits the page or abandons their cart. These are great to add a few more conversions to your pop-up.
It’s the internet equivalent of “But wait, there’s more!”
Never are you given such a warm lead than someone who’s actually on the cart right now. They’re interested, but something’s still stopping them.
You can go one of two ways on this:
- Add a line that says something like “Expires in 1 hour” or “You only have 45 minutes!”
- Embed a countdown clock directly on your pop-up. Some of our favorites are this free countdown timer or countingdownto.com.
What special touches have you seen on pop-ups that make them more attractive and successful? Let us know in the comments below.