DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

6 Factors Everyone Should Know About Designing Call To Action Buttons

by Stephanie Hamilton

This is where the rubber meets the road.

How well do your call-to-action buttons convert website traffic into something that benefits your business?

Web and UX designers know the importance effective call-to-action buttons, but the following six factors should be understood by anyone involved in generating business from your website.

What Are Call-to-Action Buttons?

Call-to-action buttons solicit action from a website visitor.

Commonly a clicking action that may link to a download, signup, or sale. They may also lead to a web page with additional information (e.g. “Learn more…”) that asks the user to take action.

6 Factors of Call-To-Action Button Design

1. Size

Ideally, your call-to-action button should strike a healthy mix between overcrowding the page and fading into the background. It should be the largest button on the page because the larger the element on the page, the more we understand its importance.

Download NCover
The call-to-actions on the website NCover are given prominence through increased size. They also supply ample room to house critical information, such as a ’21-day Free Trial.’ A contrasting color also helps differentiate the download button from the background.

2. Positioning

Social Shopping

Users are greeted with a centrally-located call-to-action button on the landing page of Store Envy. The round button stands out with its thick white border and encourages both shoppers and sellers to join after reading the accompanying text.War Child
A ‘Donate’ button serves as the call-to-action for War Child. Placed as secondary to the heading, it elicits action and is placed strategically above the fold, encouraging users to come back after they checked out the rest of the site.

3. Color

Analog app

The call-to-action for this app clearly differentiates itself from the background through a highly saturated button. Would you miss it?hiring hassle
The Resumator uses complimentary colors on the navigation to emphasize the “Sign-Up” call-to-action button placed there. The same familiar red color is used on the call-to-action to “Start the Tour.”  Notice how the complimentary color pops the button from the background.

4. Whitespace

Whitespace is also an important element in giving your call-to-action the attention it deserves. This tactic is effective if your button color is subdued and/or small.   This tactic instantly commands attention because adjacent elements are spaced further apart.mint themes
While subdued and not shouting for our attention, the call-to-action buttons on the website for Mint Themes still inspire action and draw our attention through the use of whitespace both above and below the call-to-action buttons.
Blaz
The clean, minimal website for Blaz Robar enables the call-to-action plenty of breathing room.  This button doesn’t have to work extra hard to compete for out attention.

5. Language

Language plays a huge effect on conversion.

Strive for simple, clear language that inspires users to take action. Do you feel more compelled by a button that reads “Buy Now” or “Add to Cart.” Also, if the user has to question what the wording means it can mean less conversions.  intrahost
The language on the call-to-action for Intrahost is simple and direct, letting the user get straight to work.commendable
Commendable Kids calls you to “Get Started Now” and informs you the account is free. This information is useful and prevents the user from having to dig deeper into the website to find this out.

6. Benefit

We tend to respond quickly when we feel like we can miss out on an opportunity. Incorporate bold, commanding words into your buttons that communicate the benefit. fileshare hq
The call-to-action button for FileShare HQ lets you know of the perk of becoming a member – the ability to send files instantly within minutes.

unlimited access
By letting the user know the deal they are getting, the call-to-action for Apps Templates creates an incentive to join the club now to take advantage of it.

Call to Action buttons play an important role in your businesses conversions. While every website’s goals are unique, designing your call-to-actions to elicit action through a mix of the above techniques will have a positive impact on your website conversions.

What are your thoughts?  What other factors do you consider when designing call-to-action buttons?

9 Comments

DON’T MISS OUT

Get updates on new articles, webinars and other opportunities:

Stephanie Hamilton

Stephanie Hamilton runs a small branding and web design studio where she helps clients market their company online. Visit By Stephanie and let’s collaborate to tell your brand’s story. Visit the blog for more helpful design and business resources.

9 COMMENTS

Comment Policy

Please join the conversation! We like long and thoughtful communication.
Abrupt comments and gibberish will not be approved. Please, only use your real name, not your business name or keywords. We rarely allow links in your comment.
Finally, please use your favorite personal social media profile for the website field.

SPEAK YOUR MIND

Your email address will not be published.

  1. Anonymous says:
    July 4, 2016 at 3:18 pm

    If you would like to take a good deal from this post then you have to apply these
    methods to your own web site.

  2. Sarmista Aun says:
    March 15, 2013 at 7:29 am

    Hi Stephanie,
    Thanks for sharing this useful post. While inserting CTA it is really important to consider the 6 factors which you have listed above. CTA plays a vital role by insisting the visitors to take desired actions.

  3. Cairn Emmerson says:
    May 3, 2012 at 8:51 am

    Nice to see our website listed (www.intrahost.co.uk). Many thanks.

    • Russ Henneberry says:
      May 3, 2012 at 10:16 am

      Thanks for stopping by Cairn!

  4. Philip Tomlinson says:
    April 17, 2012 at 10:38 am

    I really love that one of the common themes in this post. Many of the call the action buttons chosen have an arrow guiding the user’s click. We’ve done a very similar thing with the beta version of Jobbook.com, but we noticed that we have been getting more new members using a clear sign-in form directly on our front-page.

    In other words, everything you wrote is good. I just don’t recommend arrows!

  5. Bambi Corro III says:
    January 16, 2012 at 10:06 pm

    thanks for these tips as i am currently designing a landing page!

  6. Aman Anderson says:
    January 5, 2012 at 6:21 pm

    This is great!

  7. Tim Watson says:
    December 12, 2011 at 11:50 am

    Great run down on the key button factors.

    I looked recently at common practice for top eTailers to get email subscribers and there is plenty of opportunity to improve sign up forms, here is the analysis of call to action text and suggestions of improvements.

    • Stephanie Hamilton says:
      January 17, 2012 at 10:41 am

      Thanks! Glad this information is useful for you!

Want to make your site better?

Find out by seeing how users click and scroll through your website:

Show Me My Heatmap

literally addicted to the stuff I’m seeing in @CrazyEgg. Such a fantastic piece of software! #Marketing #Content #Digital

Chris Vella-Bone

@chrisv2432