Overlays, modals, pop-ups, on-site messaging. Call them what you will, they can produce excellent results when used well, but create a poor experience for the user when used badly. 

Here we look at some best practices for using overlay messaging, and some common mistakes to avoid. 

Any tactic which potentially interrupts the user journey risks damaging the user experience on a site, and it’s often a question of weighing business goals and UX to find to right balance.

As Rand Fishkin explained in a recent Whiteboard Friday, it can be a trade-off. For example, an email opt-in message may attract more sign ups, but result in a slight increase in bounce rates.

The negative connotations around overlays is partly the fault of online publishers who, to an extent, are driven by the need to maintain ad revenue. This leads to the use of more intrusive ad formats which then drive users away, or to install ad blockers.

Overlays can work, but the best examples bear no relation to some of the poorer ad formats used online. Instead, they are designed to influence the user, and not to interrupt them unnecessarily.

Here are some characteristics of well-designed on-site messaging, along with some examples, good and bad…


Don’t Block the Whole Page

Overlays have to gain the user’s attention to work, but don’t need the whole screen to achieve this.

Blocking the whole page behind an overlay is about as interruptive as you can be. It also suggests you’re becoming a little too desperate to grab the visitor’s attention.

It does force the user to take some action, and for that reason, they probably deliver some results, short-term at least.

Here, the Quick Sprout blog serves me a full-page pop-up when I’m about halfway through the article. It’s annoying as it directly intrudes on what I’m doing, and forces me to click the small x in the corner. Or, more likely, the one on the browser tab.

Covering the whole page may drive a percentage increase in short-term micro conversions, but it’s a real risk in the long-term to be annoying so many of your users.


Make Sure Messages Can Be Closed Easily

If you make users hunt around for the ‘x’ or other link to close a message, you’ll just annoy them.

Making them hard to close won’t necessarily make people sign-up, it’s more likely to make them leave the site.

In this example from Design Within Reach, the email capture overlay can be closed by pressing the ‘X’ or simply clicking or tapping anywhere else on the page. So the retailer gets the message across, but the user can ignore easily if they want to.


Avoid ‘Manipulinks’

‘Manipulinks’ is a new word for me, found on a recent article on the Nielsen Norman Group blog.

It refers to the link text used on popups (often those asking for email addresses) which attempt to make users feel bad for opting out of an offer.

These links use text like:

  • ‘No, I don’t want to be a marketing ninja.’
  • ‘No thanks, I don’t like discounts.’
  • ‘No thanks, I don’t want more traffic.’

You get the idea. There’s even a Tumblr site set up to showcase some of the more shameful examples.

While the occasional example may come across as cheeky, or tongue in cheek (if it fits the brand), they’re often just a desperate attempt to influence user behavior.

If you’re having to try and manipulate people into signing up, maybe there’s some problem with the site or the offer.


Use in the Correct Context

So many overlays seem to be served at the wrong time, while users are reading an article for example. The lack of attention to context increases the likelihood of annoying users.

They should be served when they’re relevant to users. This is less likely to annoy users, and more likely to be successful.

For example, this message appears during checkout on IKEA, with the option of paying for assembly when items are delivered.

It’s a useful message delivered at the right time.

Likewise, this message on Virgin Atlantic appears when visitors are in the booking process but about to abandon (heading for the back button for example).

It prompts them to complete the booking, and also offers the opportunity to have the flight details emailed to them to avoid having to start over again.

It’s relevant to the context, and useful for some customers. For others, they can ignore it and close easily if they prefer.


Timing Matters

Many sites are too eager to serve you messages almost as soon as you hit the page (try Gap for an example of this) but this can be counter-productive.

By serving overlay messages at the wrong time, you interrupt the user journey, making the messaging less effective.

Let’s take email acquisition messages as an example – the ones which ask for your email in return for discounts or updates on special offers.

If you serve them when customers are busy browsing or viewing product pages, they could be interruptive.

However, if you serve them after a period of inactivity, after a pre-set delay, or at the right stage in the journey, they can be helpful to shoppers.

The same applies on this page. We show a message highlighting a related post as users reach the end of an article. You should see it at the end of this one.

It’s not too intrusive and comes up at a relevant moment – when the reader is finishing one article and perhaps thinking about what to read next.

The goal here is to increase the time users spend on site, and the timing and relevance of messages like this are key to achieving that.


Make Messaging Mobile-Friendly

Messaging needs to work for mobile users too. Our latest stats show that mobile accounts for the majority of retail traffic, so any messaging needs to work for mobile users.

Huge overlays would be interruptive, and could potentially fall foul of Google’s guidelines, so it’s important to consider the mobile user experience.

In this example from ASICS, a overlay is used to promote the brand’s newsletter. It gets the message across, but doesn’t interrupt the customer journey.

Here’s another example from House of Fraser. These messages appear then disappear within a few seconds so the point is made but the customer isn’t interrupted.


Messages Should Be Clear and Simple

Overlays shouldn’t be too complex. Users will make a decision on interacting with them quickly so they need to be able to understand the proposition easily.


Takeaways

On site messages / overlays should:

  • Appear when they are least likely to stop the user completing a task, i.e. not as soon as they arrive or in the middle of reading an article.
  • Be relevant to visitors and the page they are viewing. Context is key.
  • Provide a sufficiently attractive offer to encourage interaction.
  • Be frequency capped. Showing the same message over and over is guaranteed to annoy visitors.
  • Increase the time spent on site or the likelihood of conversion.
  • Work on all devices.
  • Be easy to close. If users don’t want to interact with messages, make it easy for them to close and continue.
  • Never trick or manipulate users.

Like what you’ve read? Sign up for more!