Friday, June 26, 2009

Testing graphical pop-ups for opt-in forms

I'm not artistic in the least. I have no idea how to make things look pretty. Yet I use aweber to manage my opt-in subscriptions from my website visitors, and it's important to have something better than a butt ugly opt-in form.

Lately I've been using the "lightbox" effect in aweber. For those of you who don't already know this, the lightbox effect allows you to drop a line of code into your main page, and then when visitors come to the page a popup fades gently onto the screen. It fades out the rest of the page and is usually not blocked by popup blockers. You can control how long of a delay there is between the visitor arriving and the popup coming into view.

So - here I am with these butt ugly opt-in forms and I'm wondering how to fix it. The solution? I hired a graphic designer on elance.

I ended up paying $50 to have 3 completely new forms designed for me, for use on 3 separate websites.

Everyone was bidding $50 per form. I got one guy who agreed to do all 3 for $50. When I sent him my requirements, he came back with finished work in about 30 minutes. I was completely blown away. So this guy was far cheaper than other bidders, but still is earning a very good wage on an hourly basis. I'm happy, he's happy and I now have found a a new (and very reliable) graphics guy that I can use on projects.

Here are a few tips for making nice opt-in forms in aweber.
  1. Decide on the size of the popup that you are using. I use 520x400 for reasons I'll explain below.
  2. Break the popup into two virtual chunks. I'm using 250-300 for the top and the remaining 100-150 for the bottom.
  3. Hire a graphic designer to create the image that will fill the top "chunk". Tell him to make it 500 wide. Ask him to tell you the background color that he uses, because you'll need to submit that background color (HTML code) into the aweber form design tool.
  4. Make sure he understands that the border of his image (the image he creates for you) must fade into that background colour. This is because the bottom "chunk" of your form will be one consistent color. Aweber does not give you a way to put HTML design into the bottom chunk.
  5. What goes in the bottom chunk? The email field, name field (or other), and the submit button. that's it. Nothing fancy about it.
Ok why did I say to make your form 20 pixels wider than the graphic that you get made? Because it seems aweber automatically puts a little border around your graphic. This means that you'll get ugly scroll bars showing up if your form is exactly as wide as your image. So add 20 pixels extra (i.e. 520 wide instead of 500) and you'll be all set.

Split Test Your Opt-In Form

Make sure that you split test your new form against your old form. If you don't have an old form then just get your graphics guy to create two variants for you, with different text. Then create a split test in aweber (fully automatic) and monitor the results.

Aside from split testing the pop-up itself, also split test the time delay used to launch the popup. This is important. In my early test I notice that immediate popups (for my niche) are getting a better responce than a 5 second delay. But I will also be testing a 30 second delay, and a 45 second delay. Test test test ...

If you have not yet started outsourcing your work, you are crazy. I'm reinvesting a lot of my profits by hiring people on elance. It's very effective.