By Susan Tucker
What is a Call to Action?
A Call to Action (CTA) prompts the website user to take an action (usually by clicking or hovering with the mouse) on your webpage. These generally come in the form of a button – one that draws the attention of the user and guides them through the information or services displayed on a webpage. The most common examples might prompt a user to “Sign Up”, to “Search” or to “Add to Basket”. It is critical that you have effective CTA’s so that your visitors know how to get what they want from your website quickly. Otherwise, you risk losing customers who cannot easily find what they want.
How to make an Effective Call-to-Action (CTA) Button that catches the user’s eye
There are two important aspects of your CTA’s that you need to take into consideration. First and foremost, design. What does your button look like?
Here are some design tips to create effective CTA’s that will improve your business’ web presence:
- Use contrasting colors (relative to the colors surrounding the CTA). For multiple CTA’s, use the most contrasting colors for the most important actions.
- Consider using a picture in addition to text to reinforce the action of the CTA. For example, add a shopping basket icon next to “Add to Basket” or a downward pointing arrow next to “Download”.
- Try making the button change slightly in color (either darker or lighter) when hovered upon. This sets apart a button from normal text.
- Make the CTA anywhere from 20% to 50% larger than surrounding text. More important CTA’s should be bigger than less important ones, create a list of the most important actions you want your visitors to take, and size the buttons accordingly.
- Keep it simple. The more words you use, the less likely the user is to read them all.
BONUS: Hubspot’s Free Download: 50 Customizable Call-to-Action Templates
Second, consider where you want to position your CTA relative to other components of the website.
Here are positioning tips:
- Make sure to cluster CTA’s that are relevant. For example, if your goal is to sign your visitors up for a service, consider putting a “Read More” or “Take a Tour” button next to the “Sign Up” button. This allows a user to continue browsing (and keeps them on your website!) even if they are not ready to commit by signing up yet.
- Put padding around the CTA. Make sure there is some blank space surrounding the button. This will make it pop out of the page and catch your user’s eye.
- Put relevant information around the CTA. Depending on the action, you may want the place the information above, beside, or below the CTA. For example, put a “Buy” button below the description of the product.
Follow these tips and you will have effective CTA’s that will allow your users to navigate quickly and will get the results you want from your business’ website. When in doubt, visit your favorite websites and observe how the layout and design of its buttons guides you as a user.
I look forward to seeing your CTA’s!
You rock! Thanks for all the relevant and easy to use info.
Thank you for the nice comment, Irene!
Susan gave me advice early on in my web development. Her suggestions are spot on and I’m a frequent reader of her page. Act now – contact her for the free assessment. It really helped me.
Thank you, Bob! Love your blog 🙂
BTW: I visited the site link and grabbed the free CTA’s. I’m using one in my post this Saturday for the very first time. So excited!!
[…] call-to-action is just that – the element or elements on your website that gets visitors to actually interact […]