Designing Pop-Ups for a Better User Experience

Introduction

From the name of the title of this article, you can already sense some bias in my opinion on this topic. I always liked thinking about pop-ups because they can be great when done right. These are very hard to implement on a website because they can be very grating and jarring to unsuspecting users. That is the keyword here, “unsuspecting”. Your users are browsing your website looking for information and all of a sudden they get one of these “ads” in their face. Not all pop-ups are ads but users will treat them like that if you do it wrong because they feel like you are giving them something that they did not ask for. I would like to discuss pop-ups and find ways to implement them properly in order to avoid providing a negative user experience.

What Are Pop-Ups?

I am pretty sure that we all know what pop-ups are because this is not something that you can avoid unless you rarely surf the web. Pop-ups are exactly what the name implies. These are pieces of content that appear on your screen in hope of converting you with a call-to-action. Most of the time websites will use pop-ups to get you to sign-up for a newsletter, sell a product, or contact them for help. Before I get into too much detail of why websites use pop-ups and the reasoning behind them, let me talk about the most common ones that you see on websites.

Page On Load Pop-Ups: The Most Intrusive Kind

I gave these pop-ups a pretty technical name. These are the ones that you see the most on websites because they literally show up as the page loads. You do not have to click on anything or scroll the page to make this kind of pop-up appear. Is this jarring? Definitely if done on the home page. Every website usually has most of their traffic land on their home page and people know this. People know that their home page is often the most popular page on their website. 

Home Page Pop-ups: We Just Got To Your Website

So people will have these pop-ups load first thing on the home page before giving people a chance to even know what the website is about. Is this a good idea? Depends on who you ask. If you find that people are leaving your website in Google Analytics because engagement time is low, then it might be the pop-up. There could be other factors but the most common use for pop-ups are the cookie permission ones, which I will discuss later. 

Time Delayed Pop-Ups: Is This Better Than Just Showing Them Right Away

Some websites use a timer to only show the pop-up after five or ten seconds using the setTimeOut() function in JS. Is a delay better? Again, it depends. A delay might be even worse than a pop-up that shows up right away on page load. Why? The reason might be because showing the pop-up right away after page load lets people see it and they can close if they do not care for it. If you wait some time after page load to show the pop-up, then you are bothering your user and interrupting them while they are reading your website. Chances are, after several seconds the user might be engaged in your content and looking for something. The last thing that you need to do is disrupt your users who are trying to read something and show a pop-up right in the middle of their reading.

Event Pop-Ups: On Mouse Over Or Click

These types of pop-up only activate when the user initiates an action. Typically these actions are either a mouse over with the cursor, or a mouse click. These pop-ups are a lot less jarring than the page load ones because users have a choice if they want to see the pop-up or not. These pop-ups are common when you want to perform an action and you are required to fill out a form. Sometimes the form can be located on another page. Or, the form can be inside a pop-up that will show on the same page that you performed the click on. Since users can control if these pop-ups show up or not, they do not negatively impact the user experience as the ones that show up on page load.

Which Pop-Up is Better: On Page Load or On Mouse Over/Click?

From my previous sections, it would sound like the on mouse over or click pop-ups are better than the on page load ones. You see, it is not that one is always better than the other. This more has to do with the implementation of these pop-ups and not just taking it at face-value. The problem is that websites know that people do not stay on them for long. Once people find the information that they are looking for, or maybe not, they leave. So in order to convert users as quickly as possible, they hit them with a page load pop-up. These websites are playing a numbers game where they expect to receive a high amount of traffic and perhaps convert a very small percentage. So the conversion strategy here is quantity over quality. These pop-ups will use a sense of urgency to convert users. How websites do this is tell users that there is a limited time offer and they must convert right away. Or, the website will use the pop-up to tell users that they need to convert now and they cannot live without it.

Pop-ups that show up when a user performs an action like mouse over or click are more likely to work better because users will be more informed before they activate the pop-up. So what this means, is that the content inside these pop-ups can focus more on giving more product or service details and not have to rush users to convert like a load on page pop-up. These pop-ups will rely on quality over quantity because informed users are more likely to convert but it requires them to perform an action to see the pop-up. Due to this extra required action, the entire user conversion flow is slower but gives users more time to think if they really want to convert. So the user feels more respected when you give them time to make an informed choice and not just show up all of sudden when they least expect it.

How Pop-Ups Work: A Technical Look at CSS and JS

Pop-up work using a combination of at least HTML/CSS/JS. The HTML gives the pop-up its structure and a place to hold the pop-up’s content. The CSS is for styling and making the pop-up look pretty. The JS is used to actually give the pop-up its functionality. This is where you can tell the pop-up show up on page load, mouse over, or click. As mentioned earlier, you can tell the pop-up to load after a certain period of time using the JS function setTimeOut().

Dissecting a Pop-Up’s Components

I would like to discuss the different pieces that are common to pop-ups. Most pop-ups that cover the entire screen usually gray out the background. You see this when a pop-up appears and the background turns black. Why does the pop-up do this? The reason why the background turns dark is so that you can focus only on the pop-up and not anything behind. The change in the background’s color is to remove any distraction that might make you close the pop-up.

Another common element to pop-ups are the ability to close them either through clicking the X in the upper right corner, or by clicking outside the pop-up. This is a usability feature for those who want to disregard the pop-up and want to close it. Much like how emails are required to allow people to unsubscribe from a mailing list, people must be able to close your pop-up if they do want to deal with it. Refusing to do this is a violation of usability because you cannot force people to use your pop-up if they do not want to.

Both of these features are common and already built-in to pop-up. I wanted to discuss them because everything that is built, is built by design. So there is a reason why things are the way that they are.

What Kind of Content Is Placed Inside a Pop-Up?

Now I would like to talk about the kinds of content that people place inside a pop-up. Most of the time, the content you find on here are call-to-action buttons meaning the convert users.

Cookie Use Permission

This is probably the most common pop-up content that you will see on most websites today. This pop-up is directly asking you if the website can use cookies to collect information while you browse the website. This is part of the GDPR policy, which is something that makes websites be up-front on letting users know what kind of data is being collected and how it is being used. Since I have already discussed the intrusive nature of pop-ups, these cookie pop-ups tend to appear toward the bottom of a website instead of taking up the whole page. Unlike most pop-ups, these cookie ones cannot be closed unless you agree with the pop-up. These pop-ups actually require that you agree with the website’s terms or else you can not use the website. This is just like signing a contract and you agree to the terms, otherwise the contract is null and void.

Newsletter Signup

These pop-ups are common and tend to show up on pages where the website feels they need to convert users. The goal of the newsletter signup is to collect user emails so that they can be added to a mailing list. Users on this mailing list are then sent newsletters to their email address informing them about new products or developments on the website. These can be effective pop-ups if they offer something free to people. Usually they tell users that they can receive free tips and news straight to their email inbox. These pop-ups are successful when people see the value in your website content. If they do, then they are more likely to subscribe to your newsletter. So think about giving users time to read your content before trying to get them to sign up. This means that you might be able to convert these users if they return to read your other stuff.

Selling a Product

This kind of pop-up tries to promote either their best-selling product or one that is heavily discounted for a short period of time. Since these products are being placed on a pedestal and elevated above other products, a pop-up is a good choice for this. When you think about how I described how pop-ups work earlier, where the background turns black. This gives a particular product a spotlight to be showcased, free from anything else that can take away the user’s attention. If successful, this pop-up can convert if it shows that the user does indeed need this product and even more if a discount is available.

Contact for Help

Even though websites are open 24/7, there is still only so much they can do. Websites are great when businesses are closed, but they cannot possibly answer every single question that a person has about a product or service. This is where being able to call or email a business is helpful. As humans we still require human contact because we want to know that there is another human being behind that website. So having a pop-up that provides contact information can help users who feel lost or have questions. People tend to look more favorably to these pop-ups if they only see them after browsing a website for a while. No need to show this pop-up to people right away as soon as they hit your website. Let users browse and gather information first. You need to let your users breathe and try to find the answers that they are looking for on their own first. Trust that your website can assist users and only if they cannot find what they need, then show a pop-up with contact information.

Do People Like Pop-Ups?

This really depends on how the pop-up is implemented. Pop-ups are more likely to receive a positive reception if they satisfy the user’s visit to your website. As I mentioned earlier, when you give users both a chance to browse your website first and control when they see a pop-up, people will not think that they are just ads. However, if you do not give users either of these then they will most likely just close your pop-up and might even leave your website before they are finished with browsing because the pop-up felt like an ad that they just want to get rid of.

Full-Screen Pop-Ups Are Just Like Video and Interstitial Ads

The issue that people have with pop-ups is that they naturally stem from similar advertising that they did not ask for. Think about the ads that you see in videos. These videos usually let you skip the ads after about five seconds or so. So advertisers know that most people do not want to see the whole ad. People not only avoid video ads but also ones that they do not want to see are interstitial ads. These are the ads that appear in-between pages and place a barrier between the destination page and the user. Since interstitial ads come unexpectedly just like a on page load pop-up, this could incur a negative user experience and cause people to impatiently wait to skip the ad. So bottom line, try not to make your pop-ups come off as ads that your users are not expecting. Rather, do them tastefully when users are ready for them and you might get conversions out of them.

Alternative to Pop-Ups: Is There a Better Option?

All of this talks about the issues with pop-up and having to tread around them carefully as to not provide a negative user experience. So is there something better that can be used instead of a pop-up? I have an idea that does not have the intrusiveness of a pop-up, and this a landing page.

Landing Pages: How Can They Be Better Than Pop-Ups?

I already said that landing pages are not intrusive at all because they are an actual page. This means that someone clicked to go to the landing page. So the user chose to enter the landing page and know more about the content there. This is inherently different from a pop-up that appears on page load. This means that you have a higher chance to convert on a landing page because you gave the user control and allowed them to click to that landing page. They were not forced to go to that landing page unlike how they are forced to see a pop-up. So in this regard, landing pages might be better for your content than on page load pop-ups.

Summary

Pop-ups are a great way to put your best content out there front and center for your users to see. I talked about the differences between pop-ups that show up on page load and those through a mouse over or click. Some things that you should consider is giving people time to absorb the information on the website before showing them a popup. Also, give people control if they want to see the pop-up through a mouse over or click event.

A couple of common features of pop-ups include darkening the background to focus on pop-up content. The other common feature is being able to close the pop-up via clicking an X in the upper right corner or clicking outside the pop-up in the dark area. This allows people to disregard the pop-up if they choose to.

Some common content that you see inside pop-up includes cookie user permissions, selling a product, signup up for a newsletter, and contacting for help. Proper implementation increases the chances of user conversion instead of users just closing the pop-up. Careful implementation is necessary or else people will see your pop-up as another ad that they are trying to skip when wanting to watch a video.

Landing pages can be a better alternative to using pop-ups. Again, you have so many ways to serve your content to your users. The best way to do this is to truly understand your audience and see what method might work best. You can check your web traffic and tell if you are getting clicks. If not that you might need to consider changing your page and serve your content in another way.