Designing Call-to-Action Buttons that Customers Click

For most businesses, online customers are critical. Any optimizations you make on your website are more valuable than those you make to any individual marketing efforts because all of your campaigns eventually lead visitors there. Calls-to-action (CTAs) are the elements that you want your visitors to notice and click on in your business website and landing pages. To that end, we need to understand the psychology of visitors to effectively design and place CTA buttons. There are some universal facts that can guide you.

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.

CTA Skype

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.

CTA Hubspot

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.
CTA Marketo

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.
CTA Joomla

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.

CTA Mozilla Firefox

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.

About Kriti Adlakha
I have been working in the field of marketing and brand development for more than eight years. My experience ranges from hospitality to media and IT products to outsourced services. During my journey, I have worked with print and new-age media and have enjoyed developing content. I have also learnt and worked on marketing tools like adwords marketing, analytics, CRM and the list is steadily growing. Having acquired post-graduate diploma in business management from IIM, Calcutta, I love new challenges and learn from each experience. In my blog, I share marketing strategies that enable small and medium businesses to market in a small budget. I also discuss how to use different online tools that can help businesses to monitor returns of their marketing investments. Above all, I love to hear back from my readers!

One Response to Designing Call-to-Action Buttons that Customers Click

  1. msienicki says:

    I love the way you grouped the information (size, message, placement and color) and then broke each group down to its most basic elements. Very informative and easy to understand. This blog post definitely needs to be shared. Thanks, Kriti!

Come on, don't be shy

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: