How to Use Pop-Ups and Remain User-Friendly

To put things clear right away, we’ll start with a basic definition.

In terms of digital marketing, a pop-up is a small window that automatically appears on the website page without you selecting it. Pop-ups are non-permission windows, meaning websites can show them without asking for user’s agreement. They appear only on the corresponding website page and can contain text, CTA and images.

Why to Use Website Pop-Ups

Depending on the business type and service, and current marketing strategies, pop-up ads can be used to perform various tasks:

• grow a subscriber list;
• promote specific products;
• promote seasonal offers;
• introduce arrivals;

• retain attention;
• announce a competition or challenge;
• announce an event, etc.

As you see, regardless of the type, the main purpose of a pop-up is to grab attention and concentrate it on the current marketing focus, be it a product release or a new store opening.

Pop-ups are also useful to direct attention to the parts of the webpage that aren’t visible straight at the entrance - for example, a subscription form, typically located at the bottom, or a discounted product category that requires scrolling to be seen.

Pros and Cons

As with any other tool, pop-up marketing has its advantages and disadvantages.

Here are the main pros:

• pop-ups prompt website visitor to make a decision (yes or no);
• the offer can’t be ignored technically;
• they are easy to be A/B tested;
• they are automated;
• you set the procedure once;
• they enable to track what content people are interested in and further send relevant emails;
• they are easy to design.

As for the cons, the main and the biggest pitfall is user annoyance. According to the survey measuring consumers’ perceptions of online ad experiences by Coalition for Better Ads, up to 50% of responders find pop-up windows “very annoying” or “extremely annoying.”

The same 50% also find pop-up ads on websites distracting “a lot” or “a great deal.”

People don’t like it when you jump in with ads at the first second before they could even get to see your content. Besides this, the wrong timing can make your pop-ups kind of “needy” and “pushy.” Extensive ads make you look desperate for attention and clicks.

How to Use Pop-Ups and Not Be Annoying

The above being said, a pop-up is a double-sided coin, and your job is to ensure you use the right side. Let’s see how to do it without hurting the user experience and create the right balance between engagement and irritation.

1. Set the appearance timing.

When you show your pop-ups determines their effectiveness. The strategy may differ, but we recommend giving people time to browse your website (20 to 40 seconds) and consume some information. Requests to subscribe appearing on the first second a user lands on your page look premature. People don’t know if your content is worth subscribing to, so give them a moment to look around.

For careful settings, check the traffic statistics at your Google Analytics to see the average session spent on your website. Set the time delay for a pop-up for about 10-20 seconds before people leave the page on average.

If you’re not sure about timing, are afraid of being too early or too late, consider applying one of these website pop-up designs:

• Instead of a timed pop-up, implement a scrolling pop-up so that they appear after a visitor scrolls past a certain % of the page. Lasting scrolling means people have had time to get familiar with your products and decided if they’re interested in further communication.
• Set a # page visit pop-up. Such pop-ups will load only after a visitor has visited your website for the set number of times and made no interactions. A little encouragement with a small incentive can help.
• Set a click pop-up. They are triggered by a click on any element on the website (text link, CTA, image) and are a direct response to a user’s action (meaning they’re the least interruptive).
• Set an exit pop-up. Based on mouse tracking (cursor directionality, velocity), such pop-ups appear when a user is about to close your page, open another one, or click the Back button. An option for leaving-to-soon pop-ups.
• Set an entry pop-up. Yes, in most cases we do recommend not to bombard people straightaway, but for promotion of limited offers or soon-to-be-expired deals such methods may be applicable.
• Restrict pop-up display. For example, don’t show it within the next 30 days to those who have seen them.

2. Don’t be overwhelming.

A sidebar prompt, web push permission, pop-up, chat bot, and whatever else you’re using on your website shouldn’t attack users all at once at the very first second.

Use your marketing tools in a complementary sequence and set the right timing for each. Too many choices at once can be hard to handle. It involves much thinking, prioritizing, and decision-making, and people don’t like complicated things.

Make sure your pop-ups are straightforward and easy to digest, and don’t confront other offers.

3. Make a clear exit icon.

User-friendly pop-ups are pop-ups that are easy to get out of. What makes them so?

• exit icon is big;
• displayed in the most likely part. In 99,9%, it’s in the top right corner of the pop-up. People intuitively look at this spot as most digital tools are exited in this area;
• not transparent;
• has maximum contrast over the background;
• closed in one click.

No need to explain that if people can’t keep on exploring your website, they go elsewhere, and you lose potential subscribers and customers.

4. Write a simple text and a direct CTA.

Tell people what you want in brief sentences and include an understandable call to action.

Nobody reads the small print, so make sure you put all the essential info in one crisp sentence in big letters. Use simple imperative language: Sign up to get 10% off first purchase + subscribe fields and button; Schedule a free demo/virtual tour + CTA; Download a free report + download button.

5. Don’t show pop-ups on every page.

Let’s imagine: people enter your homepage or landing page, see a pop-up and exit because they aren’t interested in the offer. They keep on browsing, go to another page and see the same pop-up again. They exit, a bit irritated, but still keep on searching and click another page but see the same pop-up for the third time. Now really irritated, they leave your site and go to not so annoying places.

To avoid such a scenario, set pop-ups to appear on one page only - the one the visitor sees first. If people don’t need your offer right now, multiple displays won’t change their mind but only aggravate irritation.

6. Don’t annoy repeat visitors.

The above user-friendly approach should be applicable to repeat visitors as well. For example, people browse your website for a while, see a pop-up, respond to it or exit, continue browsing and then close the page. Later on, say in several hours, they return to the page for some more information and see this pop-up again. Obviously, many would find it inappropriate and irritating, especially when they’ve already considered the offer and gave the answer.

Set up an interval (5 days, one week, etc.) between pop-ups for the same visitor to prevent irritation and losing potential prospects.

7. Don’t use condescending language.

All of us come across pop-ups with such phrases - No, I don’t want to work out. I don’t need interesting books. Thanks, I don’t want to care for my hair, etc. Brands who use it probably have some marketing research behind this strategy, but we don’t like this kind of ads.

Instead of underlying the product benefits, such pop-ups use manipulative tactics and make people feel bad and even guilty for clicking no. We’re sure you can do better.

How to Create a Pop-Up: 8 Design Ideas & Examples

And now let’s get a bit closer to pop-up examples themselves. Although it looks like a simple design of a pop-up leaves little space for creativity, there are some practices you may employ to make your ones noticeable and memorable.

1. Use an unusual shape.

Actually, this isn’t the best example. It looks like there is too much small text, and such words as terms and conditions typically scare people off. However, we like the idea of a disproportionate layout. The top pink box grabs the attention and helps focus on the pop-up message.

Another example of a custom design, this time by Campsaver: a pop-up of three boxes read left to right and not top to bottom that is more standard.

Bottle Breacher uses a standard rectangular shape but with an unusual layout. It’s nice, but we would make the CTA (SHOP THE BADASSERY!) more obvious.

2. Use humor.

If a humorous angle resonates with the tone of your communication, feel free to use it in pop-up design as well.

Subscribers to our newsletters have been scientifically proven to be smarter, better looking and at least 50% more awesome than average. - isn’t this nice? We don’t like small print, but if you make it through it, it’s hard to hold a smile. We couldn’t.

And here is another example of a good pop-up - straight, short, smart copy, nothing extra.

3. Use brand-related graphics.

And this is our own pop-up featuring space elements. It’s designed in one style with our blog, emails, and social media to create the omnichannel experience and promote brand recognition.

4. Offer free materials.

These are the so-called bribe pop-ups when you offer some materials (eBook, report, image, template, pattern, audio, video, etc.) in exchange for an email address or app registration. And while % off next purchase presupposes postponed perks, a free download is an instant bonus.

5. Use fun images.

Paravel is a luggage retailer but they managed to add some cute vibes to their pop-up window by simply putting there a cute dog. And who doesn’t like dogs?

6. Use gamification elements.

Gamification can be an effective tool to spice up your marketing practices, including pop-ups. It’s even more able of catching attention and driving response due to its dynamic and entertaining design.

7. Use a countdown timer.

Consider including a countdown timer if you promote a limited offer that expires soon. However, make sure its layout isn’t broken and looks professional.

8. Experiment with fonts and spacing.

Even standard text can look extraordinary when typed in custom fonts.

Pop-ups can generate results forwarding the website visitors to the deals they would have missed out on otherwise. However, when used in a pushy, intrusive manner, they harm user experience and convenience. Don’t let it happen. Set the corresponding timing, compose a straightforward message with clear CTAs, and don’t bombard customers with the same pop-up each time they visit your page (especially if they have clearly shown they’re not interested).

More to Read

Something interesting we’ve found on the subject:

1. Opt-In Pop Ups, The Good, The Bad And The Ugly (And 1 Tip To Make Them 300% More Effective) - more technical tips on the topic by Gael Breton from Authority Hacker. Some stats and numbers are provided which is always appreciated.

2. 3 egregious pop-ups, manipulinks, confirmshames & ignoble modals - we share the author’s point of view.