If you've devoted any time to landing page design or paid any attention to your website's lead conversion rates, you know exactly how critical your call-to-action (CTA) buttons are. Every aspect of their appearance and placement can impact conversion rates. By optimizing your CTA button design, you can significantly improve lead conversion. Here are five tips to make the most of your CTAs.
1. Craft the right call-to-action copy.
Before you even start designing your CTA button, figure out exactly what your button should say. The verbiage you choose will have profound impact on your conversion rates. While there's no magic formula for writing CTA button text, a few general rules that should guide your efforts:
- Keep it short and sweet. Your CTA button is no place to wax poetic about your product or service. On the contrary, CTAs between two and five words long tend to perform the best. In some cases, adding additional text may significantly improve your conversion rate — for example, if a free trial doesn't require a credit card. Try adding this extra text in a more subtle font or color.
- Focus on action. Start each CTA with a verb. Consider the difference between "Try it for free" and "Free trial." The former invites your visitors to actually do something; it empowers them to choose a potential solution to the problem they're trying to solve.
- Opt for first-person. First person uses the possessive pronoun "my" instead of "your." Recent trials demonstrate that first-person language actually yields higher lead conversion rates, so "Get my eBook" will probably outperform "Get your eBook." Try it for yourself and see.
- Create a sense of urgency. Simply including the word "now" can build urgency. You can also use words like "limited time" or "Be the first to ... "
2. Select the best CTA button colors.
Your CTA buttons should fit in with the overall design and appearance of your website, but some button colors (namely green and orange) consistently do better than alternatives. That said, if green and orange don't go with your website, they could detract from overall appearance and performance.
Consider the emotions associated with different colors. Orange is more aggressive (which is why it's a great CTA button color), while blue conveys trust and security. This KISSmetrics guide delves into the psychology of color.
You can also use color to balance out button size. Smaller buttons can be in more bold, contrasting colors to help them stand out, but larger buttons can seem overly aggressive when they appear in loud colors. For these, choose a color that's already present in your overall website design.
3. Figure out the best font.
OK, there's actually no "best" font for CTA buttons, but it's important to select a font that's easy to read and evokes exactly the right emotion. Along with font, you'll also need to consider the size of the CTA text.
- Size your text appropriately. CTA buttons should be large enough to read from a distance, but not so large that they overpower the page. Use A/B split testing to figure out the ideal font size for your website's CTA buttons.
- Differentiate the CTA from other text. While the font of your CTAs should fit with the overall look and feel of your website, it also should help differentiate the CTA from other textual elements on the page.
- Pay attention to capitalization. Using all caps increases intensity. Another option is to treat CTA text like headlines and capitalize them according to your style guide's relevant rules.
- Don't disregard spacing. Like using all caps, close spacing also creates urgency. Decide how much intensity you really want to convey before combining these elements.
4. Work in some white space.
Also called negative or blank space, white space need not actually be white. The term "white space" refers to open or unused space, so it will be your website's background color. In general, white space helps create visual balance, and white space around your CTA button helps to make your button stand out.
To determine the right amount of white space, you can reliably count on the rule of thirds as a guide. Avoid using so much white space that your CTA button seems disconnected from the other associated text on the web page.
5. Put each CTA button in a logical place.
As you place each CTA button, consider the overall flow of the web page and how people will probably use it. Location above the fold isn't critical (more on that here). What's more important is that the CTA button appears at a logical place on the page. For example, visitors should never have to backtrack to find the CTA. Put it after the text that explains your value proposition. After all, people are less likely to click on a button if they're not sure what they're getting.
If your CTA button isn't attached to specific text on the page (such as a newsletter sign-up that appears on every page), try to put it on the right side. We read from left to right, so CTA's at the right occur at the end of a line, when our eyes naturally pause before moving on to the next line of text.
Perhaps the best tip for designing the ideal CTA buttons, however, is to test, test and test again. Virtually every aspect of your CTA buttons can be A/B split tested, and you should test early and often. Change one element at a time, and track how it affects your lead conversion rate. If a change yields a higher conversion rate, update your CTA button design accordingly. Over time, this approach will help you make lasting improvements to your website's performance.