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.
It's not enough just to place a link to buy or add an item to baskets on the product page; retailers need to think about making the button stand out from other elements on the page to attract as many clicks as possible. A good button can increase conversions, so it's worth testing variations to find the most effective design.
Here are a few tips for call to action buttons on e-commerce product pages, as well as a few examples, good and bad.
-
Colour: the button needs to stand out from the background, as well as any other icons or images on the product page, so a colour should be chosen which contrasts, preferably a bright colour.
As well as being important for contrast, different colours may have some impact in shoppers' minds; they may associate green with go for instance, and therefore be more likely to click.
There is an interesting chart on call to action colours in this post, which concludes that orange is the best to use, something Amazon, B&Q and Play.com may have taken note of.
- Wording: shoppers should be in no doubt what the button is there for, so language should convey the action they are expected to take, while being concise enough to stand out. It should start with a verb that conveys action; 'buy', 'add' etc. Users expect to see phrases like 'add to basket' and 'buy now', so it's wise not to deviate too much from this kind of language.
- Size: It's the most important link on a product page so shoppers need to instantly see it without having to hunt around. It should therefore be the biggest link on the page. The bigger it is, the more chance it has of being noticed.
- Positioning: Above the fold, obviously, but also somewhere where users' eyes are likely to be, just below the price, or to the right of the product listing.
- Give it some space: putting the call to action to near other graphics, links or images will make it harder to find. Make sure there is some space around it so it stands out from the rest of the page.
Here's how some of the top UK retailers (loosely based on this Hitwise HotShops list) do it. A number of these retailers, including M&S, ASOS, Next and Dell could be better, especially when it comes to the size of the buttons.
Amazon, B&Q and Play.com provide excellent examples though, using high contrast colours and big icons that stand out well.
Amazon UK
Amazon knows how to do it. It has its buttons in yellow and orange, which contrasts well with the white background and makes the button stand out, as well as making it the biggest button/link on the page. It is positioned prominently above the fold with plenty of space around it.
Argos
The green colour stands out well against the white background, though the button itself is quite small. Wording is clear and concise ad conveys the fact that shoppers can buy online or collect in-store.
Play.com
The button on Play.com is orange against a white background, so good contrast there. The product page contains plenty of visual distractions, so it would stand out more if made bigger. As for the wording, nice and clear.
Tesco
Blue against white is fine for contrast, but with a lot of blue on the page another colour would do a better job, especially when there are several other calls to action and links on the page.
Marks & Spencer
On M&S, a brighter colour for the call to action, and a more prominent position on the page would make it stand out more.
Epson
On Epson's product pages, the bright blue stands out well, and it is placed prominently just below the price. On this particular page, the call to action should be more distinguishable from the play video link.
Next
Not a great example, the colour is too dull and the button could be bigger, so it doesn't instantly leap out at you on the page.
ASOS
There is already a lot of black on the page, so the call to action here is nowhere near as clear as it could be. A bigger button in a brighter colour would stand out much more than this.
Dell
The colour is enough to make it stand out from the background on the product page, but a larger button would catch the eye more.
B&Q
This is a good example; a big icon in a bright colour. It contrasts well against the white background, and holds a prominent position on the page, so there's no danger of people missing it.
Graham Charlton is Editor at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+.
Recommended reports
Checkout Optimization Guide: 70 ways to increase conversion rates
Problems with the checkout process are still the biggest single source of revenue loss for most e-commerce businesses. This report identifies 70 awesome recommendations and includes lots of practical insight to help you reduce your checkout abandonment rates.
Effective Web Design
The Effective Web Design guide has been created to provide you with a steer on all the key aspects of website design, ranging from conception and design, through to subjects such as usability and search engine optimisation. It is intended as a single point of reference covering best practice approaches for all the topics that anyone involved with website design needs.
E-Business Consultant at Dan Barker
3:13PM on 22nd June 2009
great post, Graham.
I always like Argos's 'Buy or Reserve'. The obvious thing would have been to separate that into 2 separate buttons. Sticking it as one makes it far easier to test & improve, & makes more sense from a customer point of view 'I just want to buy the thing'.
The b&q and play.com ones are interesting. They're bright & stand out on their own, but on each of their sites there're tons of other orange elements.
Tiny note - some of the images have degraded as jpgs.
dan
--
http://www.twitter.com/djbarker
Editor at Econsultancy
4:11PM on 22nd June 2009
Thanks, I'll sort those images out. I think this is one area where a lot of e-commerce sites can learn from Amazon.
Of the retailers mentioned here, I think B&Q and Play.com are closest, but none make the calls to action quite as clear as Amazon.
9:58PM on 22nd June 2009
Graham, we've been driving this point home for years at American Express and it still seems like our design agencies don't get it completely. Well said all around!
Scott
9:51AM on 23rd June 2009
Glad you like our button..
Customer Experience Manager at Belron International
11:56AM on 23rd June 2009
Yes,
I've got stacks of examples of where button designs improve clickthrough or conversion rates (especially when the design is bad to begin with).
Colour and contrast with context/background/site is important, size too and especially the wording/action. Buttons that 'look' like buttons and are distinct from the background in terms of design also help stuff.
My mantra - big sod off, honking, off-brand buttons may work better <grin>
Seriously though, multi-variate test your buttons and see the results. You can then get a good balance between branding, design and revenue/actions!
Craig.
1:04PM on 23rd June 2009
When we approached the button design for B&Q Next day it revolved mainly around a key word we introduced which helped us measure it's prominence on the page.
The BOSS is what we call it. Ideally there needs to be one BOSS on the page.
The question to ask when evaluating the page in it's entirety is:
Does the button hold authority on the page? (Visually and proportionately), if not, reduce the prominence of the other action buttons or increase the prominence of
The BOSS until it reins supreme.
Customer Experience Manager at Belron International
9:21AM on 24th June 2009
Hassen,
Are you doing multi-variate testing with buttons to find the optimal configuration for the primary call to action? If you aren't, I strongly suggest you do this as it will save oodles of time.
C.
Editor at Econsultancy
7:20PM on 24th June 2009
Hi Hassen, I see that the call to action buttons on the main (?) B&Q site are much less prominent than on the next day site, is there a reason for this or will The BOSS be used there as well?
International Marketing Director at Bazaarvoice
4:22PM on 26th June 2009
This is a great article, Graham -- excellent tips.
On the B2B side, I tend to really admire Omniture's Calls-to-Action. They are always large, clear, action-oriented, and attractive (glossy highlights, etc.). I started testing Call-to-Action buttons earlier this year to great success.
Here is an example of our latest call to action design, which is our highest-converting button to date:
EXAMPLE
This button has:
1. Bright, unique colour
2. Clear wording with a verb
3. Large size
4. Prominent placement above the fold
5. Space to breathe
Thanks again for your tips.
Best,
Jacob
11:56AM on 30th July 2009
Hi Graham,
In the interest of maintaining the integrity of the B&Q Brand, I would be the first to advocate the BOSS being consistent on both sites, however these are separate propositions with separate teams working on them.
We hopefully will be heading towards neutralizing the differences between the two.
12:28PM on 30th July 2010
Well its great to find such ideas I was thinking to implement some good call to action example and found your blog. I appreciate your effort and really like your advice to be implement for better conversion. That's what everything for us :)
12:08PM on 5th December 2011
Thanks for the info on this blog, it's funny because when you read this it all seems so obvious and then you look at some of your Websites and realise that you haven't actually followed all these rules and can improve your site.