popup - Pop-ups: when and when not to use?

As a web developer I get to play with popups a lot. So much that it seems like on every project that I work on there is always at least one big discussion among devs (and PM) about popups and when we should use them, what data to show in a popup, etc. and I always get the feeling that the use of popups on a website is being abused in a way.

For example a popup could solve a problem of editing data rather quickly (both programmatically for the devs and for the user to do what ever he needs to do, or at least that's what we think), or often a popup is something that the client wants, but these cases may not be appropriate To be solved by a popup type solution. As a developer I'm looking for best practices or rule of thumb regarding popups:

When should we use a popup, UX/UI wise?

What are the pros and cons of using a popup?

For the user, what does it mean to use a popup? Is using a popup implies something about the action to follow?

Answer

Well, to start with, let's define our terms. There are a number of different things on the web that get referred to as "popups":

1. Separate browser windows, usually set to a specific size with reduced browser chrome


2. In-window floating elements, whose appearance is triggered by the user, that cover a relatively small portion of the screen, often with a small arrow pointing to the element that triggered its visibility


3. In-window floating elements that cover the majority of the screen (either by themselves, or by 'dimming' the rest of the page with a semitransparent overlay), and block other functionality on the page until they are dismissed. (This last one is more properly referred to as a "modal" but the term popup is often misused for it.)

Each of these has different purposes, and each comes with its own advantages and disadvantages:

The separate browser window "popup"

This was far more useful in the early days of the web, when the scripting and layout techniques enabling the other options simply didn't exist yet. This type has significant disadvantages: it's easily lost behind the main window, especially for users who browse fullscreen; it works poorly on mobile devices for obvious reasons; you need to build in obvious ways to re-open the popup if the user accidentally closes it; and most significantly many users have configured their browsers to simply block this altogether, or will immediately close them without even looking (since it's been misused for advertising purposes for so many years.) This technique is largely obsolete, with one single exception: unlike the other types, this form of popup can persist even if the user navigates to different pages in the 'main' window; there are some narrow use cases where this is useful.

The in-browser "popup"

As a broad rule of thumb, use these for information or functionality which:

• is small and self-contained (don't use it for large chunks of content or multi-step forms for example)


• is specifically related to a particular element already on the screen (which will serve as the trigger for showing the popup)


• is optional (if the user needs to open the popup every single time, then its content probably belongs inline)


• would clutter the page if its contents were brought inline (this one, I have to admit, is a rather fuzzy requirement; it's a bit context dependent depending on the content of the popup, the overall layout, and the amount of functionality and content already visible elsewhere on the page)



• is a single, standalone element, not one of a set of related elements (in which case an accordion or tabbed subview may be more appropriate)

The full-page "popup"

Modals are interruptive, so should be used as sparingly as possible, and only for elements which the user must interact with before continuing -- license agreements or paywalls for example. They should not be used for stepwise processes -- in those cases simple stepwise navigation is more appropriate -- the only reason modals are not fullscreen is to indicate to the user that when the modal is closed they will be returned to whatever they were looking at before the modal was opened. (If that is not the case, do not use a modal, again use plain old navigation.)

Modal popups are increasingly being used for advertising purposes (either third-party ads, or self-advertising of the "subscribe now!" variety.) This is an inherently user-hostile act (web design has become increasingly user-hostile overall, in recent years) and is a large part of the reason the ad-blocking wars are heating up so quickly.

I personally believe this is trading a short-term gain (yes, some percentage of users will "subscribe now" who might otherwise not have) for long-term disaster (users, as a rule, don't like being annoyed or interrupted.) Engaging in this sort of behavior basically trains your users to use ad-blockers instead of viewing the web unfiltered, which ultimately harms everyone; and it encourages some percentage of users to simply stop visiting your site altogether.