What Makes People Click and Convert [Infographic]

Ever notice those giant SUBSCRIBE buttons? Those, among many other buttons, are calls-to-action. Also known as CTAs, these buttons lead each person to make a decision. That decision could be to subscribe to a newsletter, purchase something, download something, watch something–anything, really.

So naturally, you want to make your CTA as appealing as possible, to get every person who sees it to click on it.

Uberflip released an infographic detailing what steps you can take to make your CTA the belle of the ball, so to speak. Here are some of Uberflip’s tips, along with our own examples, to make your call-to-action stand out:

Color & Contrast

When you’re designing your call-to-action button, be sure to make the color effective. Use a bold color to make your button stand out on the page. You want each pair of eyes to be hooked to your button, you want people to see your button before they see anything else.

Also, if possible, make your color unique, but also fitting for the page’s color palette.

Take for example, HubSpot’s homepage. Notice every call-to-action is in the form of a big blue button. There is very little blue elsewhere on the page. In fact, the page is mostly orange, blue’s complementary color. That shade of blue is a very sensible color for HubSpot’s CTAs.

White Space

The best example of this concept is Dropbox’s homepage. The first thing you’re greeted with is a minimalist image, a logo, and a call-to-action.

The rest is white space.

Web design n00bs are sometimes scared of white space. Why leave empty space, especially when it could be taken up by valuable information?

Well, white space is extremely important in web design. For CTAs, it can highlight the button and make it stand out. The first thing you see on Dropbox’s page is the Sign Up button. Mission achieved.

Be sure to use white space strategically on your website to organize your site and make your calls-to-action stand out.

Contextual Placement

This is pretty simple, but a lot of people mess this up.

Basically, you want to put your CTA button in a place where people will see it. Usually right after or alongside other text on your website.

If you go to our main Articles page, you can see an example of this. You can see under each blog excerpt, you have a call-to-action to continue reading. It stands out, matches our color scheme, and comes naturally after the excerpt. The reader will for sure see this after reading the excerpt.

When you’re planning your webpage, think in a similar way. Place your CTA right where you expect someone’s eyes to go. Make sure people notice it.

Visual Hierarchy

When you place your calls-to-action in your page, you have to differentiate them among your other links and text. Make it larger and bolder than your “read more” and “more info” buttons. Give it priority. Getting people to click on this button is your primary goal, so make it look like it.

Take a look at Uberflip’s webpage. The first few CTAs (“CREATE A HUB – FREE”) are next to “WATCH VIDEO” links. The ultimate action Uberflip wants is to create a hub, not watch the video. As a result, the “create a hub” button is large and in charge, while the “watch video” link is lower in the hierarchy and stands out less.

This will make you notice the CTA first, before anything else. The other links fail to compete, which is what you want.

Create Urgency

If you create a sense of urgency in your CTA, it can overcome any hesitation someone has to click it. You see a lot of these when you browse the internet. “Buy Today” or “Limited Time Offer,” these lead people to click on your button quickly, which is exactly what you want.

Vonage has a good example on their website right now. Right at the top, they have a call-to-action with a “limited-time offer” if you “buy now.”

Hopefully, if someone was going to their site interested in their services, they would be persuaded to quickly hit that “buy now” button instead of waiting, due to that offer. For all we know, it could be gone any day now.

(I hope it’s not gone by the time you read this. That would be embarrassing.)

Communicate Value

In and around your CTA button, you want to communicate the value the person gets for pressing that button. Be sure to note some of the benefits (NOT features) that the person receives by clicking. Do some convincing, but keep it consumer-oriented.

Look at Gamefly for example here. All around their call-to-action, you have benefits of their service. “Play games as long as you want,” “Keep at a discount,” “Cancel anytime!”

People go to the website, see the CTA right away, then read around the “Start Now” button to find out their value by subscribing to the service.

This is also a great example of creating urgency. Gamefly says this free trial is “limited time only.” Although, I’m pretty sure they’ve offered this since they’ve started their service. It creates urgency though, and makes people want to click that button.

Be Sure to Test

Ultimately, different tactics work with different CTAs. “Value” is different for each action and each service. The amount of white space you use, as well as the colors, depend on your own design and offerings.

In order to find exactly what works for you, you need to test different CTA buttons on your page.

Following these general guidelines, however, will help you identify what generally works. It deeply cuts down your failures and helps your trial-and-error quest for a CTA.

So… there you go!

What Makes People Click and Convert [Infographic]