Javascript Popups – How To Use Them for Long Term Success

So you are thinking of adding a javascript popup to your website. Before you do, think carefully about the consequences.

The web is riddled with javascript popups these days. The default response if we want users to do something is to show an overlay with some attention-grabbing call to action. However, this can come at a cost.

In this post, we will explore that cost and then break down when it is safe and not so safe to use popups.

The web is overwhelmed with Javascript Popups that come in all shapes and sizes.
The web is overwhelmed with Javascript Popups that come in all shapes and sizes as is demonstrated by the array of popups offered by OptinMonster.

The Consequences of using javascript popups badly

You only need to look at your analytics after installing a popup to see they work. They will increase your newsletter sign-ups, app downloads or whatever call to action you promote. But that isn’t the whole picture.

Like dark patterns, popups may improve things in the short term, but it can come at a long term cost. Your analytics do not show the level of irritation that popups can cause users. Anger that reduces their likelihood to return to your site regularly and which alienate some people entirely.

Of course, this kind of irritation is hard to track. There is not always a direct causal relationship between reduced dwell time, page views and return traffic, so people don’t realise that popups can be at least partly responsible.

However, if you run qualitative research such as usability testing, you will quickly see just how annoyed users can become when having to dismiss popups.

Not that every management team cares about alienating users. However, they should. In the long term, this can reduce lifetime value, word of mouth recommendations and repeat business.

Admittedly javascript popups will probably not do this alone, but together with other usability hurdles, it can contribute to overall cognitive load and frustration.

So when precisely should we avoid using Javascript popups?

When you should avoid using a javascript popup

Not all popups are bad. Everything has its place. However, the majority of popups I see online are nothing more than an irritant to most users.

The three biggest culprits are:

The three most pervasive types of javascript popups are a newsletter sign up overlays, requests to send push notifications and privacy messages.
The three most pervasive types of javascript popups are a newsletter sign up overlays, requests to send push notifications and privacy messages.

Like most popups these three culprits share specific characteristics that users find particularly annoying.

Javascript Popups Distract

For a start, they are a distraction from what the user is trying to achieve. Users rarely visit a website to signup for a newsletter, read a privacy policy or even download an app (they usually go to an App Store for that).

Javascript Popups Take Up Valuable Real Estate

Then there is the fact that javascript popups take up valuable screen real estate especially on mobile devices, often obscuring other more important screen elements.

Javascript Popups can be particularly damaging on mobile where screen real estate is limited and dismissing overlays can be difficult.
Javascript Popups can be particularly damaging on mobile where screen real estate is limited and dismissing overlays can be difficult.

Javascript Popups are often hard to dismiss

The worst culprit of all is the full-screen javascript popup that the user is unable to exit from without clicking a specific button they need to find. It is even becoming increasingly common to label these buttons in such a way as to discourage dismissing the popup. Psychological manipulation such as “No I don’t want this amazing deal” or “No, I am happy being ignorant”.

A growing number of websites resort to manipulative copy to stop people cancelling popup notifications.
A growing number of websites resort to manipulative copy to stop people cancelling popup notifications.

Do not misunderstand me. Not all popups are bad. There are times when they are precisely the right solution.

When javascript popups might be the right solution

Like most things in life, there is a time and place for javascript popups. I often use them myself. However, I do have one rule I live by when it comes to using javascript popups. I only use them if they are either triggered by the user or I am sure the user has finished whatever task they came to do.

For example, if I want to promote a newsletter or some other call to action, I wait until the user has either completed their main task (such as making a purchase) or until they go to leave the website (known as exit intent).

But javascript popups don’t just have to be used for promotional purposes. There are many more user-friendly reasons to embrace them.

Javascript Popups can remove complexity

One of the most common reasons I use javascript popups is to reduce complexity by hiding secondary information in a popup that is only displayed when the user requests that information. An excellent example of this is a popup that shows when a user requests information about a companies return policy during check out.

Javascript popups can be used to display additional information for those who wish to view it without adding complexity for others.
Javascript popups can be used to display additional information for those who wish to view it without adding complexity for others.

A javascript popup allows us to provide additional information to those who are interested without taking them out of the checkout. But it does so without distracting those who are not interested in that information.

Javascript popups can communicate critical information

Javascript popups can also be useful in informing users about critical information that they should not ignore. An example of this would be a declined credit card or validation error when a form is submitted.

A popup can be used to comminicate important information or actions that users must take. We are familiar with this apoproach from how our operating systems work.
A popup can be used to comminicate important information or actions that users must take. We are familiar with this apoproach from how our operating systems work.

Not that javascript popups are the only way of achieving these things. Often, a popup is not the best way of grabbing users attention.

Alternatives to Javascript popups

The problem is that users have learnt that most javascript popups are nothing but advertising or cookie notifications. As a result, they often close them without even fully processing what they say. That means if the information is essential, a javascript popup might not be the most sensible choice.

Often a well-designed call to action or message within the body of content can be just as powerful as a javascript popup. If surrounded with adequate negative space and designed to be eye-catching, an inline message can often perform as well as a javascript popup without being anywhere near as irritating.

Adding negative space around a call to action increases its visibility and reduces the need for a popup to grab attention.
Adding negative space around a call to action increases its visibility and reduces the need for a popup to grab attention.

That is especially true when the message makes use of subtle animation to draw attention. However, as with javascript popups themselves, it is easy for this to be done badly and become irritating.

In short, although javascript popups have their place, we often over-rely on them when other options are available that are just as eye-catching.

Javascript Popups are not all bad, but they are overused.

Javascript popups are the user interface equivalent of shouting at people. They get attention, but they annoy. A great orator doesn’t need to shout to get people’s attention, and a great designer doesn’t need to resort to javascript popups in most situations.

The reason javascript popups are so prevalent isn’t that they are the best solution or even work the best. They are popular because they are simple and require little skill. So next time you are tempted to resort to a javascript popup, ask yourself whether a more nuanced approach might do the job better.

Boagworks Boagworld