{"id":1093,"date":"2021-07-22T13:24:02","date_gmt":"2021-07-22T20:24:02","guid":{"rendered":"https:\/\/clarity.microsoft.com\/blog\/?p=1093"},"modified":"2025-07-30T08:45:31","modified_gmt":"2025-07-30T15:45:31","slug":"cta-call-to-action","status":"publish","type":"post","link":"https:\/\/clarity.microsoft.com\/blog\/cta-call-to-action\/","title":{"rendered":"CTA (call-to-action): The desire to click!"},"content":{"rendered":"\n

Do you need more subscribers? Want to entice your visitor to purchase your product or service? Do you want to persuade your visitor to try your offering? Then you need to make sure your website has a compelling CTA!<\/p>\n\n\n\n\n\n\n\n

The acronym, CTA stands for call-to-action which is defined as a stimulus to do something in order to achieve an aim. Call-to-actions predate the internet and have been included on flyers and brochures for years e.g., Call 1-800 000 000 today for more information.<\/p>\n\n\n\n

On a website a call-to-action is normally displayed in 3 ways:<\/p>\n\n\n\n

Text hyperlink<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Button<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Plain text with no link<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It is the part of your website that encourages the visitor to do something such as “signup” or “buy now”. CTAs drive many possibilities depending on your goals but are mainly used to help drive conversion for your business. A compelling CTA will bring you one step closer to your website objectives.  <\/p>\n\n\n\n

When writing a CTA, you need to know your objective. Top of the funnel when driving awareness could be \u201cLearn More<\/strong>\u201d. Whereas bottom of the funnel when looking to convert could be \u201cBuy Now<\/strong>\u201d.<\/p>\n\n\n\n

CTA: Important things to consider<\/strong><\/h2>\n\n\n\n

Devices<\/h3>\n\n\n\n

CTAs are rendered differently on different form factors, care should be taken so that they don\u2019t show up incorrectly on mobile. <\/p>\n\n\n\n

Example<\/strong>: CSS<\/a> error<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The user will find the above confusing as the user does not know where to click or tap. <\/p>\n\n\n\n

CTA Color <\/strong><\/h3>\n\n\n\n

Choose a color that stands out on your page. A contrasting color will work best to draw the visitor\u2019s eye to the CTA. If you are not sure which color to use, then a\/b testing can help here.<\/p>\n\n\n\n

Example: <\/strong>Accepting cookies<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The example shows a clear contrasting color making it easy for the visitor to accept or continue browsing as the call-to-action is taking up the right amount of real estate. <\/p>\n\n\n\n

Placement <\/strong><\/h3>\n\n\n\n

This is very important as your CTA needs to align with the rest of your messaging and be relevant. You must remember that you are taking the visitor on a journey and it is the conclusion of that journey. A call-to-action should not make it hard for the user to do anything else. If the CTA is a modal window and does not go away when the user clicks outside it, then the result will be dead clicks and a poor experience. <\/p>\n\n\n\n

Example:<\/strong> Sign-up for marketing emails and get 30% off<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above CTA causes dead clicks and frustration as the visitor cannot bypass the CTA unless they complete an action. The site has also made it harder to dismiss the CTA the user forced to click on “I Will Pay Full Price!”<\/p>\n\n\n\n

Incentive<\/strong><\/h3>\n\n\n\n

Give the reader an incentive to complete your CTA by giving them an offer such as a discount or gift with purchase. Using Clarity’s session recordings feature you can see which CTA is working and where there might be errors. <\/p>\n\n\n\n

Example:<\/strong> Download the app and receive a discount on the first purchase<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above example is clear and the user understands what will be the result of downloading the app. Also, it isn’t intrusive to the browsing experience and can be easily accepted or dismissed.<\/p>\n\n\n\n

Instruction<\/strong><\/h3>\n\n\n\n

Be clear with what do you want the user to do i.e., Click the button below.<\/p>\n\n\n\n

Example: <\/strong>Discover More<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above CTA is clear to the visitor. By clicking on ‘Discover More’ they will get more information about the product. <\/p>\n\n\n\n

Get Clarity and test your CTA!<\/h2>\n\n\n\n

The best way to understand which CTAs are delivering your objectives is to test them. Once you know which ones are working you can use them going forward to meet your goals.<\/p>\n\n\n\n

A great way to test your CTAs is by using a user behavior tool such as Clarity<\/a><\/u><\/p>\n\n\n\n

With Clarity<\/a><\/u> you will be able to get actionable insight and see:<\/p>\n\n\n\n