Search Our Blog


Tuesday, February 4, 2014

Take Action! Tips for successful CTA Graphics

In a nutshell, a call-to-action solicits an action from the website viewer.  This could be anything from booking a flight to signing up for a newsletter. Here are some different types:

  • Book now
  • Download
  • Donate
  • Add to Cart
  • Free-Trial
  • Sign-up
  • Learn More
This feature can be crucial, it usually ties together the main theme of the website. If you are a hotel, booking a room would be the point of visiting. Luckily, there are some ways to put you ahead of the game.

Be Obvious
We want our call-to-action button to be obvious and stick out, however, we do not want it to look gaudy or amateur. Color and size need to be in harmony for this to happen. If you are dealing with a larger button, or an icon, the color would look best schemed with the website as a whole. If it is smaller, a more vibrant color could draw attentions to it. Let them Balance each other. 

Photo source: The Logo Company

You can also use color to prioritize. If you have two CTAs, one offering more information and one asking to donate, you may highlight the donation button in a brighter color. This also works well if you make the more important button a slightly larger. Read more about color, size and priority here.

Contrast can draw plenty of attention to your website's CTA. This can make it impossible not to see while still coming off as sleek and professional.  Typically, the button will be the only thing in focus and highlighted while the remaining background will be slightly faded or blurred. Read more about contrasting and other techniques here.

Space It Out
Position and white space are important factors to get the conversation on your CTA rolling. Let's go over some of the basics.

Position: Call-to-action buttons do great when they are placed above the fold. If you are not a graphic designer, or even if you are, you can figure out the fold on your website here. Most of you may not remember, but this refers back to something called a newspaper. The most important photos were placed above the fold.

White space: This is the empty space around the graphic. You do not want to overcrowd the CTA. Give it enough room to get the point across.

Read more about position and white space here.

Icons and Text
I know I just explained how crucial white space was, but sometimes you do need an image or some text to draw attention to your CTA.

Before we move on, keep your language as simple and to the point as possible. Most buttons have a few words instructing the viewer such as "click here", "book now", "download free", and etc. You can also convey your meaning with an icon. You can have a computer if it is a download, or a plane for booking a flight.

With that in mind, people are more likely to look at text before a button. You do not want to overcrowd the CTA, but including a few bullet points as an explanation may help out. HubSpot pulled up this great eye tracking study to explain it further.

The tips above can definitely put you on the right track, but nothing helps are much as an actual test in the market. Check out this tool to create an A/B text to see which design works best for you.

A call-to-action is critical. To lean more about generating a great CTA graphic, contact a Blue Archer Professional.

Barbara Cline
Digital Content Writer

No comments:

Post a Comment