The overall view of the website creates the first impression on a new visitor. Whatever the eyes see has a great influence on the decisions of a buyer when on an eCommerce store.
Antonio Damasio, the Director of Brain and Creativity Institute, University of South California, in his theory of Somatic Marker Hypothesis (1994), stated that the ‘emotions and their biological underpinnings’ impact the positive and negative decision-making (often unconsciously).
Every color possesses a certain quality to influence the perception and emotion in human beings. This is why designers keep an eye on the details when it comes to implementing color combinations on an eCommerce website.
A Call-to-Action (CTA) button on the product page may seem to be a small element. However, differences in the design, size, and color scheme are important factors in determining the UX on the website and how visitors on the site respond to your CTA.
The CTA buttons created with human cognitive responses and visual impact in mind has helped several site owners to convert their visitors into potential customers, subscribers, etc. In other words, they help to persuade visitors to respond to your CTAs.
But, how to create impressive and effective call-to-action button designs to encourage your visitors to take the next step? Herein are the proven tips and best practices to design effective call-to-action buttons. When done right, they can have a measurable influence on your audiences to increase conversions.
How to create a perfect Call-to-Action button?
Proportionate Button Size
The size of the button is the first consideration to make sure your audience can find it easily. The size should be large enough so that the text is easily readable and fits within the dimensions of the button. Maintain a balance between the text font and button size so that the visitor finds the necessary information related to the CTA without the need for scrolling down. This approach will help to justify the page layout, provide comfort to the eyes, and easy understanding for the audience to take an action. After you finish the design part, take a squint test to check how your button looks on the webpage.
Use Psychologically Impactful Button Color
The color of the button is as important as the size and shape. It is an integral part of your CTA button design. This is even more important as you may have to place two or more buttons together. For instance, there can be two buttons on an eCommerce product page- ‘Add to Cart’ and ‘Buy Now’. Take trials to check if both of them look good together as they are placed close to each other. There is no specific shade to choose to make your button notable. In general, it can be identical to the brand color (if you already have a brand logo). It is obvious to find the red call to action buttons on the Vodafone website as it has a white and red logo. But it can be an eye-straining factor for many users. Moreover, having the same color as the menu bar, logo, and others for the CTA button may affect its visibility prominence. When choosing the button shade, you must also consider the other hues in use on your website. The button color complementing the color theme on your website bestows a nice viewing experience for the audience.
Focus on the Contrast Effect
The contrast effect of the button is extremely important for clear visibility. There are two aspects to consider in this regard:
Color Contrast of the Button to the Background
Your button should be clearly visible to the audience at a glance. If the button color is almost similar to the background, it may be hard to even find it. If the button gets overlooked, it will not be able to attract the visitors to respond to your call to action. The button color should have a contrast color effect on a light background color (preferably white shade). In case you also have an opt-out button placed next to your CTA, you may keep the color for this button similar to the background color to make it less visible and appealing to the audience.
Color Contrast of the Button to the Text
The visibility of the text on the button is as important as the button itself. If the buyers on your WooCommerce store cannot read the ‘Buy Now’ caption on the button, you are simply losing sales. When placing text on your button take note of:
- Font size of the text – It should be large enough and easy to read
- Contrast – The color of the text on the button should have a clear contrast with the button color. If you have a dark button color, choose a white or lighter tint for the text. Similarly, choose a dark shade or black text, if you have a neutral shaded button
Color Contrast with the Main Color Theme
Most websites keep the button color synonymous with the main color used on the menu bar, and other elements. But if the main color is used too close to the button, it may be overlooked for having the same shade. If the main color theme is dark blue, you can experiment by changing the button color to green, orange, or anything else to see the effect.
Shape and Appearance
This is one place where you can stay safe by following the conventions rather than using a creative touch to design an exclusive button shape and appearance. People are used to seeing mostly rectangular buttons on the majority of the sites. Some websites also keep all the four corners rounded. Always choose a matt color rather than dazzling shades to keep the view comfortable for the user. If the view is eye-straining, it can have a poor UX.
Choose Noticeable Location to Place the Button
Choosing the right position to place your CTA button is as important as the design itself. If your audience cannot find it at a glance, it does not serve the purpose entirely. It should be situated at a location on the webpage where every user can notice it instantly.
The most popular position for the button is within the dimensions of the website that comes to view before scrolling downwards i.e. ‘above the fold’ area. In other words, it should be anywhere near the upper part of your webpage.
Most websites have a CTA button at:
- Top right corner of the webpage
- Center of the layout (before scrolling down)
In this context, it is also necessary to leave some gap or blank space on all four sides of the button. Avoid crowding of other elements too close on any side for clear and attention-grabbing visibility.
Create Interesting Graphics to Draw Attention
Audiences are used to seeing CTA buttons on almost every site they visit. Even a solid color, appealing button text, and distinctive shape can fail to motivate the buyer to click the ‘Buy Now’ button. If everything fails, incorporating small graphics on the button can help to make a significant difference in the way the user responds to the CTA.
The graphic signs and symbols should be simple, small, noteworthy, and most importantly contextual. For example, if your button says – ‘Get My Free Copy Now’, use a downward arrow sign so that the audience can understand the symbol and relate to it.
Follow the Minimalist Approach
Despite doing everything right, your site can still suffer due to poor click-through-rate (CTR). One of the probable reasons is having too many buttons on the page. When audiences are spoilt for choice, they are confused about choosing the right option.
Even if you have multiple buttons on the site, highlight the main button you wish your visitors to click through. This will help to channelize your audience towards a single button over the other choices.
Write Appropriate Call to Action Text
Use Action Words in the Button Text
Choosing the proper text is an eminent factor influencing the user’s response to your CTA. Just note the difference here:
You may have a button titled- ‘Join Now’ offering a free course. Replace the text with a small phrase- ‘Take Our Free Course Now’. It instantly tells the learner that there is a free course to take up on the site. It is a complete message in itself. Note: Do not just use exciting button text to encourage the buyers to click through. You must use promises that you can fulfil to build strong relationships.
Make Your Text Easy to Understand
The button text must be simple, short, and almost identical to what people are used to seeing on similar websites. The text should clearly convey what is going to happen when the user clicks the button. This eliminates any possible confusion or query the visitor may have in the mind before taking an action.
In case, you feel there is a need for some explanation or want to provide some extra information, add a line below the button.
Address Your Audience in 1st Person Speech
Content Verve conducted a study on the use of different texts to measure the audience’s response to CTAs. During the A/B testing, it was found that changing the text from ‘Get Your Free Template’ (second person) to ‘Get My Free Template’ (first person) helped to get 90% more clicks.
It’s just putting yourself in the buyer’s position to change the perception of your audience.
Make it an Urgent Call
In a highly competitive market, you need much more than an action-oriented button text. Why not announce takeaways your buyers just cannot afford to miss? For instance, a button stating ‘Buy Now to Get 10% Off for Today Only’ is more effective than a simple text such as ‘Checkout’ or ‘Buy Now’.
Note: This is a sure shot sales strategy only if you can offer the deal. Do not make any claim that is not possible for you to fulfil. It can have a bad impression on the visitor and loss of business.
Use Personal, Friendly, and Conversational Tone
People feel comfortable accessing websites using a friendly approach to their audience. Therefore, the button language cannot be too serious, formal, or filled with jargon words. This is difficult to understand so your visitors are very less likely to feel motivated to take a step further.
A personal touch and casualty in approach make your audience interested to communicate further or read more. Use an informal and conversational tone to avoid sounding too salesy and encourage the users to interact.
Add Bonus Text When Needed
The bonus text is not necessary for all buttons. However, in some cases, especially free trial offers, you may want to mention the monthly subscription at the end of the trial period. In this case it can be- ‘Start 15-Day Trial Now’ with another bonus text below this caption stating- ‘Then Just $19.95/month’ in a smaller font.
Sometimes, you may also want to write messages such as ‘No software install or credit card required’. This is a bigger message and difficult to fit within the button. You can place this line just beneath the button for instant visibility.
The bonus text gives some extra information to the visitors motivating them a bit more to take action with complete peace of mind.
Avoid Using Insulting Captions
Several newsletters and landing pages use shaming text on the alternative buttons to funnel users to register or subscribe on their website. Showing contempt may seem annoying to some visitors who may leave the website and reach another website for the necessary information, product, etc. You can manage well with a simple alternative button titled – ‘No Thanks’.
Use Short Phrases
The text length is an eminent factor to achieve a good appearance for your webpage layout. Ideally, a button text can have about 2-5 words and not more than that. Today, internet users prefer using various types of devices to open their emails, online shopping store apps and so much more. A longer button may look good on the web version but it may be hard to fit a mobile screen allowing proper visibility.
Long texts also spoil the appearance and appeal of the button so choose your text very wisely to make it short yet dynamic.
Check Button Performance with A/B Testing
Every brand and business website is different and so are their approaches towards the target audience. Things that worked well for a certain business may not necessarily prove profitable for raising conversions on your website.
Therefore, most designers recommend conducting A/B testing with your CTA buttons. It helps to study how well each of them performs to increase click-through-rate on your eCommerce store.
How does the A/B testing help?
You can change a single factor at a time to measure the impact for quite some time. Herein are some factors to check during the testing phase:
Color of the Button
If your buttons are not able to generate enough clicks, you may experiment with other shades to bestow greater visibility and prominence.
For instance, if your button color is the same as the primary hues on the website, you can try a different solid color for a trial period to observe the changes.
Text Color of the Button
Similar to the button color, the tint used for the button text is also an important factor to grab the eyeballs. Try several contrasts to check for viewing convenience, prominence, clarity, etc. Consider using black for light color buttons and white for dark color buttons to get the best effect.
Button Text
As already stated above, you can do well with short and easy to understand button texts. Change the text without altering the meaning to see what works best for your business. Keep the text relevant to the steps that follow after clicking the button. It clears the confusion in the mind and assort to informed decision-making. This helps to prevent bounce out while taking steps after clicking the button. Your audiences know what is coming next.
Button Placement
If your webpage is too crowded and the buttons are overlooked due to the lack of sufficient space on the sides, this test may help to get improved results. Reduce the use of too much of graphics and texts near the button. Keep all elements at a distance from the CTA buttons for an attention-grabbing appeal to your buttons.
Likewise, if it is not present on the uppermost layout of your website, change the contents properly to fit the button upwards to make it more perceptible.
To Summarize,
Every aspect of the call to action buttons is integral for your website design. This is why you need to keep a keen eye on the details.
If you want to create CTA buttons for a new website or want to reform the existing ones, follow these ideas to create something out of the box. Whatever you do, keep it relevant to your business and appealing to your audience.
Once you have created several buttons, do take A/B testing by changing only one factor at a time with respect to the position of the button, text, button color, text color, style, etc.