Skip to main content
how-to-make-pop-ups-that-convert

How To Make Non-Obnoxious Pop-ups That Convert

March 8, 2017
Pop-ups are controversial tools, to say the least. They are the UX equivalent of a slap in the face. But truth is… they convert. They just do. If you put in the work and use them correctly that is. Graph from Sumo's study showing their best top 10% pop-ups convert at a 9,3% Sumo analyzed more than 2 billion (yep, with a B) and even the average performing pop-ups convert at a nice 3.1%… Now, how do you make non-obnoxious pop-ups that convert? Well, there are 5 elements to take into account:
  1. Relevance
  2. Timing
  3. Value
  4. Copy
  5. Frequency
I'll explain each of these concepts but don’t expect a drawn-out analysis, though. This is a short, prescriptive article to fix your pop-ups on the spot and get results quickly.  

Main types of pop-ups

Before we get to the good stuff, let’s take a look at the main types of pop-ups:

Sticky bar

Small pop-up on top of page content, usually at the top or bottom of your browser window. screenshot of a sticky bar    

Slide-in box

Small pop-up that slides in your screen from the sides of your browser. Screenshot of a slide-in pop-up    

Welcome mat

When you land on a page, a full-screen pop-up appears above the content, making the rest of the page go below the fold. screenshot of a welcome mat   Fun fact: All the examples were on the same page and all appeared within 5 seconds. Oh, and there was an additional pop-up when you try to leave… screenshot with an exit pop-up, a slide-in and a stikcy bar present at the same time Not. obnoxious. at all.    

Overlay modals

Center of screen pop-up appearing directly above the page content. screenshot of a overlay modal pop-up    

How do these pop-ups appear? (aka triggers)

There are a number of tools available nowadays, with different degrees of controls over how your pop-ups appear. The following elements are the most common triggers for pop-ups:
  • Page entrance/exit: pop-up appears when the visitor lands on the page or is about to leave (mouse goes outside of the website window).
  • Time spent on page: pop-up appears after a certain amount of time spent on a page
  • Element interaction: pop-up appears after a visitor took a certain action (clicked on a link, image, etc)
  • Scroll: pop-up appears after the visitor scrolled a certain % of the page
  • Number of pages viewed: pop-up appears after the visitor viewed a certain amount of pages
Ok, so now that we got the obvious out of the way, let’s look at the 5 principles that make a good pop-up. When I see pop-ups on blogs and websites, I feel like people read “Pop-ups really work” and left instantly. They then proceed to put one up without taking the time to think further. Which results in sh**ty pop-ups, bad UX, pissed off visitors, and… no conversions. Let’s not do that here, please. I made this article purposefully short so read through it all ;)    

1. Relevance

Make sure the content of your pop-up is…

… related to the page topic.

This is key to make your pop-up successful. Wrote an article on email marketing? Why not make a pop-up offering visitors to download email templates, or a guide to write the best email copy? Someone visiting your blog for the first time might not want to buy your product even though you give a discount in your pop-up. Or subscribe to your newsletter because s/he doesn’t know if your content is worth giving off their email. Ex: On Sumo’s article “2017 Email Signup Benchmarks: Here’s how many visitors should be subscribing”, they have a welcome mat offering you a bundle of resources to help their visitors improve their signup rates. Makes sense no? You clicked on a link to read about emails, and you’re offered email resources. context-pop-up-sumome

Question for you: Where on your website would your pop-up make sense to your visitors?

 

… relevant to this particular visitor segment (or group)

Picture this: you read an article on a blog you get a pop-up with a discount for an online course … you already bought… at full price. Or you read several articles about email marketing during a session on a blog and suddenly a pop-up appears saying “hey, download our new SEO guide”. Or you show your big pop-up all visitors even those on mobile when:
  1. It’s even more annoying to click off
  2. Google announced as a big SEO no-no and will penalize sites that do so.
See where I’m going with this? You know a lot about your visitors, be it through your analytics, CRM, DMP, etc… So use this data to target the right visitors with your pop-ups. Note: Need guidance on visitor segmentation? Check out my big fat How-to article about it. More relevance = less annoyance, makes sense right?

Question for you: Who among your visitors would be the most interested (or not at all) by this pop-up?

   

2. Timing

Let's say you're interested in an article, you click the link and you don’t even have time to start reading that you’re force-fed a nice “HEY SUBSCRIBE TO MY NEWSLETTER PLEASE PLEASE”. Are you going to convert? Or close it off so fast it’ll count for half a display in their analytics? Yeah, thought so. Let’s continue with this example where you want visitors to subscribe to your newsletter. When would it actually be the right time in the visitor’s journey?
  • Would it be after 30 seconds of reading the article?
  • After seeing 3 articles?
  • If visitors spent more than 20 seconds and scrolled 70% of the page?
Make sure they’re really interested (and have the time to be) in your content before asking them to subscribe.

Question for you: When in your visitors’ journey would they be most likely to convert for this pop-up?

   

3. Value

This is often thrown around lightly and as a fuzzy concept: “you must provide value”. What does it mean exactly? A conversion is a transaction. Visitors give you their money/information against your product/content. Your pop-ups are no exception. People won’t convert if what you’re offering isn’t valuable for them. Meaning it’s not useful, helpful or doesn’t answer a need. The “value” can be either:
  • on the page/article and the pop-up capitalizes on it (ex: your article was really good so you ask them if they’d like to be notified when you put out content)
  • or directly in the pop-up (template, ebook, spreadsheet, report, discount, etc.)
You can think of it this way: you need to give to receive. Gary Vaynerchuck would even say, you need to give, give, and give again THEN ask. And make sure what you give is really good—exceptional even. Gain trust, to earn attention, so you can ask for something.

Question for you: What value are you providing your visitors with this pop-up? Is it honestly useful for them?

   

4. Personality/copy

The way you deliver the information in your pop-up is also instrumental to its success (or failure). By order of priority, the copy in your pop-up should be:
  • Super specific as to what your visitors will get if they give you their information,
  • Using words your visitors would use (not your jargon),
  • Using a CTA corresponding to the offer (i.e. don’t put “buy now” if you’re offering a free trial),
  • Not boring, sprinkle a bit of personality, be human, you’re talking to one.

Question for you: How am I expressing my offer in this pop-up? Is it clear, human, interesting?

   

5. Frequency

So, you subscribe to a blog. Then you come back … to be greeted by a pop-up asking to subscribe. And again every time you come back. Midly annoying, hmm? Or remember the example at earlier in the article, there was a welcome mat, then a sticky bar, then a slide-in box, then an exit pop-up! Your visitors will get tired of your shenanigans pretty quickly. So particularly if you have several pop-ups running, be extra careful as to not overwhelm your visitors.

Question for you: How often will my visitors see this pop-up? How will it interact with the other ones I have running?

   

To recap

To avoid making an obnoxious pop-up that won’t convert at best, or will drive your visitors away, ask yourself these questions:

  1. Where on your website would this pop-up make sense to visitors?
  2. Who among your visitors would be the most interested (or not at all) by this pop-up?
  3. When in your visitors’ journey would they be most likely to convert for this pop-up?
  4. What value are you providing your visitors for this pop-up? Is it really useful for them?
  5. How am I expressing my offer in this pop-up? Is it clear, human, interesting?
  6. How often will my visitors see this pop-up? How will it interact with the other ones running?

 

Now, go make the internet better, for all our sake! (And if you get conversions as a side benefit, why the heck not ?)
Topics covered by this article
UX