 |
7 Things I Learned about Effective On-Page Call To Action (CTA) DesignPOSTED ON October 26th, 2007 BY blumey |
So as the least technical-minded out of our happy little Heretix family, sometimes I have a problem communicating with the others when it comes to site functionality, PHP scripting, or really just about anything that isn’t graphic design related. When it is graphic related, however, I feel more at home. Visual communication is my turf, my passion, my area of expertise - or so I thought.
We have this great little website that has tons of content and gets lots of long-tail search phrases; in fact, just about 77.6% of total traffic comes to the site through an interior page (as opposed to the index). Realizing this, we launched an initiative to better monetize the interior pages since they were content rich but call-to-action wanting. I designed two CTA pieces that were flashy, Web 2.0-ish, and overall just a joy to look at (in my opinion.) MisterE, a coder by training and a Windows Paint enthusiast, said my CTA pieces wouldn’t convert and submitted two of his own - needless to say they were crude and an eyesore. To make things interesting, we had another one of our staff designers put out two more pieces, so there were eight ads total (I cheated and added two more, which brought me to a total of four.) Here’s an example of what they looked like (obviously the names, types of products, colors, etc. have been changed to protect the identity of the website):
Blumey’s Series
Design Notes:
Colorful graphics, bold colors, new-wave design techniques & features. Content covers a variety of topics ranging from savings to ease of use. Four CTAs of this type were produced.
MisterE’s Series
Design Notes:
No graphics, color palette deviates from site norm, makes use of commonly understood visual cues (e.g. obvious hyperlinks). Content emphasizes savings only. Two CTAs of this type were produced.
Additional Series
Design Notes:
Color scheme deviates from site norm, no industry-specific graphics used, and shapes feel out of place when compared to other on-page artifacts. Content emphasizes ease of use. Two CTAs of this type were produced.
The Rules of the Call-To-Action Game
A rotating script was placed in the middle of a content page for the top 40 most viewed article pages (we used the Adman WordPress plugin, which was a lifesaver!) The script would display each of the ads equally, and each ad was given its own sub-tracking ID to log total clicks, total sales, and overall conversion rate. This test ran for just under three weeks until we felt we had enough data to make a decision.
The Breakdown: Which CTA was the Most Effective?
Here is a breakdown of each ad’s conversion rate:
- Blumey01 - 4.4%
- Blumey02 - 2.1%
- Blumey03 - 18.8%
- Blumey04 - 21.4%
- MisterE05 - 36.0%
- MisterE06 - 50.9%
- Guest07 - 29.2%
- Guest08 - 12.5%
As you can see, I got my ass handed to me by a guy armed only with MS Paint and my staff graphic designer. While I do and will continue to maintain that they were in co-hoots somehow, the data doesn’t lie - fancy, graphic intensive calls to action may look nice, but they simply don’t get the job done.
Wrap Up: 7 Things I Learned About CTAs that Increase Conversion Rates
Number 1: Never overestimate your ability to know what will make a visitor jump.
Let’s put jokes about MS Paint vs. Photoshop aside for a second… this entire experience has really thrown my personal sense of design into question. I design sites / elements / ads everyday, but what I design is art, not calls to action. My sites may flow and be visually pleasing, but do they sell the product? This is an important question to ask yourself every time you’re about to greenlight a piece!
Number 2: Use shapes / colors / elements that deviate from the template as much as possible.
It will always be an artist’s inclination to produce creative that facilitates the flow of a web page, but therein lays the problem - you don’t want the page to flow at all, you want it to stop completely! A call to action must stick out so much that a visitor’s tendency to scan is broken, thus forcing them to focus on your message and process it accordingly. Shapes & colors that differ from their surroundings are a powerful way to do this (but you’ll have to bite your lip when you put it together!) If you’re in a design studio I would recommend having a colleague handle the CTAs for you (their style will likely be a lot different than your own); if you’re a single designer you might try designing CTAs that flow for a different site, then posting them on the site you were working on originally (this trick is one I use often!)
Number 3: Tout the positive experiences of other consumers, facts, figures, savings, etc., but keep it brief.
Having a graphic that sticks out will capture your visitor’s attention, but after that you’ve got to make your message pop. People are social creatures, so reassuring them with customer testimonials, the number of clients served, how much they can save, and so on can really make a difference. As my study showed, the CTAs with completely different looks and strong messages (xxx number of clients served was the favorite) perform the best.
Number 4: Use visual cues that everyone can understand.
This is especially important if you have a website that might attract the full gamut of web users, particularly the young vs. the old. Less sophisticated users may not understand anything but a good ol’ fashioned neon blue hyperlink, but then again so does everyone else. Using a universal symbol of linkage may look God-awful, but it sure does get the job done!
Number 5: Tacky works.
It pains me to say this, but tacky works. If you visit any news sites you’ve likely seen the dancing Frankenstein, break-dancing alien, or any number of oh-so-embarrassing yet insanely profitable ads served up by LowerMyBills.com. The fact that you can readily recall the exact ads I’m talking about is further proof - tacky is the wave of the CTA future. (Yuck.)
Number 6: Agitation is the key.
Put it all together and what do you get? Crazy shapes, wacky colors, references to 1998 web standards - so in short, agitation is key. You want your piece to jump off the screen and smack your visitor around a little; during that time they’ll check out your message and apply for your product. If you consider yourself a pretty good designer, you’ll know that you’ve created a great call to action if you body physically rejects you from FTP’ing the file to your website.
Number 7: Test and test, then test some more.
Had this little bet not been thrown out there, the website in question would be stuck with a series of ads that would have had a cumulative conversion rate of 11.7%. This means the additional 32% boost we got from trying out different ads never would have been realized, and that hurts your bottom line. Test your ads; test your coworkers’ ads; then test more ads after that! Every website is different and will have its own special needs, so keep testing ads until you can’t possibly boost your conversion rate a single point higher.
Additional Call-To-Action Resources:
Blumey
4 comments
