2013_02_CTA_featured Design

6 Key Factors To Consider When Designing A Call To Action Button

In the pre-Web days, the main point of a marketing message often got lost. A mailer would have a bold line at the bottom of a letter or include a postage-paid postcard that risked getting lost before a customer thought about filling in a request. Now we have a much easier, powerful tool – the call to action (CTA) button. These simple and straightforward buttons funnel visitors to where you want them to go, such as your shopping cart or your registration page.

The importance of the CTA button cannot be overlooked, and even small tweaks in design and wording can have a big impact. So before you design or re-design your buttons, consider the these 6 key factors:

1. The size of the button

Have you ever been to a website where the “Buy Now” or “Free Trial” CTA button was so small it was nearly invisible? It’s not an unusual problem for amateur sites to have. Sure, you don’t want your button to take over an entire page, drowning out other elements, but it should be one of the larger items.

2. The secondary buttons on a page

One thing to consider when looking at the size and placement of the CTA button is other buttons that will appear on the same page. For instance, you might create a landing page with both a “Learn More” button and a “Buy Now” button.

The key here is to make sure that the most important CTA button (in this case, “Buy Now”) is the most noticeable – usually in a larger size and placed above or to the left of secondary buttons (since we tend to scan web pages like book pages – left to right and top to bottom). You could also experiment with making the primary button a bolder, more noticeable color than the secondary button.

3. The positioning of the button

Where you place the button will depend on the overall setup of your page, but your goal, of course, is somewhere noticeable. A common place to find a CTA button is at the bottom of a page, especially if the page involves a lot of web copy intended to draw readers toward the buy or trial action.

But putting the button in the center of a page or even at the top of a page can also make sense. This is really all relative to the look of your site.

4. The use of white space

By giving putting significant white space between your CTA button and other elements on the page, you’ll make it stand out more, give it more visual weight, and, hopefully, drawing your site visitors to it.

5. The colors on your page

Color is a very important aspect of web design. Use too many colors, and your webpage will look like an amateurish mess. But you also need to use different colors to highlight important elements. And the CTA gives you an opportunity to pull this off.

Choose a color that contrasts with the background and the other elements on the page. Again, this is another way to draw the eye toward this important element. And then, make further use of contrasting colors by making the lettering on the call to action button contrast with the color of the button itself. Remember, there is not one best color for a CTA button, but you need to test different colors and find out which one works best for your site.

6. The language on your button

The actual language you use on your call to action button is important. The goal here is to be as simple and straightforward as possible. People want to know exactly what they’ll get by clicking on that button, so give it to them with very simple language. “Buy Now,” “Learn More,” Sign Up,” and “Add to Cart” are all common calls to action on a button.

But if you want to use a larger button, you can add in a little extra language – usually in a smaller font – to give more explanation. A button on a credit card website might say “Learn More – Credit Card Review Here.” Another common option is to include an item’s price on the “Buy Now” button, or mention the length of a free trial.

The key to creating an effective CTA button and finding its proper placement involves more than just thinking about its design. It’s about remembering the purpose — to guide your customers to where they want to go, and, ideally, where you really want them to go.

Source featured image

6 comments

  1. 24 saat veteriner

    The article is very useful for everyone. Thank you.

  2. Tema Frank

    Good tips. (It is kind of funny, though, that the Related Posts link says “Tests Prove It: The Single Best Call To Action Color Is… Green!”)

  3. Himanshu Vyas

    These are the basic guide line to design & place “CTA” button, Thanks for sharing

  4. Sabina Idler

    Hi,

    Thanks! Good to hear that you like the tips. Regarding the related link, the title is a little provocative. If you read the article this becomes clear why. :)

  5. 3D Modeling outsourcing

    Hi there just wanted to give you a brief heads up and let you know a
    few of the images aren’t loading properly. I’m not sure why but I think its a
    linking issue. I’ve tried it in two different browsers and both show the same results.

  6. Sabina Idler

    Thanks for letting us know! We’ll make sure to fix it asap!

Leave a Reply

Your email address will not be published. Required fields are marked *