What’s the conversion rate on your website?
If you look at The Unbounce Conversion Benchmark Report for 2021, you’ll see that median CRs ranged from 2.4% to 9.8%. So, to keep up with the competition, you’ll have to aim for much higher conversion rates than the prescribed 2%. In fact, you’ll probably want to achieve a landing page conversion rate of a minimum of 5% to see returns and ensure the profitability of your business.
But how exactly can you do this? There may be many methods for boosting conversions on your website. However, it’s safe to say that designing a high-performing CTA button makes for a super-effective way to improve conversions on your site.
This article will give you tips on how to design a perfect CTA button. Let’s get started.
Before you even start bothering with what you want your CTA button to look like, there’s one essential thing you have to understand. The most important factor contributing to the effectiveness of a CTA is, without a doubt, its position on your landing page.
Research has proven time and again that there are patterns to the way consumers view web pages. One statistic you have to know when designing CTAs is that most web visitors spend 57% of their viewing time above the fold.
With this in mind, the best way to start designing a perfect CTA button that boosts conversions is to think about positioning. Ideally, your conversion-driving element should hold a prominent position in the hero section of your landing page, like in the example below on GetSafe’s Medical Alert Systems page.
Depending on the type of content your website contains, you may also have to repeat your CTAs in multiple positions.
If your pages have several sections, like for example the Moosend homepage, you can also create section-specific CTAs. These will effectively introduce web visitors to product features/benefits and slowly drive them through the sales funnel, ensuring they view the content that’s most likely to get them to convert.
Size, Color & Contrast
The second feature of any high-converting CTA button is its appearance.
As the element that draws user attention to high-value propositions, a CTA button needs to stand out visually from the rest of your website. This means that a CTA must:
- Be the correct size.
- Utilize the right color.
- Provide sufficient contrast with the background.
When designing CTA buttons, start by considering the size. Apple, for example, suggests that buttons must be at least 44×44 pixels, which ensures usability and accessibility, even on mobile devices.
Once you have settled on the dimensions that work for your brand, you can move on to color and contrast.
Essentially, the best way to determine the color for your CTAs is to utilize a color wheel tool. Adobe Color is an excellent free version with plenty of functionalities, including complementary color palettes, a background contrast checking feature, themes that are colorblind safe, which anyone can use to boost accessibility, and valuable educational resources.
As you make choices for your CTA button design regarding color, contrast, and size, don’t forget to keep things in line with your visual branding.
Opt for solutions that look good with your website design and the visual content you publish. Go with colors that give just the right amount of “pop.” That way, you’ll be able to attract consumer attention and help them convert into your customers. For a great example, take a look at how Ultimate Meal Plans does it on their homepage. The brand’s use of green and orange for CTAs is the perfect choice to go with the health-themed vibe of its homepage.
When designing a perfect CTA button, there’s one more design principle you have to follow. That’s surrounding the CTA with sufficient negative space.
In design, negative space refers to the area around any design element. The purpose of this area is to ensure that web visitors perceive the element as a whole of its own. Moreover, negative/white space also contributes to visibility, as design components with a blank area around them tend to be more efficient at drawing user attention. Finally, sufficient negative space supports visual hierarchy, helping designers and brands call attention to the highest-value element on a website, minimizing user distractions, and supporting higher conversion rates.
One visual direction that ensures ample negative space around high-value elements is minimalism. Brands like Mindjournal have had great success with minimal design. The visual direction allows them to communicate their unique value propositions and gives plenty of room for their CTAs to shine.
Nonetheless, minimal web design is not the right choice for every brand. Still, when creating CTA buttons, ensure that you include enough negative space around them. Check out how Aura does it on their homepage. In this example, the white space makes it easy for users to get a sense of the hierarchy of on-page elements, with the CTA button taking center stage.
Copy & Microcopy
While aesthetic appearance makes up the most impactful factor in creating a CTA button that works, it’s also essential not to disregard the role of copy and microcopy in ensuring high conversion rates.
The language you use in your CTA buttons won’t just invite visitors to consider your offer. More importantly, it will also urge them to take action, preferably turning them into customers.
When composing copy for CTAs, try to follow these rules:
1. Be concise. Most resources suggest using 4 words or less. However, it’s vital to understand that some messages deserve more space than that. Hubspot, for example, is a well-regarded brand that uses a 6-word CTA button, mainly since the additional space allows it to communicate everything it needs to attract customers.
2. Create a sense of urgency and encourage user action. The point of a CTA is to compel users to take action immediately. And the best way to do this is to write copy that creates a fear of missing out. Phrases like “Buy now,” “Get your free trial,” “Sign up today,” etc., all work perfectly well to present your offer as an opportunity instead of as a risk. Just check out the Dr. Barbara Sturm homepage, and you’ll see how well a creative CTA copy can work, as long as it encourages user action.
Use microcopy to build trust. Finally, as you look for ways to make your CTAs more effective at driving conversions, don’t forget that most consumers feel on the fence when making a purchasing decision. That’s why social proof is such a big thing in 2022 and why you need to take every opportunity available to build trust. Microcopy (or UX text) can help you do this by giving you a space to provide additional information about your offer. Check out how effectively Edgar uses microcopy to encourage conversions, doing nothing more than to state that its 7-day free trial is commitment-free.
Ensure High-Conversion Rates With CTA Buttons
As you can see, designing a perfect CTA button isn’t rocket science. All it takes is getting the aesthetics right, positioning the element in a highly-visible section (or sections) of your site, removing distractions, and using action-oriented language.
To ensure that you get the absolute best results from your CTA buttons, keep in mind that the design process won’t be a set-it-and-forget-it type of thing. Instead, you’ll have to continually monitor the CRs you get from your buttons and test several options until you arrive at a solution that works best for your brand.
This involved, analytics-based decision-making process will take longer than choosing a template you like and sticking with it. However, it will also ensure much better results than any ready-made solution out there. So don’t hesitate to do the extra work. You’ll see that, in the end, it will be more than worth your time.
About the author: Natasha is a lady of a keyboard and one hell of a geek. She has been working for, and collaborating with, individual clients and companies of all sizes for more than a decade. Natasha specializes in writing about design, branding, digital marketing, and business growth.