Seven tips for designing an effective ecommerce call-to-action

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.