Design your way

Wednesday, September 10, 2014

An effective call to action button is one of the most important elements in any website design. Website visitors might exit a website if they cannot find where they need to go next. When people see a very obvious button to click, this will lead more visitors to your sales page, or to the content you want them to view.

Button designs can be attractive as well being functional. The submit button at the end of a form, or any button that shows the user where to click is an essential part of website interaction.

There are many different ways of designing a call to action button. On most websites these buttons appear to be of a similar design, but it is possible to create something unique that will work well as a call to action. It can be made to look simple, at the same time using subtle elements of design that are known to encourage interaction.

A call to action button that is large enough to stand out, possibly with some white space around it, and featuring contrasting colors with some appropriate text, will result in many more conversions from website visitors.

An interface will contain different elements, and there could be a number of other buttons placed on the page. A call to action button is the most important and therefore has to be designed to form a focal point. It must be larger and more prominent than any other button if it is to stand out as being something of importance.

When designing a call to action button it is a good idea to make it as large as will be practical. It should not to be so big that the page becomes overcrowded, but it should definitely not be so small that it becomes insignificant and is lost amongst other elements in the website design.

Make it remarkable

A remarkable button design will be impossible to miss. A CTA button must not blend into the background or be color co-ordinated to match the main color scheme of the website.

When designing a call to action button, therefore, it should be treated as a completely separate element. It should in no way look as if it is part of the overall website design. It must stand out as being something that serves a definite purpose, and is not there to be overlooked.

Size

While the use of whitespace, color and contrast can all make a call to action button remarkable, size is also a significant factor in the success of the button’s design.

It is a proven fact that the bigger the button the more it is clicked. This is because a bigger button will always attract more attention.

Use contrast

Always consider the background when designing a call to action button, and be sure that it will stand out in contrast to what else is on the page. The whiter the background the darker the button should be. On a shaded or patterned background, the button will stand out more when it’s kept plain and is made lighter in color.

The color of the text also needs to contrast with the rest of the button. White or light-colored lettering should used on a darker button. Dark lettering will work best on a paler button.

Position it well

The first consideration is where exactly the button should appear. If it is designed to submit a completed form, or to move on to the next part of a form, then it can appear at the lower part of a page. Otherwise it will gain more attention by appearing “above the fold”.

Color

Color is another important element of buttons design. A call to action button must stand out from the rest of the interface, rather than blending in. Avoid color clashed and choose one that contrasts with the background or does not appear anywhere else on the website.

The color should be sharper on a small button and should be designed to become less bright as the size increases.

Whitespace

You can draw more attention to a small button by leaving whitespace around it, so that appears to be separated from all the other elements. This also has the affect of highlighting the color and giving the button more prominence.

Copy is extremely important

Text is one of the most important elements to consider when designing a call to action button. It should be integrated into the button’s design, and reading the words must make a visitor want to click.

Avoid using generic copy such as “Buy”, “Download” or “Submit”. The wording has to be relevant to what is on the website, as well as giving the user an idea of what will happen next.

The power of copy should never be underestimated. The wording on a button must be persuasive enough for visitors to respond with a click.

Showcase

The best way to understand exactly what works best in designing a call to action button is to take a look at various buttons designed by other people for this purpose. It should only take a few minutes for you to recognize the best elements in an effective button’s design.

Check out some good examples of call to action buttons in the following showcase of designs:

bloomfire.com