{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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: 

  1. Move the shopper nearer to completing their purchase, which often means sending them to the basket page.
  2. 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. 

RUSH add to basket

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: 

Webtogs add to basket

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. 

Pen Heaven

Like Webtogs, this approach from Pen Heaven makes the basket add clear, as well as providing clear options for checkout and continuing shopping. 

The cross-sell options work well too. According to Greg Power, who worked on this: 

From all the (cross-sell) impressions generated, we saw a 7.71% CTR and a subsequent 8.52% conversion rate in directly-attributed sales. Those stats are specifically for the lightbox implementation in August, stats differ for the other cross-sell implementations.

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

Graham Charlton

Published 24 September, 2013 by Graham Charlton

Graham Charlton is the former Editor-in-Chief at Econsultancy. Follow him on Twitter or connect via Linkedin or Google+

2565 more posts from this author

Comments (8)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Mike Warwick, Head of Online at Joseph Joseph

One key consideration not discussed is how add to basket should work on a responsive site? A lightbox works great on a desktop site, but what would happen once in a tablet or mobile viewpoint, how would the behaviour change?

almost 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Mike Hi - I'll look at this in a follow up post.

almost 3 years ago

Avatar-blank-50x50

Chris Thomas

Some great examples here, as well as making it clearer when something has been added to the basket and important consideration that is often overlooked is the number of steps it takes to complete the purchase. Too many and customers can drop out.

almost 3 years ago

Avatar-blank-50x50

Mark Bolitho, New Business Director - Ecommerce at more2

Nice subject Graham.

Just like to pitch in with the assertion that I think it's important that a dialogue box doesn't just fade away on its own. I think it's best the user has to interact with it to either continue shopping, go to basket or checkout.

@Mike: Interesting point, look forward to Graham's follow-up.

Cheers,
Mark.

almost 3 years ago

Avatar-blank-50x50

Deri Jones, CEO at SciVisum.co.uk

I'm with Mark on this one.

There's too many things that can distract the shopper so they don't truly see the 'ordered' box before it has already faded.

almost 3 years ago

Graham Charlton

Graham Charlton, Editor in Chief at ClickZ Global

@Mark @Deri

It seems the lightbox pop-up, as used by Webtogs and Tredz here, is one of the better options.

I was chatting to @gregpower on Twitter, and they had used this model with some success: bit.ly/1anK4LY

almost 3 years ago

Avatar-blank-50x50

Mark Bolitho, New Business Director - Ecommerce at more2

Yes, I helped Greg replatform last year and we spoke about it. Originally the dev team had set things up so the user was taken directly in to the checkout, bypassing the basket altogether!

We didn't like that at all and switched back. As on Pen Heaven, I think that light box is a fantastic place for cross sells too.

almost 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.