How to design pop-ups your audience LOVE

In 1997 (nineteen ninety-seven), Ethan Zuckerman created the first pop-up ad. When observing their development over the years, he felt obliged to send a statement to all Internet users. In 2014 (two thousand fourteen), in a specially prepared article, he apologized for creating pop-ups, and called them "one of the most hated advertising tools".

‍

In this episode, you will learn how to design pop-ups to which your users will respond enthusiastically without you having to apologize for them.

‍

Before the launch of the first boomboxes in Poland, Sony did a study. The declarative qualitative study was attended by teenagers who were asked whether the boombox should be in bright colors or in classic black. Almost everyone replied - any, just not black. After the survey, each participant could take one boombox home. Almost everyone chose black.

What is the conclusion of this? Don't trust declarations. Observe the behavior of your users.

‍

The same is the case with pop-ups. Many users say they are an invasive and annoying form of communication. However, research shows that they are just as effective.

‍

In 2019, Sumo analyzed 1,754,957,675 (one billion seven hundred fifty four million nine hundred fifty seven thousand six hundred seventy five) pop-ups. And the results are satisfying enough. 

‍

• The top 10% (ten percent)  highest-performing pop-ups averaged a 9.28% (nine point two eight percent ) conversion rate. And, by conversion rate, we mean someone who saw a pop-up and took action.
• Only 3 (three) out of 100 (hundred) people ever have pop-ups with conversion rates over 11%.(eleven percent)
• The average conversion rate for all pop-ups is 3.09%.(three point zero nine percent)

Just empty numbers, huh? So let's put them into practice - assuming that you could achieve an average conversion rate, which according to the Sumo study is 9.28%,((nine point two eight percent ))  and assuming that your site is visited by 150 (one hundred fifty )people per day, you will have up to 418 ( four hundred eighteen)conversions in a month.

‍

Now it sounds so much better, right? The question is how to design a pop-up that will convert like this?

‍

(simplicity - cognitive miserliness)

We are all misers. Cognitive misers. Our brain processes a huge amount of information every second. He has to constantly decide which of them are important and which should be ignored. We are not able to register everything, think about it and react to it.

That is why we learn very quickly to use mental simplifications that help us better understand the surrounding reality and process signals that affect us more effectively. We use the so-called cognitive saving and thus we protect our minds from being overloaded.

Due to this, not only the simplicity of the message itself is important, but also the appropriate call to action. Don't make your audience wonder what you expect from them. When they  think about it, you lose your chance for the desired conversion.

‍

Also take into account that pop-ups today are no longer unique to us. Over the years, they have become something of an element of the natural environment of the site. They are like a speed bump - although drivers do not like him, it still achieves its goal.

The users evaluate the attractiveness, including the cognitive one, of the message in a few first seconds. If a pop-up doesn't make them pay their attention with an image or title, they ignore it or close it.

‍

You have to be precise and direct.

Let me show you an example:

‍

‍

• Call to action- Sign up
• how often subscribers get the newsletter- twice a month
• what kind of news they receive- invites to private parties, styling inspiration, muses and BTS
• what they get instead- 15% (fifteen percent) discount

‍

Can you see the difference between this message and message like- Subscribe to our newsletters and get special offers? I hope so!

‍

‍

(F-Shaped Pattern of Reading) 

According to research by the Nielsen Norman Group, most people's eyesight moves across the web in an F-shaped pattern.

‍

1. Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
2. Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
3. Finally, users scan the content’s left side in a vertical movement. Sometimes this is a slow and systematic scan that appears as a solid stripe on an eyetracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

Why People Scan in an F-Shaped Pattern

People scan in an F-shape when all of these 3 (three) elements are present:

1. A page or a section of a page includes text that has little or no formatting for the web. For example, it has a “wall of text” but no bolding, bullets, or subheadings.
2. The user is trying to be most efficient on that page.
3. The user is not so committed or interested that he is willing to read every word.

‍

Knowing this and following the F-letter rule, you can choose the way the pop-ups appear on your site. Decide if your popup:

• should appear at the top of the page without covering the content and take the form of a top banner,
• slide out from the bottom of the page or to the side and, as in the case of top banners, do not cover the content, being a slide-in pop-up
• be displayed in the center of the screen (overlay)

• whether to cover the whole page by obscuring it (welcome mat)

‍

(displaying time) 

‍

The moment of displaying the message is just as important as the simplicity and positioning of the message. The pop-up that appears just before the website loads, is likely to annoy your visitors. Your users want to know they've come to the right place before they even get flooded with ads. Even a pop-up designed to help them will be perceived by them as annoying advertisement when displayed intrusively.

‍

So when is the best time to display the pop-up to your user? To choose the optimal popup display time, check the average session duration (time spent on the site) in Google Analytics. Then set up the popup to show one third or half of the time. For example, if the session duration on your site is 60 (sixty) seconds, the person will be ready to interact with the popup 20-30(twenty to thirty) seconds after the page is opened.

I recommend you experiment and perform some A / B tests of different timings and check which one is optimal. After all, you don't want to surprise your user with a pop-up too quickly, right?

‍

The study performed by Drip also should be helpful when choosing the appropriate time. Over 10(ten) million pop-ups were selected for the study, from which those that were viewed less than 2,000 (two thousand) times were filtered out. After analyzing the top 10 pop-ups, it turned out that the best time to display a pop is 8 (eight) , 3(three) .5 (five) , 6 (six), 30 (thirty), 15,(fifteen)  10 (ten) , 4,(four)  7 (seven) and 20 (twenty) seconds.

‍

‍

Based on these data and those contained in Google Analytics, you can choose the appropriate type of pop-up, the appearance of which will be triggered by the user's behavior on your website.

‍

You can choose from, among others

• timed website pop-up displayed when the user spends a certain time on the website (e.g. 30-60 seconds)( thirty to sixty) and becomes interested in your content.
• action / click pop-up displayed when the visitor has taken a specific action on the page, e.g. he has moved or clicked on a  field, image or word.
• exit intent pop-ups that appear when the user plans to leave the page (that is, he moves the mouse cursor towards the "x" sign).
• scroll pop-up - displayed to the user who scrolls the page to a specific place selected by you

The above-mentioned Drip study shows that the pop-ups displayed best after scrolling are 35%,(thirty five percent)  50 (fifty percent) , 40(fourty percent) , 15(fifteen percent), 10 (ten percent), 20 (twenty percent) , 30(thirty percent), 45 (fourty five percent) , 80(eighty percent) 25(twenty five percent)  and 70% (seventy percent) of the page

‍

Regardless of which type of pop-up you choose, always remember about the convenience and experience of your user.

‍

(capping and targeting) 

‍

Speaking of experience, shooting pop-ups blindly will not work in your favor.

When designing pop-up display automation, do not forget about capping, i.e. imposing a limit on pop-up views on a unique user, and targeting.

It is a good practice to display the popup only once while browsing your site. If on each page the user has to press the cross every time - sooner or later - he will go to the competition's website.

‍

He will be equally annoyed if, despite the fact that he has already subscribed to the newsletter, you will still display him a pop-up with such a message.

However, if the user declines by closing the pop-up, you must give them time to see the value of your site before asking to subscribe to the newsletter again. Give him time and let your brand convince him.

(google to keep order)

‍

You must know that in addition to the most important judge assessing your pop-ups - your user, there is also a guardian who guards their correctness - Google.

‍

In a January 2017(two thousand seventeen) update Google said that starting then, pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high. 

‍

Here are some examples of techniques that make content less accessible to a user:

• Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.
• Displaying a standalone interstitial that the user has to dismiss before accessing the main content.
• Using a layout where the above-the-fold portion of the page appears similar to a standalone interstitial, but the original content has been inlined underneath the fold.

‍

If you want to avoid conflicts with Google algorithms, and you definitely want to, you must refrain from using techniques that will make it difficult for your user to access your content. Importantly, this does not apply to the so-called gated content, i.e. content available only after providing data such as name and email, so use it at will.

However, if you do not want to display pop-ups for users of mobile devices, because of fear of irritating them, you must know that good Marketing Automation systems will allow you to display pop-ups for the user on the desktop and turn the pop-up into an HTML block for the mobile user.

By contrast, here are some examples of techniques that, used responsibly, would not be affected by the new signal:

• Interstitials that appear to be in response to a legal obligation, such as for cookie usage or for age verification.
• Login dialogs on sites where content is not publicly indexable. For example, this would include private content such as email or unindexable content that is behind a paywall.
• Banners that use a reasonable amount of screen space and are easily dismissible. For example, the app install banners provided by Safari and Chrome are examples of banners that use a reasonable amount of screen space.

It doesn't sound that scary at all, does it?

‍

And that's it for today.

Be sure to share your trick on the effectiveness of pop-ups in the comment. Or maybe you are their opponent? I'd like to know your point of view.

‍