Buying buttons… Best practices for eCommerce

What are the best UX design practices for eCommerce website buttons? What can we implement so when a customer does decide to select an item for purchase functionality provided creates the least fuss for them and gives us the best result for sales.

1: Button or buttons

For the majority of eCommerce websites a single ‘Add to…’ button works well however some sites such as Amazon where a fast purchase is important two buttons works well. One ‘Add to…’ button to cater for the browsing user and one ‘Buy now’ button taking a user straight through to checkout for users who know what they want.

2: Colour

The colour of the buttons is very important. A bright, contrasting colour should be used to highlight the call to action so it stands out on the page.

Colour can also be used to help the user step through the selection process. For example, the Add to bag button can initially be grey but can change to orange once the user has selected a size. 

3: Labels

Label the buttons appropriately. If you are shopping for clothes ‘Add to bag’ makes more sense than ‘Add to cart’. 

If clicking on the button is going to take the user away from the current page include an arrow in the label or use words to indicate a movement ie, go, proceed, buy now.

4: Messaging

Always display a message to confirm that an item has been successfully added. The message should be shown in the same visual space as the Add button. This can be in page or as a pop up.

5: Animation

Animation is a useful tool for capturing a user’s attention. In this case it can be used to confirm that the item has been added by displaying the cart/bag preview as a small popup including appropriate messaging as described above. Whether the preview requires user interaction to close or it closes after x seconds is up the UX designer, though I would advocate the latter.

6: Navigation

What navigation occurs after a button is clicked depends on the site but it is generally understood that ‘Add to…’ will keep the user on the same page. However for sites where it is likely a user will only be making a single purchase, such as large appliance, it makes sense to take the user straight to the cart/bag to review.

There is no right or wrong way to design eCommerce buttons as different things work for different sites so would suggest trialling different options using all or some of the above practices.