Build Recurring Income

If you’re selling a product or service online one thing you might choose to do is advertise it. One increasingly popular form of advertising is the 125 x 125 pixel (or small square) banner ad, usually displayed in a grid formation in blog sidebars. Their compact dimensions make them perfectly suited to this format.

In almost every case, advertising in this manner will cost money. In return, you’ll be hoping to get click-throughs, exposure, name recognition–and ultimately, more sales. In this post I’ll be explaining what makes an effective banner ad, and some common pitfalls to avoid.

Designing for conversions

In this case, it’s impossible to put the cart before the horse. Before you place an ad you’ll need to design it, or have someone design it for you according to your specifications. There are certain qualities you should be striving for, and certain qualities you should be striving to avoid.

Good qualities

Eye-catching/attractive. A good banner ad is visually interesting. It doesn’t have to be beautiful, but it does have to attract the eye and stand-out from its surroundings. It should do this without cheap tactics like garish animation and gaudy colors, as these things may make your product or service look dubious. The clever hook will go to waste if nobody ever notices it. The banner on the left is a good example of eye-catching design: the bright white text on bright red is very striking.

It contains a hook. Your banner needs to motivate the viewer to click-through to your product or service. If it leaves the viewer thinking “So what?” the presence of many other good qualities won’t matter. Common hooks include: special offers, benefits, descriptions and elements designed to arouse curiosity. The banner on the left is a good example: it promises a benefit for the target audience.

It’s branded. Many web banner designers make the mistake of designing solely for clicks. However, the number of people who see any given banner is always much higher than the number who click on it. Just because a viewer doesn’t sign up for your product the first time they view your banner doesn’t mean it won’t influence their buying decision later on. Your banner should be used to build brand awareness, even among people who do not (yet) believe they need your product. Every good banner must contain some branding. The banner on the left is a good example: it builds brand awareness for Freshbooks while also encouraging click-throughs with a hook.

It’s succinct. Don’t assume a viewer will spend more than a second looking at your banner ad before they make the decision to move on or investigate further. A good banner ad will catch a viewer’s attention and comminicate its hook and branding very quickly. The banner ad on the left does this well by including branding, the hook and a call to action, all at a glance and in logical reading order (from top to bottom).

It’s in the right place. A wonderfully designed ad for Range Rover SUVs will never fare well on a sustainability blog. The chief determining factor in a banner ad’s conversion rate is where it’s placed. Choosing the right environment for your banner ad is exceptionally important, and it will be covered in greater detail soon. The banner on the left is a good example of smart targeting. It names its target market directly (bloggers) and uses lingo that bloggers and internet marketers are familiar with (CPM). The hook is also something that the target market will appreciate, as CPM is a nice payout!

It stands out in its surroundings. Most square banner ads of this kind are situated in grids among other similar ads. How can you stand out? One effective tactic is to play with the background of the environment and use shape to differentiate visually. In amongst a grid of six or eight straight square banner ads, an unusually shaped banner ad will be very noticeable. You can see how the banner ad on the left has used shape to stand out (the border is added by the Anywired design–the actual image has no outer border).

Things to avoid

Visually uninteresting. Your banner ad should never look like just another banner ad. Use bright, eye-catching colors, interesting shapes and unique imagery. The banner on the left has an excellent hook but the combination of dull colors prevents it from popping out of the page.

No hook. This is the most common pitfall of small banner advertising. The banner may be gorgeous to look at and well-branded, but it may still evoke the “So what?” reaction in the viewer. They won’t feel they’re missing anything by not clicking on the banner, because they have no idea what to expect on the other side. While these banners can still be good for building brand awareness, they’re not effective when it comes to click-throughs. The banner on the left is visually interesting, but there’s no hook, and no reason to click unless you’re already familiar with the brand.

No branding. Some banner ads bear many positive qualities but completely miss the opportunity to build brand awareness and name-recognition among the thousands of people who will see them but never click on them. It’s essential to remember that the purpose of a banner ad is not just to get traffic. The psychological benefits are just as valuable. Advertising on a particular blog or website means you are associated with that brand and the person/people behind it. The next time someone sees your brand mentioned elsewhere, they may think “I’ve heard of them before. Maybe they’re worth checking out?” While the logo on the left is visually interesting and contains a solid hook, there’s no branding present.

Wrong image. There is a certain ’style’ of banner ad associated with scams, usually featuring gaudy or clashing colors, flashing animation and unbelievable claims. While they might be successful at gaining curious click-throughs, this kind of advertising strategy does not contribute to a trustworthy brand. Many potential customers will be turned off by the appearance of your ads, even if your product is very good. The banner on the left is well-targeted to its intended market (it’s displayed at ProBlogger.net) but it does make the service or product being offered look a bit scammy–even though it probably isn’t.

Drawn-out message. Animation can be used to add visual interest to a banner, but it’s often used to draw out a message that could be communicated in one frame. Assume that a viewer will only glance at your ad before making the decision to keep looking or look away. They will not sit there like zombies for nine or ten seconds waiting for your ad to play out. If you’re going to spread your hook over several different animation stages, make sure each stage is a strong advertisement on its own. Ask yourself: if a viewer only saw this frame, would they be sufficiently motivated to click the ad? While the banner ad on the left is well branded and eyecatching, none of the animation frames offer a strong enough hook to stand up on their own.

Wrong place. Some banner ads are of limited effectiveness because they’re not cleverly placed. Lots of traffic does not necessarily mean targeted traffic, but it will always be expensive. The banner ad on the left is quite well designed, but it currently appears on the TechCrunch main page. TechCrunch readers are interested in start-ups, venture capital, social media, social networking, powerful website hosting and blogging, but they are not necessarily interested in renting out stuff. The targeting here is not terrible, as Zilok is a start up, but more effective banner placement would see the ad on blogs and website dedicated to products that people might want to rent out (cars, video game consoles, and so on). Being interested in the start-up is one thing–but using it is another.

Case studies

To demonstrate the above principles in action I’ve provided some mini-reviews of various small banner ads. I’ll describe what they do well, and what they don’t do well.

If you want to see examples of good banner design it’s always wise to look at how big companies do it. They have the funds to hire the best advertising agencies and do the most extensive testing. The banner ad on the left is from Microsoft and it does a lot of things right: it’s eye-catching while being strongly branded, it contains a hook (search jobs in the Valley) and a call to action (click here).

When designing a banner ad, don’t assume anyone knows what your product or service is or why it matters–unless you’re a big-name company like Microsoft or Coke. While the banner on the left is interesting to look at and prominently branded, there’s no hint as to what the website has to offer, especially considering the context: it was found on an internet marketing blog. In short, there’s no hook.

This banner ad appears to do everything right, but let’s look a little more closely. Most of the ad is devoted to imagery that, while interesting, doesn’t provide a hint about the nature of the product or communicate any of the brand’s attributes. While the keywords at the bottom seem like a hook, they’re very vague, and I still don’t know what the service or product being offered actually is.

This banner ad from sponsored reviews is an example of many good qualities in action. From top to bottom it features branding, a hook that speaks directly to the target audience (bloggers and advertisers) and a call to action (build buzz now). By having the top of the green tick extend outside the box, it will stand out in a grid of straight square banner ads.

This is an example of a banner ad that is very well targeted to people already familiar with the brand. If you know anything about Crazy Egg, you’ll know that it’s a click-tracking service that costs money. The offer of a free account is a tempting one. However, looking at the ad from the perspective of someone who’s not yet familiar with Crazy Egg, there’s no hint given about what the service actually is. The space at the top of the banner could be used to summarize the service in just a few words, and tap into a new market.

While this banner ad is visually interesting, branded, and contains a hook, I don’t believe it’s effective. This is because the hook is weak: if I want to ‘Get Video’, I can go to YouTube. What makes the service different? The hook doesn’t sound enticing enough. Though I’m sure the mediaplayer has many unique qualities, the ad doesn’t hint at any of them.

A useful formula to follow

While it’s possible to innovate and create a banner with plenty of good qualities, innovation can be hard work! Luckily, it’s possible to create an effective banner by following a simple formula.

1. Place branding at the top of the banner.
2. Place your hook in the middle.
3. Place your call to action (i.e. ‘Download now!’ or ‘Click here’) at the bottom.

If the design is interesting to look at, you have just created an effective banner. Remember: even a cleverly-constructed banner can be ineffective if poorly placed. I’ll be discussing ad placement in-depth in my next post.