Visually disruptive overlays are the new pop-up. You know the things I mean – you’ve followed a link to what looks like an interesting article, but as soon as you load the page the content you actually want to see is covered by a semi-transparent overlay exhorting you to profess your undying love for the site, even though you haven’t read a single word of its content yet. It’s not quite as annoying as being forced to sign in using Facebook before you’re allowed to see anything but sometimes it gets close. It’s about this annoying:

Schwer sauer  by Achim Hering

Now, I can definitely see the purpose of these overlays, especially now that an increasing amount of visits to websites are driven by posts on social media. As site owners we need to attract people in to our content longer term rather than having them pop in, read a single article and then disappear into the ether(net) never to be seen again. The problem as I see it is that most of them are poorly designed, inaccessible to users with disabilities and have been implemented with no thought to how a user actually interacts with a website. As such they tend to be counterproductive, annoying more potential long-term visitors than they gain. Let’s look at the four main problems:

1. The instant “love me”

Tell me that you love me

The majority of these overlays trigger as soon as the user visits the web page, or (even worse) within a couple of seconds of arrival. If the overlay then asks you to sign up for a newsletter or follow the site on social media (as it often does) then that’s an instant fail in my book. Why would the user do this when they haven’t even seen your content yet? If you can’t be bothered to think about how someone might use your site then I’m not impressed.

Lesson: Don’t ask the user to love you too early, let them get to know you first.

2. The persistent nagger

Why trigger an overlay once when you can trigger it on every single page you view? That seems to be what a lot of designers think. Doing this is a great way to encourage people to leave your site, not read more of it.

Lesson: No means no, don’t keep asking.

3. “Catch Close me if you can, I’m the Gingerbread Man Overlay”

Hmmm… that section title sounded better in my head… Anyway, pressing on! I frequently browse the web using the keyboard rather than the mouse, I (usually) find it faster. But it’s not just me, there are a lot of people out there who find it difficult or even impossible to use a pointing device like a mouse and so use a switched input device like a keyboard instead. The vast majority of these overlays assume that we’re all mouse users out there and ignore the position of the keyboard focus when they are triggered. The upshot of this is a lot of angry keyboard users frantically hitting the tab key in a vain attempt to move the focus to the close button of the overlay, which may not even be possible. At which point they will likely just close the browser tab and never visit your site ever again.

Lesson: Think of the children keyboard users! (again, better in my head than on the page…)

4. The hard sell

Not so much to do with technical implementation as with the content of the overlay itself. There’s a small minority of sites out there with overlays that really put on the hard sell. Take this example:

Nasty Misleading Overlay 1

And this one:

Nasty Misleading Overlay 2

Trying to make your potential customers feel stupid/inadequate is not a pleasant tactic, even in an overlay.

Lesson: Don’t be a d#@k

So, what to do?

Like I said at the start, I think there is a time and a place for these overlays, you just need to implement them properly. So, you need an overlay that gives the user time to get acquainted with your content, doesn’t nag, is keyboard accessible and doesn’t treat the user like an idiot. Surely that’s not so hard? Turns out that no, it isn’t, in fact there’s one on this very page! You probably haven’t met it yet, but when you do please be kind and when it asks you to love us at least let it down gently…

Oh, and if you want one of your very own, here’s how to build a non-annoying, keyboard accessible overlay using jQuery. What you put in it is up to you, but remember, don’t be a d#@k.







Want more from Refined Practice?

For all the latest updates, follow us on Twitter:

Or like us on Facebook:

8 Responses to Visually disruptive overlays AKA “those irritating pop-up things that seem to be everywhere nowadays”

  1. Susan Conklin says:

    And yet your very own overlay breaks at least two of these rules… Despite the comment at the end of the article.

    • Paul Ratcliffe says:

      Interesting, because from as far as we can tell it really doesn’t (that’s why we designed it after all). If it is breaking any of these rules when you view the page we would love to have more details as to what the problem is so that we can update it (i.e. what browser are you seeing the problem on, what behaviour are you seeing, etc.).

      For info, here is a quick run down on what we see when we test the overlay (lots more info in the blog post that goes in to detail on the coding of the overlay – link above).

      1. The instant “love me”. Our overlay should only be triggered when you scroll past the end of the content on the page, giving you chance to read what’s on the page before it is triggered. If that’s not what you are seeing, please let us know.
      2. The persistent nagger. Our overlay shouldn’t be triggered more than once every 48 hours. We do use cookies to achieve this, so if you aren’t accepting them then you may see it more often, but still no more than once per page.
      3. “Close me if you can”. Our overlay is very careful about how it deals with the keyboard focus, making it easy to close. After closing, the keyboard focus is returned to where it was before. For mouse users there is a nice big “close” button in the top right corner.
      4. The hard sell. We don’t use any misleading text of the nature described in this article in our overlay, just links to our social media.

  2. Haldan says:

    As I scrolled through this article, an irritating overlay popped up asking me if I wanted to subscribe to refined practice. Hypocrisy is sweet!

    • Paul Ratcliffe says:

      I guess you missed the parts of the article that said “Now, I can definitely see the purpose of these overlays … The problem as I see it is that most of them are poorly designed, inaccessible to users with disabilities and have been implemented with no thought to how a user actually interacts with a website”, ” I think there is a time and a place for these overlays, you just need to implement them properly.” and “there’s one on this very page” then?

      • George says:

        And which part of “poorly designed” did you miss? I’m trying to read more of the page, and now I’m being interrupted from the flow of reading your site. That’s counter-productive.

  3. Dick Johnson Dallas says:

    The truth is that for an average internet user any kind of popup sucks donkey balls. People are getting so much spam information that they really don’t care how it’s made. That’s the actual voice of the people. Anyone who markets that stuff is either delusional or lying. These days websites that focus on simplicity and functionality actually stick out.

  4. junk says:

    Me sees overlay.
    Me hits Ctrl-W.

    IF I can be bothered, and IF the content is interesting enough, I MIGHT be motivated enough to move my mouse pointer towards the “BeyondTheOverlay” extension button, which will auto-remove the blighter.

    But most of the time, I don’t bother.

    Really, you could add a little box in the sidebar, always staying in view, or a small non-modal overlay, with your “love me” buttons.

  5. Avd says:

    What baffles me the most is that the overlay is not removed from code permanently. Most hackers today are taking advantage of this by creating an “install” feature on the close button (“x”) so when you dismiss it, you’re authorizing them to install malware. This overlay must go!

Leave a Reply

Name and email are required. Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.