Avoid overlay dialogs on page load

Quick show of (virtual) hands. How many here have a popup on their Shopify or Squarespace website?

According to the Baymard Institute, who benchmarked 50 sites, 40% of those sites used an overlay dialog when the user visited their homepage or a category page.

Baymard suggests that the popups annoyed the user and some went as far as referring to any overlay dialogs as “spam”. By reflex, users closed the dialog box without even reading.

Though I wasn’t in their sample set, that’s me too! Perhaps because I grew up with 90s popup-windows and equate anything that jumps in my face when browsing sites with those dreaded spammy sites. My initial reaction is to just close the window and I don’t spend time to read other than to make sure I’m actually clicking on the close button and not something else.

If you use popups on your site for newsletter sign-ups, contests, discounts and the like, consider the gut reaction many users have when something jumps in their face when they aren’t expecting. They automatically react and want it to go away. Most don’t spend the time to see what it is, they just close the window.

From an accessibility standpoint, popups are a big issue because they disable the main window and a new window appears (the popup), often confusing a screen reader.

Overlay dialog boxes can be used when requested by the user as long as it’s not right when the page loads. Give users an escape route with a cancel button, close button, escape key or by clicking outside the window.

Accessibility Tip: All popups must have an escape route that is keyboard accessible. Usually, the escape key will close the window.

The better approach is to display your newsletter sign-up, discounts etc inline throughout your site. This is also a great way to break up sections or utilize your sidebars without bombarding the visitor.