{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Call to action buttons need to jump out at the shopper and leave them in no doubt about the next step they need to take to make a purchase.

Visitors can have low attention spans, and an effective call to action which catches the customer's eye can make it clear what the next step should be. 

There is no definitive answer on which buttons work best, so it is important to test different combinations of colour, button size, wording and placement to see what is most effective.

As a general rule though, if it doesn’t stand out clearly on the page, there is room for improvement.

Here are some tips on designing and displaying calls to action...

Test

This is really the key. If you choose a call to action that stands out you may do very well but until you test it there's no way of knowing whether you have chosen the best option. 

Simple changes to design, colour, wording and size can produce impressive results. 

For example, this test from Visual Website Optimizer produced a 6.3% increase in sales. 

The original button blended into the page, and was less prominent than the 'oversized print' message. 

The new version made the button more prominent, and added green to make it stand out: 

It's easy to see why that change improved sales, as the new version is obviously clearer, but more subtle changes can also produce results. 

Colour

The button must stand out from the background, as well as from any other icons or images on the product page. A colour should be chosen which contrasts with those used on the rest of the page, preferably a bright colour which catches the eye.

A bright colour can stand out best, but it is also important to consider that some colours may create certain associations in shoppers’ minds. 

Orange is sometimes recommended as the ideal colour for calls to action, as it draws attention to a button without being too bright. Some colours have other connotations; some may associate red with danger or debt, while green can signify ‘go’. These are all things to consider when choosing a colour.

Testing variations will help you to find the best colour for your website’s call to action buttons.

In a recent interview with Comet's Ryan Thomas, he told me that he had been testing colour variations, and has settled on green for the moment. 

This colour may not work on every site, but it certainly stands out clearly on Comet's product pages: 

Wording of calls to action

The wording should leave shoppers in no doubt about what will happen when they click the link. It should ideally start with a verb that conveys action:  'buy', 'add to basket', etc.

Users expect to see phrases like 'add to basket' and 'buy now', so it may be wise not to deviate too much from this kind of language.

For example, Zara.com uses the phrase ‘process order’ on its site, which may be confusing for some. 

For this reason ‘add to cart’ or ‘add to basket’ can work well. Users are familiar with this phrase, and will be more likely to notice it when they scan the page.

Size of calls to action

The call to action is the most important link on a product page so shoppers need to instantly see it without having to hunt around.

It should be the biggest link on the page. After all, the bigger it is, the more chance it has of being noticed, so why not increase the size and test the results?

The call to action for the Firefox browser is the biggest feature on the page and as a result it is unmissable:

Button placement

Buttons should be placed somewhere where users' eyes are likely to scan as they view the product page.

Placing the call to action just below the price, or to the right of the product listing makes it easy to scan and spot quickly.

Also, online shoppers are used to seeing calls to action in this area of the page so it makes sense to follow precedent.

Give it some space

Even the brightest and most clearly worded call to action will struggle to stand out on a cluttered page, though Ling's Cars does deal with this issue by using flashing green gifs: 

However, for most sites, it's important to make sure that there is some clear space around the call to action button. This will avoid the risk of it being drowned out by the rest of the elements on the page.

On this John Lewis product page the button is in a dull colour as well as being quite small, but it stands out thanks to the white space around it. A brighter colour may be more effective though.

Multiple calls to action for long pages

Thanks to adding reviews, videos and just about everything it can find that relates to the product, Amazon often has very lengthy product pages, so the retailer has added multiple calls to action above and below the fold.

These buttons can grab the attention of users further down the page and also increase the opportunities for shoppers to add further items to their baskets.

Prioritise the most important calls to action

There may be two or three calls to action on a page, perhaps different levels of subscription, 'buy now' or take 30 day free trial, or order now or collect in store. 

Customers should be presented with all options, but it's worth drawing more attention to the action you'd most like them to take. 

Here, AVG would much prefer you to buy now... 

Create urgency

Creating a sense of urgency in the customer's mind can nudge them into a purchase decision there and then.

This may not be applicable for every site, but if you have a sale on, or limited stock, or perhaps can guarantee next day delivery if the order is placed within the next hour, then this can be a powerful technique. 

Adapt for different devices

There are different considerations for designing calls to action for different devices, though the essentials are the same: it should stand out and be easy to click. 

You can also look at the way people use devices and adapt calls to action to suit this. 

For example, direct line used a swipe button for the iPad-friendly version of its German homepage. This led to a 9.23% increase in registrations for a quote:

Graham Charlton

Published 6 March, 2012 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (6)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Jordan Dichev

Nice seeing a screen shot from an interface I built myself for House of Fraser as part of their 2011 redesign.

over 4 years ago

Albie Attias

Albie Attias, Ecommerce Director at King of Servers Ltd

Good comprehensive post Graham. A lot gets written about calls to action and in particular button colours and placement strategy. It's worth pointing out that whilst testing CTAs is an important part of an ongoing optimisation process, this should happen AFTER testing the offer itself and the associated value proposition.

over 4 years ago

Avatar-blank-50x50

Kes Phelps

One of the most important but often the most neglected points "Do what people are used to - don't deviate from the norm"

Or "follow convention" or don't at your peril.

Don't try and reinvent the wheel with what you might think is a good idea. Follow what already works.

Leave the ground breaking to the ground breakers

over 4 years ago

Craig Brewster

Craig Brewster, Founder at your mum

This is a subject close to my heart. I run a UX consultancy and we have helped many of our clients increase their online sales. I recently wrote an article on a similar subject on our blog:

http://yourmumux.wordpress.com/2011/11/08/11-ways-to-improve-an-online-shop

Does anyone else have any top tips...?

over 4 years ago

Avatar-blank-50x50

Natalie

Great post Graham, I think there are some really good points here. Having to search a webpage for the basket is a personal pet peeve of mine, so I can relate a lot to this!

@Craig Brewster Postcode Anywhere often share tips for eCommerce merchants. You might be interested to read this one – 7 tips to simplify sign up: http://blog.postcodeanywhere.co.uk/index.php/seven-steps-to-simplify-sign-up/

over 4 years ago

Avatar-blank-50x50

Sue

Thanks for such a helpful post. I think shopping cart software is thee most important decision when creating an ecommerce site, the rest should just follow.

over 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.