Call to actions are a necessary element of every website or mobile application aimed at making a profit. Traditionally, it’s been believed that it’s the job of a copywriter or a marketer to think about CTA.
However, the times have changed and the domain of Internet sales has become more interdisciplinary. A UI/UX designer is also heavily involved in creating an effective call to action. Their role is to design a high-quality CTA button and take care of its competent placement. Every professional UX/UI design agency includes this service in their lists and makes sure that everything is done right.
In today's post, you will find some recommendations on creating call-to-action buttons and a couple of pieces of advice on how to place the button correctly. We are also going to cover the issues related to the color palette and typography.
Getting Started With CTA-Button Design
A CTA button is a powerful marketing tool. However, if you want to grow in the area of UX/UI and become a real professional, you have to know a little bit about marketing as well.
Create an Effective Button
When sketching out a button, a UX/UI designer Clay suggests the following:
- Use rounded shapes to create CTA buttons. As a rule, buttons with rounded corners attract more attention and simplify the processing of information. This is confirmed by studies according to which users found rounded buttons to be more friendly.
- Do not confuse the user. Create call-to-action buttons that look like buttons, and the visitor will have no questions about whether they can press it or not. Also, make the buttons stand out on the entire page so that the user wouldn’t have to search for a button.
- Create a clear proposal. Specifically, convey to the user what they can expect by clicking on the button. The same applies to the text next to the button; it is typically used to reassure the user. For example, if you are collecting an email database, explain the fact that you are not transferring the database of electronic mailboxes to third parties. This will improve conversion.
- Follow a clear pattern. When placing a button, consider the hierarchy of the other elements. If there are other buttons next to the call-to-action button, place the CTA button at the very top or bottom, but not in the middle. That way you save the user from the need to "jump" between the elements for re-scanning.
What Colors Should You Choose?
For call-to-action buttons, bright colors are well suited, as they actively attract the user's attention. This will allow them to stand out against the background of other elements of the site or application. To do this, use contrast. If your page has a black background, create a white button, and vice versa.
Which Fonts to Use?
Depending on the design style of your site, choose the appropriate font that will not cause irritation to users. Here you can read more about the emotions that different fonts convey. Use the same font that is used on the main page. The fewer different options there are, the easier it is for the viewer’s brain to perceive information. To highlight, you can use bold or italics.
Successful Examples of CTA Buttons
Examples always help to understand the material better, so here is a list of the most successful CTA buttons:
- Evernote - Their CTA is pretty simple, however, it is supported by effective UX copy. The green color of the button contrasts the background and corresponds with the brand’s image.
- Netflix has an extremely powerful marketing and design teams. The red button immediately attracts your attention and you cannot help it but click “Join free for a month”.
- GreyGoose offers personalized content through the link and you cannot resist your curiosity.
Conclusion
When creating a CTA button, try to make it easily understandable for the user and have it stand out from the rest of the elements. Clearly describe your offer so that the visitor had no doubt whether to click the button or not. Match the words of the call to action with the overall context of the proposal. When creating a button, make sure that it is the right size - too small and clients may not notice; too large and clients perceive it as psychological pressure and tend not to press. By following these rules, you will help your client make a profit and motivate customers to perform target actions.
