Overlay design best practices

If the acquisition rate for your overlay is less than 3%, we recommend adjusting the design, content and/or settings. 

Here are our top tips for building website overlays.

See also: Overlay design guide

Images

Overlays with images boost acquisition.

Ometria offers different layouts for your images:

• Full screen background images
• Two column layout images
• Mobile optimised

Full screen background images

✅ For overlays with full background images we recommend using an abstract brand image with an even contrast tone. 

❌ Highly detailed images with high contrast, e.g. a product photo, tend to work poorly. 

• We recommend having your designer add a light or dark opacity to the image to ensure an even tone.
• If you're using an image with a lot of detail, try cropping the image so that the focal point doesn't overlap with the text for form fields.

We optimise the desktop background image for mobile, but you can also upload a separate background image for mobile.

Two column layout images

Detailed images with high contrast, e.g. a product photo, tend to work better for the flexible two column layout overlay. 

See: Overlay layouts

The two column layout works best for portrait oriented images: 

… and the two row layout works best for landscape oriented images:

Text colour

✅ Select a text colour that contrasts with the background image or colour.

E.g. If your background image is dark blue, choose a light text colour such as white.

For design consistency, we recommend using the same colour for the title, body and privacy copy.

Text size

✅ We recommend using minimal copy to quickly get the attention of your customers. 

❌ Long paragraphs with highly detailed instructions perform poorly. 

Make there is a distinct size hierarchy between the title, body copy and privacy policy text. 

Copy and content

✅ Keep copy short with clear type hierarchy (i.e. the headline and body copy size are not too similar, but not too far apart). No one wants to read paragraphs!

Discount codes are the best-converting popup incentive.

❌ Poor copy example

Here's an overlay with too much copy and poor headline to body copy hierarchy.

✅ Best practice example

This overlay highlights "10% off" as the headline and uses lighter copy for the body, creating a well balanced type hierarchy. 

The extra bullet points from the previous example can be used in the success screen, which the lead sees after they've signed up. 

When it comes to acquisition, less is more!

Mobile optimisation

We recommend uploading a separate image for overlays shown on mobile screens: 

This is because desktop optimised images don't always respond well to mobile. 

You might need to crop your original image, or choose a new one which looks better:

❌ Not optimised for mobile

✅ Optimised for mobile

Testing

See also: Test and preview your overlay campaign 

To A/B test your designs, we recommend duplicating your current overlay and making your changes.

Pause your original overlay and set the new one Live.

After two weeks (or more, depending on your needs), compare metrics on both overlays.