{"id":3857,"date":"2020-01-17T16:00:14","date_gmt":"2020-01-17T15:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=3857"},"modified":"2022-01-14T10:59:04","modified_gmt":"2022-01-14T09:59:04","slug":"how-to-design-cta","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-design-cta\/","title":{"rendered":"How to Design a CTA Button that Converts"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]What should a CTA button look like? Where should it be placed? How to avoid annoying CTAs? These are just some of the questions that bother everyone from copywriters and marketers to web and UX designers. Today, we\u2019re going to sort them out. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

What is a CTA?<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"What <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The abbreviation \u201cCTA\u201d stands for Call to Action. A Call to Action is any piece of design (usually a button) that prompts the visitor to perform an action<\/strong>. This can be anything – from exploring the site to filling in a contact form or adding a product to the cart.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When designed well, CTAs perform a twofold function<\/strong> \u2013 they help user navigate a website, and they represent a crucial element in your conversion flow. Ultimately, their role is to get visitors to do what you want them to do. Like a discreet tour guide, leading a user gently through your digital environment.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Technically speaking, any button can be a CTA button, as long as it contains copy that transforms the visitor from a passive observer into an active user of a website. But one of the main things that separate CTAs from the rest of the buttons on a website is that, in addition to the aforementioned copy, they need to have certain features (color, shape, position) that attract the users\u2019 attention<\/strong> and influence them to perform an action.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]It\u2019s clear that CTAs<\/a> are of enormous importance for good user experience and for your business\u2019s bottom line, so in this article we\u2019re going to share some things to keep in mind when creating your CTAs.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Let\u2019s start with the button text. [\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Write CTA Copy<\/h2>\n

[\/vc_column_text][vc_empty_space height=”21px”]

\n
\n \t \n \"How <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]As the effectiveness of CTAs greatly depends on the quality and structure of its copy, it\u2019s clear that this text has to be well thought out. CTA copy needs to perform two functions: to engage the visitor and to make it crystal clear which action the visitor is expected to take<\/strong>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To achieve the engaging value, the text must be direct, clear and likeable<\/strong>, if not downright charming. Because it can only contain so many words, the message of the CTA copy should allow the user to intuitively understand the needed course of action.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"CTA <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In many cases, the ideal CTA copy will simply state the website\u2019s conversion goal. If your goal is to get people to read your blog, the button should simply say Read Now<\/em> or Read More<\/em>. If you want them to interact with the website, a button with the text Get in Touch Now<\/em> or even simply Message Us<\/em> will do the trick just fine.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Still, it\u2019s not enough to just be short, clear and (if possible) entertaining. There\u2019s a bit of psychology to be taken into consideration here. In fact, a great deal of research<\/a> and testing has been carried out to determine the kind of copy that users find the most appealing, and which CTA text converts the best.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Most experts agree that creating a sense of urgency<\/strong> is a necessary condition for successful CTA copy. Luckily, this can be achieved rather easily, simply by inserting a word or two, such as \u201cNow\u201d or \u201cToday,\u201d perhaps combined with \u201cOnly.\u201d[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"creating <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Buttons saying Get Your Free Copy Now<\/em> or Register and Get 50% Off Today Only<\/em>! are highly converting, as users don\u2019t want to miss out on a special opportunity to gain something that, come tomorrow, will no longer be available.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another thing to pay attention to here is how you address your visitors. Some experts consider the use of first-person pronouns (Create My Account, Get My Copy<\/em>) the most effective, while others opt for the use of second-person pronouns (Get Your Copy, Claim Your Free Trial<\/em>). To make things more complicated, the two techniques seem to have an equal number of supporters and arguments in their favor.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Pronouns\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Either way, it\u2019s clear that some degree of personalization in addressing the visitors<\/strong> is required in CTA copy, as it makes users feel more personally involved with the product or service. And personal connection is essential for conversions.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Design Your CTA Buttons<\/h2>\n

[\/vc_column_text][vc_column_text]The strictly visual aspect of the CTA buttons is just as important (if not even more so) as the copy itself. The rules sound simple \u2013 the buttons have to draw attention and invite users to click. But that\u2019s not always easy to achieve. In order to stand out on the page, the shape, size, color, and placement of CTA buttons have to be in clear contrast with the rest of their environment<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"Design <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Shape of CTA Buttons<\/h3>\n

[\/vc_column_text][vc_column_text]You have probably noticed that most CTAs (and most buttons on the web, for that matter) are rectangular<\/strong>. Sure, there are some great examples of CTAs that are circular, square or some other, even less common shape, but the majority of them are rectangular. Why is this?[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Rectangles and squares are the shapes we come across the most, be it on the web or in our everyday life. Rectangles, in particular, make us feel comfortable as they convey a sense of stability and assurance. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]On the other hand, it\u2019s been proven that humans have an affinity for curves<\/a>. Round shapes are simply more pleasing to the eyes than sharp, edgy ones. Not to mention that the circle is a shape that exudes a sense of peace, completeness and harmony.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Considering these two facts, it\u2019s logical that the most efficient shape for CTA buttons turned out to be a rectangle with rounded corners<\/strong>. This shape became wildly popular among marketers and can be found in a huge number of sites and apps.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"The <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Of course, these are just general guidelines derived from experience and some well-researched best practices in UX. There are CTA buttons that come in all sorts of unorthodox shapes, but those are generally part of a design environment marked by experimentation, highly specific aesthetics, and so on. In other words \u2013 they do not represent the norm.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"CTA <\/div>\n<\/div>[vc_empty_space height=”82px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

The Importance of Color for CTA Buttons<\/h3>\n

[\/vc_column_text][vc_column_text]The role of colors in shaping our perception and experience of all visual content has been researched for decades. Psychologists today agree that we tend to interpret and emotionally experience colors according to certain patterns, and this is something that marketers have been exploiting for a very long time. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Specific colors can be associated with specific messages<\/strong>, conveying them automatically, on a subconscious level. Just think of traffic lights \u2013 the colors themselves communicate the desired message. Green \u2013 go, red \u2013 stop.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]But when it comes to these two colors and their use in CTAs, the situation is not as clear as it seems. You\u2019d think that the color red, as a color of alarm, caution and warning, would ward people off and lead to fewer clicks. But in several independent a\/b tests<\/a>, red was a clear winner over green. So, when it comes to communicating via colors, it\u2019s best to take all advice with a grain of salt and do your own tests to get actionable insights.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"The <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Bear in mind, though, that even after you find the high-converting palette for your visual messages, your work is far from over. The color of the button will be at its most effective only when it is in synergy with its visual environment<\/strong>. The relationship between the button and the rest of the layout should be harmonious and balanced, but also contrasting enough to draw the users\u2019 attention. Complementary color combinations are also worth considering \u2013 they are pleasing to the eye, and they provide the necessary contrast.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Button\" <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The importance of colors in designing CTA buttons becomes even clearer in situations that warrant for two buttons<\/strong>, one of which is a classic CTA and another that leads to additional information on the subject.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \t \n \"Two <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In this case, the strictly CTA-type button has to be highlighted and accentuated, so that the users focus on it first. This can be achieved with a bold signaling color, such as red, orange or any variation thereof. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In the example above, you will notice that the other button, the one inviting visitors to learn more about the service in question, is much more subdued (in this case, just outlined), making sure the CTA gets all the attention. [\/vc_column_text][vc_empty_space height=”72px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Animation and Details on CTA Buttons<\/h3>\n

[\/vc_column_text][vc_column_text]The third aspect of CTA design is the button animation. Along with icons, discrete illustrations and other graphic elements, animation can bring another layer of visual and communicative value<\/strong>. When used properly, functional animation as a UX tool<\/a> can make buttons more intuitive and direct, and therefore greatly enhance their effectiveness.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When designing CTAs, animation is mostly used for hover effects<\/strong>. These animations shouldn\u2019t be too interactive or loud, as we don\u2019t want them to take the focus away from the message. Too much animation can confuse the user and create a negative emotional effect.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]However, subtly animated buttons are always a great contribution to CTA design, enriching it and making sure the focus is clear. [\/vc_column_text][vc_empty_space height=”50px”]

\n\t

The Positioning of CTA Buttons<\/h3>\n

[\/vc_column_text][vc_column_text]The final aspect that determines the success of a CTA button is its timing or, more accurately, its positioning<\/strong>. While there is no \u201cgolden rule\u201d as to where to actually put the button, one thing is clear \u2013 it should be served to the visitor at the right time.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]What this means is that you need to think very carefully at which point during the visitor\u2019s stay on the page he or she should see the button. When the visitor is well-prepared for the action using visual and textual content and information, the chance of performing the desired action becomes real. <\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The entire page \u2013 its design and its content \u2013 should therefore be structured and devised in a way that leads the visitor to the final goal (action), be it a subscription, a purchase or something else.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Placing a CTA above the fold<\/strong> (the portion of the page that is first visible upon loading) used to be a standard, but since scrolling is an action that we now perform so naturally and automatically, the \u201cabove the fold content\u201d has lost some of its \u201cprestige.\u201d In fact, putting a CTA right there at the top, before the user even has the chance to settle in and explore the content can often be counterproductive.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \t \n \"The <\/a>\n <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you place the button below the fold, it means that the visitor has to complete a path to reach it. If you planned your page structure right, that path will be full of visual and textual cues that gently push the visitor down, making him ready for the action. [\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you find the perfect spot for the button, you have to make sure it remains in focus<\/strong>. To do this, you must ensure there is enough negative space around it. This lets the visitor \u201crest their eye,\u201d and allows for the button to be clearly visible and its message to be understood.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Final Thoughts<\/h2>\n

[\/vc_column_text][vc_column_text]Clean, straightforward, focused and engaging \u2013 these are the primary qualities of a good, converting CTA button. We saw that a lot of these qualities come from the design. While the general guidelines and suggestions for designing the perfect CTA button are clear, an individual approach is always advised. Sure, the color red might be proven to work great, but if it clashes with the tone and palette of your website, you shouldn\u2019t use it. The same goes for guidelines regarding the shape, size and the position of the button. Once you design a button that fits your visual branding and find a great place for it, make sure to test it with a couple of slightly different versions. And don\u2019t forget to back your CTAs with some strong value-driven content and great copy. [\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

A Call to Action is the element of user interface that plays a crucial role in reaching your end goals. When done right, a CTA turns your visitors into clients. But getting all its visual and communicative aspects just right can be a bit tricky<\/p>\n","protected":false},"author":8229,"featured_media":3884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[29,30,4],"class_list":["post-3857","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-business","tag-creative","tag-tips"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/8229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=3857"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/3857\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/3884"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=3857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=3857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=3857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}