Rethinking banner ad design
Etch this into your brain: the biggest mistake we can make in designing a banner ad is to assume users are looking at the banner ad.
Banner ads are completely different from every other type of digital media in that they are not the main content on-screen. Think about it — website: the user has chosen to visit our site. Email: the user has chosen to open our email. Banners are totally different. Our ad appears above/below/beside other content, which is (sorry to say) always going to be of higher quality to the user. Think about it — the user is reading a news article, or shopping for a product, or viewing some social posts. They've chosen to engage with that content — and our banner ad is on-screen nearby.
So job number one is to make the user look at our banner. Then we can think about content. And guess what, you're probably thinking about banner content wrong too. More on that in another article.
What makes a user glance over at a banner? I'll tell you what doesn't — several frames of text fading in and out over a static background. And that's, unfortunately, basically the default approach to designing banner ads. Why? It's hard to say, but I believe it's because we make the mistake of designing banners that we assume people are looking at. The same idea of text fading in and out over a static background would work fine for something the user is already engaging with, like a website or a video. But this approach is missing that crucial step of hooking the user's attention so they'll begin to engage with it.
Our lizard brain
Why doesn't the fade-in, fade-out approach work well? That kind of motion is usually too subtle to catch our attention when our eyes are focusing elsewhere on the page.
By contrast, any kind of large motion that completely changes the look of the banner from frame to frame is much more likely to draw our eye.
There's a theory that is linked to our primitive survival instincts — our lizard brain, if you will. Something that's moving in the bushes over there is going to grab our attention, because it might be danger. The leaves slowly swaying back and forth are not.
So what kinds of effects can achieve this visual hook? Things like: having the banner change color completely from frame to frame, with heavy contrast between the frames. Or even better, a big, eye-catching movement, like each frame slides or wipes into place. You could alternate having a photo background for some frames and a solid color background for the other frames, and have them all slide into place from different directions. Some sort of icon that flies around the perimeter of the banner, or some other kind of larger image that flies through the banner. Maybe something spinning! Anything that is likely to make a user see the banner in their peripheral vision and feel like they need to look over here.
For these types on animations, think big and bold. Not subtle. But we also don't want to make the banner ugly, or seizure-inducing. Strobing/flashing effects go against WCAG guidelines for ADA-compliance.
One obstacle down, one more to go
Once you've succeeded at getting the user to look at your banner, that's one big goal accomplished. The next goal, now that you have the user's attention, is to hook them with some brief, bold, provocative copy, with a very clear CTA (call to action). Along with that, you want to make sure you're following the guidelines for minimum font size, minimum color contrast, and meaningful link text; all of these are for ADA compliance, but they're also just for good engagement in general. I'll write about all that in a different article.
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.