What is Call-to-action and how to improve its performance. How to create effective calls to action? Add special effects

Although many people don't know it, call-to-action buttons are a powerful tool for marketers.

A “call to action” is a word or picture that gets people to do what the site owner wants them to do. How you design and place them is very important.

Whether you want people to subscribe, download, or buy something, your button should always look compelling.

A study of more than 200 small businesses based in the United States found that more than 70% of them did not have clear, understandable call-to-action buttons.

The researchers also found some Interesting Facts, given below:

• 82% of subjects did not refer to company profiles in in social networks.
• 72% of them did not have “call to action” buttons on their websites.
• 27% did not display a phone number on the home page.
• 70% of those who did have a phone number did not post it in a visible place.
• 96% of them did not include site navigation information on the home page.
• 68% did not indicate their address Email on the home page.
• Of those who provided an email address, 38% did not post it prominently.

As you can see, many businesses have neglected compelling “calls to action.” This means they don't give visitors enough guidance on what to do next. As a result, visitors leave the site.

Examples and types of “calls to action”

So how exactly will you create compelling buttons on your website?

Check out these 24 simple tips for improving your call to action so you get more clicks:

1. Choose the right color

Choosing the right color plays a huge role. Some colors are known to attract attention more than others. On the SAP website Orange color increased the number of button clicks by 32.5%.

Green and orange are some of the best colors in this business. However, you need to select colors in accordance with the main design of the site. Always choose colors that stand out and attract attention.

2. Use easy to read text

Make sure the text on the button is large enough for visitors to notice. At the same time, don't make it too big because it might look off-putting.

3. Write specific content

Texts that include clear benefits, help, and other important information will get more clicks.

Hubspot is a good example of this:

4. Use accurate and understandable information

The text on your button should not be long. Keep the text short and clear. Use two to four words.

5. Be action-oriented

Each “call to action” button should intrigue and encourage site visitors to take action. Try replacing too frequent use words like “sign in” and “confirm” with words like “join” and “agree.” Choose words that relate to your offer, such as “get a free trial” or “download a free sample.”

6. Add special effects

Additional effects may be in a great way in order to attract the user's attention. For example, you can create a button that moves when visitors click on it.

7. Use a spacebar

Try not to add too many elements around your button. Leaving a blank space next to the “call to action” automatically makes it stand out.

8. Create urgency

The limit effect will force visitors to make immediate decisions: “the first 100 subscribers will receive a free e-book.”

9. Be specific

Do not confuse the visitor with a button that does not contain important information. Try to be more specific and include important details of your proposal.

10. Remember that size matters

Your call to action button should be large enough for visitors to easily find it. However, don't make it too big because it may scare away the visitor.

11. Choose the right shape

Mostly rectangular buttons are used, but do not forget that a round shape can also be effective. If the button seems to be concave inward, then visitors will pay more attention to its text.

12. Use accurate information

Make the call to action button relevant and show why the user should click it. Instead of using generic text (“see more”), 9gag uses the phrase “Want more fun.” This forces users to click the button if they want to see more funny photos.

13. Use evidence

Make the visitor think that clicking the button is in his best interest. Show it on specific example. A marketing consultant can give an example of the benefit received by a customer who used his services. This will convince more people to click that button.

14. Chat with visitors

Don't leave everything to technology because users want to interact with real people. Try to understand the thoughts of your visitors, this will help you reach their feelings. For example, a real estate website might use words like “Start your virtual tour" or "Take a tour today"

15. Use reverse psychology

While most sites say “click here,” you can get more clicks by writing so they don't click the button. This strategy was implemented by TimothySykes, whose website said “don't click if you're lazy.” As a result, clicks to this link increased by 39%

.

16. Be creative

Your “calls to action” don’t have to be buttons. Think about other options that might get people to click the link. You can try making a link in the video that will attract the attention of visitors.

17. Organize your time

You can place a “call to action” at the bottom so that the user clicks it after they get an accurate idea of ​​what you are offering. Users feel forced to click a button if it appears before the main information, which can turn them off.

18. Focus on design

The way you design your button can have a big impact on how many times it gets clicked. Adding pictures will help the user get best performance about what he is buying.

19. Speak in first person

Research conducted by Content Verve's Michael Aagard found that switching from second to first person increases clicks by 90% on average. Use personal pronouns to show that the visitor is talking to a real person.

20. Prioritize

You may have other buttons on your site that are not the main "call to action" buttons. Make sure your main “call to action” attracts more attention than other secondary buttons.

21. Add pictures

Adding attractive graphics goes a long way. However, it is important that the pictures you add are directly relevant to the message you want to convey.

22. Create surveys

There is no universal button template that fits all “calls to action.” That's why it's important to create surveys to understand what color, shape, and text work best for your company.

23. Use the rules of minimalism

Remember the old adage that less is more. Your “call to action” should be short so as not to confuse users with multiple options. If you want to add multiple options, limit them to three or four.

24. Choose the right position

Placement is one of the most important elements that affects the number of clicks. There are many places where you can add your call to action button depending on its type. Try placing it in different places to understand where it functions better.

Where to place the “call to action”

As mentioned in the last point, the positioning of your button can have a huge impact on the number of clicks. The placement of the buttons should depend on the content and information, as well as the design of your site.

Tests conducted by Content Verve showed that buttons placed near the bottom of the page received 304% more clicks than those placed at the top of the page.

In cases where an offer or product has multiple options, users need to review a lot of information to make an informed decision. It is in this case that the button should be placed at the bottom. For single offers, it is better to place the button at the top.

In general, prominent placement of your “call to action” plays a role key role in the number of transitions on it.

CTA (Call to Action) is a call that motivates the user to perform a particular action (go, fill out a form, call, buy, find out, etc.). Call to Action is the final stage V classic model AIDA. A well-built CTA should attract attention, interest and motivate a person to take action. The effectiveness of a CTA element is important indicator, which must be constantly monitored. Monitor how many people came to your landing page and how many of them took action. If given value too low means something is wrong with the CTA element.

As CTA element It can be a button, an image, a form, or even text calling for some action. It can be used everywhere, in any content, for example in presentations, webinars, banners, etc. Even a voice on the radio calling to call or go to the radio station’s website is a Call to Action.

How to make your CTA more effective

There are several techniques that can increase the effectiveness of your CTA.

1. The call to action should always be visible. Sometimes it makes sense to place it on the main page of the site (the place where the visitor is focused) so that when the user clicks, they can immediately start shopping, placing an order, filling out a form, etc.
2. The CTA should be as simple as possible. The simpler and clearer you explain the essence, the better the result will be. You can write on the entire page why a person should press this button, or you can write one phrase. Most likely, in the second case there will be more transitions.
3. Color is what allows your call to action to grab attention. Use colors that will stand out from the rest of the site, but also fit into the overall page design and company style.
4. Attract more attention by increasing the size of your CTA button. Make it wider, larger than the rest of the elements, so that it stands out. The main thing is to fit it into the overall design of the site so that it does not look ridiculous.
5. Spaces help to highlight a button or link it to some element (for example, to text that reveals the essence of the button).
6. Always use words like “call”, “download”, “order”, “buy”, “find out”, “read more”, etc. The user should have a sense of clarity. Without any doubts. He must know exactly what will happen when the button is pressed.
7. Tell the client what he will receive, what his benefits are, instead of describing your advantages and functionality. After all, people have always been attracted by the opportunity to get benefits, discounts, etc.
8. Use a deadline. Call to Action should encourage you to do something now, not later. Show that the promotion time is limited, the offer is valid until a certain time. A deadline is an important component of almost any CTA.
9. Test various options Call to Action. Use different strategies, offers, design, layout, etc. Track the performance of each CTA and choose the most converting ones.

Call to Action is a trigger that encourages the user to take a particular action. And the more original and interesting this trigger is, the more people will click on it.

By combining scientific research on color psychology with some design principles, you can create a great call-to-action (CTA) button for your website and significantly increase conversions. There are 4 tools that will help you achieve this: button placement, shape (and size), message and color.

In this article I will talk about the color aspect.

But let's start in order...

What are call to action buttons?

Imagine that your website is a chain of actions that users need to complete in order to find what they came for. To make their life easier, it is absolutely necessary to make this chain as simple as possible (i.e. user friendly), as far as possible, and guide them to the desired page without any intervention.

Since some of these actions are more important than others, they will need to be highlighted in the interface. You want to grab users' attention by trying to convince them to take action (call to action). This is most often done using a visual marker, interface elements with a call to action. Here are some examples possible actions: purchasing a product, subscribing to a newsletter, creating a new account, submitting an application, downloading latest version BY,..

But why do colors have such meaning?

Psychology of color

Each color evokes different feelings or moods in people, and therefore different reactions. Doctors and nurses wear white, which is a sign of sterility. Gyms are often painted blue because studies have shown that blue gyms allow weightlifters to lift more weight.

As you can see, the colors are very powerful tools to encourage or, conversely, block certain feelings. That is, you can, to some extent, guide users through your interface, allowing them to make the decisions you want them to make, using the right colors and color combinations. But don't start collecting right now. color schemes. There are one or two more things you need to know.

Although the perception of colors is subjective, some color effects have universal meaning. For example: blue is cold, and red is warm.

Secondly, the perception of colors is based on cultural characteristics. Let's take black (which is not a color scientifically) as an example. Although black is associated with death and mourning in many cultures, in ancient Egypt it also symbolized life and rebirth.

Susan Weinshenk ( Susan Weinschenk), Doctor of Philosophy and author of the book “ Intuitive web design: What makes people click on links,” wrote an interesting article about it. Don't forget to check out the McCandless Color Wheel, which you can download at the bottom of the page.

Kissmetrics did a great infographic on how colors influence purchasing.

A little color theory

As I explain below, it's best to use good contrast when designing important buttons. When I talk about contrasting colors, I actually mean complementary colors. Complementary colors are located opposite each other on the color wheel (see picture below). If you place them side by side, they seem to look brighter.

Another example of the use of complementary colors is the clothing that doctors wear while working in the operating room. In most cases it is green or blue. These two colors allow doctors to better perceive red objects, namely the patient's blood and entrails, to see them more clearly and notice the slightest nuances of the human body. Red and green are complementary colors.

So what color should I choose for my button?

As I noted at the beginning of the article, a CTA button is a set of 4 things: location, shape, message and color. If these 4 aspects correlate well with each other, you have a great call to action button.

With this in mind, there are also a few basic design principles and guidelines to keep in mind. If you want a design element to stand out, you can color it a complementary color to the background (think about the example I gave from The Resumator).

A little tip: for large buttons, use a less flashy color (relative to the surrounding elements and background), and for small buttons, on the contrary, you need brighter colors. But whatever color you choose, make sure the button you design will be visible without interfering with the main design.

Although this article is based on scientific research on color psychology and some design principles, you Always should test your call to action buttons yourself to see what works best for your site. You can use A/B or multivariate testing, or just follow these

Are you looking for a web studio that will provide you with high-quality implementation? Check out the results of the web studio creativity rating.

The position occupied in the creativity rating of web studios depends on the number of victories and the status of competitions. Do you like several teams at once? Pressing green button, you can literally invite them to take part in your tender in just two clicks.

Regular readers of our blog are well aware of what a “Call to Action Button” is on a landing page, and how important the role of this web interface element is in business.

In our new article, we will talk about how to create a highly effective call to action button - guaranteed to attract the attention of visitors and maximize the conversion rate and.

Remember! The CTA button should feel like a full-fledged, natural and harmonious element of your landing page architecture. A CTA element that looks “attached in a hurry” will involuntarily indicate to the visitor the unprofessionalism of its developers.

Method 1: Grab the user's attention by increasing the size of the CTA button.

There is an unwritten rule in web design: the size of a page element is directly proportional to its importance, in other words - than more element in size, the more significant its role on the page.

Example 1: The call to action button is larger than the surrounding elements.

Let's demonstrate this method of attracting user attention using the example of a landing page from Lifetree Creative.

So, let's compare the size of the CTA button with the size of another important element of the page - the company logo. To attract the attention of visitors, the developers made the button 20% wider than the logo. Thus, the designers achieved a commendable result: despite the fact that the logo is located higher than the CTA element, the eyes of visitors are like a magnet attracted to the call to action button, which stands out noticeably in its size among other elements of the landing page.

Example 2: if on landing page There are several call to action buttons - the more important button should be larger in size.

A landing page can contain multiple call-to-action elements. To indicate the relative importance of a call to action relative to others, you can resize the corresponding buttons.

Here's how this concept was brought to life on the paramore|redd website - a button inviting the visitor to subscribe to the newsletter significantly larger size than a button that “allows” the user to continue reading the blog. The conversion goal of this page is clear and clear - subscription!

Method 2: Capture the user's attention using the well-known rules of placing a CTA element on a web page.

Where you place your CTA on your landing page is critical to attracting visitors' attention.

Placing CTA buttons in prominent places, such as top part web page can lead to increased conversions because users are more likely to notice the design element and take action to encourage conversion.

Example 1: Place your call to action “a level higher” than the rest of your landing page content.

Simple, but extremely effective method highlight the CTA element - place it “above the surface” of the page. You can see this idea put into practice on the dailymile website, where the call to action button seems to “fly” above other page elements (diagrams). A similar effect can be easily achieved when laying out a page using Cascading Style Sheets (CSS).

Example 2: CTA at the top of the landing page.

A proven, simple, but very effective way to attract the user’s attention is to place a CTA element at the very top of the page, so that it is sure to fall into the visitor’s field of view.

Example 3: CTA in the visual center.

Another suitable place to place a CTA button is the “visual center”. To draw attention to the button - located exactly in the middle of the horizontal dimension of the page - you can use other design elements flanking it.

This method worked great for the PicsEngine page, but remember that the location you choose should not be too far from the top of the web page.

Method 3: Use white space.

Using white space (empty or “dead” space) works great on landing pages where there are a lot of other elements in the vicinity of the CTA button.

Example 1: Use white space to visually highlight your call to action.

Using the example of the landing page of the IconDock service, it is easy to see how effective this method is: a small button of a modest light gray color firmly attracts attention.

Example 2: Reduce the amount of white space to indicate a logical relationship between two page elements.

How more space, existing between the call to action button and any of the surrounding page elements, the less noticeable the logical connection between them. If you're using other landing page elements to persuade the user to take the action you want, reducing empty space these elements and the CTA button.

For example, on the Donor Tools company page, next to the call to action button, there is a list of benefits that the subscriber will receive. By reducing the gap between the list of benefits and the CTA, these two elements are combined into a visual group that enhances the impact of the call through a clear logical connection between the action and the benefits received.

Method 4: Use high contrast colors to create and highlight your CTA.

Be sure to decide for yourself what colors you will use - this is very important. Most reliable way attract attention - use colors that clearly contrast with the elements surrounding the CTA button and the background of the page.

Example 1: Use colors that contrast with surrounding page elements.

Here's a great example of this on a Notepod landing page: all the surrounding elements on the page are black, while the call to action is bright blue. The most inattentive user will not miss the desired button. :)

Example 2: Use contrast between the color of the button and the color of its surrounding background.

This method is simple and effective: place the button underlined bright color(for example, spectral yellow) over a black and white or monochrome background image, as, for example, the creators of this page did.

Method 5: Invite the visitor to use an additional/alternative call to action button.

Several call-to-action elements can coexist peacefully on a web page. In practice, it may happen that you need to offer the visitor one more thing, additional action to convince him to perform the main desired action later.

This technique is mainly used on websites. When creating landing pages, it is better to stick to the proven principle: “One landing page, one call-to-action element.”

For example, before subscribing to a web service, a user may want to get more detailed information about existing prices and methods of payment for services.

Give him this opportunity by installing another CTA button on the page that allows the visitor, for example, to watch a video explaining pricing policy of this service.

Example 1: Placing a secondary element next to the primary CTA button.

OfficeVP's website displays two call-to-action buttons next to each other. The buttons are made in contrasting colors, which makes it easy for the visitor to understand that they are offered two different methods of action: either register right now, or take a secondary action - get additional information during a free educational tour.

Please note: here is the main button desired action is located in accordance with the classic rule of information perception - the line is read by the user from left to right, which means that the first word in the line (in our case, the button) will receive maximum attention from the visitor.

The Transmissions landing page used a different approach to place 2 call-to-action elements horizontally. The main action button - highlighted in a contrasting color - is located behind the additional CTA element. However, this arrangement of elements is fully justified: an additional action (downloading a free trial version application), if executed first, may well push the visitor to take the main action suggested on the page - paying for the full-featured version of the tested program.

Example 2: Place a secondary CTA element below the main call to action button.

This type of placement may come in handy if you want to enhance the visual separation of your primary and secondary calls to action.

Please note: the additional action is highlighted by the use of a “darkened” (compared to the rest of the page space) background.

Method 6: Hurry up your page visitor.

Let your call to action buttons “speak” in a confident, peremptory “commander tone”. The user must think that if he does not immediately respond to your call, he will lose unique opportunity take advantage of your offer.

For example, on the tap tap tap.com page, the idea of ​​“hurrying up the user” was implemented in a very ingenious way: placed in close proximity to the CTA button with the call “buy now,” the ad states that the products are subject to a certain “starting price.”

A rather subtle mechanism for creating “anxious anticipation” is involved here: by juxtaposing the words “now” and “starting price,” the user begins to suspect that he risks paying more if he pays for the product later, when “starting prices” (which the buyer subconsciously associates with the beginning the simplest countdown from small to large numbers: 1, 2, 3...) will certainly change upward. ;)

And, of course, when coming up with a caption to place on the call to action button, do not forget about strong “compelling” words: “now”, “immediately”, “right now”, etc.

Method 7: Tell users that the action you suggest is easy and simple to perform.

Often, users' hesitancy to accept your proposal or not stems from the fact that they assume that the action you propose will result in a waste of time, effort and money for them. However, you can solve this problem by placing text on the CTA button that will create confidence among your visitors that the action you propose will be easy and simple to complete.

For example, on the Basecamp landing page, the text on the call to action button clearly states the time it takes for the user to sign up (60 seconds) and explains that a 30-day trial subscription is free.

This is very important point, try not to forget about it: when “designing” the caption for your CTA element, don’t forget to mention free versions products or registration deadlines, if any, and convince the user that registering on your resource will not take much of his time.

Method 8: Openly and thoroughly explain to users what they will get by using your CTA button.

Here's the final piece of advice, last in number on the list but not least in importance: Gain the trust of your visitors by telling them in detail and openly what they'll get if they respond to your offer.

Specialists Mozilla Firefox, for example, were able to place all the information most necessary for users on the surface of the button for downloading the application: information about the cost of the product (free), information about the version of the product offered (web browser version 3.5.3, designed for Windows OS with an English interface) and size downloadable installation file(7.7 MB).

This is what truly caring about your landing page visitor looks like.

And don't forget the main thing: test every change you make.

It is known that everything is more or less famous brands The American market is simply “obsessed” with testing its Internet resources. Understanding that a 0.5% increase in conversions can generate thousands of additional dollars in annual profit is great motivation for optimizing your landing page/website conversion rate.