/
/
UX usability and accessibility
/
Popup - pop-ups, ads - what instead ?

Popup - pop-ups, ads - what instead ?

Popup - pop-ups, ads - what instead ?

The pop-up has become an unwanted element of blogs and websites. It doesn't matter if it covers the entire screen, half of it, or is a small spot in the background. Pop-ups are used on many websites, which can make visitors feel that there are just too many of them these days.

From their perspective, a popup is simply annoying. It significantly reduces the content area of the website, forces you to perform additional actions (e.g. closing, leaving an email address, expressing consents, or simply moving to another subpage). Here's how to deal with popup ads and what to do to block them effectively

Table of Contents:

  1. Effectiveness of pop-up windows
  2. Examples of popup windows less intrusive on the site
  3. How to block popup windows

Popup on the website

A typical Internet user needs to see up to several popup windows (advertising window) at the same time just to start browsing a particular website. Below are the types of popup windows:

  • He first receives a pop-up asking him for permission to receive so-called web push notifications (notifications).
  • Another pop-up is information about cookies and the company's privacy policy.
  • The third is a pop-up window that pops up after a certain amount of time (usually after 15 to 30 seconds on the site) and prompts the user to leave his or her email address.
  • The next pop-ups (depending on the type of website) could be a messenger box, an encouragement to like the brand's fanpage, or even a survey.


The effect is that after visiting even 3 websites, the user is tired. He is fed up with more pop-up information and if he encounters it on the next pages he visits - he is sure to leave them quickly.

Effectiveness of the popup

What can be done to make pop-ups stop being annoying, but not lose their effectiveness?

Learn some techniques and examples of how you can change the pop-ups on your website to keep them effective while not tiring or annoying your users.

Popup - examples

See interesting examples on pop-ups that are effective:

Combining consents on the website

The recently introduced and implemented regulations on the processing of personal data (RODO) have messed up a lot on the Polish and foreign Internet. For some, the change has worked out for the better. For others, it has become a source of considerable legal problems.

For as many lawyers as you ask for an opinion - that's how many solutions to the problem you'll get. The strictest specialists advise collecting a range of consents (from data processing, consent to mailing, consent to profiling or confirmation of reading the privacy policy) when signing up for a newsletter. Others apply none at this time.


An example of this is XKOM, which does not require any checkbox to be checked to sign up for its newsletter:

pop-up popup i newsletter na stronie jak wylaczyc
No consents entered for RODO in the newsletter field

So keep in mind that you should consult a lawyer for any advice you find here.

Popup - cookie consent


When opening your website, it is incumbent upon you to inform each visitor about your privacy policy, how you process personal data, and your website's use of cookies.

The most popular solutions in this matter are :

  • Information bar at the bottom of the page - a minimally intrusive, slide-out sidebar.
  • Pop-up - a very intrusive and eye-catching window.
  • Information contained in the footer of the page - not immediately visible when entering the page, and available only after scrolling to the bottom of the page.

Information about the use of cookies in popup

The bar at the bottom of the page - small, but with clear text and a large, convenient to locate "X" button is the best and easiest to implement. It is this way of informing users that is chosen by most website owners. This way visitors do not feel in any way surprised by this information and can quickly locate it.

Pop-up - this is the worst possible solution for informing users about all the issues imposed by the law. This form is better used for other activities (e.g. encouraging newsletter sign-ups), which you will find information about later in the article.

Footer information - this solution is problematic in that it requires the user to perform another action of "scrolling down" to the bottom of the website. Certainly, it is a readable solution, since the user does not get a lot of information immediately after entering the site. However, many lawyers may question its legality.

Cookie information - notification presentation


Using pop-ups to inform about every single thing is not a good solution. It's worth leaving them only for newsletter sign-ups or more elaborate marketing automation campaigns (which you'll read about later).

To display cookies 'cookies' use a bar at the bottom of the web page, which in the code should be made not as a pop-up window, but as an element from the beginning visible when loading the page.

The solution is simple - because you just need to use the smallest possible bar at the bottom of the page. If you need more text - you can use a scroll bar (that is, in the CSS code its class should include overflow: scroll;).

popup o cookies
popup bar at the bottom of the page

popup polityka prywatnosci
popup window bar at the bottom of the page

This is how information about cookies 'cookies' should be presented. In addition, to provide even more comfort to all users visiting the site, another convenience can be applied. Namely, when the user starts to go lower ("scroll"), the information about cookies can be collapsed, for example, to the left side.

Everyone will benefit from this change. You will have the assurance that Google will not show you for bad practices. Your readers will have enough free space (as the window will not cover their entire monitor). Lawyers, too, will be happy that you are complying and informing users about the use of cookies.

And now that the legal issues are behind us, we can now move on to the more pleasant part....

Pop-up advertising, what do you need to know?


Yes, pop-ups are annoying in most cases, but these days there is probably no more effective way to obtain user data, inform them about promotions, as well as a range of other marketing activities. So how do you find the golden mean?

One thing you should definitely not do - display a large pop-up for the entire size of your website. The most popular and actually the only major search engine (that is, Google) has announced that there are several important rules that every website owner must pay attention to:

  • The pop-up must not load immediately upon entering the site. In other words, it's a good idea to wait a few to several seconds and not "bombard" the user with it as soon as they visit the site.
  • The user should not close the window to enter the site.
  • The size of the pop-up must be optimal. On the one hand, it must not cover the entire screen, while on the other hand, it must be large enough to retain its readability.
  • The button used to close the window should be clearly visible. It is accepted that it should be located in the upper right corner.
  • The pop-up should not obscure the background below it. After all, it is supposed to obscure the content of the website as little as possible.

Pop-up on the big screen - invite the user to take action


As we have already mentioned, a pop up window is the most effective method, for example, to sign up for a newsletter on an online store. Just by offering a small discount on first purchases, you can be sure that a large portion of site visitors will be happy to leave their contact information (along with their consents!).

However, what to do when you have already "attacked" the visitor with a pop-up at the entrance, but want to inform him about something else? The best solution would be to use the section on the right side of the screen, which on large monitors remains virtually unused by most site owners.

On small screens (mobile devices), however, it can be added as a "pop-up" space on the right side of the screen.

Such a pop-up will not work in every situation.

This solution has its limitations: well-coded and designed it works, but still only on large screens with resolutions over 1600px wide.

Before you take the time to implement it, take a look at Google Analytics to assess whether screens with this resolution affect more than 30% of your users.

To check this issue, go to Google Analytics Panel, then Recipients -> Overview, and finally find the "Screen Resolution" option.

dane z google analitycs
Implementation of popup on the site based on Google Analytics

Call-to-action (CTA) that will interest your user

The bar present on the right side of the screen can contain any information, but to be effective - it must meet 2 very important conditions.

  1. It must be perfectly visible. Ideally, it should be clearly distinguishable from other elements available on the website. This will ensure that your users will have no problem finding it.
  2. It must be very readable. This means that the icon, text, or even graphics used on it, clearly indicated what awaits the user when clicked. Whether it will be a transition to a contact, an order, an email, or anything else.

Examples of popup and CTA usage


For a good start, it's worth taking a peek at how pop-up issues are solved by others, because we don't want to immediately end up on the list of sites blocked by adblock :)

cta w popupie
Ceneo

popup wezwanie do dzialania

popup jako call to action
Informacja o darmowej aplikacji

blokowanie okienek pop-up
information about the next article

pop up z boku ekranu
Popup bar in the form of information in the lower left corner of the screen

paski reklamowe na stronach internetowych
recommended articles placed in the popup on the right side of the page

dodatniwe informacje w popupie
Xkom - additional information located in the popup on the right side of the page

popup i wyskakujace okienka przyklady
information about quizzes and a subtle bar about cookies at the bottom of the browser

popup wysuwany z boku na stronie
samsung website - information highlighted in popup form (opinions)

How to block or change pop-ups with ads?

As you can see, there can be many ideas for playing up a popup, and they are less intrusive than the typical large windows that appear at the start of a page. A pop-up may appear on an additional bar in the footer or on the side of the page, but it can be used for other purposes such as:

  • Login or register and invite to quizzes.
  • Chat and invitation to give feedback.
  • Confirmation of trust in a store or brand.
  • Leave to insert advertising.
  • Invitation to download the mobile app.
  • Links to social media channels.
  • An invitation to read the next article.
  • It's worth noting that it doesn't matter if we use 100% of the height of the space for our vertical action bar-it matters that the action is specific.

Let it be only to offer a promotion (discount, rebate) or to encourage contact. If there is too much information in the sidebar at once, it will lose its meaning, and therefore it will not convert either.

This is one of the key principles of creating a CTA (call-to-action), which should be strictly adhered to. After all, the call to action is supposed to have a clear and readable message that no user will have a problem with.

A website with a lot of content - how to encourage user action?


Pop-ups can be used anywhere - whether on the homepage, numerous sub-pages, or blog posts where quality content reigns supreme.

The best places to do this are sites that are eagerly read by their visitors.

Including an incentive to sign up for a newsletter or information about a promotion will not only get you visitor data, but also increase your sales.

On which pages to place a pop-up?


You can easily determine this with Google Analytic, for example, by analyzing the time spent on the site - provided you don't have too much video on the site, otherwise the results won't be representative enough.

And how to deal with the fact that you want to frequently change the presented banners without editing all the posts? Just use, for example, a shortcode in WordPress or hooks in PrestaShop blog to do it.

But first, let's check how this problem is being solved by others.

baner call to action reklama w tresci
Information / advertising in the content of the page, e.g. in a post

How to effectively block pop-ups with ads?


That is, popup vs. adblock.

Remember that a large proportion of visitors use so-called adblockers, through which your ads cannot "break through". For this type of user, you can present a different type of content, but which is not ad-blocked. What could it be? For example: an invitation to sign up for a newsletter, or even an invitation to read another blog post.


reklama natywna w tresci strony
popup video in post content

Pop-up in blog posts ?


To make your ads effective (eye-catching and, most importantly, encouraging people to perform a certain action), you need to remember a few important rules:

  • The use of strongly contrasting advertising material, so that the advertisement will immediately catch the eye.
  • The use of advertising material, which at the same time will be consistent with all its surroundings. Ideally, it should mimic the content of the website, and thus look more natural (it usually records fewer clicks, but higher conversions).
  • Using attractive content - text and graphics that are inviting.


Pop-ups, pop-ups, ads - summary


Pop-ups, there as well as email marketing have already outlived several other "trendier" solutions of their time (such as RSS feeds, which the younger generation of Internet users no longer remember).

Now they were to be threatened by push notifications and bots on Messenger. The upshot is that while push notifications have worked well on corporate apps and encourage us to buy pizza on promotion, bots on Messenger are a disliked form of communication that has quickly become similar to its telephone counterpart (the hated callcenters).

However, as practice shows - currently no solution is as effective as the good old pop-ups, and it is unlikely that any technological innovation will be able to threaten them, at least for the next few years.

Pop-up advertisement on every page?

Be careful in the conifguration of windows so that they do not pop up on every page. More than once in the conifguration of, for example, salesmanago likes to be this fact forgotten. Once clicked close or don't want should be enough to not show the user once again the same window on other subpages. This is often an example of poorly configured marketing software. It is worth remembering this