When designed well, these buttons not only allow the user to effectively navigate through your product but are critical in conversion flows.

Getting someone’s attention is never easy, especially in this day and age where users are bombarded with all kinds of things — resulting in the overall attention span to decrease to around 8.25 seconds. This is also the reason why most of the top startups have transitioned to a minimalistic user interface style — in order to reduce the number of distracting elements.

By only focusing on certain key elements, it would increase their significance and efficiency resulting in better conversion rates. One of those key element is the “CTA button” which is essential for most websites and products. They are designed to allow the user to take specific actions; creating an account, adding to cart, purchasing a product, and many more. When designed well, these buttons not only allow the user to effectively navigate through your product but are critical in conversion flows.

The purpose of this post is to highlight some of the key guidelines which I follow when it comes to designing better CTA buttons, along with examples from various websites to help you get a better idea of how to incorporate these characteristics.

This was one of the key principals highlighted by Allison Rung, UX Writer in Google. Less is more, but concise doesn’t only mean short. It’s a balance between the number of words used and the message that those words bring across. A message is concise when every single word has a purpose.

The UX copy of a landing page is different from that used in the CTA button. One is used to convey a longer, more elaborate message of what your product does and its benefits to the user. The other is to initiate the action related to the button in as little words as possible.

Although you will only be working with 2 to 4 words, language is the core of your CTA design. The words you choose will affect how your user perceives the intended action of the button. Using the wrong words may communicate something different, resulting in a reluctance to move forward or a negative experience of unintended results.

I like how Airbnb used the word “Reserve” in their listing page instead of “Book” as this communicates their policy of only charging the user 24 hours after check-in as it doesn’t have any association with payment.

As mentioned previously, buttons can be used to guide the user through the conversion flow, but too much directional signages might cause confusion instead of clarity. It’s important to limit your usage of buttons within a single user interface to avoid cognitive overload — the fewer choices a user has, the easier a decision can be made.

That’s also why popular fast-food chains have a limited choice of selections within their menu. By offering a limited number of option/buttons, you are making the user’s life easier which would ultimately increase your conversion rates.

You can easily browse through all new products on the market and find that most of their landing pages only consist of one main call-to-action; either to ask the user to sign up, subscribe now, or some other conversion action. As a UX designer, you have to communicate with all stakeholders to understand the main objective of the business before deciding the button copy and action.

The color you use for your buttons depend on various factors; the background, your brand color, or even the nature of the intended action. While there’s no right color to use, it’s important to select one which contrasts against its background. If the background is blue, then it’s best to use either yellow or red to create an impact.

With good contrast, the button stands out amongst the other elements and demands the user’s attention.

I mentioned above that contrasting colors are effective in catching the user’s attention, but utilize smart placements can further increase those chances. There are two types of smart placements; one is by understanding the user’s mental model and the second the user’s journey.

Mental models are formed through the frequent use of a system and the understanding of how it works. If I asked you to point at where the signup button is located at, without looking at the screen, where would you point at? I could probably read your mind and guess that you thought of the top left-hand corner. By understanding how your users are used to certain systems, you could place your CTAs at the right places.

For the latter, by understanding your user’s journey, you can predict their eye motion and prompt them towards the CTA with the page layout. For example, for most landing pages, the banner will have a header, sub-header, and lastly the CTA button — the user will have a higher chance of clicking the CTA after reading the information.

Most of the times, CTA buttons come in a pair; “log in & sign up”, “confirm & cancel”, etc. That’s why it’s important to clarify your primary CTA and create a visual hierarchy to make it the focus. This can be done by designing the primary button in a bolder way (using a contrasting color) and placing it on the right. While the secondary action could be represented using a ghost button or just a simple text link.

Implementing a clear visual hierarchy will guide them towards their ideal action which contributes to conversion goals in a major way.

While the above tips would definitely serve to improve your button design, the only way to perfect your CTA button is through multiple A/B testings to find out what works best for your users; the copy, colors, size, placement, shape, and style would differ based on your interface design and user persona.

To design the perfect call-to-action button, designers need to focus on its primary objectives and evaluate its effectiveness via many rounds of A/B testing. A button with the appropriate size, color, copy, and placement would effectively draw the user’s attention and encourage them to take the desired action.