t’s important to gain at least a basic understanding of how color, scale, language, and other factors influence the conversion rate of a call to action button. The concepts here aren’t complicated, but they do take a bit of forethought and planning to create the most effective call to action buttons possible within a given design. Read on for more information on each of these points and more.
The Purpose of "Call to Action" Buttons
Call to action buttons can serve a variety of functions. After all, “call to action” is really a bit vague. All it means is that it’s main purpose is to get a visitor to your site to do something. That something could be adding a product to their shopping cart, downloading something, requesting information, or just about anything else.
Because call to action buttons have such varied purposes, a lot of consideration has to go into what the button aims to achieve. The type of site, the target market, and the desired action can all play a role in how to best design a call to action button.
Types of "Call to Action" Buttons
There are a few different types of call to action buttons. While each type aims to get visitors to perform a certain action, that action can vary considerably. Below are the most common types of call to action buttons, based on the action they want you to take.
1. Add to Cart Buttons
E-commerce sites generally use a number of call to action buttons, but the most widely-used one is the “add to cart” button. These buttons generally appear on individual product pages. Their purpose is to entice customers to purchase an item. Common design elements in add to cart buttons include simple wording (such as “Add to Cart” or “Add to Bag” or “Buy Now“) and the use of icons (usually a bag or cart).
2. Download Buttons
Download buttons are similar to add to cart buttons in that they’re trying to entice a visitor to take possession of an item. In the case of download buttons, many designers opt to include more information than other types of buttons (such as version information or download size).
3. Trial Buttons
Some sites try to entice their visitors to try their offerings, generally in the form of a free trial. This could be a free download or a free account, depending on the particular site. Some sites use the “less-is-more” philosophy and keep the language on their buttons to a minimum, while others like to offer more information on what the trial contains.
4. Learn More Buttons
Learn more buttons are generally used at the end of a block of teaser information (often on the home page). These buttons are usually simple, but often oversized to attract visitor attention.
5. Sign Up Buttons
Sign up buttons appear most commonly in two different versions. The first type is usually directly associated with a sign up form. The second type is usually used in a similar fashion to “add to cart” buttons, as a way for users to purchase or sign up for a service or account, before they actually reach a sign-up form.
There are other types of call to action buttons, but these are the most common. Guidelines that apply to those above will likely also apply to any other type of call to action button you might be designing.
Using Negative Space Effectively
You want your call to action buttons to stand out from the surrounding content and really command attention from your site visitors. To that end, you need to make use of negative space around those buttons. Incorporate blank space between your content and your call to action button. While this is less important (and less common) on some buttons, such as add to cart buttons, with others, like those to learn more, work better with more space.
It’s important to balance the amount of negative space you have around the buttons with the size of the buttons themselves. It’s about proportion. You want your button, the space around it, and the surrounding content to all look like they go together, even with disparities in size. You may have to fiddle around with things a bit in order to get them looking just right.
Some guidelines:
- Make sure there’s enough space around your button so that it doesn’t feel cluttered
- Consider principles like the rule of thirds or the Golden Ratio when determining how much space to include
- Negative space gives your call to action button room to stand out among your other content and sets it apart
Size and Color
How large your call to action buttons are is very important. A button that’s too large will overpower everything around it. A button that’s too small will get lost in the shuffle of all the other content on a page. You want your button to be large enough to stand out without overwhelming the design.
Color can be used to great effect to help balance the size of your buttons. For larger buttons, choose a color that’s less prominent within your design (but still stands out again the background). For a smaller button, you may want to choose a brighter, contrasting color to really make the button pop. In either case, make sure the color you use sets the button apart without clashing with the site’s overall design.
Some guidelines:
- Your call to action buttons should ideally be the largest buttons on a given page
- Use contrasting colors to make smaller buttons stand out more
- Use less distinct colors to make oversized buttons fit in better
- You call to action buttons need to command attention without overwhelming your design
Language
The exact wording you choose to use on your call to action buttons can have a huge effect on conversion. Compare “Buy Now” with “Add to Cart“. One is much more urgent than the other one. Or how about “Try it for Free” with “Free Trial“? One is much punchier than the other and stands out more.
The language you use on your call to action buttons should be as straight-forward and simple as possible. You want visitors to know with just a glance exactly what they’ll get when the click on a button. If they question it, that means they’ve paused, which can lead to lower conversion rates.
Don’t forget your font sizes, too. The text on your call to action button should be large and bold, properly suited to the size and color of the button itself. Make sure there’s sufficient contrast and that the text is easy to read.
Some guidelines:
- Use simple, direct language
- Use a large, bold font on the button for the main text
- Make sure the language clearly calls for a specific action
Create Urgency
You want visitors on your site to carry out the desired actions with as little thought as possible. While you don’t want to deceive your visitors, the more opportunities you give them to stop and consider what they’re doing, the more opportunities you’re giving them to say “no”.
You want your buttons to give them the impression that they need to act right away. You want to encourage them to make their decision immediately, on the spur of the moment. While this won’t work for every call to action button (especially those to purchase high-ticket items), for low-cost or free actions, having visitors click with little forethought is desirable.
Some guidelines:
- Encourage your visitors to act immediately
- Don’t give your visitors any reason to pause
- While urgency is important, don’t mislead your visitors in any way
Provide Extra Information
Where appropriate, use your call to action buttons to give visitors extra information about what they’re going to get if they click on the button. This is most commonly seen with trial buttons or download buttons. Common examples of extra information include the length of time a free trial will last or the size of a file download. Version information is also commonly seen.
When including extra information, remember that you need to keep the focus on the actual call to action. Make sure that the text for the language enticing visitors to act is most prominent, with other information much less visible.
Some guidelines:
- Only include extra information when it adds to the user experience
- Extra information is only appropriate on some types of call to action buttons, most notably download or trial buttons
- Make sure the main call to action is still the most prominent text on your button
Prioritize
It’s important to prioritize the call to action buttons on your page if there’s more than one. This can be done in a number of ways, but the most common are through the use of color and size.
Use color to highlight the most important button on a page, or to make the less important ones seem less prominent. Or use size to make the most important button stand out (by making it larger) and de-emphasizing the less-important ones.
Icons and Images
Including visual cues in your call to action buttons can also help to increase conversion rates. An icon of a shopping cart on an “add to cart” button, for instance, or an arrow on a download button are both good examples. Think of unique icons to use, too, but make sure that the icon adds to the user experience by clarifying what the button is for, and doesn’t add any confusion.
Some guidelines:
- Make sure the icons you use help clarify your button’s meaning, rather than confuse it
- Easily-recognized icons can immediately indicate meaning to your visitors
- Don’t be afraid to use less-commonly used icons, as long as their meaning is still clear
Examples
Here are a few examples of great call to action buttons. While they don’t all perfectly conform to the guidelines above, they meet enough of the criteria to be considered great.Livestream
Differentiating the "buy now" (for paid options) and "sign up" (for free options) buttons is a good strategy.
Windows 7
The big, green "Get Windows7" button is easy for visitors to spot.
Fileshare HQ
The bright green button here really stands out against the white background.
Logbook
Using different colors for the "Download" and "Buy" buttons sets them apart and gives priority to the "Buy" button.
TasteBook
This button makes great use of an icon and uses larger, bold text to stand out.
GoodBarry
Another bright green call to action button.
Lifetree Creative
Continuing the same typeface from the body copy to the call to action button creates a sense of cohesion.
The Resumator
A bright red call to action button with bold type stands out against the blue background.
Notepod
A good example of including extra information in a call to action button.
Inkd
A great example of prioritizing buttons with size.
Elegant Themes
Another excellent example of using color to stand out without clashing with surrounding design elements.
ZenDesk
Another great example of making a button stand out using color.
Storenvy
A round button is unexpected and stands out, especially when surrounded by a white border.
Bara’Mail
Sometimes a button that blends in works better in your overall site design, especially when the action is less urgent.
