What Is a Call to Action? – Comprehensive Guide with Examples

If you’re new to the world of digital marketing, you’ve probably come across these three letters — CTA — and wondered what in the world the California Truck Association had to do with running a successful eCommerce website.

Things may start making more sense when I tell you that in marketing and sales, CTA is actually just an acronym for the phrase “call to action,” a longstanding marketing practice. Depending on your age, you’ve probably seen CTAs in action in many different forms throughout the evolution of media.

So, what is a call to action? What does it all really mean? Let’s start from the beginning.The term call to action refers to any prompt for an immediate response or encouragement for an immediate sale. In digital marketing, this is most commonly achieved using so-called CTA buttons. These are highly visible, strategically placed, clickable buttons with contrasting fonts and carefully worded action-packed phrases. The CTA button inciting a very distinct response; it’s impossible to miss and easy to click on — the most important features of a successful CTA. Here’s a great call to action example from Netflix, urging you to “Join free for a month” if you’re a newcomer or, much more subtly, “Sign In” if you’re an existing user.

What is a Call to Action - website examplesource

But what exactly is a good measure of a call to action button’s success? This is a great place to introduce a new term and yet another acronym to tackle: CRO (conversion rate optimization).

Conversion Marketing

Conversion marketing is a marketing approach aimed at increasing the number of successful conversions. We’ll introduce it to help answer the question, what is CTA in marketing? As a marketing term, we define conversion as “the point at which a recipient of a marketing message performs the desired action.” Simply put, it’s getting someone to respond to your call to action.

Here are some real-life examples of conversions:

  • Signing up for a newsletter
  • Filling out and submitting a form
  • Attending a webinar
  • Clicking on an ad
  • Signing up for a free trial (as is the case with our Netflix example above)

And, the holy grail of conversions —  completing a purchase.

So, why do you need a call to action for this? We’re getting there.

The ultimate goal of any eCommerce website is to achieve a successful conversion, either directly or through a series of smaller steps called micro-conversions. A quantitative measure of how well this goal is met is what’s referred to as a conversion rate. A conversion rate is a proportion of the total number of visitors to a website who perform a particular action as a result of one or more prompts.  To be even more precise, it’s the total number of people who see your CTA, meaning we could write:

Conversion Marketing - Conversion rate formula

Naturally, the closer the conversion rate is to a ratio of 1, the better. In an ideal world, everyone who lands on your website about urban gardening should purchase your “Urban Garden Cookbook”. But how do you achieve this target? Or, more realistically, how do you get as close to it as possible? To answer that, we go back to our second acronym – CRO or conversion rate optimization.

Conversion Rate Optimization

Conversion rate optimization is a number of techniques used to boost a website’s conversion rate by improving aspects of its design. The main idea is to identify elements that impact conversion rates and perform tests to determine which variation leads to the best results.

What is the purpose of a call to action in all this, and why should we care?

Well, it just so happens that calls to action are a vital part of ensuring successful conversions. Although they may seem like a rather simple concept, and one we’re so used to seeing we take it for granted, there’s a whole science behind what can make or break a CTA button. This is why it’s important to understand how calls to action came about and evolved. We’ll start with the history of calls to action and then move on to their more modern counterparts, ultimately exploring what is CTA in a website.

History of CTAs

Long before the internet, online shops, and eCommerce, people peddled their goods and services and worked out ways to increase sales and catch the attention of prospective customers. Some of these methods were essentially predecessors to what we now know as CTAs. They utilized many of the same guidelines:

  • Eye-catching design (sometimes ear-catching too!)
  • Creating a sense of urgency
  • Concise and imperative wording
  • Ensuring a conversion is an easily accomplished process
  • Prominent placement

These are all features which define the essence of CTA regardless of its form. As advertising methods changed and new media outlets rose and fell in popularity, different variations of calls to action appeared. We’ll explore how CTAs were utilized in print and television.

CTAs in Print

A typical example of a CTA in print, and one that is still commonly used despite the increasing prevalence of digital media, is the magazine subscription card. If you’ve ever purchased a magazine, chances are you’ve come across these brightly colored, postcard-sized inserts. These are textbook CTA examples — by promising amazing savings and limited time offers, they entice you to renew or start a subscription.

Subscription cards tick all the boxes:

  • Eye-catching: bright colors, textured cardboard, often not attached to the rest of the magazine. Literally jumping out at you from the folds.
  • Action-packed text: “Subscribe now for 75% savings!”
  • Ease of use: fill out the necessary information and drop the card into the nearest mailbox. Postage is already paid.

CTAs in Print - Magazine subscription cardssource

CTAs on TV

Another popular advertising format embodying what is CTA at its core was the almighty infomercial. Dominating the airways during the golden age of television, these long-form commercials advertising a wide array of “as seen on TV products” always ended with straightforward instructions for ordering via phone and later, website.

The visuals were always striking and attention-grabbing, as was the ever-enthusiastic voiceover.  They used short imperatives such as “call now “ or “order today.” There was always a very clear incentive, in the form of limited time offers or gifts, to act quickly.

With its powerful call to action phrases, the infomercial as an advertising format has stood the test of time and is still in use today. However, with the advent of streaming services, cable television is standing on thin ice. It remains to be seen what the future holds for this marketing form.

CTA as an Element of Web Design

Now that we’ve explored the past, we turn our attention to the present, and quite likely the foreseeable future as well. Which leads us to the big question at hand: What is CTA in website design? As previously mentioned, call to action buttons serve a very distinct purpose: to guide the user towards a specific action. To do so, a CTA button must be prominent enough and convey its message in a clear and straightforward manner. There are certain aspects of CTA button design you must take into account when trying to grab your visitors’ attention. As with most design, there are no precise answers and step-by-step guides that guarantee conversions.

Even when a particular design works very well for someone else’s call to action, website specifics are usually unique to each page. This means that a carbon copy won’t necessarily be the right choice for your web presence as well. Taking into account the one-of-a-kind set of challenges every website faces is critical. Customizing design to cater to these specific needs is the key to success. Nonetheless, there are helpful guidelines to assist in avoiding rookie mistakes, and certain design elements have been proven to be more effective in practice.

So without further ado, let’s learn about some of them.

What to Consider When Designing a CTA Button

What are call to action buttons without calls or, well, action? Useless. To achieve its purpose, a CTA button must have a prominent position on the page. It must also be large enough to be noticeable. Finally, its color should stand out from the background, attract attention, and convey a sense of urgency. Apart from this, the design of a button must be such that a user instantly recognizes it as a clickable element.

In this section, we’ll go into greater detail of every facet of CTA button design.

Placement

First and foremost, you have to decide on the location of your call to action, meaning you have to determine where the button will be placed on a page. This depends on a number of factors and is something to consider when planning the layout of your web presence. The earlier on in the design process you account for your CTA button, the more time you’ll save yourself in the later stages. You’ll avoid having to shift everything around in order to accommodate it. However, this is not to say that anything should be set in stone. Any call to action definition stresses that it needs to provoke an immediate response. Therefore, if your CTA button’s current placement simply doesn’t cut it, investing the time and resources to address this issue is more than worth it.

Central Positioning

There are several popular CTA button “spots.” One of them is central positioning, as is the case with the Netflix example we looked at earlier. The same applies to this one below from Duolingo’s homepage. Looking at this example and the show-stealing green button, the answer to the question “What is a call to action supposed to accomplish?” becomes more than apparent.  

Notice the contrast — both of the button against the dark blue background and the white letters against the green button. Finally, ensure consistent branding on your whole site. This means use of colour, fonts, image styles, CTAs, etc. should have the same design across the website.

CTA button Placement - Central Positioning Examplesource

This type of central positioning works exceptionally well for less cluttered layouts. Here, the button isn’t competing for this prime piece of web page real estate against other elements.

Non-Central Positions on the Page

Another common choice for positioning CTAs is at the very top of the page, especially the right-hand corner. See the example from Vimeo below. Regardless of what the visitor is doing on the page, they’ll see the CTA, meaning that the button (or two) on the very top “follows you around” whether you’re browsing videos or reading their blog. This is possible thanks to what’s called a sticky navigation menu. The placement is consistent as you explore the website, and you are constantly exposed to the message.

CTA Button Placement - Non-Central PlacementCTA Button Placement - Sticky Navigation Menu 2source

Another approach would be to consider the natural progression of the human eye as it reads a text. This is left-right and top-bottom in most western countries. Therefore, placing corresponding CTA buttons to the right of and underneath text is common practice. In the example below, as the reader nears the end of the segment, they’re met with what is a CTA button sprawled across the width of the text. When clicked on, it allows them to access the case study referred to in the paragraph preceding it.

CTA Button Placement - Under Textsource

A crucial thing to remember is to take into consideration the nature of the CTA button and its relation to the rest of the website. Is it an “add to cart” button relating to a specific product being viewed? Then the button placement should reflect that. Here’s an example from Dr. Martens’ website, where the CTA button placement corresponds with distinct visuals for different shopping subcategories.

CTA Button Placement - Under Imagessource

Size and Clickability

Now that we’ve resolved the matter of placement, let’s turn to the question of size. As we’re well aware by now, the CTA acronym stands for call to action. When creating an element meant to incite urgency, and one that calls for increased visibility, instinct tells us to go big. In a nutshell, this is true, but not without some consideration for practicality and context.

As call to action buttons are meant to be clicked on, their size should reflect that. They should have a large enough, easily clickable surface area. However, going overboard and using such large dimensions that it is no longer clear what is a CTA button and what is the background should be avoided. Another worry with going too large is throwing off the balance of the layout as a whole.

Wondering whether your button is the right size? There’s a slightly ridiculous sounding but effective way to check if your button is visible enough. Squint your eyes so that the details of the web page become blurry. If the CTA button stands out, you’re good to go. Otherwise, it might be a good idea to size up.

We’ve established that call to action buttons must attract attention. But what is CTA good for if the user fails to understand that this element is something clickable? Without that, you’re just urging them towards an action they don’t see a clear and easy way of completing.

So what are some ways to ensure users see a button as clickable?

Utilizing shading and other techniques to make a button seem more three dimensional is a popular approach. However, due to the popularity of flat design, this is not always an option. In such cases, designers often stick to conventional button shapes to convey clickability — most commonly, rectangles and ovals.

Color

A very important attribute of call to action design is color. A lot of testing has been done to determine the effects of color on conversion. Research on the influence of color on different aspects of our lives is rather popular. Thanks to one study, we know that blue boosts creativity, while red can enhance attention to detail. Another study shows that people judge the ethics of a brand based on its logo colors. Clearly — color matters, but it’s not as simple as saying “these shades work and those don’t.”

A certain color can have amazing, scientifically proven effects on the human psyche. However, if it doesn’t stand out against your website’s color scheme, even with the best CTA button text, this element won’t be calling anyone to action. More so than any particular shade, attention should be paid to contrast.

CTA Button Colorsource

Take Survey Monkey’s website above. The minimal design utilizes lots of blank space, and the two central CTA buttons are brightly colored and visible against the simple monochromatic background.

Another important color-related choice is the button text, and here, too, contrast is key. Popular text color choices are white and black. They stand out well against most colors and will not clash with most color schemes.

Text

Speaking of text, how do you write a call to action now that you’ve picked a font color that stands out and doesn’t strain the reader’s eyes? Since it is a call to action, the wording must be direct. There should be no doubt in the user’s mind what the purpose of the button is. Keeping the message short is also advisable. If any additional clarification is needed, text can always go outside the button, e.g., right underneath. Ideally, as with any sales pitch, a CTA button should strike a delicate balance between creating a sense of urgency and coming off friendly and welcoming. The last thing you want to do is make the user feel manipulated or forced into doing or buying anything. Often we use call to action phrases, examples of this being: “join free for a month,” “sign up,” or “claim your free trial.”

Hierarchy

Not all CTAs are created equal, and for good reason — on a well-designed website at least. Sometimes, visitors to a website will face a choice between several different types of actions. Depending on how desirable each of these outcomes is for your business, you’ll design the corresponding CTA accordingly. A typical example would be a screen offering several different price tiers of the same product.

In cases like this, the button corresponding to the free or cheapest option will be the least eye-catching. By the same logic, the more expensive ones will be easier to spot and click on: so-called main CTAs. Here’s another example of, what is a call to action dilemma, essentially, from Spotify below. As premium subscriptions are preferred, the “GET PREMIUM” CTA button has been made more visible. The free option is just as easy to click on and not necessarily hidden, but higher priority is given to the more desirable outcome.

CTA Button Hierarchysource

Here is another example from Cards Against Humanity. The “Buy Now” button is brightly colored and slightly larger than its “Download for Free” counterpart.

CTA Button Hierarchy 2source

Apart from using different colors, button size usually follows the importance of the action they are trying to incite. To give an example and answer the question, what is a call to action in social media? we’ll analyze the Facebook login screen.

Most people seeing this page are those who do not yet have a facebook account. This is why the “Sign Up” button is large, brightly colored and prominently placed. The desired conversion is new users signing up for a Facebook account, and the corresponding button is the main CTA. In case the website visitor is a user with an existing account, a “Log In” button is available, albeit much more discreetly. A similar example is the Netflix homepage at the beginning of this text.

CTA Button Social Mediasource

What to Avoid

We’ve talked about what to do to get the best call to action buttons. We’ve also pointed out some shining beacons of CTA excellence. Still, sometimes, it’s equally helpful knowing what NOT to do.

Our first example, ironically enough, comes from another kind of CTA, the Chicago Transit Authority. Big city dwellers are often quick to complain about public transit. We’re here to point out some bad practices on a public transit company’s website instead. Just like the service they provide, a public transportation system’s website should be easy to navigate and help you get to where you’d like to go in a quick and timely manner.

Clearly, this is a less than stellar call to action example.

Looking at their homepage, one can find it is difficult to grasp where one should click. Right away we can see that designers have made use of bright colors. Unfortunately, instead of popping off the page and drawing attention to specific CTA’s, the large blocks of color dilute any eye-catching potential. The two green CTA buttons that do stand out are grouped together. They are also visually identical to one another, which adds to the confusion.

CTA Buttons what to avoid example 1source

Sticking with the transportation theme, Eurolines, a European bus service provider, similarly misses the mark. Sadly, they also get a mention in our CTA examples to avoid. The overabundance of blue elements creates a very monotone visual experience. Although some CTAs are present on the page, they are difficult to spot. Some are also not intuitively clickable.

CTA Buttons what to avoid example 2source

Final Thoughts

We started with the basics of calls to action and ended with a detailed overview of their practical use. It’s worth noting that the topic of CTAs is a broad one and we haven’t come close to exhausting it. Some specific questions such as “What is a call to action in writing?” and others haven’t been answered in detail.

Calls to action are here to stay, and mastering their use is an immense asset for any business, large or small. Making smart choices when picking out your CTA buttons’ attributes can make or break a sale. Taking the extra time to consider the effects of different elements and put everything we discussed above into practice can pay off in the long run.

At the end of the day, DO take into account what’s tried and true. At the same time, DON’T blindly follow what’s worked for others in the past. Be sure never to lose track of what your website stands for and what your specific goals for it are.

So, what is a call to action? Your new favorite marketing tool!

We will be happy to hear your thoughts

      Leave a reply

      Designadvisor