Buttons surround us everywhere. Despite modern devices are more and more focused on the touch-and-tap technique, we still use buttons to turn on the TV or the air conditioner. The main thing about such buttons is that we use them because we want to perform some action, e.g. to get to a certain floor on elevator or make the TV louder.
Call-to-action buttons on website work some other way. These buttons are made to catch users’ attention and push them to perform the action a website owner needs. CTA’s usually contain text that explains users what action they have to perform. You may spot call-to-action buttons mostly on conversion-oriented websites and pages, e.g. landing page. But in general, any button that contains an invitation to perform an action may be called a CTA button.
The most often used types of call-to-action buttons
Here are the three most used calls to action.
- “Buy Now” buttons. It’s the most common type of a call-to-action element that is used on most eCommerce websites. You can come across such buttons on landing pages created to promote a certain product. The Buy Now button is also placed on a product page to push a visitor to purchase this product.
- “Learn More/Explore” buttons. This type of buttons encourages users to go for more info about a product, brand or other topics. It’s often used when you need to hide away large pieces of data, e.g. book description, blog post, brand’s history etc. Learn More buttons can be used for landing pages or banners to guide users to other pages where they can read full description of the product, get purchase conditions or subscription details;
- “Subscribe/Register” buttons. Specific buttons that are mostly used in combination with registration forms. They may be added to banners and popups that encourage users to register to website or subscribe to a newsletter.
All these types of buttons may be used in combination with other conversion elements. Sometimes call-to-action elements may be presented in a form of text links. Today they are rarely used due to the popularity of mobile devices. Text links are not the best CTAs for smaller screen sizes in terms of UX.
Taking user experience into account is vital if you wish to increase conversions. You should learn your audience and find ways of appealing to various types of buyers. HelpScout presented a few types of internet customers based on their consumer behavior in a cool infographic.
Twenty-four percent of so-called “Tightwads” is one of the most difficult audiences for a marketer. These buyers are characterized by having a very low pain threshold in terms of spending money. You have to use some psychological tricks to make those users part with their money.
Here are some tips to create compelling call to action designs and copy that will work for various types of customers.
1. Where do you place that call to action?
It’s been a long time practice of placing all vital elements above the fold. Latest surveys show that this tradition isn’t necessarily true and may not lead to higher conversions. Michael Aagaard provided a test for a B2C landing page where he changed the position of a call-to-action button and placed it below the fold. The results were unexpected: conversions increased by 304 percent.
Due to this experiment, Michael came to a conclusion: your CTA shouldn’t be necessarily placed above the fold. Instead, try to match the place of a call-to-action element with the complexity of your offer or product.
Thus, if your offer requires presenting a large batch of data, it’s better to give time to users to digest the info they got and make a decision in the end of reading. And vice versa, simple offer that doesn’t requires a lot of thinking to make a purchasing decision may use a CTA above the fold.
Another good idea is having several call-to-action buttons across a long landing page. Today many website pages make use of heavy scrolling. This trend again is connected with the use of mobile devices that make scrolling a better UX than clicking. So, using a few CTA for a landing page that relies on scrolling can be a great idea. Just one consideration: use the same text for all CTAs on one page to avoid user confusing.
2. What text should you include in the call to action?
One of the reasons why people don’t click your call-to-action button may be that it doesn’t really call to any action.
You may come across multiple examples on the Web when CTAs use such messages like “Free trial” or “Demo.” Such buttons don’t appeal to customers. They don’t push people to act.
So, one general rule here is:
“Add a verb that refers to users and really calls them to act.”
However, not any text with a call may work today. Most standard phrases like “Download,” “Add to Cart,” or “Click Here” are too trite and boring. Human mind doesn’t perceive them as urgent calls. You should think of creating a personalized custom CTA that will set you apart of your rivals, drive users attention and make them wanna click that button. Use of personal pronouns, like Me, You, Yours, Us, is very helpful to add a personal touch.
Consider using clear message to unambiguously tell people what action they have to perform. Sometimes tried and true “Sign In,” “Register,” or “Play Now” are better than some whimsical messages.
3. What colors do the button and text need to be?
Color is one of the most powerful instruments in web design. Bad choice of color palette may ruin your design and scare people away instead of making them clicking. Good choice of color for a CTA button as well as for its text makes a button easily noticeable.
Using contrasting colors is the easiest solution. But there can be one pitfall: some designers choose too bright colors for buttons and text. Such choice may have a reversed effect and keep people from clicking. There are tons of tutorials and infographics on color theory and color psychology on the Web that you can use for choosing a perfect color combination for your call to action elements.
In any case, darker text on a lighter background is an evergreen classics while lighter text on a darker button may evoke a strong emotional reaction.
4. What button shapes work?
Traditionally, websites feature rectangular buttons. The button shape may become a perfect design element and raise certain emotions. They can be that psychological driver that impacts user’s desire to click a button or to leave a page.
Usually, rectangular elements speak of reliability, traditionalism, and balance. Circular elements create soft, friendly, and calming atmosphere.
More fanciful buttons’ shapes should be justified from the design aspect. And don’t forget that you should make CTA buttons look clickable. If the buttons doesn’t look like a button then no one will click it.
5. How big should your call to action button be?
When it comes to CTA buttons, many may think that “the bigger – the better” principle should work here. But oversized buttons may create a feeling of pressure and seem too “aggressive” for users. This may hurt the UX. so If you don’t wish to frustrate your visitors try to choose the button size wisely.
Responsiveness is another consideration you should never forget when choosing a size for a call-to-action button. This element should look well-balanced with your design and be comfortable to use on smaller screens.
You can always make a smaller CTA button visible with a use of whitespace. This classic technique allows drawing attention to important element and making it noticeable. In terms of responsive design, whitespace surround a button and makes it easier to tap without touching other elements.
These are some easy tips for making your call-to-action work for you. You may want to use only a few of them or the whole batch. But don’t forget to test your choices to find the best solution that fits your webpage design, your goals, and audience.