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