Payless CTA

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

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 CTAs

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 Shoes CTAs

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.

Shane Jones

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.
Shane Jones

Comments are closed.

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. Hi Jones!
    Thanks for the nice Article. It was very useful for me. Keep Such sharing ideas in the Future. Thank you for your good information.

  8. 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.

  9. 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.

  10. 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 :)