El 4: Ecommerce best practice: the 'basket add'. What is it and how should it work?

As a bit of an ecommerce geek, I'm interested in the tiny things on sites, and today it's the way sites indicate that customers have successfully added an item to their shopping baskets and usher them towards the checkout.

While this may seem a bit niche, there is a value to providing some sort of feedback to the customer and also to indicate the position of the cart/basket link. (For now, I'm going to call it the 'basket add').

So, here are some examples of how ecommerce sites are doing this...

The 'basket add'

For an ecommerce site, there are two main objectives here:

Move the shopper nearer to completing their purchase, which often means sending them to the basket page.
Move the shopper to buy other items, which is best served by keeping visitors on the product page with a strong notification of the 'basket add'.

According to ecommerce consultant Dan Barker:

Which of those you favour more heavily depends on whether you are more focused on customer acquisition or on overall revenue, whether your product range lends itself to multiple product orders, and on whether the risk of trying to nudge someone to buy extra items and increase order value outweighs the risk they may not complete the order at all.

Oddly, most sites don't do this particularly well. Most simply leave users on the product page itself, giving them a notification that the basket add has taken place but not offering them any logical next step.

So how should they do this? According to Digital Juggler's James Gurd:

There isn't a consistent way to do this, the key UX/UI good practice is to ensure the change is clearly visible and that the state change is noticeable to people with visual impairment, so colour change alone is not enough.
I'd say effective options are displaying text confirming that an item has been added, or rolling down a 'mini-basket' to show current contents which then disappears after a few seconds, or directing users straight to the main basket page.

Good and bad practices for 'basket adds'

Not much indication of change

This example comes from Dan and though there is a strip of green highlighted text to indicate that items have been added, there is room for improvement.

The issues with this approach:

No highlight of where the basket itself is.
It's easy to miss the basket add portion. It's not in a very logical place, and the 'add to basket' button is still in its normal state.
No nudge to complete checkout or to move on to any other products.
It doesn't tell you the total value of your basket, you have to look top-right for that.

Taking customers towards checkout

No subtle indicators for Amazon. Instead, the site nudges you towards the checkout, and there's no doubt you've added something to your basket.

This takes people away from the product page, but it isn't the basket.

It's an intermediate page where people are pushed in the direction of checkout, while still leaving the option of more shopping open.

This is interesting for several reasons:

It moves the shopper away from the product page.
Clearly confirms what has been added to basket, how much it cost, and the complete value of the basket.
Amazon retains the top navigation here, making it easier for 'continue shopping' fans to simply navigate elsewhere.
The page also nudges you heavily to proceed direct to checkout, but has the prominent secondary option to 'edit your basket' (this takes you to the basket page).
It tries to cross-sell 'services' (credit card) alongside this.
It also tries to cross-sell products using four different algorithms: 'frequently bought together', 'customer who bought also bought', 'highly rated items', 'customers who viewed this bought'. This is basically an ecommerce version of the 'Percy Pig maze' they put before the checkouts in Marks & Spencer.

Dan Barker:

Alongside those six functions of the page, it's worth noting how testable it is. Everything is very modular, and could be included/excluded/used with different creative. And, of course, by being modular it is also really easy for them to personalise it by showing/hiding particular blocks, or including different content based on what they know about you.

The third way...

There is a third option, which mixes some of the best features of the previous two approaches, from Tredz.

So what's good about this approach?

It's clear the basket add has taken place, and what has been added.

It nudges prominently to 'Checkout Now', but also gives the secondary option to 'continue shopping'.

It's a modular overlay on the page too, which means the site could test other things (eg. showing cross-sell/up-sell options like Amazon, while still keeping users on the product page).

This approach could be varied depending on the particular product that had been added. For instance, it may be better to nudge a customer buying a £2,000 bike straight to checkout.

Examples of the 'basket add' in the wild...

ASOS

Add an item to the basket (and let's be clear, I don't possess or need a onesie) and a 'preview' of the shopping basket and its contents appears on the product page, then vanishes after a few seconds:

(NB: The eagle-eyed Econsultancy reader may notice that this is the same dude who performs a little dance on the product video in this post)

This is useful for customers, as it provides feedback that they have indeed added the item to their basket and also indicates where they can head to complete the purchase.

However, it doesn't provide a continue shopping option, which may or may not matter.

Uniqlo

After adding to basket, a little strip appears to indicate the action taken, and to prompt the shopper to view their bag.

However, if you move elsewhere in the site, the indicator disappears, but the shopping basket icon doesn't indicate that anything has been added:

John Lewis

JL tells the shopper that they have added items with a box that appears under the call to action, while the basket link on the top right changes colour. A neat example.

Tesco

Tesco indicates items added to basket with the help of a change of colour to orange, thus gently pushing customers towards checkout.

Like Amazon, it takes users away from the product page and begins to cross-sell, though it keeps the top navigation and a continue shopping link.

Webtogs

This site has opted for a lightbox, which does have the advantage of forcing users to make a clear decision over heading to the checkout or continuing to shop:

Whistles

Interesting approach from Whistles, which circles the basket link to highlight it. This remains in place even as you move around the site, making it a useful reminder.

The call to action also changes, with a link to go to checkout, or 'add to your bag' so you can continue shopping.

What works best on your site? Have you tested different versions of the 'basket add'? What should we call it if not basket add? Please let me know below...