• Blog
  • Popup UX Design: Best Practices, Tips & Examples

Popup UX Design: Best Practices, Tips & Examples

  • Conversion
  • 6 min read

Table of Contents

Every website that is focused on profit is also focused on getting more conversions out of their visitors: encouraging them to buy… or at least subscribe.

Popups are the best tool to increase conversions, but their effectiveness depends on how they are implemented.

In this article, we will explore six tips for creating popups that enhance user experience and contribute to the overall success of your website and marketing efforts.

Let’s get started!

6 popup tips for improving user experience

Pop-ups can help to increase conversion rates effectively. The results seen by ecommerce stores that start using pop-ups speak for themselves:

The secret to the success of the campaigns above was that they designed user friendly pop-ups that were integrated with the overall user experience (UX) of each website.

These companies never interrupted users while displaying popups, but instead cleverly set them to appear when they could deliver useful and relevant content at the right time.

If you can pull this off on your site, not only will you avoid disrupting your site’s UX, but you’ll actually improve it.

Let’s look at six ways you can do just that, starting with…

1. Don’t use intrusive popups

Website entry popups can be extremely annoying.

These are popups that appear as soon as a website loads. Just as a visitor starts to get their bearings and take in all the information on your site, they get interrupted by a popup that comes out of nowhere. 

Entry popups also:

  • Prevent visitors from getting access to the desired content
  • Often contain irrelevant content
  • Confuse visitors

In sum, they are almost always more annoying than helpful, and they provide a poor user experience.

Instead of bothering your visitors with intrusive popups (traditional entry popups), let them get to know your website first. Then, you can show your popup when their behavior indicates that they’re ready to see a secondary message.

Here are some typical ways of triggering popups based on user engagement:

  • Display the popup after X seconds: This option gives your visitors some time to browse the page they’re looking at. You can catch their attention after they’ve spent some time on the page.

Display a pop-up after X seconds
  • Show the popup after X percent scrolling: You can set your popups to appear after a visitor has scrolled down a certain percentage of your web page.

    For example, you could set a popup that appears when a visitor has reached the end of a blog article, meaning they’re ready for some new content (perhaps by offering a free ebook in exchange for their contact info).
Display popups after x percent scrolling
  • Display your popup on exit-intent: This way, you’ll catch the attention of visitors who are about to leave your site.

    With an exit-intent popup, you can stop someone from leaving without converting and convince them to keep shopping or subscribe to an email list.
Display a pop-up on exit-intent

Here’s a good example of how to use lightbox popups based on user engagement.

Obvi’s exit-intent popup only appears to visitors who are abandoning the site.

Exit-intent pop-up example on the Obvi website

2. Segment your visitors

There’s no one magic popup that’s relevant for all your visitors. That’s because not everyone needs to see the same critical information or discount offer at the same time. 

Unfortunately, you can’t identify the solution to each individual’s problems and present them with the solutions in a popup.

Instead, what you can do is segment your visitors into groups that share similar needs and characteristics.

These segments vary by industry and the types of products a store sells. However, all businesses can segment their visitors into groups based on what stage they’re at in the buying process. 

Think about your “customer journey”: how people first learn about your brand, how they arrive at your landing page, and how they find the products they want to buy.

Segments at different stages of the customer journey have different needs, and the popups you show them need to reflect that.

Now, let’s look at a few other factors you can use to segment your customers. We’ll also share some campaign ideas for different visitors at different stages of the customer journey.

2.1. Cold vs. hot prospects

“Hot prospects” are customers who are looking to buy something right now, while “cold prospects” are still exploring their options and aren’t quite ready to buy anything. 

Instead of treating all your visitors like they’re “hot prospects” who are ready to buy immediately, you should create different conversion goals for hot and cold prospects.

For hot prospects, the conversion goal is simple: buy now. Your messaging needs to push these prospects towards an immediate sale using a time-limited discount or deal.

You’ll need a secondary conversion goal for cold prospects, which is typically getting them to sign up for your email list. After getting their contact details, you’ll be able to communicate with them over time and nurture the relationship until they’re ready to buy. 

For this reason, you need to show cold visitors content that makes them want to subscribe, like a downloadable ebook.

Let’s see how it works in action. Here’s a great example from a couple of BOOM!’s campaigns.

They offer an ebook as a lead magnet for cold prospects who are interested in their product line, but aren’t yet ready to make a purchase:

Obvi popup design

For their hottest prospects (who have expressed the most interest in BOOM!’s content or are about to abandon their cart), they use the offer of a 10% off coupon as an incentive to buy now rather than later.

Pop-up example on the Boom website to improve user experience

2.2. Geotargeting

If you sell internationally, location-based targeting or geotargeting can be a great way to boost conversions. With geotargeting, you can create as many different messages for as many target countries as you’d like.

Segmenting your visitors based on their location allows you to provide them with country-specific deals, like offers on shipping. 

Here’s an example:

Pop-up UX design example

2.3. Target visitors based on their stage in the buying process

Each of your customers moves through the following stages of awareness:

The 5 levels of awareness describe the different mindsets customers will be in as they interact with your site. A customer who just learned that your brand exists will view the same page very differently than a loyal customer. 

That’s why you need to communicate different secondary messages through your popups to each of these segments.

Here are a few examples of messages that are tailored to one of these groups.

1. Problem-aware visitors know they have a problem, but they’re still trying to find the best way to solve it. So, at this point, your goal is to help them better understand their problem (whether it’s a skincare issue or the need for a new pair of running shoes) and offer possible solutions. 

One way to do this is through blog posts and ebooks. For example, if you have an article about “running tips for beginners,” you could also promote an ebook that gives “how-to” tips on running a 10K.

2. Solution-aware visitors know what type of product will solve their problem and are actively weighing their options (making them a “hotter” prospect than the problem-aware visitors we’ve just discussed). This makes your goal simple: help them find the best product for them on your site. 

One proven approach involves showing them the most popular products (or “trending” products) in the category they’re browsing.

3. Most-aware visitors have found a specific product they love that will solve their problem. All they need to do is click “Buy now” and go through the checkout process. Even those these customers are your “hottest” prospects, they’ll often need a final push to make a purchase. 

An irresistible special offer that’s only available for a limited time is the best way to convince this segment to buy now rather than later.

2.4. Advanced segmentation

You can also take your visitors’ onsite behavior into account, allowing you to create increasingly specific segments of users. The more specific your segmentation, the more relevant your messaging can be.

You can use the following user-specific behavior to further segment your visitors:

  • Have been on the current subpage for at least X seconds
  • Are from a specific traffic source
  • Are currently browsing a specific page
  • Have previously visited a specific page(s)
  • Have specific items in their cart
  • Have a cart value greater than a specific threshold

This allows you to:

  • Display different popups to visitors coming from different traffic sources (e.g., Facebook vs. Google Ads).
  • Show certain campaigns to prospects who have visited specific pages but haven’t made a purchase yet.
  • Target visitors based on the items they’ve already added to their cart (for upselling and cross-selling).

3. Create personalized messages

As we’ve been saying, “If you’re selling to everyone, you’re selling to no one.” You can take this to the next level with personalization.

Once you’ve separated your visitors into segments based on their interests, demographic or geographic variables, and their stage in the buying process, you can show them the most relevant messages.

For instance, if you sell electronics and know that a specific visitor is interested in smartphones, “25% OFF Smartphones” is a much more effective message than “25% OFF Selected Products”.

Pop-up UX design example

There are four basic levels of customization for the messages in your popups:

  1. Everyone gets the same message: In other words, you broadcast a general offer to all your website visitors. This is not recommended.
  2. You make two different offers for hot prospects and cold prospects: That is, you divide your audience into two major segments based on their engagement. Even this simple segmentation can make a difference.
  3. There are several offers for each of the main visitor groups: In this case, you divide your visitors into several different groups based on relevant variables and reengage them with customized messages for each group.
  4. Everyone gets a customized message using Dynamic Text Replacement: The most effective popups use Dynamic Text Replacement. This is the highest level of personalization as each message is tailored to the specific individual who sees it.

With Dynamic Text Replacement, the text in your popups will update automatically based on the variables you choose. 

This means you can create one template and then alter the content to meet the needs of each visitor audience. Using this approach reduces the amount of effort on your part and ensures each of your visitor segments will see the most relevant content.

Returning to our example from above, the electronics store promotes “25% OFF Smartphones” when a visitor tries to leave their site from the smartphone category page or an individual product page within the smartphone category.

Pop-up UX design example

However, when a visitor is browsing for laptop accessories and tries to leave the site, the word “smartphone” changes automatically to “laptop accessories”—speaking directly to that customer’s needs.

Pop-up UX design example

Another great tool for easy popup personalization is OptiMonk’s AI-powered Smart Popups solution.

One of the challenges in delivering personalized messages is the manual effort involved in tailoring content for each visitor. The Smart Popups tool eliminates this hurdle by leveraging AI to automatically customize popup messaging based on individual user interests. 

Show a personalized popup for each visitor

4. Stay focused on one value proposition and goal at a time

To maximize your conversion rate, you should limit yourself to one goal per popup and make sure that its value proposition is persuasive.

A value proposition is a benefit that customers can expect from engaging with your popup or buying your products. The value proposition of an email signup popup might be exclusive access to certain sales or products, while a discount popup’s value comes from the money a visitor can save by using the coupon code.

If you’re trying to achieve multiple goals in the same popup, you’ll decrease the chances of completing any of them. Ultimately, it will muddle your message and confuse visitors about the value of your offer, making conversions and sales less likely.

Several goals can be achieved by using popups, but make sure to limit yourself to pursuing just one of them in each popup. 

Here are some common ecommerce goals:

  1. Driving sales
  2. Building your email list
  3. Reducing cart abandonment
  4. Upselling and cross-selling
  5. Improving customer experience

5. Don’t ask for too much information

As we’ve just seen, the success of a popup depends on the value it provides to your visitors.

But no matter how valuable your offer is, if taking advantage of it is too difficult, then no one will want to go through the trouble. 

That’s why it’s important to avoid asking for too much information. Displaying too many fields in an email signup popup, for instance, will make it look like too much work to most users. Plus, new visitors may be hesitant to provide too much of their personal information.

The less data you request, the more conversions you’ll end up with. In many cases, just an email address is enough, like in the example below.

Less form fields result in increased conversions

Many sites also ask for a first name to personalize their messages in the future, like in this example from The Oodie.

The Oodie popup design example

When you do feel the need to request more information, it’s best to use a multi-step popup. That way, you can ask for the most critical information first, then have additional input fields on the second page of your popup. 

The Oodie’s popup had a second page where they asked for a phone number as well:

Pop-up window that helps to improve the user experience

This strategy used by The Oodie is called the “Trojan Horse Method” and it generated $1.9 million extra revenue for The Oodie in just 30 days. 

If you’d like to “steal” their strategy, watch our free training:

6. Avoid showing multiple popups during a single visit

And finally, one of the most crucial yet often overlooked best practices for improving user experience is limiting the number of popups per visit.

While popups can be highly effective for lead generation and conversions, bombarding website visitors with several popups can frustrate them and drive them away from your site.

Think of it from the user’s perspective: Imagine landing on a website and being interrupted by one popup, then closing it, only to be immediately interrupted by another. This repetitive disruption leads to a negative experience and can quickly diminish trust in your brand.

Instead, adopt a more strategic approach:

  • Limit the appearance of popups to one or two per session.
  • Use targeted triggers based on user behavior to ensure the popup is highly relevant.
  • If multiple messages are necessary, consider alternatives like slide-ins or floating bars that don’t disrupt the entire browsing experience.

By not displaying multiple popups and focusing on relevant, well-timed messaging, you enhance the overall user experience, improve engagement, and increase the likelihood of conversion without annoying your visitors.

Closing thoughts on pop-up UX

Creating pop-ups like UX designers means thinking about each of your visitors as a human, and carefully considering the state of mind they’ll be in when a popup appears.

That’s why you should never use an entry popup, and instead create popups based on user engagement with your site. Defining user segments and then displaying relevant offers is the next step. And finally, you can personalize your popups using Dynamic Text Replacement to tailor your messages to each user.

By following these best practices, you can improve the user experience on your site, improve your list-building efforts, and increase sales at the same time!

Get started with OptiMonk for free and create stunning popups that improve the user experience in just a few minutes. Here are some of our most popular popup templates to get you started:

What should you do next?

Thanks for reading till the end. Here are 3 ways we can help you grow your business:

Boost conversions with proven use cases

Explore our Use Case Library, filled with actionable personalization examples and step-by-step guides to unlock your website's full potential. Check out Use Case Library

Create a free OptiMonk account

Create a free OptiMonk account and easily get started with popups and conversion rate optimization. Get OptiMonk free

Get advice from a CRO expert

Schedule a personalized discovery call with one of our experts to explore how OptiMonk can help you grow your business. Book a demo

Share this article
Written by
Picture of Nikolett Lorincz

Nikolett Lorincz

Nikolett is the Head of Content at OptiMonk. She is obsessed with content marketing and loves creating educational content for ecommerce store owners. She truly believes in the importance of quality over quantity.
You may also like