{{ 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.

In ecommerce much of the focus is on the best ways to attract traffic and visitors, meaning that tactics for conversion rate optimisation are often neglected.

In fact our new Adobe Digital Marketing Optimisation Survey found that a majority of companies (53%) spend less than 5% of their total marketing budgets on optimisation activities, despite the fact that a small uplift in conversion rates can translate into thousands of dollars of extra revenue.

One relatively easy way of improving conversions is by making sure you have the best possible call-to-action (CTA). 

There’s no exact formula for the perfect ecommerce CTA, but there are some aspects that web designers should focus on tweaking and testing to make sure they’re maximising their conversion rate.

Some of them are obvious while others are more obscure, but each of them has the potential to add to your bottom line...

Wording

Getting the correct wording for your CTA should be a relatively easy task as you just need to boil the desired action down to the simplest phrase possible.

However it also needs to inject a sense of urgency and entice the user into taking a particular course of action.

On ecommerce product pages the standard wording is ‘Buy now’ or ‘Add to basket’, and in truth these are so widely accepted now that I’m unsure whether trying a different angle wouldn’t just confuse the customer.

Spotify is a good example of a different business case and it could have been featured in any number of these categories, as it also ticks the boxes for placement, size and colour, however the wording is also spot on.

It leaves the user in no doubt about what they’re getting and how much they’re paying for it in just four words. It’s an almost perfect sales pitch.

Colour

Ideally the CTA needs to be the most obvious feature, so it should be an eye-catching colour that doesn’t blend in with the rest of the page.

It’s definitely worth testing different colours to find which one is most appealing to your users and drives the most clicks, and it’s worth noting that both ASOS and Amazon have opted for orange buttons on a white background.

Skype hits the nail on the head with its unmissable ‘Join’ CTA, though personally I’m a fan of square rather than circular buttons.

On the other hand, Hubspot’s CTAs get lost in a sea of orange and grey.

John Lewis could also do with turning up the brightness on its ‘Add to basket’ CTA as it’s a bit flat when you first arrive on the page. 

Placement

The debate over the ideal place to put your CTA is worthy of its own blog post as there are a number of factors to consider.

James Gurd whittled it down to three important points in an excellent post on landing page optimisation:

  • The goal of the landing page.
  • Audience intent.
  • Complexity of the offer.

If you just want to generate leads or grab a sale then the CTA should be prominently placed near the top of the page.

However placing your CTA above the fold is no longer considered to be an absolute must because user behaviours have changed over time and people are used to scrolling.

Therefore if you have a complex product offer or need time to convince the customer to make a purchase then there’s no harm in putting the CTA lower down the page.

In general though, on most ecommerce product pages people expect to see the CTA at the top near a product image, like in this ASOS example...

Size

People don’t want to have to search around the page looking for what to do next so the CTA should be big enough that your customers can spot it straight away.

Not On The High Street’s CTA is almost bigger than the product thumbnail images and only the most shortsighted user will fail to spot it. 

Similarly, Mozilla has designed an unmissable CTA that jumps out at you the moment you land on the page.

Allow some white space

Allowing plenty of white space around your CTA serves two purposes – it makes it both easier to spot and easier to click.

If a page is too cluttered then it will increase the amount of erroneous clicks and slow down navigation, which leads to a frustrating user experience.

Victoria’s Secret uses an extremely simple design for its product pages which allows the CTA room to breathe.

In contrast, though Staples has excellent product pages I feel it could do a much better job of removing some of the clutter from around its buttons.

Have more than one

While it’s not a good idea to fill your page with CTAs in the hope that the more there are the more sales you’ll make, there is scope to include more than one if you have a large or complex page layout.

This makes it more convenient for the user where the page contains sub-sections or different features that might draw their attention from the original CTA.

Test it

The only way to find out the best combination of factors for your CTA is to test each one to see the impact versus a control.

Running A/B tests is relatively simple and is a great way of validating or disproving your hunches.

In this example from Unbounce the site owner managed to increase CTR by 35.81% by changing the colour and shape of the CTA. That’s definitely a change worth making.

David Moth

Published 30 May, 2013 by David Moth @ Econsultancy

David Moth is Editor and Head of Social at Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

1680 more posts from this author

Comments (13)

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

Lee Putman

The question for me is how do retailers create a site that will make customers click and purchase now rather than keep on browsing. That sense of urgency is key to winning business...

Booking.com is one of the best examples I've seen on this by creating a whole set of urgency factors around their call to actions including price, availability, telling the user when the last one was booked, who is looking at the product etc (I bought a hotel and tested this and it did work!). More retailers should adopt this approach with relevant products - i.e. if you knew that 300 people were viewing the same product as you then you may be more reassured to purchase now rather than keep shopping around.

Thoughts?

over 3 years ago

Avatar-blank-50x50

adrian

How old is this article? Spotify changed their CTA some time ago, probably because the 'free' aspect is alienating to visitors who then go on to find its not actually free, or at least not to any usable degree.

over 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@adrian, the article is a day old. I took the screenshot yesterday and it's still there today when I just checked.

over 3 years ago

Avatar-blank-50x50

Jamil Kassam

The JL example is slightly false because in this case the product you're looking at is Out of Stock hence they've faded the colour of the Add to Basket button right down. Have a look at an in stock product and it's pretty impactful.

over 3 years ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@Jamil, thanks for your comment. Three of the sizes were in stock, the CTA only comes to life after you've selected a size, which is why I said it's a bit flat "when you first arrive on the page."

over 3 years ago

Avatar-blank-50x50

Jamil Kassam

Ah yes I see...strange that the default is set to out of stock option.

over 3 years ago

Susanna Hellden

Susanna Hellden, Research Support Officer at King's College London

Thanks for the short&sweet summary of CTA essentials, a thought is to possibly have one more item on the list discussing how the CTA button works with the rest of the page in terms of "look and feel" and how that then work with customer perception/expectation;

On sites like booking.com as well as for example Ryanair, I'd expect a big attention grabbing thing to make me jump at the deal asap.

But for other things where I might not like to be reminded of the fact that I'll end up spending money on stuff I don't really need, or can't really afford or can buy cheaper versions somewhere else, I might be helped to buy by a CTA button that makes it look as if, despite all my internal warning signals, I am buying this product for "all the right reasons".

I'm really loving the ableton.com shop at the moment, and the fact that billboard.com kind of looks the same now may be the thing that subconsciously makes me buy their 'far from cheap' products! :D

over 3 years ago

Albie Attias

Albie Attias, Ecommerce Director at King of Servers Ltd

Some good tips here David. I'd add 'consistency' to the list. It's a good idea to be consistent with your design treatment of similar call to actions across the website. For example, if you make your add to basket button orange and rectangular, apply the same design to any other buy related buttons (e.g. checkout). Sounds obvious but not everyone follows this convention.

over 3 years ago

Avatar-blank-50x50

Lauren

What about lead gen sites, does anyone know of a collection of excellent CTA buttons on these sites, would be interesting to see how it compares to the ecommerce example below because the user journey and intent is slightly different

over 3 years ago

Avatar-blank-50x50

buntebank

It always seems a bit funny to me, how "you people" think, and even "try-to-proof" with fuzzy numbers, how the colour of a button would change the desire of someone planing to buy something?

Personally - if i want to purchase something THE LEAST THING i care about is a freaking button...
(in addition: if i want something i've always found the button so far...)

And - if i do not want to have it you can have a Jumping-Bunny-Flash-Button - it shure wouldn't change my mind.

just my 2 cent... B ))

over 3 years ago

Dean Marsden

Dean Marsden, Digital Marketing Executive at Koozai Ltd

Nice examples and tips. One thing I noticed in all the examples images is that the button/CTA works well with the design of the rest of the page. There is a flow to it. I do think that the Not On The High Street buttons look too big though!

Whitespace is so effective, probably more so than some other factors.

over 3 years ago

Avatar-blank-50x50

Andrey

Thanks for the useful article. At my ecommerce site have tried various options. As practice works best red buy button.

over 3 years ago

Avatar-blank-50x50

Bom Lee

Also, don't ever use flash buttons! They are terrible. Also, not search engine and browser friendly. Come to think of it, screw Flash.

about 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.