In the past, websites had a lot of unnecessary elements, namely pages full of flashy and ugly color schemes, too much text stuck in small spaces, and pop-ups that pop up and annoy visitors.

But the designers didn't know more back then or, rather, they just worked with the only design trends and best practices they knew.

Times have changed a lot since then.

Web developers and designers are no longer limited by technology or technique, which means there are no more excuses for poor design. This concerns every element found on a WordPress site, from the home page header image to forms contacts, as well as from typography to pop-ups. Everything matters now when designing for user experience.

Today I want to focus on what makes a popup effective, something that I consider to be an essential part of the conversion process. Specifically, I would like to examine the anatomy of an effective WordPress pop-up and how this exciting element can boost your conversion rate.

The argument for using pop-ups on WordPress

Pop-ups are an interesting design element. While they temporarily interrupt the user experience (which is usually not much appreciated), the ones that are done right offer something so appealing or exciting that visitors don't mind losing a minute to pay attention.

Of course, in this case we are talking about conversion-generating pop-ups that serve to collect subscribers to the newsletter or entice visitors to make purchases. However, pop-ups can be used for various purposes. For example, you can share your cookies or privacy policy, recommend related items after visitors add something to the cart, or even ask them to take a quick survey.

Pop-up Anatomy - Pop-up of Target Recommendations

For the most part, if you're using a pop-up window, you probably want visitors to take action. After all, why interrupt their experience if the disturbance is not a useful use of their time? According to a study of almost two billion pop-ups, they found the average conversion rate for these types of pop-ups to be 3,09%.

Now that begs the question: Are pop-ups still relevant and effective? If the market is so over-saturated with exit pop-ups, hello bars, full-page overlays and more, is this a conversion generator tool worth using on your WordPress site?

Of course !!!

Pop-ups take into account many good web design practices. For example:

  • Pop-ups remove unnecessary clutter from your site's pages.
  • They are usually composed of clean visuals and minimal text.
  • The calls to action are well designed and simply offered in terms of wording.
  • There is a small learning curve for your visitors as most people are familiar with pop-ups and know how to interact with them.
  • Pop-ups provide a fun opportunity to infuse your site with animations, videos, or social proof.
  • You can easily create them with WordPress plugins high quality like Hustle or OptinMonster.

Anatomy pop-up - social proof HubSpot

In general, a well-designed pop-up is ideal for grabbing the attention of visitors when you need it most. You can use them to send timely notifications or requests. You can also use visitor data to entice them to make a purchase.

The anatomy of an effective WordPress pop-up

Obviously, the success of your WordPress site pop-ups depends on ones that are perfectly designed and have such compelling offers that visitors can't help but interact. So let's take a look at what a winning formula for an effective pop-up looks like.

1. Style

The different types of pop-ups tend to be more efficient in converting visitors into subscribers:

  • Email subscription pop-ups have a 2,9% conversion rate.
  • Welcome pop-ups (those that fill the full page upon entry) convert at 2,6%.
  • Scroll-triggered pop-ups convert 1,9%.
  • Smart or Hello pop-ups display a conversion of 0,5%.

That doesn't mean you always have to use a traditional email subscription pop-up. Here is an example from Neil Patel's site.

Pop-up Anatomy - Neil Patel's Bar Hello

This one is well done, because it is simply designed, non-intrusive, et uses fun animation to grab attention in case its minimal footprint goes unnoticed. Keep in mind that choosing a style is not about using the one that is the most popular or the best known for higher conversion rates. It's about finding a style that works for your site, your visitors, and that is designed to complement the experience in between.

2. Color

Color, of course, will always play a major role in website design. By understanding the psychology behind your chosen colors, you can create more effective pop-ups that convert. Of course, you also can't forget about the established color scheme for your brand, so it's all about finding a balance between designing a pop-up window that looks good on the site, but which also compels visitors to take action.

3. Composition

It's important to take a step back and see the pop-up as a whole. Although the design of each moving part in the pop-up matters, as does the overall makeup of the pop-up.

Your pop-up window should:

  • be simple and easy to follow.
  • Designed with clean lines and be well balanced.
  • Include relevant and high resolution images; ideally, a single image that summarizes the subject of the offer.
  • Seem like an extension of your site and obviously aren't made from a pop-up with limited customization options.
  • Use a large, easy-to-read typography.

4. Text

Then we have the pop-up message. While you are not in the process of developing the language that goes into these things, there are a number of best practices that you should still be aware of when it comes to filling pop-ups with text.

Keep in mind the following:

  • Always include a headline, a short message (one sentence will do), and a call to action.
  • Use strong language that appeals to the emotions of visitors.
  • Be brief. If you cannot write it in less than 30 words, this message does not belong to a pop-up window.
  • Use the same tone and personality that you use on your site.
  • Offer something valuable that your visitors will not find elsewhere on the site.
  • Use urgency if possible. If you can't do it with words, do it with color.

Anatomy pop-up - Wishpond screen overlay

5. CTA

There is a strange growing trend these days where websites are offering visitors two call-to-action options. I understand why this trend is growing, but I have seen it misapplied on so many websites that I hope the trend will die out eventually.

You have probably seen this bad application yourself:

  1. The positive option : This one says, “Oh, thank you, thank you! I know this offer is about to change my life for the better! " 
  2. The negative option : This one says, "I like making bad life choices and I appreciate you rubbing my face." Let me click on this auto-deprecation option only to receive another window that asks me again if I want to make this terrible decision. " 

This is not to say that all pop-ups with two CTA options are poorly designed or intended to shame the visitor. Tim Ferris has a good example of a well done dual option CTA:

Pop-up Anatomy - Tim Ferris Positive Negative

Overall, however, I would say that if you are trying to be sarcastic or intimidate your visitors into their decision, then get out of your site and put it on Twitter. Your website isn't a place for that and Twitter will hopefully swallow it up completely.

Apart from this pet peeve, I also suggest keeping the call to action simple. Use simple language that makes it clear what visitors will get for entering their email or clicking the button. Also, keep the job to a minimum: no more than two fields to fill out (ie Email and maybe a name) and one button to click.

That's it for this tutorial, I hope it allows you to design your call to action buttons well.