As seen in this photo from the OfficeMax site, overlay screens (also called lightboxes or hoverboxes) are images that appear on top of a webpage. Overlays are often used to encourage visitors to sign up for a mailing list.As seen in this photo from the OfficeMax site, overlay screens (also called lightboxes or hoverboxes) are images that appear on top of a webpage. Overlays are often used to encourage visitors to sign up for a mailing list. While you may yourself, feel these “pop-ups” to be annoying and disruptive, research consistently shows them to be very effective. For example, eConsultancy reports an average overlay will increase opt-ins by up to 400%.
But as with any marketing tactic, results depend on care in execution and design, as well as testing with your target customers. Here are a few tips to create an overlay that works for your business:
- Size of box: Generally overlays should be large enough to be noticeable, yet small enough to allow the viewer to still see the page content behind the box --about 370x360 pixels.
- Placement on site: Generally, overlays appear on the homepage but you can have them appear on any page you wish. Some companies test overlays for special landing pages or blog content. The decision depends on where new visitors typically enter your site and when you wish to interrupt their browsing flow with your offer. Do not have it appear on checkout pages, however; as you do not wish to create any speed bumps when visitors are ready to purchase.
- Timing: Do you display your overlay quickly or wait until the visitor feels comfortable with your site and content? Here it is best to experiment with a few different times to determine what’s best. For example, if your average visit duration is 2 minutes for new visitors, you may wish to try three versions at 15 seconds, 30 seconds and 1 minute. You should also select how often an overlay is displayed per visit (usually once if you want to be less intrusive).
- Headline: Have a bold yet succinct headline with a clear call to action. Again it is best to test a few versions. For example, Reebok found that the headline “Join and Save” attracted 40% more signups than the simple “Join our Newsletter”.
- Incentives: State the benefits of signing up but make it as succinct as possible. If you give away a report or other free resource, consider showing a small image of the cover.
- Sign-ups fields: Ask for as little as possible – usually just First Name and Email.
- Buttons: You should have a colorful button with a call to action such as “Get your FREE copy”. Users can either accept the offer and enter their information in the form, or click a "no thanks" or "close" button to make the overlay disappear. You can test different colors and text.
Finally, here are some resources on overlay plugins for the WordPress platform: http://wordpress.org/plugins/shadowbox-js/