Pressing buttons is fun. Hitting the stop button on a bus, clanking the keys on a typewriter or pushing the button for every floor in an elevator – there’s something strangely satisfying about it. It’s like popping bubble wrap or scratching an itch and we humans are compelled to do it.

A recent April Fool’s prank / experiment on reddit.com involved a very ‘clickable’ button next to a 60 second count-down timer. The idea being every time someone clicks the button, the timer resets to 60. This experiment has been running for almost a month now, the button has been clicked almost a million times and the timer still hasn’t reached zero. Assumably something will happen when it does reach zero, but we are yet to find out because of all these ‘button pushers’.

So what is it that makes a button clickable? And more importantly, how can we make the call to action buttons on our website lead to more conversions? This article is about the design principles and psychology behind making CTAs that yell “click me!” to all of your customers.

A button consists of 2 basic things; design and copy. The design is the visual elements that let us know this is a button and we can click it. The copy is the wording that tells us what will happen when we click it. Making a button that’s great for conversions isn’t simple, but there are some very helpful guidelines we can follow to make sure we’re on the right track. The freindly folk at unbounce.com have explored conversion centred design in great detail and have a lot of material on the concepts I’ll be mentioning here.

The first thing we want our button to do is let users know where to click. By using the design principles below, we can make our CTA button stand out and draw people’s attention to where we want them to click.

  • Encapsulation – Framing our button will not only draw more users eyes to it, but it will give it a more authoritative position on the page. It’s like sitting your button on a throne.
  • Contrast and color – Bright red! Right? Or does red mean stop… Maybe bright green! It’s not that simple unfortunately. Choosing the right colour really depends on the context the button is in. Making a big contrast between the button and the rest of the page is very important though. The colour you choose to achieve this with will probably require some playing around and careful consideration. You want to make sure it fits with the feel of the overall design of the site. The squint test is always helpful for gauging the contrast of a button.
  • Directional cues – Point people in the right direction. Arrows are incredibly simple shapes that are incredibly powerful in focusing our attention. Our eyes naturally follow lines, paths, or the gaze of another person. We can use these to make sure a user’s attention is in the right spot (on our button)
  • White space – Effectively using space around our button draws attention to it immediately. If there’s nothing else to look at, our eye will be drawn the the focal point. Blank space, like encapsulation creates a sense of importance. This button has all this free space because it’s valuable.

And keep it simple. There’s no need to go overboard and try to reinvent the wheel. A simple rectangular button utilising the above will be more than enough to get the clicks you need. Adding depth along with hover states is also a good idea because it will make it more fun to interact with.

Moving on from the visual, let’s think about the verbal and psychological side of things. Let’s tell users why they should click on it.

Submit, next, accept, download… These are tired and incredibly uncreative button titles that will not inspire users to click them. When creating the right button copy, we’ll let the user why they should click by focusing on what’s in it for them. When I hear the word ‘submit’ I immediately think of submitting high school assignments, which is not the desired effect.

Now let’s create some copy for our button or to accompany it, making sure that it will give more reasons for a user to click.

  • Urgency & Scarcity – “Only 3 rooms left” is a great example of accompanying copy for our button. It informs the users of the scarcity of what is being offered and creates a sense of urgency in them to click the booking call to action button. Nobody wants to miss out, so using copy to overcome a users procrastination or over-analyzation is a great way to make them click.
  • Try Before You Buy – Giving away a taste test can be a very effective way of getting clicks. It shows transparency which is always appreciated and who doesn’t want something for free?
  • Social Proof – All the cool kids are doing it, so why aren’t you? Providing ratings or testimonials is great for creating that sense of trust that may be all the motivation needed to click your call to action. Also, a strong sense of social activity (likes, mentions, comments etc.) on your site will also impress and create the feeling of a buzz about your site and product. 

In wrapping up there’s a few things to take away from this. There is no ultimate button that will work in every situation. You will always have to work to make your buttons fit and work within the context they are being presented in. A simple button design that stands out will often be good enough to get peoples focus, but to get the to follow through with a click, you’ll need to let them know what they’ll get or what they might miss out on.

References:

http://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
http://www.shutterstock.com/blog/the-7-principles-of-conversion-centered-design-for-landing-pages