CTA button: 10 pillars of efficiency
I’ll tell you about the first factors that, in my opinion, affect the effectiveness of the CTA (call to action) buttons, it’s also “buy” in commercial projects.
No tips and cases , screenshots for illustration purposes only. Everyone can build hypotheses himself and test them with split tests.
The first screen is our everything. Depending on the project, up to 50% of users will not scroll down the page. That is, if we have the main button on the second screen - then, by our own hands, we reduce the conversion.
It is easy to check: We look at which pixel on top of the button and check with the height of users' screens on the GA. For example, if the bottom edge of the button is the 900th pixel, then 30% of users get it (or part of it) on the second screen.
That is, in general, the higher the CTA-button, the better. Traditionally, its place is on the right. users are right and the content on most sites is left.
')
Example: On the Lamoda Boots website, in the first screen, not all is visible, but the button is in place.
Size is an accent, accent is a priority, priority is what? Yes - who is in charge. If we want to sell, then the CTA button should be the main one, that is, large.
But, not too big, so as not to fall out of the design and do not occupy half of the screen.
On the Yoox website there is no doubt which interface element is the main one.
What we have here. Well, if it is a contrast, that is different from the color of the main elements of the site. But, his loss from the design creates a sense of arrogance. That is why I do not consider universal and the best shades of red / orange (which is customary among usabilists). But, in some cases, they really work, it all depends on the design of the site.
On the Wilburris website, the button contrasts with the design and it is not by chance that it is orange.
This is my favorite moment. As the text inside the button you can see the zoo options on the sites. I believe that the text in the button should:
This: Arrow with a special character (→) in the button, if after pressing it a transition occurs and its absence if there is no transition.
On the site the Platypus decided to do without text at all. Good decision? I do not think.
At this point, a strong binding to the design of the site, but in general, a rectangular shape can be considered preferable, it is most common and comfortable for users.
On the Bosco website, the button is round, it's unusual. I would check it for effectiveness.
How good at times to play with the mouse hover button. One, two, three brought and now - you have already pressed it. Rare case? No, it works. Therefore, on the overlay, we change the color, increase the font or in some other way change the button. And it is right!
You can also give a hint, this is also interactivity.
Bucking.com suggests moving to a new step by clicking on the button.
And, of course, if the button is convex, then when pressed it is better to press it, this is tactility. Therefore, a volume button with a shadow is usually preferable to a flat one.
If we have a sheet of content (for example, a landing page), then the button is good to repeat. Why? So that to press it you do not need to scroll up a lot. And also, to remind the user why we are showing all this on the page, for him to buy.
On the Online Tours website at the top of the page the button and at the bottom is the same.
A separate point, which is already clear, but not always implemented. Ugly, the curve button is pressed less often, even if the whole site is still nothing. This is a barrier that no one needs and is easily removed by any sensible designer.
In addition, a good button around has an indent, it increases its independence and highlights from all content. Bad - sticks to edges and other objects.
Faded, patterned buttons from the 90s on the Nix website, programmers made it immediately apparent.
When you restart or scroll down and the button changes color. At some point, she clings to the screen. Who is bad for this? - No one. Attracts attention? - Yes.
Reception for the split test is good, we try.
The most difficult moment. I can not give the rules, but if we have others next to the main button, they influence each other and this must be taken into account. There is nothing worse than two similar ones, it pessimizes both, lowering their CTR.
On the BEBAKIDS website, they are slightly different in size, but very similar.
There are many factors (described the main ones), all are influenced separately, and their combination affects together. I think that everyone understands how this affects the conversion - directly and directly. Due to this, I increased productivity by 1.5 times and more. In any case, it is worth a lot of work on it.
All working buttons!
No tips and cases , screenshots for illustration purposes only. Everyone can build hypotheses himself and test them with split tests.
1) Location
The first screen is our everything. Depending on the project, up to 50% of users will not scroll down the page. That is, if we have the main button on the second screen - then, by our own hands, we reduce the conversion.
It is easy to check: We look at which pixel on top of the button and check with the height of users' screens on the GA. For example, if the bottom edge of the button is the 900th pixel, then 30% of users get it (or part of it) on the second screen.
That is, in general, the higher the CTA-button, the better. Traditionally, its place is on the right. users are right and the content on most sites is left.
')
Example: On the Lamoda Boots website, in the first screen, not all is visible, but the button is in place.
size 2
Size is an accent, accent is a priority, priority is what? Yes - who is in charge. If we want to sell, then the CTA button should be the main one, that is, large.
But, not too big, so as not to fall out of the design and do not occupy half of the screen.
On the Yoox website there is no doubt which interface element is the main one.
3) Color
What we have here. Well, if it is a contrast, that is different from the color of the main elements of the site. But, his loss from the design creates a sense of arrogance. That is why I do not consider universal and the best shades of red / orange (which is customary among usabilists). But, in some cases, they really work, it all depends on the design of the site.
On the Wilburris website, the button contrasts with the design and it is not by chance that it is orange.
4) Text (content)
This is my favorite moment. As the text inside the button you can see the zoo options on the sites. I believe that the text in the button should:
- accurately reflect the action, specify it. In this sense, “buy” does not mean anything.
- include empathy . For example, "Put in my cart"
- contain a call to action, not to be neutral.
This: Arrow with a special character (→) in the button, if after pressing it a transition occurs and its absence if there is no transition.
On the site the Platypus decided to do without text at all. Good decision? I do not think.
5) Form
At this point, a strong binding to the design of the site, but in general, a rectangular shape can be considered preferable, it is most common and comfortable for users.
On the Bosco website, the button is round, it's unusual. I would check it for effectiveness.
6) Interactivity / tactility
How good at times to play with the mouse hover button. One, two, three brought and now - you have already pressed it. Rare case? No, it works. Therefore, on the overlay, we change the color, increase the font or in some other way change the button. And it is right!
You can also give a hint, this is also interactivity.
Bucking.com suggests moving to a new step by clicking on the button.
And, of course, if the button is convex, then when pressed it is better to press it, this is tactility. Therefore, a volume button with a shadow is usually preferable to a flat one.
7) Repetition
If we have a sheet of content (for example, a landing page), then the button is good to repeat. Why? So that to press it you do not need to scroll up a lot. And also, to remind the user why we are showing all this on the page, for him to buy.
On the Online Tours website at the top of the page the button and at the bottom is the same.
8) Workmanship
A separate point, which is already clear, but not always implemented. Ugly, the curve button is pressed less often, even if the whole site is still nothing. This is a barrier that no one needs and is easily removed by any sensible designer.
In addition, a good button around has an indent, it increases its independence and highlights from all content. Bad - sticks to edges and other objects.
Faded, patterned buttons from the 90s on the Nix website, programmers made it immediately apparent.
9) Variability
When you restart or scroll down and the button changes color. At some point, she clings to the screen. Who is bad for this? - No one. Attracts attention? - Yes.
Reception for the split test is good, we try.
10) Relationship with other CTA buttons
The most difficult moment. I can not give the rules, but if we have others next to the main button, they influence each other and this must be taken into account. There is nothing worse than two similar ones, it pessimizes both, lowering their CTR.
On the BEBAKIDS website, they are slightly different in size, but very similar.
Conclusion
There are many factors (described the main ones), all are influenced separately, and their combination affects together. I think that everyone understands how this affects the conversion - directly and directly. Due to this, I increased productivity by 1.5 times and more. In any case, it is worth a lot of work on it.
All working buttons!
Source: https://habr.com/ru/post/320584/
All Articles