Overlayers are against the reciprocation rule

There’s a lot of evidence that people dislike on page load marketing overlayers. First off asking for something, without giving first, violates the reciprocation rule. But still, many websites apply this bad practice. There are some websites though, that do things better.

the easy and wrong shorthand to increase sales

Why I don’t like website marketing overlayers

  1. Because I don’t like strangers asking me something, before giving me something
  2. Because overlayers interrupt the navigation to my goal
  3. Because I don’t like advertising unless it’s smart

But these reasons are just my idiosyncrasies. Let’s check if people share my tastes. Let’s see some empirical evidence. It’s indirect, by which I mean it’s not my usability testing. But it’s from some smart guys: NNgroup and Baymard institute.

The rule of reciprocation

In a recent article Raluca Budiu of NNgroup has written about the rule of reciprocation (the authority in the fields of persuasion and compliance, now Regent’s Professor Emeritus of psycology and marketing, is Robert Cialdini). The rule states that we should try to repay, in kind, what another person has provided us.

To grasp the concept, we might examine an experiment conducted by psychologist Dennis Regan (1971). A subject who participated in the study rated, along with another subject, the quality of some paintings as part of an experiment on “Art appreciation”. During a short rest period, “Joe” left the room for a couple of minutes and returned with two bottles of coca-cola, one for the subject and one for himself; in other cases, Joe returned empty-haded.

Later on, after the paintings had all been rated and the experimenter had momentarily left the room, Joe asked the subject to do him a favor. He indicated that he was selling raffle tickets, and if he sold the most tickets, he would win a $50 price. Without question, Joe was more successful in selling his raffle tickets to the subjects who had received his earlier favor. Apparently feeling that they owed him something, these subjets bought twice as many tickets as the subjects who had not been given the prior favor.

In the websites and apps world there are many examples of violations of the reciprocation rule:

  • Asking people to fill in a form with their personal data to download a free paper before even allowing them to read a summary of the paper
  • Mobile apps that right after downloading the app ask people 1) to accept push notification, 2) to sign up, 3) to give the app permission to use the current location
  • Website’s overlayers asking to sign up to newsletter before people can start visiting the website for the first time

If you want to apply the reciprocation rule on the web, give your users something before you ask for anything from them. They will probably respond in kind, or I should say scientifically, to nice behavior.

I’ve found another interesting article by the Baymard institute that warn us on the use of overlay dialogs on page load (of course not on click events to show content on user request). In their testing, most of the people reflexively close the overlay dialog, not even glancing over its contents. What’s more, the subjects would get annoyed with the site for bothering them.

And finally overlayers on smartphone, are more than awful, since they are often very difficult (or impossible) to close.

overlayer on mobile phone

So, it looks like I’m not the only one who dislike overlayers.

Sign up to newsletter overlayer

That said, a client asked me to draw an overlayer on page load to ask first time visitors to sign up for a newsletter. The website is an ecommerce website. The goal was to raise the number of subscribers, because they saw a positive correlation between subscribers and sales. A positive correlation is not a causal relationship. Maybe sales and subscriptions raise together because of a common cause. Or maybe sales cause subscriptions. Image if this last case is the reality. Then, not only the overlayer would have no effect on sales, it would also annoy people. Not a savvy business move. Anyway, they asked me to design an overlayer…

The newsletter content is basically a list of deals with their prices and their “View deal” call to action. I did my homework, some rough benchmark analysis, some search about overlayers in general, and then I draw 2 proposals. The first one:

Mockup of the first overlayer proposal

This one is my favorite, because it gives to new subscribers a real advantage: sign up, and you will know about the new deals 24h before we publish them on the website.

The keyword here is “exclusive”. We interrupt the user navigation, and ask him to sign up to your newsletter before him seeing the website, and this we know, is totally wrong. But at least we try to give him back a reward that’s worth it. Something that’s different from what people that don’t subscribe get anyway. Here’s the second proposal:

Mockup of the second overlayer proposal

The second proposal is a safe classic (boring) overlayer, 90% similar to the competitors’. The problem with implementing the first concept has been that some backend code developing was needed. But there was no time, so they decided to implement the second concept.

A better ‘sign up’ implementation

Everlane website and Skillcrush blog have implemented a less intrusive overlayer concept. With this solution they don’t break the user flow, allowing the user to see and navigate the homepage.

Everlane website homepage