Tag Archives: overlays

5 Really Bad Website Popup Examples

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 examples below, I was considering these seven things, among others:

  1. Clarity: Is it easy to figure out the offer really quickly?
  2. Relevance: Is it related to the content of the current page?
  3. Manipulation: Does it use psychological trickery in the copy?
  4. Design: Is it butt ugly?
  5. Control: Is it clear what all options will do?
  6. Escape: Can you get rid of it easily?
  7. Value: Is the reward worth more than the perceived (or actual) effort?

The following popup examples, each make a number of critical errors in their design decisions. Take a look, and share your own worst popup design examples in the comments!


#1 – Mashable Shmashable

What’s so bad about it?

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.

  • Design: Bad. 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.
  • Clarity: Bad. 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.
  • Clarity: worse. 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.
  • Design: Bad. Also, that background is gnarly.

#2 – KAM Motorsports Revolution!

What’s so bad about it?

It’s motorsports. It’s not a revolution. Unless they’re talking about wheels going round in circles.

  • Clarity: Bad. 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.
  • Copy: Bad. 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.
  • Relevance: Bad. 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.

#3 – Utterly Confused


(Source unknown – I found it on confirmshaming.tumblr.com)

What’s so bad about it?

I have no earthly clue what’s going on here.

  • Clarity: Bad. I had to re-read it five times before I figured out what was going on.
  • Control: Bad. 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.

#4 – Purple Nurple

What’s so bad about it?

  • Manipulation: Bad. 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.
  • I found a second popup example by Purple (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.


#5 – Hello BC

What’s so bad about it?

Context: This is an entry popup, and I have never been to this site before.

  • Relevance: Bad. 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.
  • Design: Bad. 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.
  • Value: Bad. 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?
  • Control: Bad. 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.

Train. Wreck.


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!

Send me your terrible and awesome popup examples!

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.).

Tomorrow’s Post is about Awesome Popup Examples! YAY.

So get your butt back here same time tomorrow, where I’ll be sharing my brand new Popup Delight Equation that you can use to grade your own popup designs.

Cheers,
Oli

p.s. Don’t forget to subscribe to the weekly updates.

Source article – 

5 Really Bad Website Popup Examples

Technology isn’t the Problem, We Are. An Essay on Popups + 5 Horrific Popup Examples

Before I bring the heat, I want to talk a bit about what it’s like, as a marketer, to be marketing something that’s difficult to market.

You see, there’s a common problem that many marketers face, and it’s also one of the most asked questions I hear when I’m on the road, as a speaker:

“How do I great marketing for a boring product or service?”

That’s a tough challenge for sure, although the good news is that if you can inject some originality you’ll be a clear winner, as all of your competitors are also boring. However, I think I can one-up that problem:

“How do I do great marketing for something that’s universally hated, like popups?”

We knew we had a big challenge ahead of us when we decided to release the popups product because of the long legacy of manipulative abuse it carries with it.

In fact, as the discussion about product direction began in the office, there were some visceral (negative) reactions from some folks on the engineering team. They feared that we were switching over to the dark side.

It makes sense to me that this sentiment would come from developers. In my experience, really good software developers have one thing in common. They want to make a difference in the world. Developers are makers by design, and part of building something is wanting it to have a positive impact on those who use it.

To quell those types of fears requires a few things;

  • Education about the positive use cases for the technology,
  • Evidence in the form of good popup examples, showcasing how to use them in a delightful and responsible manner,
  • Features such as advanced triggers & targeting to empower marketers to deliver greater relevance to visitors,
  • And most important of all – it requires us to take a stance. We can’t change the past unless we lead by example.

It’s been my goal since we started down this path, to make it clear that we are drawing a line in the sand between the negative past, and a positive future.

Which is why we initially launched with the name “Overlays” instead of popups.

Overlays vs. Popups – The End of an Era

It made a lot of sense at the time, from a branding perspective. Through podcast interviews and public speaking gigs, I was trying to change the narrative around popups. Whenever I was talking about a bad experience, I would call it a popup. When it was a positive (and additive) experience, I’d call it an overlay. It was a really good way to create a clear separation.

I even started to notice more and more people calling them overlays. Progress.

Unfortunately, it would still require a lot of continued education to make a dent in the global perception of the terminology, that with the search volume for “overlays” being tiny compared to popups, factored heavily into our decision to pivot back to calling a popup a popup.

Positioning is part of a product marketer’s job – our VP of Product Marketing, Ryan Engley recently completed our most recent positioning document for the new products. Just as the umbrella term “Convertables” we had been using to include popups and sticky bars had created confusion, “Overlays” was again making the job harder than it should have been. You can tell, just from reading this paragraph alone that it’s a complex problem, and we’re moving in the right direction by re-simplifying.

The biggest challenge developing our positioning was the number of important strategic questions that we needed to answer first. The market problems we solve, for who, how our product fits today with our vision for the future, who we see ourselves competing with, whether we position ourselves as a comprehensive platform that solves a unique problem, or whether we go to market with individual products and tools etc. It’s a beast of an undertaking.

My biggest lightbulb moment was working with April Dunford who pushed me to get away from competing tool-to-tool with other products. She said in order to win that way, you’d have to be market leading in every tool, and that won’t happen. So what’s the unique value that only you offer and why is it important?

— Ryan Engley, VP Product Marketing at Unbounce

You can read more about our initial product adoption woes, and how our naming conventions hurt us, in the first post in the series – Product Marketing Month: Why I’m Writing 30 Blog Posts in 30 Days.

Let’s get back to the subject of popups. I think it’s important to look back at the history of this device to better understand how they came about, and why they have always caused such a stir.

Browser Interaction Models & the History of the Popup

The talk I was doing much of last year was called Data-Driven Design. As part of the talk, I get into interaction design trends. I’ve included the “Trendline” slide below.

You can see that the first occurrence of a popup was back in 1998. Also, note that I included Overlays in late 2016 when we first started that discussion.

Like many bad trends, popups began as web developers started trying to hack browser behavior to create different interruptive interaction modes. I know I made a lot of them back in the day, but I was always doing it to try to create a cool experience. For example, I was building a company Intranet and wanted to open up content in a new window, resize it, and stick it to the side of the screen as a sidebar navigation for the main window. That was all good stuff.

Tabbed browsers have done a lot to help clean up the mess of multiple windows, and if you couple that with popup blockers, there’s a clear evolution in how this type of behavior is being dealt with.

Then came the pop-under, often connected to Malware virus schemes where malicious scripts could be running in the background and you wouldn’t even know.

And then the always fun “Are you sure you want to do that?” Inception-like looping exit dialogs.

Developers/hackers took the simple Javascript modal “Ok” “Cancel” and abused it to the point where there was no real way out of the page. If you tried to leave the page one modal would lead to another, and another, and you couldn’t actually close the browser window/tab unless you could do it within the split second between one dialog closing and the next opening. It was awful.

So we have a legacy of abuse that’s killed the perception of popups.

What if Popups Had Been Built Into Browsers?

Imagine for a moment that a popup was simply one of many available interaction models available in the browsing experience. They could have had a specification from the W3C, with a set of acceptable criteria for display modes. It would be an entirely different experience. Sure, there would still be abuse, but it’s an interesting thought.

This is why it’s important that we (Unbounce and other like-minded marketers and Martech software providers) take a stance, and build the right functionality into this type of tool so that it can be used responsibly.

Furthermore, we need to keep the dialog going, to educate the current and future generations of marketers that to be original, be delightful, be a business that represents themselves as professionals, means taking responsibility for our actions and doing everything we can to take the high road in our marketing.

Alright, before I get to the really bad website popup examples, I’ll leave you with this thought:

Technology is NOT the problem, We Are.

It’s the disrespectful and irresponsible marketers who use manipulative pop-psychology tactics for the sake of a few more leads, who are the problem. We need to stop blaming popups for bad experiences, and instead, call out the malicious marketers who are ruining it for those trying to do good work.

It’s a tough challenge to reverse years of negative perception, but that’s okay. It’s okay because we know the value the product brings to our customers, how much extra success they’re having, and because we’ve built a solution that can be configured in precise ways that make it simple to use in a responsible manner (if you’re a good person).


Follow our Product Marketing Month journey >> click here to launch a popup with a subscribe form (it uses our on-click trigger feature).


5 Really Bad Website Popup Examples

What does a bad popup actually look like? Well, it depends on your judging criteria, and for the examples below, I was considering these seven things, among others:

  1. Clarity: Is it easy to figure out the offer really quickly?
  2. Relevance: Is it related to the content of the current page?
  3. Manipulation: Does it use psychological trickery in the copy?
  4. Design: Is it butt ugly?
  5. Control: Is it clear what all options will do?
  6. Escape: Can you get rid of it easily?
  7. Value: Is the reward worth more than the perceived (or actual) effort?

#1 – Mashable Shmashable

What’s so bad about it?

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.

  • Design: Bad. 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.
  • Clarity: Bad. 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.
  • Clarity: worse. 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.
  • Design: Bad. Also, that background is gnarly.

#2 – KAM Motorsports Revolution!

What’s so bad about it?

It’s motorsports. It’s not a revolution. Unless they’re talking about wheels going round in circles.

  • Clarity: Bad. 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.
  • Copy: Bad. 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.
  • Relevance: Bad. 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.

#3 – Utterly Confused


(Source unknown – I found it on confirmshaming.tumblr.com)

What’s so bad about it?

I have no earthly clue what’s going on here.

  • Clarity: Bad. I had to re-read it five times before I figured out what was going on.
  • Control: Bad. 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.

#4 – Purple Nurple

What’s so bad about it?

  • Manipulation: Bad. 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.
  • I found a second popup example by Purple (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.


#5 – Hello BC

What’s so bad about it?

Context: This is an entry popup, and I have never been to this site before.

  • Relevance: Bad. 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.
  • Design: Bad. 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.
  • Value: Bad. 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.
  • Control: Bad. 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.

Trainwreck.


Well, that’s all for today, folks. You might be wondering why there were so few popup examples in this post, keep reading and I’ll explain why.

Coming Up Tomorrow – Good Popups, YAY!!!

One of the most interesting things I’ve noticed of late is that there is a shift in quality happening in the popup world. When the team rallied to find the bad popup examples above, we found at least 10x as many good ones as bad. That’s something to feel pretty good about. Perhaps the positive energy we’re helping to spread is having an impact.

So get your butt back here tomorrow to see 20+ delightful website popup examples. More importantly, I’ll also be sharing “The Delight Equation”, my latest formula for measuring quantifying how good your popups really are.

See you then!

Cheers
Oli

p.s. Don’t forget to subscribe to the weekly updates.

Continue reading:

Technology isn’t the Problem, We Are. An Essay on Popups + 5 Horrific Popup Examples

Lessons Learned From 2,345,864 Exit Overlay Visitors

sup

Back in 2015, Unbounce launched its first ever exit overlay on this very blog.

Did it send our signup rate skyrocketing 4,000%? Nope.

Did it turn our blog into a conversion factory for new leads? Not even close — our initial conversion rate was barely over 1.25%.

But what it did do was start us down the path of exploring the best ways to use this technology; of furthering our goals by finding ways to offer visitors relevant, valuable content through overlays.

Overlays are modal lightboxes that launch within a webpage and focus attention on a single offer. Still fuzzy on what an overlay is? Click here.

In this post, we’ll break down all the wins, losses and “holy smokes!” moments from our first 2,345,864 exit overlay viewers.

Psst: Towards the end of these experiments, Unbounce launched Convertables, and with it a whole toolbox of advanced triggers and targeting options for overlays.

Goals, tools and testing conditions

Our goal for this project was simple: Get more people to consume more Unbounce content — whether it be blog posts, ebooks, videos, you name it.

We invest a lot in our content, and we want it read by as many marketers as possible. All our research — everything we know about that elusive thing called conversion, exists in our content.

Our content also allows readers to find out whether Unbounce is a tool that can help them. We want more customers, but only if they can truly benefit from our product. Those who experience ‘lightbulb’ moments when reading our content definitely fit the bill.

As for tools, the first four experiments were conducted using Rooster (an exit-intent tool purchased by Unbounce in June 2015). It was a far less sophisticated version of what is now Unbounce Convertables, which we used in the final experiment.

Testing conditions were as follows:

  1. All overlays were triggered on exit; meaning they launched only when abandoning visitors were detected.
  1. For the first three experiments, we compared sequential periods to measure results. For the final two, we ran makeshift A/B tests.
  1. When comparing sequential periods, testing conditions were isolated by excluding new blog posts from showing any overlays.
  1. A “conversion” was defined as either a completed form (lead gen overlay) or a click (clickthrough overlay).
  1. All experiments were conducted between January 2015 and November 2016.

Experiment #1: Content Offer vs. Generic Signup

Our first exit overlay had a simple goal: Get more blog subscribers. It looked like this.

blog-subscriber-overlay

It was viewed by 558,488 unique visitors over 170 days, 1.27% of which converted to new blog subscribers. Decent start, but not good enough.

To improve the conversion rate, we posed the following.

HYPOTHESIS
Because online marketing offers typically convert better when a specific, tangible offer is made (versus a generic signup), we expect that by offering a free ebook to abandoning visitors, we will improve our conversion rate beyond the current 1.27% baseline.

Whereas the original overlay asked visitors to subscribe to the blog for “tips”, the challenger overlay offered visitors The 23 Principles of Attention-Driven Design.

add-overlay

After 96 days and over 260,000 visitors, we had enough conversions to call this experiment a success. The overlay converted at 2.65%, and captured 7,126 new blog subscribers.

overlay-experiment-1-results

Since we didn’t A/B test these overlays, our results were merely observations. Seasonality is one of many factors that can sway the numbers.

We couldn’t take it as gospel, but we were seeing double the subscribers we had previously.

Observations

  • Offering tangible resources (versus non-specific promises, like a blog signup) can positively affect conversion rates.

Stay in the loop and get all the juicy test results from our upcoming overlay experiments

Learn from our overlay wins, losses and everything in between.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

Experiment #2: Four-field vs. Single-field Overlays

Data people always spoil the party.

The early success of our first experiment caught the attention of Judi, our resident marketing automation whiz, who wisely reminded us that collecting only an email address on a large-scale campaign was a missed opportunity.

For us to fully leverage this campaign, we needed to find out more about the individuals (and organizations) who were consuming our content.

Translation: We needed to add three more form fields to the overlay.

overlay-experiment-2

Since filling out forms is a universal bummer, we safely assumed our conversion rate would take a dive.

But something else happened that we didn’t predict. Notice a difference (besides the form fields) between the two overlays above? Yup, the new version was larger: 900x700px vs. 750x450px.

Adding three form fields made our original 750x450px design feel too cramped, so we arbitrarily increased the size — never thinking there may be consequences. More on that later.

Anyways, we launched the new version, and as expected the results sucked.

overlay-experiment-2-results
Things weren’t looking good after 30 days.

For business reasons, we decided to end the test after 30 days, even though we didn’t run the challenger overlay for an equal time period (96 days).

Overall, the conversion rate for the 30-day period was 48% lower than the previous 96-day period. I knew it was for good reason: Building our data warehouse is important. Still, a small part of me died that day.

Then it got worse.

It occurred to us that for a 30-day period, that sample size of viewers for the new overlay (53,460) looked awfully small.

A closer inspection revealed that our previous overlay averaged 2,792 views per day, while this new version was averaging 1,782. So basically our 48% conversion drop was served a la carte with a 36% plunge in overall views. Fun!

But why?

It turns out increasing the size of the overlay wasn’t so harmless. The size was too large for many people’s browser windows, so the overlay only fired two out of every three visits, even when targeting rules matched.

We conceded, and redesigned the overlay in 800x500px format.

overlay-experiment-redesign

Daily views rose back to their normal numbers, and our new baseline conversion rate of 1.25% remained basically unchanged.

loads-vs-views

Large gap between “loads” and “views” on June 4th; narrower gap on June 5th.

Observations

  • Increasing the number of form fields in overlays can cause friction that reduces conversion rates.
  • Overlay sizes exceeding 800×500 can be too large for some browsers and reduce load:view ratio (and overall impressions).

Experiment #3: One Overlay vs. 10 Overlays

It seemed like such a great idea at the time…

Why not get hyper relevant and build a different exit overlay to each of our blog categories?

With our new baseline conversion rate reduced to 1.25%, we needed an improvement that would help us overcome “form friction” and get us back to that healthy 2%+ range we enjoyed before.

So with little supporting data, we hypothesized that increasing “relevance” was the magic bullet we needed. It works on landing pages why not overlays?

HYPOTHESIS  
Since “relevance” is key to driving conversions, we expect that by running a unique exit overlay on each of our blog categories — whereby the free resource is specific to the category — we will improve our conversion rate beyond the current 1.25% baseline.

blog-categories

We divide our blog into categories according to the marketing topic they cover (e.g., landing pages, copywriting, design, UX, conversion optimization). Each post is tagged by category.

So to increase relevance, we created a total of 10 exit overlays (each offering a different resource) and assigned each overlay to one or two categories, like this:

category-specific-overlays

Creating all the new overlays would take some time (approximately three hours), but since we already had a deep backlog of resources on all things online marketing, finding a relevant ebook, course or video to offer in each category wasn’t difficult.

And since our URLs contain category tags (e.g., all posts on “design” start with root domain unbounce.com/design), making sure the right overlay ran on the right post was easy.

unbounce-targeting

URL Targeting rule for our Design category; the “include” rule automatically excludes the overlay from running in other categories.

But there was a problem: We’d established a strict rule that our readers would only ever see one exit overlay… no matter how many blog categories they browsed. It’s part of our philosophy on using overlays in a way that respects the user experience.

When we were just using one overlay, that was easy — a simple “Frequency” setting was all we needed.

unbounce-frequency

…but not so easy with 10 overlays running on the same blog.

We needed a way to exclude anyone who saw one overlay from seeing any of the other nine.

Cookies were the obvious answer, so we asked our developers to build a temporary solution that could:

  • Pass a cookie from an overlay to the visitor’s browser
  • Exclude that cookie in our targeting settings

They obliged.

unbounce-advanced-targeting

We used “incognito mode” to repeatedly test the functionality, and after that we were go for launch.

Then this happened.

rooster-dashboard
Ignore the layout… the Convertables dashboard is much prettier now :)

After 10 days of data, our conversion rate was a combined 1.36%, 8.8% higher than the baseline. It eventually crept its way to 1.42% after an additional 250,000 views. Still nowhere near what we’d hoped.

So what went wrong?

We surmised that just because an offer is “relevant” doesn’t mean it’s compelling. Admittedly, not all of the 10 resources were on par with The 23 Principles of Attention-Driven Design, the ebook we originally offered in all categories.

That said, this experiment provided an unexpected benefit: we could now see our conversion rates by category instead of just one big number for the whole blog. This would serve us well on future tests.

Observations

  • Just because an offer is relevant doesn’t mean it’s good.
  • Conversion rates vary considerably between categories.

Experiment #4: Resource vs. Resource

“Just because it’s relevant doesn’t mean it’s good.”

This lesson inspired a simple objective for our next task: Improve the offers in our underperforming categories.

We decided to test new offers across five categories that had low conversion rates and high traffic volume:

  1. A/B Testing and CRO (0.57%)
  2. Email (1.24%)
  3. Lead Gen and Content Marketing (0.55%)
Note: We used the same overlay for the A/B Testing and CRO categories, as well as the Lead Gen and Content Marketing Categories.

Hypothesis
Since we believe the resources we’re offering in the categories of A/B testing, CRO, Email, Lead Gen and Content Marketing are less compelling than resources we offer in other categories, we expect to see increased conversion rates when we test new resources in these categories.

With previous studies mentioned in this post, we compared sequential periods. For this one, we took things a step further and jury-rigged an A/B testing system together using Visual Website Optimizer and two Unbounce accounts.

And after finding what we believed to be more compelling resources to offer, the new test was launched.

topic-experiment

We saw slightly improved results in the A/B Testing and CRO categories, although not significant. For the Email category, we saw a large drop-off.

In the Lead Gen and Content Marketing categories however, there was a dramatic uptick in conversions and the results were statistically significant. Progress!

Observations

  • Not all content is created equal; some resources are more desirable to our audience.

Experiment #5: Clickthrough vs. Lead Gen Overlays

Although progress was made in our previous test, we still hadn’t solved the problem from our second experiment.

While having the four fields made each conversion more valuable to us, it still reduced our conversion rate a relative 48% (from 2.65% to 1.25% back in experiment #2).

We’d now worked our way up to a baseline of 1.75%, but still needed a strategy for reducing form friction.

The answer lay in a new tactic for using overlays that we dubbed traffic shaping.

Traffic Shaping: Using clickthrough overlays to incentivize visitors to move from low-converting to high-converting pages.

Here’s a quick illustration:

traffic-shaping-diagram

Converting to this format would require us to:

  1. Redesign our exit overlays
  2. Build a dedicated landing page for each overlay
  3. Collect leads via the landing pages

Basically, we’d be using the overlays as a bridge to move readers from “ungated” content (a blog post) to “gated” content (a free video that required a form submission to view). Kinda like playing ‘form field hot potato’ in a modern day version of Pipe Dream.

Hypothesis
Because “form friction” reduces conversions, we expect that removing form fields from our overlays will increase engagement (enough to offset the drop off we expect from adding an extra step). To do this, we will redesign our overlays to clickthrough (no fields), create a dedicated landing page for each overlay and add the four-field form to the landing page. We’ll measure results in Unbounce.

By this point, we were using Unbounce to build the entire campaign. The overlays were built in Convertables, and the landing pages were created with the Unbounce landing page builder.

We decided to test this out in our A/B Testing and CRO as well as Lead Gen and Content Marketing categories.

clickthrough-overlays

After filling out the form, visitors would either be given a secure link for download (PDF) or taken to a resource page where their video would play.

Again, for this to be successful the conversion rate on the overlays would need to increase enough to offset the drop off we expected by adding the extra landing page step.

These were our results after 21 days.

clickthrough-overlays-results

Not surprisingly, engagement with the overlays increased significantly. I stress the word “engagement” and not “conversion,” because our goal had changed from a form submission to a clickthrough.

In order to see a conversion increase, we needed to factor in the percentage of visitors who would drop off once they reached the landing page.

A quick check in Unbounce showed us landing page drop-off rates of 57.7% (A/B Testing/CRO) and 25.33% (Lead Gen/Content Marketing). Time for some grade 6 math…

clickthrough-overlays-results-2

Even with significant drop-off in the landing page step, overall net leads still increased.

Our next step would be applying the same format to all blog categories, and then measuring overall results.

Onward!

All observations

  • Offering specific, tangible resources (vs. non-specific promises) can positively affect conversion rates.
  • Increasing the number of form fields in overlays can cause friction that reduces conversion rates.
  • Overlay sizes exceeding 800×500 can be too large for some browsers and reduce load:view ratio (and overall impressions).
  • Just because an offer is relevant doesn’t mean it’s good
  • Conversion rates vary considerably between blog categories
  • Not all content is created equal; some resources are more desirable to our audience.
  • “Form friction” can vary significantly depending on where your form fields appear.

Stay tuned…

We’re continuing to test new triggers and targeting options for overlays, and we want to tell you all about it.

So what’s in store for next time?

  1. The Trigger Test — What happens when test our “on exit” trigger against a 15-second time delay?
  2. The Referral Test — What happens when we show different overlays to users from different traffic sources (e.g., social vs. organic)?
  3. New v.s. Returning Visitors — Do returning blog visitors convert better than first-time visitors?

Stay in the loop and get all the juicy test results from our upcoming overlay experiments

Learn from our overlay wins, losses and everything in between.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

More: 

Lessons Learned From 2,345,864 Exit Overlay Visitors

Ask Yourself These 5 Questions Before Launching That Overlay

peter-parker
Be the Peter Parker of overlays. Image via Shutterstock.

You’ve heard it before: “With great power comes great responsibility.

And while Uncle Ben wasn’t explicitly referring to overlays when he said these iconic words to Peter Parker, the same could be said about these handy little conversion tools.

Overlays are modal lightboxes that launch within a webpage and focus attention on a single offer. Still fuzzy on what an overlay is? Click here.

Overlays are powerful marketing tools, not only because they are incredibly effective at snagging conversions, but also because they are so quick to launch.

This combination of power and speed means it’s dangerously easy to launch one without much consideration for user experience. Thus, they’ve developed a bit of a reputation for being effective… and disruptive.

But the disruptive nature of overlays is actually inherent to their effectiveness, because it focuses the visitor’s attention on a single offer. They eliminate the paradox of choice and present the visitor with a simple yes or no question.

However, there are ways to ensure the overlays you launch both achieve your goals and provide value to your visitors.

The first step in accomplishing this is to ask yourself the five Ws:

1. Why are you launching an overlay?

Overlays are most commonly used to accomplish one of three marketing goals: revenue generation, lead generation or traffic shaping.

overlay-goal

Do you want to build your blog subscriber list? Divert traffic to your pricing page? Entice visitors to make a purchase? This is what you need to figure out before you even consider building your overlay.

The marketing team at Hotjar recently implemented an overlay in their lead gen strategy for the first time. But just because it was their first attempt didn’t mean there wasn’t a clear goal. Nick Helm, Director of Inbound Marketing at Hotjar explains:

“We wanted to be able to nurture the new leads coming from different channels and bring them back.”

hotjar-overlay
Hotjar’s premier overlay built with Unbounce Convertables.

If you don’t have a good answer to the “Why” question though, just stop. Overlays, when used irresponsibly, can be intrusive and annoying. So if you don’t have a solid, strategic reason for launching one, hold on until you do.

Nick et al had a clear goal for their overlay and a detailed plan for how to achieve it, and it paid off: “We did get the quantitative results — which for us, measure better than industry standards.”

Your reason for running an overlay might be lead gen, rev gen or traffic shaping (or maybe something completely unique), but just make sure you have one — plain and simple.

Need some inspiration?

Our our latest ebook, 12 Proven Ways to Convert With Overlays, we share a dozen types of use cases you can use today.
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

2. Where will you place your overlay?

Overlays offer a reliable way to fill gaps in your funnel, but you need to figure out where those gaps may be.

The easiest way to do this is to visit Google Analytics to determine your highest-traffic pages. Then whittle down the list to only include pages that don’t have a clear call to action — these pages are the low-hanging fruit you can start with to see immediate results.

You should have already determined what the goal of your overlay is; the diagram below will help you decide which of the CTA-free pages pair best with the type of overlay you’d like to launch.

overlay-placement

As you can see, different pages are associated with different levels of buyer intent, and so while a lead gen overlay might perform well on your blog, a rev gen overlay probably won’t.

Now, if you’re a keener and don’t have any high-traffic pages without a CTA then I present you with this anthropomorphic gold star:

giphy-2
Tina star gif via Giphy.

But I also challenge you to consider how you might use overlays on your highest-traffic pages to get even better results (because even though you have a CTA, it doesn’t mean people see it).

Adding an overlay with a complementary offer to your main on-page offer can help bolster the success of your page, because overlays leverage the psychological principle of pattern interruption  to focus the visitor’s attention on a single offer. Your sidebar CTA, on the other hand, can start to blend into the page, so people become blind to it.

Here’s an example from last year’s Digital Agency Day (DAD) signup page:

digital-agency-day

Whereas the signup page’s goal was to get people to attend the digital event, this overlay offered exiting visitors the opportunity to simply get the recordings, even if they couldn’t attend.

The results were some of the best we’ve ever seen: 1,991 full-form conversions on 10,005 views.

3. Who should see your overlay?

The key to high-converting overlays is presenting compelling offers that (1) align with the visitor’s buying intent and (2) are relevant to that visitor’s specific needs or interests. This means targeting, and the more granular you can get the better.

The first thing you want to find out is where your visitors are coming from. If you know that, you can better judge what type of overlay should be presented, because different types of traffic relate to different levels of buyer intent (social traffic, for example, is often less likely to make a purchase than paid traffic).

The following chart further illustrates this.

traffic-sources
Different traffic sources pair better with specific types of overlays.

Another thing you want to think about is whether the traffic consists of first-time or returning visitors, and — if they are a returning visitor — whether or not they’ve already opted in.

Chances are, your page traffic is a mixture of different referral sources and visitor types, so it can be tricky to present an offer that’s relevant to everyone. Fortunately, Unbounce Convertables recently launched referral and cookie targeting, so you can present more relevant offers by customizing the overlays visitors see based on where they’re coming from or what pages they’ve visited before.

4. What is your overlay offer?

By now, you should be seeing a trend — that creating an effective overlay means keeping the visitor experience at the forefront of your mind. And the sweet spot is where your marketing goals align with the goals of the user: you want the sale, they want the bargain; you want the email, they want the ebook; and so on.

So when you consider what your actual offer will be, ask yourself if your overlay is valuable and relevant to your visitor. If it’s not both of these things things, your results will suffer and you risk being obnoxious.

Let’s break this down.

Value

Conveying value means offering your visitor something worth converting for. Here are a few examples:

  1. Offer an exclusive discount, like this lead gen overlay from BustedTees, which offers a generous 40% discount on first orders:
busted-tees
  1. Entice visitors with free shipping, like this rev gen overlay from Diamond Candles:
diamond-candles
  1. Present a free resource visitors can’t resist, like this lead gen overlay from Copy Hackers which offers a free four-part conversion optimization course:
copy-hackers

Relevance

Another thing to consider when deciding on your offer is whether or not it’s relevant to your audience.

Here’s a real-life example: At Unbounce, our analytics showed that a roundup of the 16 Best Digital Marketing Conferences of 2016 was bringing in a lot of organic traffic. Assuming that people who read about marketing conferences are also interested in attending marketing conferences, we served up this overlay (with a ticket discount to sweeten the pot) that directed people to our Call to Action conference microsite:

cta-conf

And, might I point out, the above overlay is also an incredibly valuable offer — $650 savings? Yes please!

5. When should your visitors see your overlay?

We’ve sorted where your overlays should be seen and by whom, but there’s a final piece in the puzzle: When.

You have a few options around when to trigger your overlay, and depending on the type of offer you’re presenting, different triggers may be more effective than others.

Let’s dig in…

On arrival
On-arrival overlays appear when your page first loads. Use this trigger for offers you want users to immediately see (e.g., a coupon code or an event invitation) or for returning visitors who may no longer notice your onsite calls to action.

On scroll
An overlay using an on-scroll trigger will appear once the user has scrolled through a designated percentage of the page. Use it to present relevant offers to users who have implied interest in a topic after spending time on the page (e.g., a free quote) or to catch the attention of returning visitors who may no longer notice your on-site calls to action.

On exit
Overlays that trigger on exit appear when the user moves to abandon the page. Use them for offers that can “save” a potentially lost conversion (e.g., a coupon code or shipping discount) or for offering free resources or collecting sign-ups that enable you to save a user’s details for future communications.

After delay
Sometimes you’ll want your overlay to appear after a designated time delay, typically between five and 20 seconds. Use this type of overlay to present relevant offers to users who have implied interest in a topic after spending time on the page or for returning visitors who may no longer notice your onsite calls to action.

Psst: Unbounce Convertables include all the above mentioned triggers plus on-click trigger, like this one. Use it to present information or forms on demand without cluttering the page (e.g., “click here to sign up” opening an overlay with a form).

Be a conversion hero

That was a lot of information, I know, but as a marketer it’s your responsibility use your powers for good.

And remember: A thoughtful approach to implementing overlays benefits you and your visitor, because your goals are aligned.

Have you had success with overlays? Tell us about it in the comments!

Excerpt from: 

Ask Yourself These 5 Questions Before Launching That Overlay

3 Scientific Reasons Why Overlays Are So Freaking Effective

Fact: Overlays increase conversion rates.

Why? Because science.

But before we dig into the science, let’s take a look at why overlays are a marketer’s best friend.

overlay-best-friend
Image via Giphy.

A second (and often last) chance to convert

Here’s something no one in ecommerce wants to hear: Prospects abandon websites in droves, and most will never return.

There are many reasons why visitors leave: they’re not swayed by your offer, they’re not the right fit (or they just don’t know it yet), they’re distracted, they’re rushed.

Regardless of why, it doesn’t take a scientist to point out that re-engaging abandoning visitors could dramatically improve your conversion rates.

This is where overlays (a.k.a. your new “bestie”) come to the rescue.

Overlays provide a second chance for your audience to convert. And by focusing the visitor’s attention on just one timely, relevant and valuable offer (the trifecta of effective overlays), your chances of conversion go through the roof.

Here’s an example…

Upon seeing the shipping costs associated with their order, a potential customer may decide to abandon the sale. Implementing an overlay offering a deal on shipping could prevent cart abandonment and close the sale.

happy-conversion-dance
This is our we-just-closed-a-sale dance. Image via Giphy.

But why do abandoning users change their minds?

Back to the science.

#1: Overlays counteract the paradox of choice

Think about the toothpaste aisle of your drugstore. There are whitening toothpastes, natural toothpastes, cinnamon flavored toothpastes… spearmint, peppermint, bubblegum!

analysis-paralysis
Are you overwhelmed yet? Image via Giphy.

With an online store, customers face a similar overload of options. They come in the form of multiple buttons, links and messages calling out for the visitor’s attention.

When they can’t decide, they flee. It seems that while humans are empowered by a little bit of choice, too much choice can result in analysis paralysis.

Author Barry Schwartz further illustrates this in his oldie-but-goodie book, The Paradox of Choice. In it he discusses the negative psychological impact an abundance of choice can have on our well being, and how eliminating choices can help reduce stress and anxiety.

Alleviating anxiety by way of eliminating options, then, is critical to making a sale.

It’s for this reason that landing pages are so effective in converting targeted traffic. By keeping the Attention Ratio at 1:1, landing pages focus a visitor’s attention on a single conversion goal, thus resulting in higher conversion rates than a page on your website.

But what about those web pages — shouldn’t they be optimized, too?

Yes, absolutely.

Overlays take on the role of a helpful salesperson, tapping your prospect on the shoulder and asking if they can be of assistance. They narrow the visitor’s attention on a single, enticing offer, and simplify the decision-making process for potential customers.

SImply put, overlays are effective for the same reason landing pages are effective: they eliminate distractions, provide the user with a last-chance offer and distill the choice down to a simple yes-or-no answer.

#2: Overlays re-engage prospects by using a neuro-linguistic programming technique called pattern interrupt

wait-what
Neuro what? Image via Giphy.

Sorry, let me explain.

Pattern interrupt is a neuro-linguistic programming (NLP) technique that has been used by salespeople for years. The concept is pretty straightforward: do or say something unexpected to disrupt a person from their normal patterns.

By interrupting patterns we create moments for change, which is why some people use the technique for breaking bad habits. Even something as simple as slapping an elastic band against your wrist can help interrupt a regular pattern

Overlays are driven by a similar logic. Unexpectedly, they show the visitor an offer that sweetens the pot, convincing them to think twice about their predictable path toward the ‘Back’ button.

In essence, you’re using the overlay much like you would the rubber band, to get your visitor’s attention and then focus it on something else, since what they were looking at before clearly wasn’t engaging them.

#3: Overlays leverage effective frequency by repeating and reinforcing your message

Several years ago I began seeing ads for a three-step skin clearing system that shall remain nameless.

At first I didn’t pay much attention to them, but after seeing ad after ad I started to wonder whether their claims had any validity; I was intrigued.

A few months later, I had a nasty breakout. I’d already warmed up to the idea of testing the product out, so I keyed in my credit card info and placed my order. A week later, a package arrived at my home with my first month’s supply.

ups-package
Image via Giphy.

That — what happened there — was the result of effective frequency.

Effective frequency is the number of times a prospect must be shown a particular message before taking the desired action.

There are varying theories on what the optimum number of times to show a message is — the law of seven, for example, suggests that it’s, well, seven. Whatever the case, it’s always more than once.

Overlays leverage effective frequency by providing you with an additional opportunity to serve up and thus reinforce your message. By using an overlay with similar messaging to your web page, you are in fact nudging your prospect toward becoming a customer.

Takeaways and learnings

Overlays don’t work because they’re the shiny new thing. They work because scientific — and particularly psychological — principles are at play.

  • Our brains don’t like complicated scenarios, and given how many we already face in daily life, the last thing we want are complicated consumer decisions. Simplicity of product choice = higher chance of conversion.
  • People are habitual by nature. We have certain patterns that we subscribe to, often unconsciously, that allow us operate on “autopilot”. Disrupting this pattern creates a moment for change, and doing so with an overlay may be just the thing to turn an unengaged visitor into a customer.
  • The more times we’re served up a message, the more likely we are to believe it to be true. By reinforcing the message on your web page with a similar supporting message on your overlay, you are in fact nudging your prospect toward becoming a customer.

Have you experimented with overlays? I’d love to hear about it the comments.

Get overlay ideas you can launch today

Download Unbounce’s newest ebook, 12 Proven Ways to Convert with Overlays
By entering your email you’ll receive weekly Unbounce Blog updates and other resources to help you become a marketing genius.

Read the article: 

3 Scientific Reasons Why Overlays Are So Freaking Effective