Payless CTA
WebMaster Resources

How to Optimize Your Call to Action so Users Can Commit to Action

“Submit!”

Um, no thanks, I’m not really a submissive person.

“Read more!”

Wait…I have to read more than what I’ve already read? I don’t need this product that bad.

“Buy now!”

…You need me to buy RIGHT NOW? I’m a little nervous about that. Maybe I should reconsider.

CTAs are big opportunities in tiny, little button format. They are the gatekeepers that allow your users to access those magical parts of your website where the conversions happen. But they’re sensitive little things—if you miss the mark with appearance, language or positioning, you’re essentially waving those conversions goodbye.

Since CTAs are so important , you have to treat them as more than just a simple button. You should consider how your buttons should look, what they should say, and where they should be placed so that they’ll appeal to as many users as possible.

Appearance

In order for your visitors to convert, they’ll have to interact with at least one CTA on your site. And in order for visitors to interact with a CTA, it has to be visually noticeable. That’s why appearance-based considerations like color, shape and size are really important when designing your call to action buttons:

Color

Color is probably your biggest opportunity to make your CTA stand out.

There are two approaches you can take to choosing a color – the complementary color approach, or the color psychology approach

Complementary Colors

Color Wheel 380x380 How to Optimize Your Call to Action so Users Can Commit to Action

Photo Credit:  Wikimedia Commons

Using Complementary colors (colors that are directly across from each other on the color wheel) is a great way to make sure your CTA stands out, but still fits in with your website. Complementary colors contrast enough to stand apart from each other, but they still work well as a pair.

Choose a complementary color that contrasts from the rest of the page for your CTA. That way, it pops out from the rest of the elements and is the first thing your users will see.

Let’s say, for instance, that your site is designed in shades of blue. If you look directly across the color wheel from the two blue shades, you’ll see two orange shades. Orange is blue’s complementary color; therefore, warm orange is the best color to contrast (but not conflict) with your cool blue layout.

Obviously, there are more shades than the 12 shown in this color wheel. If you’re looking to match a specific color hue, check out ColorSchemeDesigner.com, which shows you color combinations that work well together. Just choose the main color of your website, and this software will find your perfect match.

Color Psychology

Or, if you’d rather appeal to the mind over the eyes, consider incorporating color psychology (Full disclosure: link goes to infographic on my site).

Research has found different colors can create different emotional responses in viewers. You can use colors that create the positive emotional responses you want associated with your brand. By enabling these experiences, you’re increasing the chances that visitors will positively perceive your brand and convert.

If your company has a logo/brand color palette, chances are your colors were already strategically chosen to portray certain brand characteristics. You can never go wrong using one of your brand’s colors for your CTAs, as long as it effectively stands out on the page.

If your brand doesn’t have a logo or color scheme yet, don’t worry. You can use your website and your CTAs as a chance to start that color association with your customers.

First, take some time to identify the ideal experience you’d like your customers to have with your brand. How do you want people to feel when they’re on your site? What words do you want them to use when describing your brand? How would you describe the benefits that your company can offer its customers?

Maybe you’re a bank or law firm, looking to provide security. Or maybe you sell a line of organic food products, designed to provide a healthy snack while still sustaining the environment. Whatever your brand’s selling point, there’s a color to convey it:

Red

The color red is capable of evoking strong emotions in its viewers, and is most known for its passion and intensity. It’s also been found that red increases heart rate and stimulates appetite. The energy of red is often used to create urgency, often seen in clearance sales, and is very effective for impulsive shoppers.

Verizon CTA 1024x681 How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from Verizonwireless.com

Verizon effectively establishes urgency for this “online exclusive” offer by incorporating red elements, like the “Get the iPhone 4s” CTA.

Orange

Shades of orange can reflect excitement and enthusiasm. Orange represents a friendly, confident brand, although orange can sometimes signify aggression.

Payless CTA How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from http://www.payless.com/womens-shoes/

Payless Shoe Source incorporates orange in a fun way as a highlight feature for its CTAs, where users can scroll over a white CTA and see it turn orange before they click on it. The orange is bold and exciting, and works well to get viewers excited for new shoes.

Yellow

Yellow is the happy color. Yellow is known to increase cheerfulness and optimism, and it stimulates our mental and nervous system processes. Yellow encourages communication and is often used to grab attention.

*Note – One drawback to yellow is that if you use it too much, you can cause fatigue and strain on the eyes (especially if you use a brighter shade).

Sprint CTA How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from sprint.com

Sprint does a great job of using yellow elements and CTAs on its homepage, without going overboard on the eyes. The communicative characteristic of yellow works well with a mobile company like Sprint, and the yellow CTAs definitely work for grabbing attention.

Green

Health, serenity, and growth are all represented by the color green because of its prevalence in nature. It is effective for causing relaxation and is related to fertility and healing.

Annies CTA How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from annies.com

Family-owned organic food brand Annie’s features green CTAs on its homepage, which are a natural choice (no pun intended) for representing the brand’s dedication to health and nature.

Blue

Blue conveys a sense of trust and security in a brand. Commonly associated with water, blue represents calmness and peace. It increases productivity, decreases appetite, and is related to truth and self-expression. Blue is the color most preferred by men.

Bank of America CTA How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from http://www.bankofamerica.com/

Bank of America uses cool blue CTAs to establish feelings of trust and stability within customers – all essential feelings for customers to experience with an important organization like their bank.

Purple

Shades of purple are said to soothing and calming. Purple is related to spiritual experiences, and is used to represent a creative, imaginative, or wise brand.

Welchs CTA How to Optimize Your Call to Action so Users Can Commit to Action

Screenshot Taken 6/12/2014 from welchs.com

Similarly to Payless, Welch’s uses purple as a way to emphasize CTAs when users scroll over them. This technique really lends itself to the brand’s color scheme.

In summary, the ideal color for your CTA is one that uses both approaches, so it:

  1. Contrasts with your site
  2. Corresponds with how you want people to feel about your brand

Shape

A CTA button is just a digital version of a real-life button, such as a doorbell. We all know that a doorbell is actionable (we can press it) and that it has a certain result. This action-and-reaction understanding needs to be transferred into your CTA design.

Convention says that rounded rectangles are the best shapes for CTAs. This is for the following three reasons:

  1. Humans are programmed to avoid sharp edges in nature because they represent a possible threat.
  2. Rounded corners point inward and draw attention to the inside content of the CTA. A straight edge, on the other hand, will point outward and direct attention away from the button.
  3. Rounded shapes (ellipses) take less cognitive effort to see than sharp edged-shapes of the same size (since a rounded shape takes one visual motion to process, whereas sharp edges take four).
Shape Images How to Optimize Your Call to Action so Users Can Commit to Action

Image created for SEJ

Based on these three concepts, you’d think that circles would also be great shapes for CTAs, and you’d be right. Circles are even easier for us to see than rounded rectangles.

However, circular elements aren’t nearly as common as rectangular ones on the web. This is because rectangular shaped buttons were introduced to the Internet with the development of the Macintosh in 1981, and people have gotten used to their functionality by now.

If you’re feeling brave, research supports A/B experimenting with circular CTAs. If you want to stick with tradition, use rounded rectangles instead.

Size

Another important aspect of your CTA’s appearance is its size. A CTA that is too small won’t stand out to users, which could negatively impact your conversion rate. On the other hand, a CTA that is too big will distract visitors from the information they’re seeking, which may discourage them from continuing to use your site. Also, if you make your CTA too large, your visitors may not understand that it is clickable.

But size is a relative concept. What matters here is not necessarily the size of the button, per say, but rather the size of the button in relation to the size of its surrounding elements.

The bad news here is that a perfect button dimension doesn’t exist. The good news is that you can do some experimenting and try to strike a balance.

Decide how vital certain actions are and size your CTAs accordingly, with more important actions being represented by larger CTAs and less important actions being represented by smaller ones. Then, test away to decide what sizes work best for your particular customers.

Also, keep in mind that size can also affect how your colors work. It’s considered best practice for larger buttons to have a less prominent color, while smaller buttons should be brighter.

Language

By considering appearance, you can ensure that people can easily find your CTA. But that doesn’t matter in the slightest if people don’t know what your CTA does.

What phrases or statements do you need to use to encourage your users to take action? What terms should you include to ensure that your CTAs are clear? What language or tone is best to get your message across?

By strategically crafting your CTA language with these questions in mind, you can identify the purpose of your CTA and motivate users to click it.

Language Don’ts

But first, before I tell you what you should say, let’s go over what you shouldn’t.

First and foremost, forget those cliché CTA phrases that have overtaken the Internet. Nobody wants to “submit”. People don’t want to “read more” than they have to. And people are scared if they don’t know what comes “next”.

Also, don’t rush purchase commitment with “now” phrases (“buy now,” “pay now,” etc.). This type of wording seems too final, and might scare people off who put a product in their cart, but are still deciding whether to go through with the purchase.

A qualitative user testing study of a digital wallet confirmed this hesitancy to commit. When participants were asked to “register” for a digital wallet, many were reluctant to do so; however, when asked to “create an account” or “sign up” for the same exact wallet, participants were more likely to do so, with “sign up” achieving the highest conversion.

Why the difference? All three CTAs were exactly identical in design, placement, and function. The only difference was in the wording.

Further questioning of the participants showed that the main reason for the participants’ reluctance to “register” is that “registration felt like a big emotional or financial commitment” and they weren’t comfortable doing so when paying for services online. Participants also expressed feeling that a large amount of time and effort would be required to “register.”

On the other hand, “sign up” and “create an account” seemed to be phrases that were quicker and easier to deal with. Participants stated that they would gladly complete these types of functions if they enabled them to complete their online payment.

One last thing – don’t try to use elegant wording. If users don’t understand the words on the button, they’ll assume they won’t understand whatever content the button leads to.  Instead, just use simple, direct terms that people can comprehend.

Language Dos

Now that you know what not to do, here are some tips for writing concise, conversion-driving content for your CTAs.

In general, best practice for CTAs is to use language that:

  • Calls the CTA what it does
  • Establishes urgency (but doesn’t rush commitment)
  • Identifies an action you want users to take

Does your CTA take users to a page where they can sign up for a newsletter? Call it, “Get our newsletter”. Will it take users to a page for contacting you? Name it, “Get in contact with us”. It seems too common sense to be true, but you can’t go wrong with starting with a clear verb that identifies exactly what the button does.

Want to increase conversions even more? Instead of identifying just what the button does (i.e. – “Learn more about our sleeping medication”), identify what benefits the user will enjoy by clicking on the CTA (i.e. – “Get a better night’s sleep”).  Do your customers use your product to lose weight? Make your button say, “Get slimmer today”. Do you offer a free software trial for download? Call your button, “Try increasing your productivity for free”.

This is a good strategy for appealing to customers, but it’s also important for retaining trust. If you don’t call your CTA what it does, people may feel misled and lose faith in you.

Position

Now that we’ve designed our CTA and crafted our language, we need to decide where to put it.

General rules are that your CTA should be prominently placed (so not in your footer) and surrounded by white space (so it’s more visible and less cluttered).

But what about the fold? These general best practices seem to suggest that a prominent, visible CTA would naturally belong above the fold.

But unfortunately, the issue of the fold isn’t so cut and dry. It turns out that location is important, but it doesn’t matter nearly as much as motivation.

When I say that, I mean that location doesn’t matter as much as how desirable a user will find your offer at the moment you ask them to click.

Research has found no significant difference between CTAs above and below the fold. In fact, some research has shown that CTAs below the fold perform better than ones above it.

While it is true that 80% of people won’t scroll below the fold, the 20% that do are the ones who are motivated to interact with your brand.

In other words, the people who are likely to click on your CTA are also likely to scroll down your page, making the fold irrelevant.

Instead of worrying about placing your button above or below the fold, you should be focused on placing it below the right amount of quality content. That way, you can make your case as to why they should click before you ask them to make the commitment.

So now the question is how much content is the right amount? But that isn’t that hard to answer, since there are really only three types of prospects:

  1. Users who already want what you’re offering when they arrive on your site
  2. Users who are uncertain, but easily convinced of your offer’s value
  3. Users who are uncertain, and need to be convinced of your offer’s value

Users who already want your offer don’t need any content at all – they came here specifically to find and use your CTA. Therefore, make sure you have it somewhere immediate and prominent near the top of the page so these users can keep that momentum going.

For users who are uncertain, but easily convinced, you’ll just need a small amount of strong, but clear copy to convince them your CTA is worth their time. Since you won’t need a lot of copy for these prospects, their CTA will be fairly high on the page – most likely above the fold.

For those hesitant users who need more of a push, you should have a good amount of clear, well-written, persuasive copy that will retain interest from the headline all the way down to the button. The amount of copy you need will depend on how much the user already knows, how complicated your offer is, how much your offer costs, and so on. Since these users need a bit more time to make the commitment, their CTA will likely be below the fold.

The trick here is to identify which type of user makes up the majority of your traffic, and use the content/CTA combination that works best for them.  Or, you could go out on a limb and experiment with having three CTAs on the page so you can entice everyone.

Conclusion

When it comes down to it, CTAs can make or break your conversion rate. By using these CTA best practices, you can ensure people can see your CTA, understand what it does, and follow through with the action.

Remember that:

  • The right contrasting color scheme can make your CTA stand out and create a positive emotional response to your brand.
  • Making your CTA the right size compared to other elements will ensure that it is seen and clicked on.
  • Positioning your CTA below quality content will help convince your viewers to take action.
  • Clear, actionable wording will encourage people to interact now.

Don’t forget - your CTAs are your gatekeepers to conversion. You just have to make the gate look really, really awesome.

 How to Optimize Your Call to Action so Users Can Commit to Action

Shane Jones

Director of Earned Media at WebpageFX
Shane Jones is the Director of Earned Media at WebpageFX, a Pennsylvania marketing agency. Additionally, Shane is a Reporter at Econsultancy US, where he covers Conversion Marketing and UX Design. Shane loves making friends and wants you to connect with him on Twitter, Google+ or if you reach out via his blog.
 How to Optimize Your Call to Action so Users Can Commit to Action

You Might Also Like

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

13 thoughts on “How to Optimize Your Call to Action so Users Can Commit to Action

  1. Excellent post! Imagine Designs, a web design company in UK, has developed my website and I see they have taken care of most of the points mentioned in this post.

  2. Great article Shane! This is an impressive guide on optimizing call to action buttons /areas of a website. I especially appreicate your tips on choosing the language for CTA. You have also made some good points when it comes to choosing the right colors and combining the complementary colors. Thanks for sharing!

  3. This post gives a nice overview. However, it is a bit simplistic. There is no ‘ideal’ solution for the perfect CTA buttons. So, let’s pick-up the advice and continue experimenting.

    Btw, “strange” to see CTA buttons with sharp edges only on this website and there is a ‘submit’ button on the homepage of the SEJ :-)

    1. thanks for noticing our new design Toon. Yes, it’s a little different than what the author recommends, but it is working great for us so far. :) Thanks for reading!

  4. Forget the color meanings. If you are Vodafone, your site is red. So you need a color that contrasts with it. Choose a color that stands out.

    Make a print screen of your webpage and throw it in to photoshop. Now use the Guassian Blur effect and then have a look. What grabs your attention? If it is your CTA button, you’re on the good path.

    Now, do a split test : A/B. Test one color over another and let it run for a month or so. Also test with the copy inside the CTA.

  5. Shane, this is an excellent, comprehensive and clear explanation of Call To Action uses. The discussions of color, size and placement have made me look at my website again. It’s time for some redesigning! Thanks for the great information.

  6. First, excellent post! Well, it’s evident that optimizing your site in such a way that appeals to your visitors play a major role in having them taking action with regard to buying something. However, I think that making sure you get the right visitors coming to your site in other word people who are open to buying is far more important.

  7. Never thought that rounded corner can have impacts on CTA. Unfortunately we are using sharp edges on our website and also we are not starting our CTA buttons with a ‘verb’.
    There are lots of things to be noted from this informative article for future references.
    Thanks Shane for posting these tips.

  8. Quite an insightful article, especially about the language to use. Being SEOs, we only end up providing very generic recommendations to our clients wrt usability. These pointers would definitely help us look into more details.

  9. Nice article. I liked the color chart that you have shown. Also the flow of article is good, its like I am reading the article and whatever questions are coming to my mind you are answering them in the next para as if you are reading my brain :)