Getting someone’s attention is never easy. Most people have an attention span of under ten seconds, so something has to be really special in order to catch their eye and pique their interest.
The same thing goes for CTA buttons.
Call to Action buttons are visually small, yet seriously significant features of a website or landing page. They’re buttons designed to demand a specific action from the user, whether that be creating an account or subscribing to a service . This includes free trial sign-up buttons, download buttons and join now buttons. CTA buttons create simple prompts, and when done well, can be a critical element of marketing and sales. Not only do these buttons help guide users through web pages, they are extremely important for conversion flows. When a Call to Action button is impeccably written, designed and executed, it can boost clicks and increase conversion rates.
As a UI/UX Designer, I find CTA buttons wildly valuable and always aim to create ones that will be most effective for reaching my conversion goals. Here, I’ll be sharing my top ten tips for more compelling call to action buttons and hopefully shedding some light on the craft of CTA.
1. Be concise
Less is more when it comes to CTA button text. As a general rule, CTA buttons should have no more than 5 words, otherwise they become ineffective. The actual copy of your web or landing page is what’s there to convey a longer or more elaborate message. The purpose of of CTA buttons is to initiate the action related to this message, so there’s value in keeping things short and sweet. Users will not respond well to an essay or a long winded plea, but rather a few well chosen words.
2. Use actionable words
Although you’ll only be working with a couple words, language is a meaningful part of CTA design. Buttons should use bold and actionable wording, meaning it provokes a response from the user. A CTA should literally be calling on users to fulfill an action. I suggest implementing simple, confident language that will demand a reaction. For instance, ‘Get Started Now’ is much more effective than ‘Continue’ since it creates a sense of immediacy that inspires users to click.
3. Recognize the power of pronouns
Using certain pronouns will encourage initiative and helps hold users accountable. A CTA button with “Get my free trial” will be more personal and ultimately more persuasive than “Get a free trial”. Although simple, this wording trick can be what drives better conversion rates.
4. Choose contrasting colours
While there is no best colour for CTA buttons, it’s a good idea to choose a shade that contrasts against the background. If the background is green, then an orange CTA button would create the most impact. If the background is green and the CTA button is a different shade of green, it runs the risk of blending in and not being seen as important by users. With good contrast, the button stands out and demand the user’s attention.
5. Don’t overwhelm your audience
Less is always more when it comes to CTA buttons. It’s important not to have an overwhelming amount of buttons on one page, since it may lead to indecision. The paradox of choice is in effect here: people get anxious, lost and ultimately do not perform any action. Make the user’s life easier and your conversion rates higher by offering a limited number of options and a limited amount of buttons.
6. Implement directional cues
Our eyes follow directional cues, so it’s a smart idea to prompt users towards the CTA with the page layout. Think of it like holding the users hand and guiding them to where they need to go. Most eyes navigate a page following the F-pattern below, so consider placing the CTA button in an area most people will naturally look at.
Bonus advice: if there’s a situation where you’re using an image of people somewhere on the page, have their eyes looking in the direction of the CTA. This will, once again, guide users towards the button in a subliminal way.
7. Be mindful of spacing
Don’t be afraid to use negative space to your advantage. When you leave enough room for the CTA to stand out, the user will be pulled in. Filling all the real estate of the screen is unnecessary, and can lead to confusion. Blank space is ultimately a valuable element of design, and CTA buttons are no exception.
8. Create a visual hierarchy
Often times, two CTA buttons will indicate two different actions. That’s why it’s important to clarify your main CTA and create a visual hierarchy. Imagine two buttons: ‘Join Now’ and ‘Sign In’. If the primary goal is acquiring new customers, then ‘Join Now’ would be the main CTA and the ideal action. This button should be designed in a bolder way and placed on the right. Meanwhile, the ‘Sign In’ option should be a ghost button placed on the left. Implementing these two different styles and being mindful of placement is what leads users directly towards the ideal action, and what contributes to conversion goals in a major way.
9. Experiment with shape and treatment
Shape is a subtle, yet impactful way to bring attention to a CTA button. The big misstep is using sharp, square corners instead of rounded edges. Square corners don’t aid conversion since they look flat and may appear to be part of the normal page layout.
On the other hand, rounded or full curved corners lift the button away from the background and indicate that the item is clickable.
Another way to bring attention to the CTA button is by playing around with different styles and treatments. This could include adding a shadow, glow or gradient to make the button more eye-catching.The right treatment could be what gets users to respond to your CTA.
10. Acknowledge interaction
The journey of the CTA button doesn’t end when it gets a click. It’s important to acknowledge that the user has successfully performed an action. An effect that indicates a loading phase or a form of feedback gives the user some form of interaction, which is satisfying. This could be three dots replacing the text or a loading wheel activated within the button. Whatever it is, it’s very important to show the user some form of response
For more on design, check out our blog on the UX of Registration and Login here.
More blogs by Mark
