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:
No hay comentarios:
Publicar un comentario