Creative agency glossaryWeb, UX/UI, and Design

Pop-Ups

A pop-up is a window or overlay that appears on top of a web page to show an offer, a sign-up form or a notice, usually triggered by time, scrolling or an attempt to leave.

What is a pop-up?

Strictly, a pop-up was a new browser window that opened on its own, usually an advertisement, and it was so hated that browsers began blocking it by default in the early 2000s. The engineer who wrote the code for one of the first pop-up ads later apologized for it in public. What people call pop-ups today are mostly overlays inside the page itself, often called modals or lightboxes: a box that dims the page behind it and asks for something.

They come in several kinds. Entry pop-ups appear on arrival, timed ones after a delay, scroll pop-ups after a visitor reads a certain distance, and exit-intent pop-ups when the cursor heads for the top of the window. Less intrusive cousins include slide-ins in a corner and banners across the top or bottom. Some are required, such as cookie consent and age gates; most are marketing.

Why it matters

Why a pop-up matters

Pop-ups work, which is why they persist. A well-timed offer can collect far more email sign-ups than a form in the footer. They also cost something every time: they interrupt the thing the visitor came to do, and a brand that greets every visitor with a demand before showing them anything reads as needy. Since 2017 Google has also counted intrusive interstitials against mobile pages that cover their content as soon as a visitor arrives from search. The question is never whether pop-ups convert, but whether what they convert is worth what they spend in patience and trust.

In practice

How a pop-up works in practice

  1. 01

    We set rules before designing anything. Nothing appears on arrival, and nothing at all for a visitor from search who has not yet seen the page they came for. The offer is something worth having, not just a request for an email address. The close button is obvious and large enough to tap. Each visitor sees it once, not on every page. On phones, a slim banner or a slide-in usually replaces the full overlay.

  2. 02

    Then it is measured beyond the sign-up count. The useful numbers are the sign-up rate alongside bounce rate, time on page and the quality of the leads, since a pop-up that doubles sign-ups while losing a share of buyers can be a net loss. Timing and offer are tested against each other, and the whole thing is checked for accessibility: focus moves into the dialog, the escape key closes it and a screen reader announces it.

Watch out

What people get wrong about pop-ups

Triggering them before the visitor has seen anything. A sign-up box in the first second asks for commitment before making any case for it. Second, the guilt-trip close button, the kind that makes the visitor click a sentence like no thanks, I prefer paying full price, which converts a few people and annoys everybody else. Third, stacking them, so the cookie banner, the chat bubble, the newsletter offer and the app prompt all compete for the same screen and the page underneath is never read.

Questions

People also ask

Do pop-ups hurt SEO?

They can on mobile. Google treats intrusive interstitials that cover the main content right after a visitor arrives from search as a negative signal. Pop-ups required by law, small banners and overlays that appear later in a visit are generally fine.

What is an exit-intent pop-up?

A pop-up triggered when a visitor appears to be leaving, usually detected by the cursor moving toward the top of the browser window. It is less intrusive than an entry pop-up because it does not interrupt reading, although it is harder to detect reliably on phones.

Are pop-ups worth it?

Often, if the offer is genuinely useful, the timing respects the visitor and the results are measured beyond sign-ups. A pop-up that collects emails while driving buyers away is not worth it, and only the full numbers will tell you which kind you have.

Next to it in the glossary

  1. Parallax ScrollingParallax scrolling is a web design technique in which background and foreground layers move at different speeds as a visitor scrolls, creating an illusion of depth.
  2. PersonaA persona is a fictional but research-based profile of a typical user or customer, used to keep a team's design and messaging decisions focused on real people.
  3. Persona DevelopmentPersona development is the process of turning audience research into a few named, lifelike profiles that a team can design, write and plan for.
  4. Portable Network Graphics (PNG)A PNG (Portable Network Graphics) is a lossless image format that keeps every pixel exactly as saved and supports transparency, which makes it the standard for logos, interface graphics and anything with a clean edge.
  5. Print DesignPrint design is the design of anything made to be printed, from posters, packaging and books to brochures, signage and stationery.
  6. Product DesignProduct design is the discipline of deciding how a product works, looks and feels, from the problem it solves to the details of its interface, so that it is useful to people and viable for the business.

Every Web, UX/UI, and Design term →

In the work

Where it shows up

All our creations →

From the journal

Read around it

The journal →

Talking the talk is one thing

We make the work.

RIOT is a creative agency and production studio in New York. Strategy, brand, film, photography, design and the campaigns that carry them, made by one team. A few lines is enough to start: we read every brief the same day.

    Footage