The Magic Button Every Site Needs

Unless you live in a cave, you’ll have been on the receiving end of a sales pitch at some point or another and so you’ll be able to imagine the scene. A charity worker stops you in the street and explains the worthiness of weekly donations, or when you nip into the phone shop to admire the new iPhone, a mobile phone salesman pounces on you and runs through a selection of tariffs.

Love them or loathe them, sales pitches and the wider art of selling has its place in the modern world. Indeed, nearly all website are sale pitches; they’re your client’s opportunity to extol the virtues of their product in the best possible way, so as to encourage a sale.

Having said that, it’s worth remembering that a sales pitch is nothing without a clear route through which a prospective customer can make the final purchase, investment or commitment. Imagine being convinced to buy a brand new Blackberry in a gruelling hour long sales pitch, only to find that, once you commit and begin looking forward to receiving your new phone, the salesperson goes on his or her lunch and casts you adrift in the store with no clear way of progressing with the sale.

Sadly, this is something that happens online all the time, due to an area of web design (which surprising, is concerned with functionality) that many designers, for all their inspired creativity, fall down on; the call to action. I’ve seen countless sites which take my breath away in terms of epic design and persuasive sales copy, but which don’t allow me to buy or invest in whatever they’re selling due to missing or poorly thought out calls to action.

What is a Call to Action?

A call to action can be anything – a button, a link or even just an image – the important thing is that it’s designed to encourage a commitment from the user, whether this is them clicking a button or picking up the phone to call a sales number.

The majority of modern calls to action are buttons, but their colour, placement and design can greatly affect the click-through-rate and subsequent sales figures.

Design Elements Checklist

So, when designing your call to action there are few staple considerations to make.

1.    Overall Theme

While your call to action should stand out from surrounding site, it should not break away from the design or theme used. For example, don’t think that you should use a simple, bright blue, rectangular button with minimal shading if your site is for a retro online record retailer and comprises autumn browns, reds and oranges.

Why not modify a vinyl record or rework some iconic vinyl artwork into a call to action? I’m thinking “London Calling” with some colour changes.

2.    Positioning

Run a quick online search and you’ll find a number of answers to the question of where to position your call to action on a page. The one thing most seem to agree on is that your call to action should be above the fold.

Navigational Bar/Top of Page

Place your call to action somewhere that users would expect to find it; perhaps at the top of the page or in the navigation bar. If you do place it beside other navigational icons, be sure to make it distinguishable as a link with a separate, more important function (either via size colour, angle etc).

Centre of Page

If you’re feeling bold, why not dominate the centre of your page with a call to action. Funnel the user’s eye into the centre, an area to which it will naturally move. If you do adopt this method, be sure to avoid clutter as this may overwhelm the user.

Coupled with Product

Another alternative would be placing the button next to the image or description of the product itself. This would help ensure that the user know exactly how to download or buy, but make sure that this doesn’t result in you having to tuck the button away at the bottom of the page. If you’re stuck for space above the fold, move the product to an entirely new page and give it pride of place, call to action and all, at the top.

Use Layering

This can be an effective way of drawing attention to your call to action. Code the graphic so that it appears to jump out from the page, as if it’s resting on a layer above the rest of the site. This clever use of perspective can make the call to action absolutely unmissable.

3.    Colour

As we’ve seen, standing out is paramount – and colour is probably your most instantly effective weapon in order to achieve this. Choose a colour which contrasts with the rest of your site without being garish. Remember that certain colours, such as red, have negative connotations, so it might be better to pick oranges, yellows or greens instead.

The use of whitespace can also be helpful – this represents colour and positioning working together. Position your call to action away from other links, and surround it by background space which is either white or another fairly neutral and unremarkable colour. This will project your call to action outwards from the page.

4.    Size

While bigger is better, the use of size in calls to action is more subtle than this point only. Yes, a bigger button will be easier to see, but part of the reason why some larger call to actions can increase click through rates by as much as 11% is because they provide more space for the user to click on. If your button is positioned properly and is a good size, it will be almost easier for the user to click than not to!

When looking at the size of your links, ensure that the most important ones are the largest, and rank lesser call to actions in descending size order. If working for a client, it’s a good idea to have a consultation with them to ascertain which products or services are most important to them, and size their respective links accordingly.

Thus concludes this guide, which has hopefully encouraged you to consider your call to action more with every design. Generally, whether you’re designing for yourself or others – the website you’re creating will have a purpose. Whether this is sales, investments, users, submissions or downloads – all can be achieved with well thought out call to actions.