D-Lists

Call To Action, Best Practice

The aim of most websites is to persuade the user to act. The actions can range from buying, downloading, signing up etc. However, there is no use trying to persuade someone to act if you then make it impossible for them to find the place to do so.

A well designed call to action can increase the number of people who perform the desired action on your site. It can make or break your website. Here is a list of tips to ensure your calls to action work for you and your users.

Stand out

Of course any call to action worth it’s salt has to stand out. There are a number of different design methods you can use to ensure that yours does just that.

Positioning

Here are some examples of making your call to action stand out by positioning them in prominent areas on the page.

Give the button space

If an element on a page has a number of different components around it, these are going to take the users attention away from the designated area. If you want to make something stand out on a page then you should ensure that it is given space.

Colour

One of the most commonly used techniques, to make something stand out on a web page, is the use of contrast. One way to give a call to action contrast is by making it a different colour to the rest of the site. Another thing to note when studying call to action design is the common use of green. The connotations that green has with ‘go’ makes it an obvious colour choice.

Clearly resemble a button

Nearly every call to action online requires a click of some sort. This is why it is important to design your call to action to look like a button so the users know exactly what they are being asked to do.

Clear Message

Any call to action should be just that, a call to action. The wording of this call is also very important. Firstly, there should be a clear description of the action required. For example, sign-up or download tell the user what they are being asked to do. Secondly, it can be a good idea to give the audience a sense of urgency making them feel they have to act fast. This can be done for example, by putting the word ‘now’ or ‘hurry.’

Consistent positioning

A good call to action should be positioned on every page of a web site. If the user is not convinced to sign up by the first page they visit, but is convinced after reading some other pages, they should be able to quickly find the right place to click. This can be achieved by positioning the call to action in the same place throughout the site and by ensuring that it keeps the same appearance.

Size

I’m afraid to say that it is true what they say, size really does matter. Well that is definitely the case in web design. The bigger elements demand your attention. So if you have the space available, it can be a good idea to make your call to action as big as possible so there is no possibility your audience will miss it.

Giving reasons to act

Users need a reason to act, which is why you will often find the call to action placed after either a list of features or a list of reasons to act. This list can be used to lead the users eye toward the button.

Now that I’ve described some tips on how to design an effective call to action, I think it’s time that I give you some visual examples of websites using them perfectly.

Brush Pilot

(Brush Pilot makes it’s call to action stand out by placing them in the middle of the page. They use the large eye catching illustration to lead your eye towards the buttons.)

My Brand HQ

(My Brand HQ uses a number of different techniques to make its call to action stand out, including the decision to position it central on the page. This means that it is one of the first things your eyes see when the page loads.)

Postbox

(The Postbox website make their download button stand out by giving it a great deal of space. There is nothing surrounding it meaning it garners all of your attention.)

Ronin

(Like the Postbox website, Ronin let their call to action breathe, which leave your eyes to rest on it and hopefully click.)

Whale Salad

(The Whale Salad call to action can’t help but stand out with it’s shocking pink background colour. They also have a secondary button that is lighter than the sites background, giving users a second option if they so wish.)

Amidst

(The green of the Amidst Log in button not only gives the connotation of going somewhere but it also stands out against the prodominently blue colour scheme.)

Skype

(The Skype website has a very strong blue colour scheme. However, their download button is a vibrant green meaning it is the first thing you notice when the page loads.)

Logbook

(The Logbook application’s call to action buttons are clearly buttons that require the users attentions. The designer has created the buttons to look 3D giving the viewer the impression that they could be depressed.)

Squarespace

(On the whole, the Squarespace site is flat. However, to draw the viewers eye they employ subtle uses of 3D in their logo and their main buttons.)

W3 Roi

(W3 roi put their call to actions on a white background and use vibrant colours to make sure they stand out. They give extra attention to their ’sign up’ button by making that a different colour to the sites overall colour scheme.)

280 Slides

(It really is impossible to miss the ‘try it now button on the 280 Slides homepage. It really is a monster of a call to action.)

Ballpark

(Ballpark uses a subtle gradient on the plans and pricing button to give it a 3D feel. They have also decided to make the button green while the rest of the site are shades of blue.)

Blogs.mu

(Blogs.mu contrast the dark shades of their background with the bright green colour of their call to action.)

Boxee

(Boxee give their sign up section a lot of space making it out stand out. They also surround it with a rounded illustration which draws your eye toward it.)

Convertbot

(Convertbot has a very prominent grey colour scheme, which is why their red download button stands out so much. The colour red also carries with it connotations of alert, leading your eye toward it.)

Cotweet

(Co tweet has 2 calls to action. However, they try to persuade their visitors to ’sign up’ by making that button a different shade of blue, while the ‘learn more’ button is the same shade as the rest of the site making that more subdued.)

Dialogix

(Dialogix has 3 possible actions on their homepage. They give extra attention to ‘Try it FREE’ by making it red.)

Goodmorning Technology

(Goodmorning technology designed their call to action to look like a ‘web 2.0 badge.’ Goodmorning technologyt is also placed in the very centre of the page and they use a colour that makes it stand out. Very well done!)

Legacy Locker

(Legacy Locker is another site that uses green for their call to action. They have also positioned it at the end of a list of reasons why you might want to use the service.)

Go Plan

(Go Plan is another site with a blue colour scheme that has decided to create their call to action in green. Like Legacy Locker, the button is positioned after a list of the applications features.)

Pixelmator

(The pixelmator buttons would not stand out on their own. However, a bright star has been added giving extra information and catching the viewers attention. The buttons are also accompanied by illustrative icons which anchor their meaning.)

Safari 4

(Apple have made their call to action 3D. They have also made it very large making it hard to miss.)

Sharethrough

(Another example of using green to make the call to action stand out.)

Spotify

(Spotify provide their users with 4 calls to action. This could be very confusing leaving them with too much choice. However, the site differentiates each button by designating each a seperate colour against a white background.)

Things

(The Things application website use icons to make their actions stand out. The icons are very simple and quickly tell the user what they do.)

Threadless

(The Threadless ‘Join now’ button is a very bright pink colour making it stand out at the top of the page. This button can be found in the exact same spot on every page making it very easy to find when the user decides to use it.)

If you like this post you may also want to look at:

Weekly Web Design Inspiration #11

Weekly Web Design Inspiration #10

Why not follow me on twitter: @atikusdesign
or to ensure you are updated with every D-Lists posts follow: @d_lists

Posted By atikusdesign on July 28, 2009

Subscribe To D-List RSS