Category: Usability

Don’t skip this advertisement!

Are you running ads on other sites? Flash based ads with hot zones in part of the ad? Are you paying based on the number of clicks and not CPM or CPA? Well, you better be sure that your designer designed your Flash banner/advertisement properly. If not, one little mistake could be costing you. Or not.

Check out this ad that I came across while using a calculator at Bankrate.com. Click on the image below to view the entire screen shot, but what I want you to focus on is the “Skip advertisement” in the ad. There is a “skip advertisement” link on the interstitial page, but the one within the ad is not active. The ad is Flash based and should have that section mapped to the “skip” link/code for the site where it is showing. In this case, you click on the “Skip advertisement” link and you end up at the advertisers site.

Bankrate skip, or not

Was this an accident? Done on purpose? Who knows. Why would you do either?

Scenario 1:

Well, if you are the advertiser who is running this campaignm, and it is a PPC campaign, you certainly wouldn’t want to pay for visitors who simply wanted to ‘skip’ the ad. If this is the case, you are to blame, your programmer is to blame, your designer is to blame, and your QA (quality assurance) is to blame. Take your pick. There is fault in all of those areas. If those four people were in the boardroom on The Apprentice, I would expect that the QA person would be gone.

Scenario 2:

This is a CPM or CPA campaign and because of that you want as many clicks as possible.

scrollbarIf 1 out of 300 of the accidental clicks converts, you have 1 customer that you wouldn’t have had before. As the advertiser, you are happy. It is an “oops” that you could explain off very easily. No one is likely to call you on it, but if they do, you could explain it off. Perhaps this is today’s version of the ads that confused enought to generate a click through. I haven’t seen them used in a while, but I am sure that we all remember the “Windows like” navigation used within display or banner ads (ie: the phony scroller to the left). It generated a click through, a poor quality one, but a click through none the less.

In this scenario, the site where the ad resides tends to look bad.  A little less professional and perhaps even a little underhanded.   The user experience isn’t where it should be.

I would love to see the logs from this page to get a gauge on how many people clicked expecting to reach their desired page (in this case a mortgage calculator) and then clicked back only to try it again.  John Marshall once told me that behavior means that you aren’t answering a question or providing the anticipated result for that URL.  Right on in this case.  On purpose?  Perhaps.

Use the Label Tag on Your Radio Buttons

If you are a self taught programmer, you might have learned the basic programming skills and jumped right in. It might be Coldfusion, PHP, or ASP. Whatever your flavor, there are some basic HTML functions that we sometimes forget or didn’t even know about. When coding a form, I never considered the use of the <label> tag. Thanks to Joe Danziger, I will now.

I was reading through some post’s on Joe’s Blog this morning and came across a short post regarding the <label> tag. Have you ever wondered why you can click on the word next to a radio button in certain forms and the button will select? Well, the <label> tag controls that function. As Joe puts it:

Why should we be forced to click a tiny little circle when we should be able to click the actual text for that choice?

True. It all comes down to useability. There are a ton of tiny tips and tricks whether it be in HTML, or your programming language of choice, that make for a better experience for the user. One tip on its own might not have much of an impact, but when you apply many usability tips during the same user experience, you visitor should browse away feeling like you have your act together.

All that you need to do is to include the ID element to your radio button form code.

<input type=“radio” name=“buttonName” id=“button1” />

For the text that is associated with the button, reference the ID in your <label>.

<label for=“button1”>Whatever the choice is for Button 1</label>

Here is a radio button group so that you can see them in use.


Here is the code for the above:

<input type=”radio” name=”buttonName” id=”button1″ /><label for=”button1″>Whatever the choice is for Button 1</label>

<input type=”radio” name=”buttonName” id=”button2″ /><label for=”button2″>Whatever the choice is for Button 2</label>