Ask a few web users what they think of banner ads and you’ll get back a range of firm opinions peppered with words like: distracting, annoying, ignore, useless, frustrating. It’s perfectly clear that people don’t like banner ads. On the other hand, banner ads are a great way of getting a message noticed, or featuring some particular information. The same people that say they hate banner ads will quite happily click on one if the message is right. That’s the trick.
So, a banner ad must be: eyecatching, but not too eyecatching; promote a clear message, but not be hard sell; hard to miss, but not distracting. It’s beginning to become clear why this is so difficult to get right.
Below are a bunch of tips and tricks purloined from a range of websites, filtered to remove the annoying commercial stuff and augmented with a couple of my own, so that hopefully, what we’re left with are some useful guidelines for the university environment.
Short and direct: Keep the text simple, 7 words or less. Say exactly what you want the user to do. So if it was a banner for an event of some sort, you might have the text “Click to register”... a call to action.
Do what you say you’re going to do: The page the user ends up at should be specific to the message of the ad... preferably repeating the text message, color and graphics in some way, so there’s immediate recognition and continuity.
Offer a benefit: Users will not click on an ad just because it’s a nice picture or a catchy slogan. The most compelling reason for following a banner link is for a benefit to the user. If you offer them a good reason for clicking, they will do it. Commercial banners obsess over words like ‘FREE’, which is not so relevant in the University environment, but is still a good example of an immediate offer of benefit.
Keep it fresh: Banner ads go ‘stale’ very quickly and should be changed at least each two weeks or users will develop ‘banner blindness’, completely ignoring them.
Color: Subtle colours are fine as long as there is a level of hue separation from the rest of the page. You don’t want to camouflage your banner in the colours of the page. On the other hand - lurid colours will literally cause users to avoid looking at the banenr... “if it’s that bright, it can’t be any good for me”.
Contrast: Make the message stand out. Text in banners is often over picture backgrounds and can be very difficult to read. Use colour contrast to ensure your text is visible.
Page position: Banners work better if they are visible in the ‘first fold’.
Animation: Animation works, but it’s like food colouring, you only need the tiniest amount to catch the eye: too much and it looks inedible. Big animations are distracting and endless loops are annoying. If you do use animation, make sure the first and last frames display the full message as browsers can turn off animations and loops, so this might be all they see.
Simple images, clean and sharp: Banners are not very big. Trying to put too much image into the small space is a common mistake. Use clear images with good contrast and process them carefully with appropriate sharpening and saturation to make them “pop”.
Blue: Classic usability and accessibility trick. Banners with blue borders attract more clicks, as do banners that contain blue underlined text. Why? because these are the default visual indicators for linked images and linked text. If it doesn’t look like a link, people will not click on it. Even just underlined text helps.
Clear definition: Give your banner a clear border. If it blends in with the background it will look like part of the page decoration and be ignored. People need to know it can be clicked on.
Limit fonts: Use no more than two fonts and even then, only use two when the message requires it. Every change of font breaks up the continuity and impact of the message.
File size: Critical. Not because of users on slow connections, but if your ad is one of the first things to load on the page, the user will look at it while they wait for the rest to load. It makes sense. File size will vary depending on the type of image, and the width and height of the graphic, but in general, nothing should be more than 8kb and preferably less.
Careful optimisation: File size is important, but understanding the way
JPEG,
GIF and
PNG are constructed and compressed can greatly improve the image quality gained from a tiny file size. Read up on it, learn the techniques and don’t be afraid to push the boundaries.
Alt text: Goes without saying that your banner needs clear, descriptive alt text for browsers who can’t use images.
After all, this is a University. Credit where it’s due!
