There is no website without HTML nor CSS (hopefully), but there shouldn’t be any website without CTAs. If you are familiar with web design or building websites in general, you’re probably also familiar with the term CTA. “The CTA is not visible enough”. “Our conversions are going down, maybe we need a different text on our CTA”. Etcetera, etcetera. But if you’re not, worry not and keep on reading.
What is a CTA
A CTA is a web designer’s best friend. It’s what makes the collection of web pages become a website. It’s the bridge between the user’s intent and the website. It is, therefore, indispensable.
CTA is short for Call to Action, and can be defined as any element of the website that incites users to interact with it, ie: hover or click on it. A CTA is made up of two parts:
- Visual element: it can be a text (“click here for free iPad”), a different text styling (eg: blue font colour and underscore), an icon (does “hamburger” say anything to you apart from it being my favourite food or a demonym?) or the shape of a button.
- Behaviour: something should happen once the user interacts with the CTA. The user might be sent to another website. A dropdown might open. An email might begin being written. Without behaviour, a CTA is useless.
Why you should have them
There are many use cases for having a website. Maybe you want to sell a product you make. Maybe you want to showcase the illustrations you painstakingly created. Or maybe you want to share your experiences with the world.
No matter the use case for having a website, you will never achieve your goals if you don’t have a CTA. Your customers won’t know where to click to place an order to buy your product. Your illustrations won’t be seen by anyone. Or your experiences will be left in the archive of the interwebs with no-one to ever know they existed.
Let me show you how Amazon would look like without any CTAs:
I think you get the idea.
How a good CTA looks like
Although it all depends on the style and design that your website has, the four following must-haves apply to basically any use case possible.
1. No text, no clicks
Yes, I know. Icons are great. Why should we sacrifice any of our beloved screen real estate by putting text into our CTAs? Everyone understands them! Or do they really? Of course not! Or do you really think that everyone knows what this CTA means?:
Do you understand what the CTA is telling you to do? Heck, me neither. But what about the following one?
Still no? Me neither! You might think that these float action buttons (FABs) are not frequently used, but in fact they can be found on Google’s guidelines of Material Design. So you might be wondering: if having text is so crucial, how come that Google can remove it and get away with it? Simple. The only time when it is allowed to have CTAs without text is when the context of it is so overwhelming that adding text would make it extremely repetitive. For example, in a search box like amazon’s:
So what are examples of CTAs with good text? Take a look at the “order” and “watch the film” CTAs:
Yep, Apple sure know what they are doing.
2. Make it look like a button!
The first CTAs in the history of the interwebs were basic anchor tags on html that resulted in blue links with self explanatory text: “click here”, “Home”, etc. The problem with them was that, not only were they lost in the myriad of links that websites used to have, but also that we humans are used to pressing buttons in machines or contraptions to get something done. For example, if you wanted to make Mario jump, you pressed one of the bright red button in your NES controller and, voilà, Mario jumped.
When someone decided to turn CTAs into button on their web, I’m very sure they saw a huge increase in its usage (although I don’t know if sites like these they were able to measure it with an accuracy worth of Google Analytics).
Unfortunately, after the slow (and necessary according to some) death of skeumorphism in favour of the flat design that we’re used to seeing in UIs, some designers have taken it to the extreme and represent buttons as a simple rectangle.
As an example, take a look at the following image and try to find the two CTAs:
If it wasn’t for the “Take Tour” text, I can assure you that not even crawlers would click on it. I’ve seen this problem in many websites, and their owners cannot understand why their conversions are close to zero. Luckily, there are ways to make a flat-designed button to look like one with what I’ll cover in the net point, but also with principles such as shadowing like Google did in Material Design.
But, in summary, if it looks like a button, people will interact with it like they do with buttons. If it doesn’t, they won’t. Period.
3. Make it pop
As previously mentioned, a CTA which is a button needs to look like one. But so does text if it’s a link. But whatever type of CTA we have, it needs to pop out.
If it’s text, it needs to have some styling that makes it different to other texts. The most classic example is the blue font colour and underscore that we saw earlier.
If it’s a button, it needs to have a colour that makes it pop out so much from the background that there is no chance of not seeing it.
As an example, take a look at what Tesla do as a sticky element:
Again, you can clearly see that those three rectangles are buttons and, considering that the whole item page is quite monochromatic, the red “Custom Order” pops out tremendously. Why is this one red and the other ones dark grey you ask? Simple: that’s the most important CTA for Tesla because it’s the one where they make the highest profit.
4. Location, location, location
A CTA with a great text that looks like a clickable button that stands out thanks to its bright colour is worth nothing if not positioned in the correct place within the website.
But there is also something to consider here: the flow. A good CTA is in a position such that the flow is not interrupted. This means that the CTA is easily clickeable but doesn’t interfere with the consumption of content or the checkout procedure.
Let’s take a look at the Apple website again:
Both the “Buy” and “Learn More” CTAs have a great, self explanatory text, look like buttons and stand out thanks to their colours. But take a closer look at their position. While “Buy” is ultimately the most important CTA on this site for Apple, it is in the top right corner to avoid interrupting the user consuming the images and the text where they describe the iPhone. On the other hand, the “Learn more” button is completely interrupting this flow on purpose because its intention is to show the user that there is, in fact, even more content about this particular section that they can consume if they want to.
So there you have it, my top four must-haves that make a CTA worth clicking. What about your? Let me know in the comments!