When I hear the term “pop-up message,” I’m immediately brought back my early days using the internet where ubiquitous pop-up ads were a constant nuisance. It was only a matter of time before pop-up blockers became must-haves to save us from the clutter.

I think we can all agree that (thankfully) the internet has come a long way since then. Pop-ups may occasionally carry a negative connotation, but marketers continue to use them to convey messages and drive action on their websites. When done well, a pop-up message can be an effective way to catch someone’s attention. But proceed with caution — because when done poorly, a pop-up can create a bad experience that annoys visitors and drives them away.   

In this post, I’ll get into the tactics of building a successful pop-up message that informs rather than annoys. This is a continuation of a previous blog post, “The Secret to Pleasant Pop-Ups.” Read that one for a more high-level discussion of how to think about pop-up messages on your website. In this one, I get into more specific details and provide tactical advice. 

Figure out your goals and draft a succinct message

As with everything you add to your site, you should have a reason for doing it. A pop-up message disrupts the visitor’s experience, so you don’t want to use one without good reason. Think through your goals in advance. Are you hoping to drive newsletter sign-ups? Reduce cart abandonment? Raise awareness for a new product? 

Then ask yourself: is this message ideally suited to a pop-up, or would a different tactic or format work best? 

Once you’ve decided that a situation calls for a pop-up, draft your message. Focus on keeping the copy brief — everything you add should be in service of driving visitors to complete the goal you identified. Think through the various elements that will need to be included in the pop-up message. Will you need a short form? A CTA button? What will the CTA button say? This process will help you make decisions later on. 

pop-up message

In this pop-up message, the copy is brief and every element serves to drive visitors to enter the giveaway.

Nail the design

Once you have firmed up your copy and made decisions on forms, buttons, etc., you can turn your attention to the design. In an ideal situation, you’d use your template library to find the template that best suits your needs. If you don’t have a template library, now’s a good time to start thinking about one. You don’t want to start from scratch each time you build a pop-up, and you want all your messages to look consistent with each other and match your company’s branding.

To start, consider the grid system of your website and use that system to come up with a few sizes that will fit your needs going forward. If you’re not sure how to do that, “3 Steps to Design Consistency for Your Personalized Experiences” provides a good foundation.  

pop-up sizes

A 3:2 aspect ratio may work for large pop-ups, while a medium pop-up might work better at a 3:1 aspect ratio. Try various content layouts to find what works best.

Next, design a few templates leveraging your brand guidelines (colors, fonts, imagery, etc.) in a few different sizes so you’ll have a good library to pull from in the future. Think about your needs surrounding images, shorter copy, longer copy, forms, etc. 

Here are a few examples:

pop-up templates

Templates can help you establish design consistency and work more efficiently.

If you already have some templates to pull from, pick the one that best suits your current needs. Work within the template to create something eye-catching that’s consistent with your site’s overall look and feel. 

Leverage relevant, personalized content

One of the best ways you can minimize the disruption of a pop-up is to deliver a message that’s relevant to your visitors — one they won’t mind being interrupted for. This means tailoring the content of your pop-up to each person — either by including relevant information or removing the pop-up completely if the CTA is irrelevant to the individual. 

For example, you could use a pop-up message to:

  • Recommend a blog post that a reader should view after her first one to drive her further into your blog catalog
  • Encourage visitors who are about to leave your site to return to a product they liked during their session
  • Ask visitors to sign up for your newsletter after they have engaged with a certain number of pages or spent a certain amount of time on your site
  • Ask visitors who haven’t already downloaded your mobile app to do so

You can use rules or algorithms to accomplish such personalization. With rules, you manually select a message, product, content asset, etc. to display to anyone that meets some predetermined criteria. For example, if you wanted to use a pop-up to encourage visitors to sign up for your loyalty program, you would set a rule to show the message only to visitors who aren’t already members. 

Machine-learning algorithms can sift through all the information you have about a person to pick the most relevant experience for her. For example, if you wanted to feature a content asset or product she is most likely to be interested in, an algorithm could pick it for you in real time based on all you know about her interests and preferences. 

When you use information you know about each person (either known or anonymous), you can assure visitors feel your pop-up message is worth the disruption. 

Find your placement

Once your pop-up is ready to go, think about where on the page your message should appear. Think back to your goals. 

Do you want to completely restrict a visitor’s access to the rest of your site and focus all of their attention on the pop-up? Then you’ll want to center the pop-up and even gray out the rest of the page with a lightbox effect. Zumiez did just that to focus people’s attention on its pop-up message to drive sign-ups to its loyalty program.

pop-up message

This large pop-up features a lightbox effect to focus the visitor’s attention on the pop-up. The message contains a background image likely to appeal to the Zumiez target audience, while the main elements appear contrasted against in the dark background in a bright color.

If you don’t want to take over the entire page, you could consider displaying the pop-up just in the corner of the screen.

For example, at Evergage we provide a pop-up that slides in to recommend blog posts to blog readers. The slide-in message suggests the most recent blog post in the category the person has spent the most time viewing, but that they haven’t already read. Note that this one is much smaller than the Zumiez pop-up, as we don’t want to stop the visitor from reading the article behind it. We just want to encourage her to continue reading more articles when she’s done. 

pop-up message

This small pop-up message recommends a relevant blog article to Evergage blog readers. The message features minimal copy and a small image to minimize disruption.

Ultimately, the level of disruption you incorporate into pop-up experiences depends on your goals and the type of experience you’d like to deliver.

Pick your moment

Finally, you need to consider your timing. The moment your message appears will have a huge impact on how well (or how poorly) the message is received. Many websites deliver a pop-up message the second a visitor lands on the site. That may be effective at catching attention, but does it really provide a good experience? It probably doesn’t.

When it comes to pop-up message timing, there is no easy answer. Your timing should depend on what you’re promoting or what action you’re trying to drive. For example, it doesn’t make sense to ask visitors if they want a demo of your SaaS product the very first second they visit your site. They’ll likely be more receptive after they have read through a few pages first. But if you offer content behind a paywall and a visitor lands on a page they are not allowed to access, a pop-up that immediately appears to explain the situation will make sense.

You can choose to serve pop-up messages based on a number of different criteria, including: 

  • The amount of time a person has spent on a specific page or in total on the site
  • The number of pages she has explored
  • Whether she has taken or not taken a certain action
  • How far down a page she has scrolled (for example, that Evergage blog message I described in the previous section displays based on scrolling) 

When you pick your moment based on time spent or behaviors demonstrated, you’ll be more likely to catch your visitor at the right moment. 

Final thoughts

A pop-up message is just one type of experience you can serve your website visitors. There are many different ways to communicate across a website with both generic and personalized experiences. And while pop-ups can certainly be effective, they should never be overused. Consider whether your message truly calls for a pop-up, or if another type of experience may serve you better.

To learn more about how Evergage can help you deliver personalized content in your pop-up messages and through many other experiences across channels, request a demo today.