How to Make Compelling Call-to-Action Buttons

Call to Action - CTA


When it comes to efficient salesmanship, there’s more science than art involved in achieving success. Selling is a highly behavioral and psychological activity that focuses on persuasion with a transaction as its ultimate goal.
The science of selling is often brushed aside by e-commerce designers, which is a major detriment to business success. There seems to be a flawed belief that any website with a functional shopping cart module will convince visitors to make purchases. As a result of this defective thinking, many important elements of a website are often disregarded.
If you have a website that offers goods, services or activities, one of the things you need is a convincing call-to-action (CTA) element. Most of the time, this CTA element will be capped with a button that simplifies the completion of an action for the visitor. Here’s are several things you need to know about CTA buttons.

The Influence of Color

Themes, templates and Web design guides are usually grouped into color combinations that pay attention to balance and contrast. In the past, behavioral researchers believed that CTA elements needed to be of a specific color for the purpose of being effective; however, this is not true. What drives website to click on CTA buttons is contrast.
In general, a CTA button should stand out from the background. For example, a fashion boutique that caters to younger female shoppers can choose a light pink background, but the CTA button to sign up for a newsletter should be fuchsia. This is only one possible example, but the point is clear – always color your CTA button so that it stands out from the background.


Here’s an example of CTA and color usage.



Image Source: Pagewiz


Size Matters, and So Does Shape

Website visitors tend to respond better to rectangular shapes due to familiarity, so take that fact into account when creating your CTA. This is not to say that other shapes should be avoided at all cost, but it might be best to use recognizable elements. In any case, avoid sharp edges as they are perceived as being stern; rounded corners are friendly and inviting.
When it comes to size, CTA buttons need to be more than conspicuous, which means that they should be proportionally larger than other page elements. You want your CTAs to be noticeable and tell your visitors where to click, so make sure they are not too small.

Where CTA Buttons Should Be Placed

Years of Web design and development have conditioned visitors to expect a certain layout format. Most landing pages follow the formula of headline, persuasive message, sign-up form, and CTA button.
In general, Web designers should take cues from print media. Above the fold CTA buttons work better when visitors are already acquainted with the product, service or activity. For example, a pizza shop offering coupons to existing customers should place the CTA button above the fold, near the top. On the other hand, if the pizza shop is new to the neighborhood, the CTA button will work better when it follows the marketing copy below the fold.

The Message is the CTA Button

Like anything else that is being sold, a CTA button should present a value proposition. In other words, it must clearly answer the ever-present question of “what do I get by clicking this button?”, and appeal to human psychology.
The CTA message should be friendly while avoiding the use of passive voice. It should also not be pushy, so avoid imperatives like “submit”, “pay now”, and so on. Instead, make sure to always convey a clear message like “educate me” or “get my free e-book”. In general, keep it short, simple, and to-the-point. You can also benefit from words that create a sense of urgency like “now” and “today”.


Here’s a great example of messaging within the CTA.


Power Habits

Image Source: Noah St. John


CTA Narrative

The CTA button needs to be part of a larger narrative that should appeal to website visitors on an emotional level. To a certain extent, effective narrative should overcome the deficiencies of pedagogy, which means that it should teach visitors about something that is interesting and that can have a positive impact on life.
Try to think outside the box and regard CTA buttons as educational technology tools. In other words, if your visitors know they will learn something by clicking the button, they will more likely make that click. For example, an auto repair shop in Arizona can teach visitors about how high temperatures affect tires. In this case, the narrative can provide a quick physics lesson, and the CTA button can prompt readers to get on the email marketing list to learn more about how climate influences vehicle maintenance. Surely, you get the point – CTA buttons should always be put in an educational and informative context.



Image Source: Prezi



Designing Climactic CTA Buttons

The most effective marketing narratives evoke curiosity and build suspense. CTA buttons should be designed to look like they will reveal a secret with a click of the mouse or a tap of the touchscreen. This can be achieved by explaining some concepts in the narrative while promising a resolution that will come after the CTA button is clicked or tapped.
In the end, ideal narratives should keep visitors guessing while the CTA button should bring enlightenment. Think of it as a series episode that ends with a cliffhanger. Design your entire page in a way that it climaxes at the CTA – more clicks are guaranteed.


Final Words

 Web designers who pay attention to colors, shapes, sizes and placement will ensure that their CTA buttons will be clicked on or tapped. However, it is equally important what the CTA says and what kind of a story it belongs to. So, when designing your CTAs, make sure to take all these facts into account in order to increase your click rates.


BIO: Natalie Smith, a freelance writer from Seattle, enjoys covering topics related to marketing, customer service, and social media. For more information, reach her @Natalie Smith

Leave a Reply

Your email address will not be published. Required fields are marked *

Need Help with your Digital Marketing

Submit Your Info and We’ll Work Up a Custom Proposal

Need Help with a Project Common Form

  • This field is for validation purposes and should be left unchanged.