Call to Action Buttons - 5 Most Important Tips to Get More Clicks

Attracting internet users to your website isn|t enough. It's just the first step. Next, it's absolutely important to guide the visitor through the site to do what we need: buy our services or products, book a meeting with us, read an article, subscribe to a newsletter, download an ebook, or contact us. Properly designed call-to-action buttons help users to achieve these goals.

As soon as you leave web visitors to decide too much, they usually do what you don't want. They probably leave the website without further interaction. Therefore, the call to action button is an essential part of modern web designs. 

What is a call to action?

Call to action is an interactive element that usually takes the form of a contrast button with text. Anyway, it can also be a classic text containing a link or an image. It is used on websites as well as in emails, advertisements, pop-ups, social networks and many other places where it is necessary to get users to take action. The abbreviation CTA is also commonly used.

There is a simple rule. The better you know your target audience, the more successful you will be in designing an effective call-to-action button. But in general, what are the best practices for successful CTA buttons that motivate users to take action? Let's dive into 5 tips with examples for amazing call-to-action buttons.

Placing call to action buttons determines the success

Where to place the call to action button on the page? This is precisely the question for which there is no clear answer. It is important to respect two basic principles.

1. Follow established standards
2. Get to know your site's users as much as possible 

It is certainly not worth surprising a website visitor with something crazy. The login button is usually in the upper right corner. So, why to change it? You would not achieve anything good with this change. 

People already have a mental map in their heads, according to which they automatically know what should be where. Or they are at least expecting it in there. So there is no reason to change the established habits.

And how to place additional call to action buttons?

Ideally, it should be recognizable at first sight. The user should logically come across them during a standard site visit. The placement should reflect normal user behavior.

This is easy to say but much harder to do.

79% of users just scan the site

Keep in mind the research from the Nielsen Norman Group, which reveals a painful reality for website owners. No matter how hard you try, 79% of users just scan your site anyway. They will focus more on the highlighted passages and the other texts will just briefly scan.

There are several scanning patterns, but that would be a topic for another article (if you are interested to find out more, you can read it here). 

If you want to place the call to action buttons with maximum accuracy, we recommend using the heat maps mentioned in the Kristyna's video.

Using a special heat map (scroll map), you will also discover how deep most of the users scroll within the site. When a website is long, it is better to place the call to action button in multiple locations. 

Get the attention with color

The ultra-shining colors draw your attention, but they stand out like a sore thumb. Less expressive tones will not attract enough attention. How to get elegantly out of this dilemma?

Some people believe that a particular color for action buttons works significantly better than others. In fact, this is not entirely true.

It depends on many factors:

• On the placement of a call to action button in the context of the entire website
• On background-color
• On the company brand colors
• On the desired action
• On the target group

In general, the color of the modern web buttons should be sufficiently contrasting with the background color of the page. 

If the site is not overcrowded with graphical elements, it is also useful to use gentle shading for CTA buttons.

However. When designing a website, it is important to use predefined schemes that determine the overall visual style. If you will not follow it, the whole website will appear chaotic and unprofessional. See the great example of Airbnb visual style:

Size matters

You know it. When it's too small, it's a problem. But when it's too big, it raises concerns at first glance. And don't be mistaken. We are still talking about the call to action buttons. Really.

The small button is easy to miss. In addition, remember how the miniature buttons are badly clickable on phones? Nowadays, more than half of the people are watching the internet via mobile phones (broadband search).

On the other hand. Don't overdo it with the size. The half-page button is clearly visible and can be conveniently clicked by a man with giant fingers, but it does not look really credible.

Try to attract the user's attention in a slightly different way.

Use the power of white space around your CTA buttons.

Leaving a little space around the CTA button will naturally excel on the web and act as a magnet for users. When scanning a page, he notices that something is different and attracts his or her attention there. On a Mixbook they used the white space around the button very well:

How to choose the right words?

Text is a fundamental part of the call to action buttons. The content should convince the user to click the button. How to do it? Use proven copywriter tricks.

• Urgency - Limited time offer always encourages the site visitors to quick action. Just imagine a CTA button with the text: "Only today 50% discount"
• Benefits - highlight what the customer gets: “3-year free service”
• Using the subconscious suggestion in the CTA buttons. Write the texts as the first person. F.e.: "I want to know more"
• Directivity - "Buy now!" Some people need a little push.
• Transparency - unfortunately, there are still some frauds, so it's sometimes a good idea for a site visitor to indicate what happens after a click: "Calculate a non-binding offer"

You need to get the necessary information, emotions, and atmosphere in just a few words. It is true that brevity and clarity is a half success. In addition, if you manage to sneak a joke into the CTA icon, you have won.

Tip at the end

Some CTAs are used in pairs. Right now we are typically talking about the "confirm" and "cancel" buttons. You are giving them the possibility to choose, but actually, you want them to take the action and finish the process as you wish. 

There is nothing easier than to make their decision a little easier. Take advantage of the psychological effect of the visual hierarchy.

What’s meant by that? Nothing complicated.

Make the primary button in contrasting colors. Feel free to use a bold font. On the other hand, let the "reject" button disappear a little. Choose a bland color. Ideally gray. However, it should still be sufficiently clear.

This hierarchy could be also used as a login or sign in buttons. See the great example from Starbucks:

What to take from the article?

1. CTA buttons help you meet your goals. With a properly designed call to action buttons, visitors get the impulse they need at the right time to do what you need. 
2. Functional call to action buttons make life easier for website owners and visitors alike.
3. The success of the call to action buttons depends primarily on the knowledge of your target group. Knowing how visitors behave on your website, what they desire and what language they speak will make it much easier for you to design an effective CTA button with the perfect words.
4. Size and color of the icons are also important. Do not forget that.
5. Remember that call to action buttons do not exist in a vacuum. You need to perceive them in the context of the entire site. Choose the color scheme, location, and style of communication according to your web design.
6. Functional CTA buttons cannot be designed overnight. It is ideal to prepare several sets of a call to action buttons and use A/B testing to find the ideal option.

Do you want to design the best call-to-action buttons that will convert? Don't struggle alone, send me a message to ondrej@creativehandles.com and I will help you to improve the user experience of your website and get higher sales and much more.