Daily Archives: December 1, 2009

Web Design

Turn browsers into buyers with the right buttons

We consistently discuss how to get more visitors to your website. We talk about using search engines, social networks, and of course there’s even offline advertising.

But all the website visitors in the world are pretty pointless if no-one buys anything (or takes any other desired action) once they get to your website.

Whilst there are hundreds of different design factors that can influence whether or not someone buys from you, an often overlooked factor is how and where and what type of ‘buy now’ buttons you use.

A ‘buy now’ or call-to-action button should act like a magnet, drawing the visitor’s eye. It should be clear, easy to find, and stand out even on a busy page. Varying how you use these on the page will hugely influence your website conversion rate. Here are a few things to think about when it comes to buttons:

1. Try different colours

There’s an easy rule to follow here: Use strong colours on important buttons, neutral colours on those less so.

One thing to be wary of though, don’t use too many different coloured buttons. You still need to keep to your brand colours otherwise your website can end up looking like carnival poster.

2. Try Varying the Size

Another very simple rule. Use a big button for important actions, small buttons for less important ones.

3. Try varying the shape

You can use shape to change the emphasis of the button, and also hint at its function:
Triangular buttons often contain links to more information.
Circular buttons, especially when small, usually perform a basic function such as closing a document or application.
Rectangular buttons are most commonly used for a call-to-action. Due to this consistency across web design, make sure your important buttons are rectangular. Use other shapes elsewhere.

4. Try to varying the Style

Although you want to stick to your website colours and style guidelines, you should still have enough flexibility to make quite big style changes.

A good and easy way to distinguish a call-to-action button is to make it a block of colour with the text in white. In the example below, both bits of text are the same size. You’re left in little doubt which is the call to action button.

Alternatively, you might like to try placing a symbol or an arrow next to your call to action button. This is what we do on the WebEden homepage to encourage people to start building a website

Last of all, don’t make your call-to-action buttons just text links without a highlighted background. Text links are almost always used to just offer more information.

5. Try to vary the placement

Where your button appears on the page will hugely influence how likely it is to be clicked.

In a page with lots of products make sure the buy now button is immediately next to the product that it is associated with. It should also be on the right, at the bottom corner of the product.

If you have a general page that with a general call to action, make sure that the button is on the right hand side, usually lower down the page.

If users have to scroll down the page, make sure you have a visible buy now button on the right hand side that they can see without scrolling. If you need to, repeat the button lower down the page too.

And that’s it

Varying the way your buttons look and how they appear on the page can hugely influence whether or not your website visitors will click on them. The only way to find out what works best for your website is to try out some different combinations.

Any comments or experiences about buttons you’d like to share? Leave us a comment below.

Published by: