4 Steps To Creating The Perfect CTA for Your Website

There’s a lot you can learn from a good video game — including some good advice about website design.

Some games, for example, are built to be “open world,” meaning your character is dropped in a massive map with freedom to go just about anywhere at your own pace. The alternative: more traditional “closed world” games, which take you through each level or setting sequentially, and you’re along for the ride as the game decides what happens next.

Sometimes, having the freedom to choose how you want to move forward can feel refreshingly liberating.

Other times, it can feel frustratingly unclear where you’re supposed to go, and what you should do next.

Here’s the thing: your website has the potential to elicit those exact same emotions depending on how you’ve laid things out. Leave things too “open” and your users may not know where they should go next. Make things too “closed” and you might just be taking away some of that freedom that encourages users to explore and dig deep into your content.

At the end of the day, driving valuable user actions on your website is all about giving users the freedom to explore… while, at the same time, always giving them a clear direction to where you want them to go next.

Give Your Users Choices… But Don’t Leave Them Guessing

If you’re looking for clear, actionable ways to make your CTAs perform better than ever before, we’ve got you covered. Take a look at these four simple steps, and make sure your audience understands what they need to do when your CTAs come calling.

The 4 Most Important Considerations for Building Your CTAs

Let’s break down each of these factors individually, so you can get a better understanding of how you should be thinking when planning your CTA strategy.

[If you’re looking for CTA inspiration, check out our collection of some of our favorite CTAs from around the web.]

1. Color

If you ask us, it’s not about finding the “perfect color” for your CTAs… It’s about finding the right colors for your CTAs. That means understanding your own brand and, importantly, how your users actually use your website.

  • When picking a CTA color, you want something distinctive — after all, this is really the main point on your website where you’re trying to draw attention, so choosing a color that doesn’t stand out or doesn’t make an impact clearly isn’t going to do the job. Conversely, you really don’t want a color so outlandish that it’s grotesque.
  • The right color choice for your CTA might actually be driven by your existing brand colors. Let your CTA contrast clearly with your site’s existing color scheme. Think about your brand colors, and choose complementary colors based on the color wheel.
  • Don’t fall in the trap of leaning too heavily on your preconceived notions of colors. “Red,” for instance, doesn’t always have to mean “bad” or “stop” — in some cases, a bright red button may actually be a good option for drawing attention. Likewise, in some cases, “green” might just be a little too comfortable to really drive action.
  • Can’t decide between two strong color choices? Try an A/B test! Let your users tell you which they prefer using cool, clear data, and adjust your site accordingly based on the results.

2. Language

  • Don’t forget, your CTA is just that: a “Call-To-Action”. Make the “action” part of that equation as clear and concise as possible, so each user knows exactly what’s going to happen when they click on that button.
  • Make sure your CTA language reflects three key traits: strong, confident, and comforting. A softer word like “Continue” or “Contact” might be straightforward, but it can also be a little less than exciting. Try starting with a verb, like “Download,” “Explore,” or “Shop Now.”
  • Don’t be afraid to keep things custom, especially if your brand voice is particularly strong. We like to play around with creative CTA language like “Let’s Get Coffee” or “Work With Us” for a contact CTA (to show a little bit of our attitude), or ultra-enticing language like “Reveal The Secrets” for an ebook download.

3. Placement

Placement on your web page plays a huge factor in determining the success of your CTAs, and a poorly placed CTA could cause you to lose valuable traffic and engagement, even from those users most likely to take that action. That’s why it pays to think hard about where and when your CTAs appear.

  • Do you place your CTAs front and center so they’re unmissable by your users? Or do you place your CTA below the fold, letting your intro and guiding content lead users down the page and straight to where you want them to go? In the end, it’s all about what’s most effective, so don’t be afraid to A/B test your CTA placement to figure out where makes the most sense for your users.
  • Follow the “F” pattern — a general outline for how a user’s eyes scan across the page: starting from the top left corner, most users scan to the top right first, then down along the left side of the page. Use this guideline (not a hard and fast rule) to help guide those eyeballs right to your most important CTA.
  • Always be aware of providing that “next step.” Putting a “Read More” CTA in the middle of a long piece of content, for example, can be a little confusing. Likewise, don’t just leave your users hanging if they spend a lot of time on your site; give them a clear “Contact Us” or “Get In Touch” so they know what to do next.

4. Destination

  • The destination of your CTA should match the intent of the user, and the language you’ve included. Don’t prompt a user to “Download Now” if they can’t expect to download something straight away.
  • Think about the landing page where you’re sending your users — it should clearly display the same branding as the page they just came from, or any change in colors or language should be made relatively clear before clicking so the user is not caught off-guard.
  • Remember: for most users clicking your CTA is not the end of the line. Consider the possibility that your user will be jumping back and forth between your website and your destination page, and think about unique CTAs like “Bookmark” or “Share” to help skip that middle step next time and bring them right back to the destination page.

Give Your Website Loud & Clear Calls To Action

To find it, however, you’ll probably need to do some experimentation. That’s where having a smart UX/UI strategy in place can be key: You’ll need to account for factors like mobile-based navigation and custom form submission that can affect your CTA. We take special consideration to help our partners identify these key considerations and adjust their CTAs to generate the best results across all devices, even for custom applications.

Don’t leave your website visitors hanging after you’ve hooked them with your amazing portfolio or great blog post. Give them somewhere to go — and make sure the CTA leading them there is so irresistible, they just can’t help but click.

Written by Conor Snell | Social Media & Content Strategist at Altos

We are a digital marketing agency specializing in web design and development, eCommerce, search, and social media marketing.