Um, no thanks, I’m not really a submissive person.
Wait…I have to read more than what I’ve already read? I don’t need this product that bad.
…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.
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 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
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.
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:
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 effectively establishes urgency for this “online exclusive” offer by incorporating red elements, like the “Get the iPhone 4s” CTA.
Shades of orange can reflect excitement and enthusiasm. Orange represents a friendly, confident brand, although orange can sometimes signify aggression.
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 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 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.
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.
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 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 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.
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.
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:
- Contrasts with your site
- Corresponds with how you want people to feel about your brand
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:
- Humans are programmed to avoid sharp edges in nature because they represent a possible threat.
- 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.
- 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).
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.
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.
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.
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.
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.
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:
- Users who already want what you’re offering when they arrive on your site
- Users who are uncertain, but easily convinced of your offer’s value
- 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.
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.
- 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.
Subscribe to SEJ
Get our daily newsletter from SEJ's Founder Loren Baker about the latest news in the industry!