Website Pop-Ups: When They Help and When They Hurt

What website pop-ups are

A pop-up can be a useful notice or an obstacle between a visitor and the page. This guide explains which is which, what Google's guidance says and how to build one that visitors can live with.

Website pop-ups are not bad in themselves. They help when the visitor asked for them or truly needs them, such as a consent notice, an age check or an enlarged photo. They hurt when they cover the content on arrival, are hard to close or keep returning. Google's guidance targets intrusive interstitials that block content, not small banners that are easy to dismiss.

A website pop-up is anything that appears over the page content: a sign-up box, a discount offer, a cookie notice, an age check, a chat window or an enlarged picture. People also call them modals, overlays or lightboxes. Google's guidance uses two terms. An interstitial covers the whole page, and a dialog covers part of it.

The name matters less than three facts: whether the visitor asked for it, how much of the page it hides and how easily they can get rid of it. The rest of this guide applies those three questions to the common types of website pop-ups.

Are website pop-ups bad?

Not by nature, but the automatic kind has a poor record. A pop-up that the visitor triggers, for example by tapping "Enlarge photo" or "Contact us", leaves them in control. A pop-up that appears the moment a page opens, before they have read anything, interrupts them and asks for something in return. Many close it at once, and some leave.

The harm usually takes one of these forms: the visitor cannot reach the content, the close button is small or hidden, the pop-up returns on every page, or the offer has nothing to do with why they came. On a phone the same pop-up covers a far larger share of the screen. A badly built one can also trap people who use a keyboard or a screen reader.

One test covers most cases. Can a visitor get what they came for straight away, without dealing with the pop-up first? If not, change it.

Does Google penalise pop-ups?

Google's guidance is aimed at intrusive ones, and the exact wording is worth reading. Its documentation on interstitials and dialogs describes them as page elements that obstruct the visitor's view of the content, usually for promotional purposes. Its advice is to use banners that take up only a small fraction of the screen instead of full-page interstitials, so that people and search engines can reach the content as soon as they land.

The same documentation says not to send visitors to a separate page for consent or input. Where a notice is legally required, such as a consent or age gate, it should be laid over the content, so Google can still index at least some of it.

In 2016 Google announced that pages where the content is not easily accessible after a visitor arrives from mobile search results may not rank as highly. Its examples were a pop-up that covers the main content, a standalone interstitial that must be dismissed before the content can be reached, and a layout whose top part looks like an interstitial with the real content pushed below it. It said that notices required by law, such as for cookies or age checks, and banners that use a reasonable amount of screen space and are easy to dismiss, would not be affected if used responsibly.

Google's page experience documentation lists intrusive interstitials among the questions a site owner should ask of their pages, and it says that no single signal makes up page experience. Google updates these pages, so read the current documentation instead of relying on a summary. In practice, treat the guidance as a reason to keep content reachable, not as a measurement to game.

When is a pop-up a good idea?

A pop-up helps when it serves the visitor's task. The table sorts the common types by when they are fine and when they cause trouble.

How to build a pop-up that respects visitors

1. Wait until the visitor has had a chance to read. Trigger the pop-up on a user action, or after they have scrolled through part of the page, instead of at page load.
2. Keep it small. A bar or slide-in that leaves the content visible beats a full-screen box. On a phone, check that there is still room to read.
3. Make closing obvious. Use a visible close button with a large tap area, let the Escape key close it and let a tap outside it close it.
4. Show it once. When a visitor closes it, do not show it again for a good while, and not on every page. Rules on what you may store in a visitor's browser differ by country.
5. Match the offer to the page. A discount code on a page reached from a support link, or a newsletter box on a checkout page, feels wrong.
6. Keep it light. A pop-up that loads a heavy picture late can make the layout jump. Size and compress any image in it, as the guide to website image size and compression explains.
7. Say plainly what the visitor gets and what you do with their details. Do not write decline buttons that shame the choice, such as "No thanks, I hate saving money".

Make pop-ups accessible

A pop-up that looks fine to a mouse user can trap everyone else. The W3C's ARIA Authoring Practices describe the expected behaviour of a modal dialog. Keyboard focus moves into the dialog when it opens. Tab and Shift+Tab keep focus inside it. The Escape key closes it, and focus returns to the element that opened it when it closes. Give the dialog a clear heading so that a screen reader announces what it is, and check that its text has enough contrast.

Anyone can run a rough test by pressing Tab and Escape while a pop-up is open. The website accessibility checklist covers the wider checks.

Alternatives to a pop-up

Often the same goal can be met without covering anything. Put a sign-up form inline at the end of an article, in a side panel or in the footer. Use a slim banner at the top for a notice. Offer a downloadable guide through a plain button on the page. Send visitors to a page whose whole job is the sign-up.

Inline options take less of the visitor's attention, work with keyboards and screen readers by default and need less testing.

Pop-ups and trust

Pages whose job is to build trust, such as an About page, are the wrong place to interrupt. A visitor reading about who runs a business is deciding whether to get in touch. The guide to writing an About Us page explains what that visitor needs to find. Do not put a discount offer over the top of it.

Who decides: design, content or development?

Pop-ups sit between design and usability. How they look is user interface design, and when and why they appear is user experience design. The guide to web design, UI design and UX design explains how those roles differ. Ask whoever builds your site to show how a pop-up behaves on a phone, with a keyboard and after being closed, before it goes live. The website development service page describes the websites Liftup builds.

How to test a pop-up

Open your pages in a private browser window on a phone, as a new visitor would, and note what appears and when. Close the pop-up with a thumb, with the keyboard and, if you can, with a screen reader. Compare sign-ups with the rate at which people leave pages after the pop-up appears. If you run a test, change one setting at a time.

Ask someone who has never seen the site to read a page and then tell you what they remember. If the answer is the pop-up, it is too loud.

Questions and answers

Are pop-ups bad for a website?

Not in themselves. A pop-up the visitor asks for, or one that carries a needed notice, can help. Automatic pop-ups that cover the content on arrival, are hard to close or keep returning frustrate visitors, and Google's guidance names intrusive interstitials as something to avoid. Judge each one by whether people can reach the content straight away.

When is a pop-up a good idea?

A pop-up is a good idea when it serves the visitor's task: a legally required consent notice, an age check, an enlarged photo, a booking form they opened or an urgent notice about service. Keep it small, easy to close and shown once. If a sign-up box can sit inline on the page instead, that is usually better.

Does Google penalise pop-ups?

Google's documentation advises against intrusive interstitials that obstruct content, and its 2016 announcement said such pages may not rank as highly. Notices required by law and small banners that are easy to dismiss were described as not affected when used responsibly. Google updates its guidance, so check the current documentation.

Do cookie banners count as intrusive pop-ups?

Google's 2016 announcement said that interstitials responding to a legal obligation, such as cookie usage, would not be affected when used responsibly. Keep the notice small, lay it over the content instead of sending visitors to a separate page, and make the choices easy. Consent rules differ by country, so ask a lawyer what applies to you.

Should a pop-up appear as soon as someone lands on the page?

Usually not. A visitor who has read nothing yet has no reason to respond, and on a phone the pop-up may cover most of the screen. Trigger it from a user action, or after they have read part of the page, and do not show it again once it has been closed.

How do I make a pop-up accessible?

Move keyboard focus into the pop-up when it opens, keep Tab inside it, let Escape close it and return focus to the button that opened it. Give it a clear heading and enough text contrast. You can test the basics yourself by opening the pop-up and using only the keyboard.