Great, now that I have your attention, I can get right into the topic…
Anyone with a computer and basic knowledge will tell you that it is imperative for a call to action (CTA) to be attractive. They won't tell you, however, that there is good attractive and bad attractive. A beautiful girl in a bikini attracts a different type of attention than, let's say, Donald Trump in a bikini. Creating a CTA that is both beautiful and functional can seem like a lot, but we've simplified things for you.
What we’re going to do is divide our advice into two big headlines across two blog installments: internal factors and external factors. Today I’ll be discussing the in-button practices and without further ado, the first one is:
There are two kinds of copy you need to deal with: informative and action. Informative copy should be dictated by these five letters: W.I.I.F.M. What’s In It For Me? Why should I (as a visitor) click this CTA? What are the benefits I receive after clicking it? It’s important that your answer is quick, concise and straight to the point. Highlight the most important benefits (in no more than five or six words) and put them in the form of bullets. This copy should precede the action copy.
Action copy is actually the one or two words that call people to action. Download, Add to Cart, Subscribe, etc. Most of the time, viewers are hesitant to click on a CTA because they don’t know what might happen if they do. You need to reduce the tension by making the action copy intuitive. You want them to be able to quickly understand what will happen when they click the button. As such, consider using words they are already familiar with and recognize. If you want them to take a free trial, say “Free Trial” instead of “See For Yourself”. Moreover, you should be as subtle as possible by portraying a very small level of commitment. If you have the option, opt for “Add to Cart” instead of “Buy Now” because it implies less commitment. Always try to find softer alternatives to what you are trying to say. Your viewers will be a lot more comfortable and will be more likely to click away.
Unbounce have a great example with the below CTA. They want people to subscribe to the blog. So they highlighted the W.I.I.F.M. factor (receive free conversion advice right in your email inbox) and they had a very specific action copy (subscribe to the blog).
UncommonGoods on the other hand didn’t give me to incentive to click on their CTA. For one, I don’t understand in what way I will shape their future. Two, I don’t know if I want to be a part of the voting process. Does that mean I have to pick a side? Am I (as a first-time viewer) even a qualified voter? This CTA’s ambiguity creates a lot of anxiety for viewers which is something you need to avoid.
At a family gathering, you can probably go through the entire evening without noticing your baby cousin Tyler. But when 300-pound Aunt May walks in, you can be sure everyone will see her. Your CTA should be the largest button on a page and the more important it is, the bigger it should be.
But don’t neglect your branding. If you're going to shop at the Apple store but all the retailers are wearing the Microsoft colors, you'll feel confused and out of place. The Apple brand itself will lose a lot of impact. Let's apply the same thought process to your website. You want to have a coherent brand identity across your entire website so the viewer doesn't feel like any part of it is irrelevant or awkward. This applies specifically to CTAs, as they actually invite viewers to take a closer look at your products, services, or philosophy. You need to show them that you have a strong image that is present in whatever you do.
So how do we make it pop and respect our identity at the same time? Choose your colors like you choose your clothes. Make sure the contrasting color you are using goes with the colors on your website. A bright pink can look fantastic on a light gray but put it on a dark green and you’ve got yourself a big fail. If you’re not sure about color harmony, use complimentary colors. Put simply, complimentary colors are those that are placed opposite each other on a color wheel. The nice thing about them is that they have a natural harmony. Red-Green, Blue-Orange, and Yellow-Purple are the most popular but the more complicated your wheel is, the more pairs you can have.
Below is an example of how wordpress uses the Blue-Orange pairing to create an attractive element. The speech bubble pops without looking a fashion no-no.
Who remembers watching Dexter’s Laboratory? In the show, boy-genius Dexter’s sister has a catch-phrase (say it with me now): OOOOOOH! What does thiiiiiiiiis button doooo? Unfortunately for Dexter, the button always ended up destroying one of his inventions, but what can we learn from this? No one can resist pressing a nice, big, round button. We find that even now with our touch-screen technology, clickable items look like physical buttons. They pop out with a 3D effect and entice us to reach out and press them.
You can add two things to a CTA to make it more dynamic: images and motion cues. Images are a great way of showing what is being offered. For example, if you are offering an eBook, you can show an image of the cover. Images are visual candy. But pay close attention, when you want to use an image, make sure it does not have a background of its own, but is floating in the CTA background itself. If you are displaying an item, feature the item itself with absolutely no background around it. If it is a photo of a person, feature the person him/herself with absolutely no background around them. The image and the CTA background have to be a single unit as opposed to two separate layers. This creates a clean effect and reduces the distraction of having text over image.
Oborain’s eBook CTA is a great example of how to use images. It displays the cover of the eBook with some added elements that create a stylized book. Notice how the image is placed right onto the CTA background.
GenMove USA on the other hand, provided the ultimate example of what happens when images go wrong. Catastrophe indeed...
Motion cues are also a great way to make the CTA more dynamic. Downward arrow can imply “Download”, right-facing arrow can imply “Next”, etc. How can these go from action to distraction? By animating them. Animation will drive all the attention to the actual motion and distract from the actual message.
Mozilla have a neat motion cue for the Firefox download CTA. Also notice how their most important CTA (Firefox Free Download) is big and bright while their secondary CTA (Get Firefox for Android free!) is considerably smaller with a color that blends into the background. See kids? Size does matter.
Even though the entire CTA should look like a button, a smaller button needs to exist within it. Its purpose is simple: to inform viewers of exactly what will happen when they click on this CTA. It is usually comprised of two or three words stating "Download Brochure" or "Order Now" or "Free Trial", so on and so forth. (While on this topic, in terms of functionality, make sure that the action is carried out if the viewer clicks anywhere on the CTA, not just the small button. As I said before, the small button only serves to clarify. You should by no means limit functionality to it.)
There it is, our in-button installment. Keep your eyes peeled for next week’s article where we discuss extraneous factors that can have a huge effect on the, well, effectiveness of your CTA.