A Call-to-action (CTA) are usually buttons or landing pages, and they are used on websites to guide the user towards your predefined goal, usually in some sort of conversion.
CTA buttons can vary in style, size and shape depending on what the conversion goal needs are. Designing call-to-action buttons in your website UX (user experience) requires some planning and forethought. As you will see in this blog, CTA’s are so much more than a button. So how are they used and what’s the process?
So CTA’s are usually a button used to lead people where you want them to go, usually for a specific conversion goal. Let’s break it down to how this happens.
1. You have a user on your website, and you want them to sign up to download some content.
2. You find a blog post or pages within your website that have some correlation to your conversion goals.
3. You build a CTA that offers a free value add or resource, such as a button saying ‘Download Free Template Here’.
4. This CTA then links to a landing page – which houses a form that once filled out by the user, will link to the content offer.
5. They get content and you get the form information. This allows you to nurture this possible customer into the future.
What’s Behind the Call To Action Button design?
Let’s break down what makes a good CTA. As you can imagine there are many styles and many ways that one can use the above theory. I don’t want to say size matters but honestly, if you’re going to grab someone’s attention having the actual CTA button as large as possible will usually result in more conversions.
This being said, just having a massive button that really sticks out like a swollen thumb is going to annoy more people than lead to conversions.
Colour is also something that needs to be taken into account. You want something that stands out from the rest of your page. Some colours traditionally work better than others and doing one’s research into the psychology of colour and how it affects people’s reactions and moods is essential in creating the feel you want.
Also, the strategic use of imagery can help focus the user’s attention on the hotspot or focal points you want them to engage with.
The Psychology of an Effective CTA
So we know we need to find a balance between design, size and colour, as well as use other elements to help us focus in on what’s important to our conversion process.
Let’s take a closer look at 2 distinctly different ways to effectively use CTA’s so much so that if you didn’t know what you were looking for, you would just think of them as website design elements of the website and this is the trick! You can now make your whole page a series of CTA’s incorporating them directly into the UX design.
Firstly, we’ll look at this page from Salesforce. First off how many CTA’s can you see? For those playing at home, there are 4 or 5 including the contact us button.
So we can see the placement of these CTA’s looks natural and it flows across the page, salesforce has done a great job of using their UX design to incorporate these CTA’s across their page seamlessly. So they look like navigation elements to get where I need to go. Without a second thought, I will click on them and be lead down the conversion trail.
Let’s take a look at another approach from Hubspot, now we can easily see the 5 CTA here, we have the “Free Trial” at the top and 2 “Learn More” buttons, as well as a “Try it now” and a “save your seat”.
Now look at their buttons – they’re actually full graphics, and imagery has been carefully designed to pull the user’s focus onto three elements here. This is a brilliant example of the psychology of good UX and CTA’s working together to lead a user down the correct path – to the right content and the correct offer.
We can tell that Hubspot wants to sell Marketing and Sales Software, as they are placed on the left and we read left to right. The other indication is that working under each heading provides a possible solution to a problem – however, they are not pushing for sales yet their just offering educational content on these software packages.
The reason being is it is probably quite a large investment to sign up and on board at this point, especially if the client is new to HubSpot. So CTA’s that offer educational content are great here and they also tell us that HubSpot offers these services.
Next, we have the “Just released!” & “Try it now” CTA. The actual graphic around the button tells us that this product will help us with analytics of some kind and the subtext suggests it will make our website work better. So why not hey, after all, you have heard HubSpot are great at what they do.
So this must be the main CTA right? No, but you have scanned it at least twice by now.
Let’s go back and move from left to right, now we see the actual CTA they want you to click on.
You went past it, look slightly up, you see it?
That’s it – the oddly blue button sitting up the top with “Free Trial” this leads you to a landing page that lets you sign up for 30 days free on their marketing platform.
How do I know this is the main button? Well for starters its blue and it distracts from the orange/grey tones of the rest of the page, so in our mind’s eye, it is automatically seen. Also, it is at the top of the page to the right where we look instinctively when we are deciding whether we want to be here on this page, the close window button is usually related to the top right corner.
Now even if we bypass this “Free Trial” button first up, to scan the rest of the page for content, at this point we will usually choose a place to click or look at the top right once more. Then the bottom, then back to the top right before closing the windows, if nothing has caught our interest.
By placing the “Free Trial” in this real estate’s we will see it on average 5 times even if we only scan the page once, and Hubspot has also given us another optional CTA down the bottom, as they do not like to miss out on an opportunity. This one gives us the option to join a live interaction with them, for free educational content.
The beauty with this is all 5 CTAs are educational, and 3 get your information and 2 offer you demos. All of this from one page on a website!
Use Strategic CTA Buttons to Improve Your Conversions
So this shows you how you can streamline your CTA’s not just to be a flashy button. But how one can incorporate it into the UX design making your website main page a conversion tool, with different elements to segment your potential customers into different parts of the buyer’s journey.
If you enjoyed this, you may like other blogs from our inbound essential series:
