Get Updates

New posts, webinar and event invitations, and more.

Grabbing attention, politely: overlays done right

, Monday, January 26th, 2009

When you’ve got a big campaign to promote, you’ve got lots of choices about how to promote it on your site.  You’ve probably used simple image promotions, or maybe a featured action.  Maybe you’ve tried elaborate, attention-grabbing Flash banners.  Each method has its own pros and cons: what will generate the most clicks?  What will engage your visitors?  What will help your supporters find it and know how important it is? What will just be ignored out of “banner blindness”?

Consider overlays as another tool in your toolbox.  You’ve probably seen overlays on a number of sites – they’re not the dreaded pop-ups, but instead fade out the page content and present you with a request, often a small form.  They can promote almost anything.  Recently, Heifer International has used overlays to recruit visitors to their email list, with great success; the overlay captures many more names than the signup box on their homepage.  NPCA used an overlay to let visitors know about their matching gift offer, and drove a significant number of visitors to their year-end donation form.  The big benefit of overlays is that they put your number-one priority front and center, presenting your visitor with a simple choice before they continue on to your site.

An overlay on heifer.org

Granted, overlays are a little controversial – I’ll admit that I’m personally suspicious of them, but that’s because they’re so often done badly.  Some organizations are concerned that an overlay will increase their bounce rate (we’ve seen overlays to have minimal effect on our clients’ site metrics, but if you’re concerned, you should test it for yourself).  If you follow a few tips, though, you can make overlays an effective engagement tool without annoying your users.  You’ll see a common theme running through most of these tips: to be successful, your overlay should make your pitch and then get out of the way.  Let your overlay design be guided by respect for your users, so that you don’t interfere with their browsing experience.

  • Make one strong, direct call to action.  This means presenting visitors with a single, briefly-stated choice.  It’s easier for them to make one choice – take the action, or not – than to find and choose your action amidst all the content on your site.  Make the action easy for them to understand and make a quick decision.
  • Keep it minimal.  Use short text, relevant images, and a very small number of form fields (if any).
  • Don’t look like an ad.  Users will not only close ads without reading them; they’ll get annoyed.  Make the overlay design fit the rest of your site, so it looks like it belongs.
  • Provide an easy out.  Since your overlay is briefly coming between your user and your site, make sure it’s as easy as possible for them to get back to the site, whatever they decide to do.  If they decide not to take your action, they should be able to get where they’re going.  I like to provide two outs: a prominent “no thanks” button next to the main action, and a familiar “x” in the top-right corner that users will recognize as the way to close the “window”.  Also, it helps to leave the original page content visible (but darkened) under the overlay, so they can tell they’re still in the right place.
  • Show it only once.  Set a cookie when your visitor sees the overlay, so they won’t see it again next time they visit (or, if your overlay is on multiple pages, they won’t see it again in the same visit).  Respect their decision if they choose not to take your action; asking them again probably won’t change their mind.  In case they do change their mind, make sure the action is easy to find in your site.
  • Be strategic in what you promote through your overlay.  Use it to promote important or timely actions.  Remember it’s the first thing your visitors may see when they arrive at your site.  And if you’re promoting a limited-time campaign, remember to take the overlay down when it’s done!

Have you used overlays with your organization?  Comment and share your tips (or pet peeves).

Comments are closed.