viernes, 5 de octubre de 2012

Add to basket buttons: examples and best practices

Posted 04 October 2012 10:56am by Graham Charlton with 2 comments

When a customer decides to add an item to their basket, what should an e-commerce site do? Should it allow them to continue shopping, send them straight to the shopping basket page, or provide the choice? 

This may depend on the type of website, but there is a balance to be struck between encouraging the customer to complete the purchase as quickly as possible, and making it easy to add extra items. 

I've been looking at several websites to look at button design, the language used on calls to action, and the transition between a customer adding items and the checkout process. 

Adding items to the cart / basket

Once a customer presses the buy button, there are several possible next steps. Here are three: 

  • The customer is taken straight to the shopping basket page to review and complete their order. 
  • The item is added to the basket, and the customer is given the choice between proceeding to checkout and continuing to shop. 
  • The item is added to the basket, but the customer remains on the product page. 

According to E-commerce consultant James Gurd:

There is no right answer. Good practice learning suggests that you dynamically update a mini-basket with "view basket" and "checkout" buttons but don't navigate users away from the page in case they want to keep browsing. The logic is don't interrupt the user's thought path and force them to change behaviour to fit in with your site process.

My advice is always to test what works best for your website. This should be part of a CRO project and test variations in process as well as design/copy changes to see how the creative delivery impacts behaviour and conversion.

These are the approaches used by some well-known online retailers... 

Comet

Here's Comet's 'add to basket' buttons. Note the choice of 'buy online' and 'collect in store' rather than add to basket.

Rather than asking customers to select home delivery or in-store pick up later in the process, it makes sense to allow them to choose this route from the product page. 

Once a customer clicks the button, a lightbox appears to provide the option of checkout or 'continue shopping'. There's also the question of where to send users if they choose to continue shopping, but that's a topic for another post. 

House of Fraser

The 'add to bag' button is initially grey, but turns pink when customers select a size. 

When customers add an item to their bags, this basket preview is shown for a few seconds. then it's up to the customer to click on the basket icon at the top right of the page when they're ready. 

ASOS

ASOS takes a similar approach to House of Fraser. 

After clicking, a preview window appears briefly: 

Sears 

Sears takes a similar approach to that of ASOS and House of Fraser, but keeps the preview on screen until people actively click to close it. This means customers have to actively decide whether to continue shopping or head for the checkout. 

BHS

BHS takes a subtle approach. Once you click the 'add to basket' button, there is no noticeable result. The basket simply shows one item at the top right of the screen: 

Debenhams

On Debenhams, the call to action could be clearer. It's a dull colour and doesn't really stand out on the page: 

Once customers select 'add to bag', Debenhams takes them straight to the shopping basket page. 

This basket page could be clearer. As on the product page, the calls to action are grey and don't stand out, while customers who'd like to continue shopping have to press the 'back' button.

Lovehoney

As with Debenhams, customers who select an item on Lovehoney are led straight to the shopping basket page after adding to basket:

 

Lovehoney E-commerce Manager Matthew Curry explains why: 

It's a hangover from old tech, but I've tested a persistent basket for Lovehoney and there was nothing between them in terms of revenue per visitor, if anything the persistent was slightly behind.

I think if your average number of items in basket is say five or fewer, then it makes sense to provide a continue shopping option. But for us, cross-sells can be added at the same time as adding to the basket, so folks will buy a basque and stockings for instance, rather than this multi-product page process.

Appliances Online

Appliances Online has a nice clear call to action. (I like the curation in action here, with the top five products in some categories picked by an Editor). 

Once customers click add to basket, they are sent straight to the basket. This makes sense, as people are less likely to buy multiple items on a site like this. 

What's interesting about this site is that Appliances Online has a one-page basket and checkout. This removes one step from the process, while there are no registration barriers. 

Conclusion

I think the best approach to this will depend very much on the type of e-commerce site and, of course, it makes sense for retailers to test these variations until they find the best solution.

It does make sense to have a clear indication that an item has been added to the basket, and to show the next steps in the process. 

At the very least, sites should give a clear visual indication that something has been added to the basket. In this respect, the BHS example is way too subtle. 

The approaches used by Sears and Comet make sense in this respect, as they give customers a clear choice of what to do next. However, sending customers to the basket page may work very well and, as Matthew Curry points out, much may depend on the average number of items in customers' baskets. 

What do you think the best approach is? Have you tested these variations? Please let me know below... 

No hay comentarios:

Publicar un comentario