If you want to craft a delightful marketing experience and you’re using popups, you need to make sure you hold them to the same high standards as the content they are covering up. You can learn a lot by looking at bad website popup examples.
Once you understand what not to do, you’ll default to starting your own popup designs from a better baseline.
What does a bad popup design actually look like?
Well, it depends on your judging criteria, and for the popup examples below, I was considering these seven things, among others:
- Clarity: Is it easy to figure out the offer really quickly?
- Relevance: Is it related to the content of the current page?
- Manipulation: Does it use psychological trickery in the copy?
- Design: Is it butt ugly?
- Control: Is it clear what all options will do?
- Escape: Can you get rid of it easily?
- Value: Is the reward worth more than the perceived (or actual) effort?
#1 – Weather Channel Rudeness
What’s so bad about it?
Okay, I get it Weather.com, ads are one of, or your only, revenue stream. There are plenty of sites who ask you to turn off an ad blocker to read the full article. I don’t have a problem with it, and the main paragraph of text here is okay.
What I *do* have a problem with is the copy on the CTA. “Turn off your ad blocker”.
Really? You can’t even say please? That’s just obnoxious.
Fun fact, the Canadian version of the site doesn’t have this popup. Go figure. 😉
(I had to VPN to get the U.S. version.)
If you peer into the background behind the popup, you’ll see a news story headline that begins with “Nightmare Alert”. I think that’s a pretty accurate description of what’s happening here.
- |1736d82ac5d13e16a7c49223584451f7| The first thing I saw looks like a big mistake. The Green line with the button hanging off the bottom looks like the designer fell asleep with their head on the mouse.
- |b0c27ea45c38c11f7dce1072d35a6c1d| And what on earth does the headline mean? click.click.click. Upon deeper exploration, it’s the name of the newsletter, but that’s not apparent at all on first load.
- |d54a109ba19a450312691c0f8b8411c0| Then we get the classic “Clear vs. Clever” headline treatment. Why are you talking about the pronunciation of the word “Gif”? Tell me what this is, and why I should care to give you my email.
- |1736d82ac5d13e16a7c49223584451f7| Also, that background is gnarly.
It’s motorsports. It’s not a revolution. Unless they’re talking about wheels going round in circles.
- |b0c27ea45c38c11f7dce1072d35a6c1d| The headline doesn’t say what it is, or what I’ll get by subscribing. I have to read the fine print to figure that out.
- |353fc06ac9d4395e24b76ec2e3aee5e6| Just reading the phrase “abuse your email” is a big turn off. Just like the word spam, I wasn’t thinking that you were going to abuse me, but now it’s on my mind.
- |d562efa326399d38eedc37ef2b18788b| Newsletter subscription popups are great, they have a strong sense of utility and can give people exactly what they want. But I don’t like them as entry popups. They’re much better when they use an exit trigger, or a scroll trigger. Using a “Scroll Up” trigger is smart because it means they’ve read some of your content, and they are scrolling back up vs. leaving directly, which is another micro-signal that they are interested.
(Source unknown – I found it on confirmshaming.tumblr.com)
I have no earthly clue what’s going on here.
- |b0c27ea45c38c11f7dce1072d35a6c1d| I had to re-read it five times before I figured out what was going on.
- |dc867926671875fa145be037ce9ef2dc| After reading it, I didn’t know whether I would be agreeing with what they’re going to give me, or with the statement. It’s like an affirmation or something. But I have no way of knowing what will happen if I click either button. My best guess after spending this much time writing about it is that it’s a poll. But a really meaningless one if it is. Click here to find out how many people agreed with “doing better”…
- It ends with “Do Better”. I agree. They need to do a lot better.
- |fceb4bb81abebc8ed24b149dccac901e| Our first “Confirm Shaming” example. Otherwise known as “Good Cop / Bad Cop”. Forcing people to click a button that says “Detest” on it is so incongruent with the concept of a mattress company that I think they’re just being cheap. There’s no need to speak to people that way.
- |65bc588f0a2a738d4ac5fa8ef28d9433| (below), and have to give them credit. The copy on this one is significantly more persuasive. Get this. If you look at the section I circled (in purple), it says that if you subscribe, they’ll keep you up to date with SHIPPING TIMES!!! Seriously? If you’re going to email me and say “Hey Oli, great news! We can ship you a mattress in 2 weeks!”, I’ll go to Leesa, or Endy, or one of a million other Casper copycats.
Context: This is an entry popup, and I have never been to this site before.
- |d562efa326399d38eedc37ef2b18788b| The site is Hellobc.com, the title says “Supernatural British Columbia”, and the content on the page is about skydiving. So what list is this for? And nobody wants to be on a “list”, stop saying “list”. It’s like saying email blast. Blast your list. If you read the first sentence it gets even more confusing, as you’ll be receiving updates from Destination BC. That’s 4 different concepts at play here.
- |1736d82ac5d13e16a7c49223584451f7| It’s legitimately butt ugly. I mean, come on. This is for Beautiful Supernatural British Columbia ffs. It’s stunning here. Show some scenery to entice me in.
- |cacdc372599694461ade5952183162b7| Seeing that form when I arrive on the page is like a giant eff you. Why do they think it’s okay to ask for that much info, with that much text, before I’ve even seen any content?
- |dc867926671875fa145be037ce9ef2dc| And there’s not any error handling. However, the submit button remains inactive until you magically click the right amount of options to trigger it’s hungry hungry hippo mouth to open.
Well, that’s all for today, folks. You might be wondering why there were so few popup examples in this post. Honestly, when the team was rallying to find me a bunch of examples, we all struggled to find many truly awful ones. We also struggled to find many really awesome ones.
This is where YOU come in!|53edd38be31f195fa8d7018ba13559b5|
If you have any wonderfully brutal, or brutally wonderful examples of website popup design, I’d really appreciate a URL in the comments. If you could share the trigger details too that would be rad (e.g. exit, entrance, scroll, delay etc.).|41bd38e56261b17f92891868142f168b|
So get your butt back here same time tomorrow, where I’ll be sharing my brand new |778bc950211e14616d9e412560b83e72| that you can use to grade your own popup designs.
p.s. Don’t forget to subscribe to the weekly updates.
~ Thomas Jefferson