December 14, 2020 Read 4 Min

How to Do Popups the Right Way on Your App or Website

They’re known for being a nuisance. But if done right, popups can double and even triple conversion rates on your platform.

How to Do Popups the Right Way on Your App or Website

Believe it or not, popups don’t exist just to be annoying. 

They are actually a very powerful way to encourage users to perform a certain action or pay attention to something that will lead to conversion. But before we dive into that, let’s get the basics down.

What are Popups? 

Popups are the boxes that pop up on your screen when you enter a page on an app or website. They temporarily block the content you intend to access and are paired with a call-to-action to get you to do or pay attention to something. 

This CTA can range from inviting you to subscribe to their newsletters, sign up for membership, or check out an event that’s currently taking place. In other words, they intend to direct your focus towards something and trigger a certain action or behavior.

Popup Triggers

A popup trigger basically controls when a popup opens on a page. Here’s a simple breakdown of some of the most common triggers available by off-the-shelf popup makers and the uses they’re most well suited for.

1. Time-based

This trigger opens a popup after a set amount of time has passed. For example, a popup that appears 3 seconds after a user enters a website’s home page. 

This is the most popular out of all triggers. Popups that use this trigger are commonly seen on e-commerce websites and apps during flash sales or seasonal offers, as well as most websites that push for newsletter subscriptions.

2. Behavior-based

Behavior simply refers to any action a user performs on a platform. For example, popups with behavior-based triggers can be conditioned to open when a user:

• Clicks on certain elements on a page (buttons, links, images, text, etc)
• Scrolls a certain distance down a page
• Visits a specific number of pages

These types of triggers are great for a big variety of uses, the most common being to let users view details of an item or play media on a popup without needing them to leave a page.

3. Exit-intent

Popups with these triggers open when a visitor attempts to leave a page, prompting them with a customizable message. 

On desktop browsers, these triggers can operate with soft exit detection technology to trigger a popup when the user’s cursor leaves a page. Hard exit prevention can also be used to trigger a popup when the user refreshes the page, closes the tab, or hits the back button. 

These triggers are effective for prompting users to think again before they abandon a site. For example, showing users a popup that says “Are you sure you want to abandon your shopping cart?” before they leave a checkout page can quickly get them to reconsider.

How to Make Your Popups Effective

While it’s true that 80% of the time website visitors would immediately look for the tiny ‘X’ to get rid of a popup, when done in a way that hits all the right spots, popups can do wonders for conversion. 

Think of them as a quick sales pitch — Since the content on the page is blocked by the popup, you’ve got a few seconds of your visitor’s undivided attention. Can you get them to do what you want them to do in those few seconds?

Get to the Point

Popups aren’t the time and place for long eloquent copy. Remember, you’ve only got a few seconds to get your point across. 

If you’re trying to get visitors to checkout with a discount code, you might want to only highlight the discount percentage, discount code, a simple CTA, and important details like the validity period to spark a sense of urgency.

Shopback popup google chrome button extension cta

Upon entry, visitors who access ShopBack on Google Chrome will get a popup that encourages them to add the ShopBack button extension to their browser. 

This popup gets to the point by telling users what the extension can do — automatically find and apply cashbacks and coupons. They also make it clear that getting this button only takes 2 clicks, and pair the message with simple graphics that are easy to understand. 

Within 3 sentences and an image, the idea is sold. That’s how you get to the point.

Cohesive Design

Prevent your popups from looking like spam. Make sure they look like they’re part of your brand by using colors, fonts, and graphics that are cohesive with the rest of your platform.

shopee popup 1212 sale free delivery no minimum spend new uses only cta

Shopee’s 12.12 sale popup is a great example of cohesive design that helps accentuate and draw attention to the main message.

Getting straight to the point, the popup highlights “No Min. Spend” followed by “Free Delivery” with the same clear and bold typefaces used throughout their website, against their signature orange and blue accents. 

The simplicity of the popup layout also prevents information overload. By keeping the design clean and simple, there’s less room for confusion and more room for the main message to stand out.

Let Users Decide

Lastly, make sure the exit door is easy to find. Don’t try to hide the ‘X’ button to “trap” your visitors. That won’t make them want to click on your CTA more. In fact, they might even get frustrated with your platform.

Respecting their choice to say No will leave a better impression on them than if you force them to say Yes, and that’s what you should aim for — users who voluntarily choose you.

This also means you shouldn’t suffocate returning users with the same popup every time they enter your app or platform. Give them space to breathe and chances are they’ll have a better experience on your platform. 

Get Help from an Agency

If you need help exploring all your options with popups and other features for your app or website, getting in touch with an experienced team might be a good alternative.

Snappymob is an expert web and app development agency that prioritizes user experience in product design. If you’re thinking of enhancing your business with great digital products, feel free to talk to us!

If you liked this, you may also like: