Popups; dos and don'ts
Popups — aka overlays, modals, or lightboxes — are overused. They're occasionally good for certain things, but most uses we see for them are simply not beneficial to the user and may in fact hurt engagement, Google search ranking, etc. Popups are often used as a "catch-all" band-aid solution: "We didn't think about where this content would go? We didn't account for this functionality? Throw it in a popup!"
Popups present big challenges for usability, accessibility, and SEO.
They often perform badly on mobile — if your popup content is long enough that the popup needs a scrollbar in mobile, do not use a popup. A scrolling popup over a scrolling webpage is a terrible user experience.
In most cases, there are two simple solutions that are better than a popup for usability, accessibility, and SEO:
- Display the content right there on the screen — a taller page is fine; users scroll!
- Put the content on a new page and link to that.
In digital media, the less glamorous solution is often the better one for users, and the one that leads to greater success for our clients. Everything we do should be focused on success. Using a popup just because it's cooler or more attractive (or easier for the designer!) is generally not a good idea.
Popups and SEO
Google punishes websites that use popups poorly (and for many other things!). When Google thinks a site is doing something that is potentially sneaky or dishonest, or not focused on what the topic of the webpage is supposed to be, they punish the site by ranking it lower in search results.
What kinds of popups make Google unhappy?
Popup that automatically opens on the first page of a user's visit — We often use these in pharma, especially on an HCP site when we ask the user to confirm they're an HCP.
Popup that hides a significant amount of content and requires the user to dismiss it in order to read the page — this is similar to the above.
Interstitial exit popup — We often use these in pharma, especially on a resources page, when we notify the user they're leaving our site and visiting an external one.
What's the solution? Find new, elegant ways of displaying the content and achieving the same results. As a digital agency we should be responsible for guiding our clients and telling them we're doing things differently going forward because it will lead to better results for them. Digital changes with time; let's guide our clients toward doing things better going forward.
Some best practices
Popups should never have scrolling content. We must design popups to fit the smallest phones and smallest laptop screens with no scrolling.
Of course, the design of a popup must follow all the same rules for accessibility and ADA compliance as the rest of the site.
To dismiss the popup, include a "Close" button rather than just using "X"; this is better for accessibility. (Just like a hamburger icon and the word "Menu"!)
A confirmation for a form should never be a popup. What happens when the user closes the popup? They're back at the form. Confirmation should be on a separate page — or the form can be programmed so that the confirmation message appears in the same place where the form was, replacing it. (Can the entire form and the confirmation be in a pop-up? Yes, they can. But this is often a clunky, inelegant user experience, and it also may lead to scrolling in the popup, which again is a huge no-no. A form in a popup is one of those situations where it usually seems like the designer just thought using a popup would be cool, without considering the user.)
So when are popups good?
From a usability and SEO standpoint, not very often.
On a website, popups may be used for contextual things where we don't want the user to lose their place in the content they're engaging with — e.g. a tooltip popup that explains a term — but even then we have to ask ourselves, will this be a good experience on mobile?
Displaying a larger version of a chart (or other image) in a popup is something we see pretty often which tends to work well on desktop but terribly on mobile.
If we calibrate our brains to accept that popups aren't a good solution in most situations, we can focus on designing our content in a way that enhances engagement, aka success. Our clients will thank us!
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.