WEBSITE DESIGN GUIDE - LIMITING THE NEGATIVE IMPACT THAT WEB POP-UPS CAN HAVE

Whilst pop-ups can be of great benefit to your website, their usage needs to be carefully balanced against the negative impact they can have on the visitor experience, and their implementation needs to limit this impact as much as possible.

CONTENTS

 

1. INTRODUCTION

 

Return to contents

A pop-up is a graphical element that appears in the foreground of the visitor’s page or browser, typically without the visitor having (consciously) triggered it. You’ll have seen many, many pop-ups across the course of your internet lifetime because they are used by all manner of different websites. Whilst pop-ups can be used for positive purposes such as highlighting privacy policies or a website’s usage of cookies, we typically think of them being used for less virtuous reasons.

2. TYPES OF POP-UPS AND THEIR BENEFITS

 

Return to contents

‘Pop-up’ is used as a bit of a catch-all term (and one I’ll be using myself throughout this guide), but there are actually three different types of pop-up mechanisms to understand:

  1. Pop-ups. The classic type that essentially loads a completely new browser window in front of the page it was triggered from. These were the earliest form of pop-ups seen online but are, luckily, on their way out of popular usage.

  2. Modal windows/overlays. These load content in a new, framed window within the existing page the visitor is on. They might grey out the content behind them or they might not.

  3. Interstitials. These can take many forms but the most common one is an advert or sales message that takes up the whole of the webpage and is typically shown before (or sometimes after) the content the visitor was expecting to see. For example, if you clicked on a link to an article in Google but you were first greeted with a message saying ‘Enter your email address to be sent our free eBook’ then this would likely be an interstitial. These types of pop-ups are typically considered the most damaging to the experience as they delay the visitor from getting to what they want to see. For this, and many other reasons, they should be avoided.

Pop-ups offer a number of very clear benefits, which is why their usage is so widespread:

 

  • They capture and focus the visitor’s attention on one or two messages.

  • They can increase conversion by targeting specific visitors (such as those who look like they are about to close the page).

  • They can help capture a visitor’s information - for example email address.

  • They can be used for advertising purposes, creating revenue for the site.

  • They can be used as a way to launch visitor satisfaction surveys or comment boxes.

 

3. KEY USAGE CONSIDERATIONS

Return to contents

Just like with adverts, when they are done badly they are damaging to the visitor experience - forcing the visitor to pause their mission and interact with something they (almost always) don’t want to interact with. As a result, pop-up blockers exist and are very widely used, with most modern browsers even having some form of pop-up blocking functionality built into them as default. However, these blockers only work on ‘classic’ pop-ups and so usage of modals and interstitials remains widespread.

 

If you, like many website designers, are against the use of pop-ups and never intend to use them, then that’s great and you can probably stop reading this guide. However, as there are real benefits to using pop-ups, it is worth learning how to realise these benefits whilst protecting the visitor experience as much as possible. Below are a number of things to consider if, and when, you decide to use pop-ups on your site:

  • Why are you using a pop-up in the first place? This might sound like a flippant question but one you really should have a strong answer to. Are there any other ways you could be doing the same job without having a negative impact on the visitor’s experience (for example by using a static image or some other page element)? Is the value you’re getting back from any pop-ups really worth their negative impact?

  • How prominent is the pop-up? Does it take up the whole page and does it cover up other important content? Where is it on the page? Does it follow the visitor when they scroll? Ultimately, you need to ensure the pop-up’s prominence is proportionate to its value, which many pop-ups fail to appreciate.

  • Is the pop-up’s message concise and simple? To allow the visitor to process it as quickly as possible (and, hence, get on with the rest of their visit) it needs to be focussed on just one message, and be as tightly articulated as possible.

  • Is the pop-up visually appealing? Does it fit with the aesthetic of your page or does it clash and look out of place?

  • How easy is the pop-up to close or move past? For interstitials (which I’d recommend not using) it should be obvious which button to press to carry on to the content. For modal pop-ups, the window should be closable either by clicking the ‘X’ in the top right corner of it or, where relevant, by clicking ‘behind it’ on the original page.

  • From where on your site is the pop-up loading? It is always best to be selective with your pop-ups and the pages they’re on, and the pop-up’s message should always be relevant to the content on that page. Never run more than one pop-up per page, or more than a few different types across the whole site, as otherwise your visitors will feel continually interrupted and frustrated.

  • How often does the pop-up show to the same visitor? To further avoid annoying the visitor, you should limit their individual exposure to the same message either by only loading the pop-up a set number of times, or by having an exclusion period between each successive triggering of the pop-up.

  • When and how does your pop-up trigger? It is, unfortunately, quite common to see pop-ups trigger when a page loads, but this gives the visitor a terrible experience. Instead, either delay the trigger by a set period of time or require the visitor to have consumed a certain amount of the content before triggering (by which point they’ll likely be warmer to the message). 

  • Which devices does your pop-up trigger on? Google penalises the use of interstitials on mobile, but even if it didn’t these pop-ups would still have a massively damaging impact on those devices (given the higher proportion of the screen they need to take up). The rules of what Google penalises aren’t entirely clear, so it’s probably sensible to avoid pop-ups altogether on mobile. If you are going to run pop-ups on mobile, ensure they are in an appropriate, optimised format and not just a carbon copy of pop-ups used for larger versions of your website.

 

4. CHECKLIST

Return to contents

  1. Avoid using classic ‘load in new window’ pop-ups and interstitials - instead use modal windows or overlays. 

  2. Ensure the benefit a pop-up can deliver outweighs the negative impact it can have on the visitor experience, and explore other routes to achieving the same benefit.

  3. Ensure your pop-up’s prominence is proportionate to the value it brings to your site.

  4. Keep pop-up messaging concise and easy to digest.

  5. Ensure the visual appearance of your pop-up aligns with that of the page and the rest of the website.

  6. Make it perfectly clear how to close the pop-up and, where relevant, allow the pop-up to be ‘clicked off of’.

  7. Limit your use of pop-ups to pages where their message is most relevant.

  8. Avoid using more than one pop-up on a single page.

  9. Limit the number of unique pop-ups running on your site at any one time.

  10. Limit the number of times a pop-up can be shown to a single visitor through hard caps or exclusion periods.

  11. Carefully consider how and when the pop-up will be triggered, ideally allowing the visitor to acclimatise to the page (and, potentially, your website) first.

  12. Disable pop-ups on mobile unless you have incredibly good reasons not to do so.

  13. Make sure pop-ups are mobile optimised if you need to use them on those devices.

Found this content valuable?

Want to get in touch?

Contact us by email or Twitter.