"Why don't you do that" - or how do you say that on a website?

Not too colorful, easy to read, big enough, mobile optimized - the demands on how a website should be and the user's expectations about the experience are even as extensive. 
⁠A website has to impress, whether the first-time visitor or even a returning one. And that's not as easy as it may sound, because there are about 1.9 billion websites on the Internet - and everyone aims to stand out. 
⁠For the design of a website there is a lot to consider - and there are some useful elements, that every website should have. Let’s take a look at one of these. 

What is a CTA?

"CTA" is not the abbreviation for a particularly cool robot or a new youth word. The acronym CTA stands for "call-to-action" and is used in marketing as an abbreviation for an action someone should do.
⁠There are as many channels in marketing as there are ways to place a CTA: While in a TV commercial the call to action can consist of an acoustic (or also visual) statement to arrange a test drive, in online marketing the CTA (on websites, for example) is usually a button or link such as "Test now" or "Find what you are looking". 
⁠A CTA is also an important component of marketing within a text or text ad. In a social media post it can be a request to follow a page or to like a post. But "sign up for the newsletter now" is also a direct CTA. 
⁠Of course, you can also formulate a call to action indirectly and place it through a redirect to a page, such as the use of an arrow in combination with "All News" or through the simple little word "more".  

Tips for CTAs

Now that we know what a CTA is, let's take a look at how to design one on a website. Here's what you should pay attention to: 

1. Naming or wording
⁠When CTAs are placed on a website, it is important that the text on the button clearly states what it is about and what the goal is. This may sound simple, but it is important because if the primary goal is to get contact requests, the wording should be, for example, "Contact us now." If, on the other hand, it is more important that a whitepaper is downloaded, the CTA button should refer to this accordingly. 

2. Placement
⁠Choosing the right place on the website is crucial. Of course, the CTA should catch the visitor's eye quickly, but it should not be the first thing seen directly. In addition to the CTAs, the headline should also be concise and catchy and ideally make the visitor want to read more. If the benefits are still placed in such a way that they can be seen within the first few moments, a good start has already been made. These 3 elements should be coordinated with each other, the CTA should be placed in any case well visible, but not engaging. 
⁠

3. Whitespace
⁠Tip No. 3: Make sure that there is enough whitespace (free space) around your CTA. This tip follows on directly from tip 2, because the CTA should not be lost between other texts. Therefore - space around does not hurt here. 

4. Use contrasts 
⁠Following on from the first 3 tips, color elements can also be extremely helpful. Whitespace is used to ensure that a CTA doesn't disappear or get overlooked, and the use of color contrasts can further emphasize the whole thing. Most companies have a corporate design that consists of more than one color, so you can specifically use a color here that is otherwise used rather less, but fits the existing scheme. 
⁠

5. Number of CTAs
⁠The number of CTAs is also important - because the rule here is: less is more. The website visitor should not be overwhelmed, so it is better to have only one clear CTA per page. Of course, you can have a different one per landing page. For example, if you have a job page integrated into your website, the CTA here should be "apply now" rather than "test product for free now". Ideally, there should only be one CTA per landing page and as long as the CTAs revolve around the same topic, there should be no variation here. So it's important to be clear which is the main CTA. 

6. Call to action + value proposition 
⁠Let's get down to the nitty gritty: The value proposition. The point here is that the button should directly communicate what benefit the user will get from clicking the button. Statements such as "Try for free now" directly explain that the user will receive something for free. The wording should be short, but directly name what added value a click can generate. 
⁠

7. Limitation
⁠The use of limitationis a hard-sell method from marketing. It also works for CTAs. For example, you can point out a time-limited 20% discount promotion on a website and add "Save now" to the CTA button underneath. 
⁠

8. Test 
⁠This eighth tip doesn't primarily have anything to do with CTAs, it applies pretty much everywhere in marketing: it's important to test. Different formulations, color variations or even other placements of CTAs can be tested and if formulation (A) does not lead to the desired action often enough, formulation (B) can be used as an alternative to see after a certain time whether this formulation has led to more actions.  
⁠

Best Practice 

Stadtwerke Schorndorf
⁠The CTA placed here clearly shows what happens when you click on the button: you have the possibility to find the right contact person if you are interested in green electricity, for example. In addition, the value proposition is placed around the CTA (100% eco, cheap and easy) and the free space to highlight the CTA is also given. 

CTAs can also be helpful in explaining a process. The Stadtwerke Schorndorf page also shows how this is implemented on another landing page: Private individuals interested in a wallbox (charging station for e-cars for home use) are guided through the process step by step. Starting with the selection of the appropriate wallbox (with the possibility to get further information), the process ends with the request for an appointment for an on-site check for the upcoming installation. 

Fenster Mack 
⁠The CTA is also placed conspicuously and with whitespace on this landing page on the topic of "age-appropriate living". The wording "On-site consultation-secure" provides clear information about what a customer can expect and how things will proceed after clicking the button. 
⁠The CTA button was highlighted in green in the corporate design color to be visible through the purposefully placed contrast. 

Foti Finanz 
⁠The financial advisor's website starts right at the beginning with a clear call to action. This CTA is also placed in a highly visible position and generates the necessary attention through the color contrast. 

Ulm Schneider Logistik 
⁠In this example, the CTAs are without a direct call to action, but with a note on how to get in touch (telephone or e-mail). If you find the wording on CTA buttons too bold, you can also choose this more subtle variant. 

Netflix 
⁠The streaming service has a clear call to action with "Get started" and at the same time still makes the value proposition that Netflix can be canceled at any time on the one hand and offers unlimited movies, series and more on the other. 
⁠The color contrast design is just as pronounced here and the whitespace teases some of the platform's content in the background. For a user, this makes it obvious what needs to be done. 

Hubspot
⁠The Hubspot company also places its CTAs directly on the home page and here the special feature is that there are several calls to action in a visitor's field of vision at once. The button to "Request a demo" as well as the button "Start now for free" is present in duplicate. This approach is chosen for the following reason: If a visitor scrolls further through the page or visits another landing page, then the two CTAs remain permanently visible in the top right corner. The calls to action thus accompany the user on his entire journey through Hubspot's site.

Kamado Joe
⁠The American manufacturer of premium ceramic grills relies on striking corporate design red for the color contrast of its CTAs. The visibility is thus given. The value proposition places this company not with him CTA, but directly above recognizable.
⁠The hint to "learn more" on this CTA is a subtle variation to allow a visitor to enter the world of these high quality grills. But this hint is there for a reason: The use of such a grill wants to be learned and Kamado Joe shows that right at the start.

Summary 

We took a closer look at one element of website design: the CTA. The acronym for a call to action to a visitor of a website can be designed and placed in many variations. Often in conjunction with a value proposition. Many practical examples show how to do this correctly. However, it is always important that the choice of CTA and the respective wording clearly fits the company's objective. 

For all bookworms, there are more articles in our blog. If you want to learn more about our projects, you can take a look at some of our case studies.