Pop-ups: when and when not to use?

Question

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 1

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.

Answer 2

Here is a very nice summary from NNGroup

• The user is about to take an action that has serious consequences and is difficult to reverse.
• It’s essential to collect a small amount of information before letting users proceed to the next step in a process.
• The content in the overlay is urgent, and users are more likely to notice it in an overlay.

Answer 3

There are a couple primary reasons why they work (Advantages ):

• Readers and visitors to your pages have short attention spans. They
  may not subscribe or submit lead information not because they don’t
  like what they see, but because they’ve been distracted, are bored,
  or you don’t have a clear call-to-action button. Popups interrupt
  their leaving, putting an engagement opportunity front and center.

• Readers and visitors are focused on your valuable content. People focused on a certain task experience something called “inattention blindness”, which means they don’t notice something obvious when they’re focused on something specific. Popups break through inattention blindness and encourage a conversion that might have occurred had your visitor been able to see your “ask”.

Disadvantages Of Using Popups

1.Many visitors, especially those who are familiar with internet technologies, don't like popups. Some people dislike them so much, the will immediately exit a site with a popup.

2.Some popups, especially those which contain scripts, might slow your page load time down which is a factor in conversions as well as SEO.

3.Anything less than the right message at the right time can be annoying and distract visitors from their experience.

Please Refer this link to know more about the popups.