Designing Call-to-Action Buttons that Customers Click
A CTA button has four important items to consider: size, message (text), placement and color.
Keep the CTA buttons to an appropriate size
The size of an element relative to its surroundings indicates its importance. Decide the importance of other web page actions and size your CTA buttons accordingly. Your CTA buttons will definitely get more attention if they are larger than the other buttons on the page.
This Skype website page clearly distinguishes its CTA button with the large size and different color from the surrounding environment. The logo could be placed higher on the page, but visitors’ eyes will be drawn to the CTA button because of the size.
Answer critical questions with the CTA text
CTAs are a critical part of your landing pages and, subsequently, conversion funnels. That’s why paying close attention to the smallest details makes sense. Your CTA buttons are like signs with directions that should answer the question “why should I click this?” It is better if the button text makes sense as a stand-alone element without the aid of the page content. Vague text buttons like “click here,” “download now,” “book now” are of very little use. Instead, the CTA button text should be specific. CTA buttons with clear and crisp directions contribute to better understanding of the audiences. For example, you can say, “Order your yearly subscription here”, “Book your theater tickets now” or “Click here to subscribe to our blog posts”. This Hubspot page does a good job of highlighting the free guide offered in their CTA. The buttons can also be designed by around the primary benefits of your services or products. Be sure to keep text short though. For the Firefox button, text can be “Browse with Firefox 3.6,” while other specifications can remain the same.
Place the CTAs prominently
Fitt’s law explains the visual hierarchy in human-computer interactions. For example, it’s common for good interfaces to group items together when they are related, as it makes browsing and clicking actions easier for users. Marketo ran a test to determine the best CTA placement emails. In this subtle but effective test, they found that the left-aligned CTA button version had 90 more clicks than the center-aligned CTA button. They determined that these results had a 95% confidence score, making the left-aligned CTA button a clear winner.
Create urgency in the minds of visitors
Creating urgency is a time-tested approach that delivers results. By including additional button text, like “Limited time offer”, “40% holiday season discount” and others, you compel visitors to take action quickly. Otherwise, they will have a sense of loss. This CTA button is effective, motivating customers to make online purchases fast.
Use colors in CTA buttons to stand out
If you want a design element to stick out, you can choose a color that is complementary to the background. For large buttons, select a color that is less prominent in relation to the background and for smaller buttons opt for brighter colors. Whatever colors you decide, design the buttons to get noticed without interfering with the rest of the page design.
The three best colors for call to action buttons:
1. Red: The color red stands out on most web pages. It also signals urgency.
2. Green: If the product or service you are selling relates to the environment, psychology, and peace of mind, then green is the right CTA button color for you. In addition, green is calming and can be associated with “Go”—a motivator for many customers.
3. Orange or Yellow: Orange is exciting and warm. This color leads to visitors to take action. Amazon uses yellow and orange through their site. They do a lot of website optimization testing, so it is likely these colors will work for your website too.
The three worst colors for call to action buttons:
1. Black: Black is dark and gloomy. Since it blends into the background of most pages, it becomes one of the worst color to use in call to action buttons.
2. White: White is the second worst choice for your call-to-action buttons because: 1) it blends into the background and 2) it does not evoke any emotions among viewers. These are two things you never want for your CTA buttons.
3. Brown: Brown is a dull color that does not convey warmth or inspire action. Firefox uses a CTA button in vivid green, which is revolutionary in terms of call-to-action graphics.
As websites vary in their color palettes, content styles and desired visitor actions, you should try different colors, shapes and placement to see what works best to get the highest conversions on your websites and online campaigns.