Designing call to action buttons

Walden Systems Geeks Corner Designing call to action buttons tutorial Rutherford NJ New Jersey NYC New York North Bergen County

If we want to get users to take a specific action, then designing persuasive call-to-action buttons is critical. Whether we’re using them on pricing pages, product pages, landing pages, or our blog, well-designed CTA buttons are going to help us get more people to do what we want them to do. Unfortunately, there's no universal template that works better than everything else. What works for one site might not work for ours. There are guiding principles we can follow to figure out what works best for our product, audience, and business model.

The most important aspect of our CTA button is the text or label. It has to compel people to click on it, and the best way to do this is by appealing to their self-interest. So make sure you clearly state exactly what your visitor will get if they click your CTA. Our CTA button label should be brief, and it should get right to the point. Keep the label to no more than 5 words. CTA buttons should begin with an action verb like "Get" or "Download."


Instead of giving orders to the user, substitute words like "submit"or "sign up" with words like "get" or "try." Give them a good reason to take the action you want them to take. If you're having a hard time figuring out what the button label should say, try this thought experiment. If you asked your user what they are trying to do, what would she say? If you think they would say, "I want to compare the price," then your CTA button should be "Compare the price."

Change the CTA button label from the second person, such a Get your free template, to the first person like Get my free template. Studies showed that changing labels to the first person resulted in a 90% increase in click through. Why does the first person work so well? Because it presents the action from the point of view of the user. If you plan on using the second person, try testing it against the first person to see which one works better for your target users.

People tend to want what they can't have. We place a higher value on things that will soon be unavailable to us, and a lower value on what's available in abundance. It's basic supply and demand, as availability decreases, demand increases. The less there is of something, the more valuable it becomes. And we can see some great results by implementing this principle into our CTAs. Udemy does a great job of this in their email marketing by offering discounted courses for a limited time. We may not be able to use this scarcity tactic all the time, but we can create a subtle sense of urgency just by adding the word "now" to our CTAs.

Even if we've crafted a compelling CTA label, it won’t matter if nobody sees our button. That's why we need to make sure our button is impossible to miss. It should be large enough to see from a distance, but not so large that it looks obnoxious on the page. If you're not sure if your button's large enough, put it through this test: Pull it up on your computer, then walk about 10 feet away. You should be able to easily see button from there. If you can't, you need to make it bigger.

Designers and marketers always seem to be looking for the highest contrasting color, but there's no universal color that's best for contrasts. People are more likely to notice and remember, something that stands out from everything else around it. The CTA button color that really grabs people's attention is the one that contrasts from the color scheme of the rest of the page while still fitting in with the overall color palette.

People are less likely to take action when they're presented with more choices. Psychologists call this choice overload. The process of understanding all the information, evaluating the options, and comparing them against each other takes so much mental effort that it's easier to just choose nothing and move on to something else. The worst thing we can do is make our CTAs compete against each other for attention. The way we arrive at the solution will be different depending on the kind of page we're designing for. For a landing page, the mantra should be one page, one purpose. Focus on getting the user to take one specific action. Sometimes we'll have to include more than one CTA button on a webpage. For example, our homepage might have one button for signing up, and another button for signing in. If we need to offer the user multiple things they can do, we should still guide them to the thing they should do, the most important task on the page. Persuasive CTA buttons are prioritized. Use visual hierarchy to give weight to the most important conversion pathway. Our main CTA should always be the most visually striking while the others should be less attention grabbing.