Digital campaigns using HTML5 banners can be very effective... unless you make one of the mistakes listed below.
🟣 1. No eye-catcher
This is the most important step – without it, hardly anyone will notice your ad.
If the graphics and content on the banner are bland, nothing stands out enough to grab our attention. See for yourself:
You need something that stands out from the surrounding content.
All you need is 1 key element (e.g. text or graphics) that – visually and through animation – makes it unmissable.
Once you've got the viewer's interest, they will stay with you... for a few seconds.
So avoid... ⬇
🟣 2. Too many animation scenes
You have a few seconds to capture the viewer's interest and communicate the key message.
Conventional wisdom is that 3-5 scenes is a reasonable maximum.
In our opinion, getting to the point quickly is more important than quantity.
We consider 1-scene banners + optional half-scenes to be a good compromise.
This way, you can quickly:
capture the viewer's interest,
communicate the key message,
optionally include more detail while keeping the focus on the key message.
Below is an example of what happens when there are too many scenes:
A sensible approach to the number of scenes will allow you to stick to the content that is actually essential. And this means that you avoid... ⬇
🟣 3. Too much information
A banner ad isn't the place for detailed explanations.
It should be simple, short and to the point.
It's about capturing the viewer's interest and encouraging them to find out more... but only on the landing page.
Even if LP transitions aren't important to you, too many elements will make the content unreadable. Like in the example below:
Hence they also need to be adjusted to the format – you can't display the same content on a 300×50 mobile screen as on a 970×250 desktop.
You can also go overboard with the animation. ⬇
🟣 4. Unsuitable animation
Animation will help to attract attention and spice up the ad. However, if there's too much of it or it's unsuitable, it will make it difficult for the viewer to absorb the content.
The animation, just like the content, must have the right order and sequence. It also can't be too slow or too fast.
For example, 3 elements moving at the same time will make it difficult for the viewer to know what to focus on and in which order to read the messages.
🟣 5. Essential elements missing or not displayed properly
If something is important, make it stand out, rather than the less important parts.
A CTA, packshot, logo or other element may be essential, depending on the campaign goal.
For example, CTAs, which are essential in a performance campaign where LP transitions are important:
➡ should BE THERE
➡ should be clearly visible, encourage the viewer to click, and clearly communicate the next step.
In an image campaign, elements other than the CTA, such as the packshot, may be more important. 🍫
After all, you don't click on an ad for a new Kinder bar (because why would you?) However, the fact that you've clearly seen it on the banner means that on the store shelf, it will get your attention more quickly (trust me, I know!).
Example of a banner with an unreadable logo and offer:
A banner without a CTA and logo:
A banner in which all the elements are unreadable:
Summary
To sum up, the mistakes that reduce the effectiveness of HTML5 banners are:
no eye-catcher,
too many animation scenes,
too much information on the banner,
unsuitable animation,
essential elements not displayed properly or missing.
Need help with a digital campaign using HTML5 banners? 👇