shopping cart (basket) design pattern

9 Oct 2009 - 6:03am
11 weeks ago
7 replies
3592 reads
Sam Menter
2008

(apologies if this appears twice on the list)

Hi all

Working on a project where a client is keen to implement a shopping
cart design as per: http://www.houseoffraser.co.uk/ . I think there
are probably issues with the attached basket design, namely that it
breaks the expected behaviour of 'buy'.

Standard interaction = click buy, go into cart.
House of Fraser interaction = click buy, ajax magic adds item to
basket at top of page, then user needs to click checkout up by basket.

I'm guessing the intention is to encourage users to continue shopping
and only have to go to basket when they check out, but I'm worried
that messing with the standard design pattern will lose the client
sales.

Jared - I'm sure you have a strong opinion on this, would love to hear
it : ) Have you done any testing on this type of cart?

Thanks all
Sam

--
New site: www.pixelthread.co.uk

Pixel Thread Ltd
Spike Design,
133 Cumberland Road,
Bristol, BS1 6UX

Tel: 07985 979 852

Comments

9 Oct 2009 - 7:29am
Harry Brignull
2004

You're right - if you take a user direct to the checkout, you are
effectively encouraging them to buy just one item.
If, when they add the item to the basket, you keep them on the shopping page
in some way (doesn't have to be ajax), then you are making it much easier
for them to continue adding other items to their basket.

The danger is in the details - if you don't emphasise what's happened (e.g.
via a yellow fade) and you don't make the call to action strong enough, then
they could sit there thinking "what do I do now?" and your conversion rate
could suffer.

You imply that direct-to-checkout is a more "standard" design pattern than
stay-on-page. I don't think this is true - AFAIK people use the design
pattern that's most suited to the likely shopping behaviour. On amazon,
people are likely to want to buy multiple items, and so the site supports
that behavior. On, say, concert ticket sites, you are probably only going to
buy tickets for one event, so they immediately funnel you into the upsell /
checkout process.

I'd be interested to know what others have to say on this...

Harry

9 Oct 2009 - 7:32am
William Hudson
2009

Sam -

I am currently benchmarking US clothing web sites. Many use Ajax to
inform users that the item has been added to their basket with the
option of choosing to go straight to the checkout or continue shopping.
(In fact, I discuss this and related issues in my Ajax Design and
Usability course in Las Vegas next week and in Berlin next month. See
http://www.nngroup.com/events/)

Regards,

William Hudson
Syntagm Ltd
Design for Usability
UK 01235-522859
World +44-1235-522859
US Toll Free 1-866-SYNTAGM
mailto:william.hudson at syntagm.co.uk
http://www.syntagm.co.uk
skype:williamhudsonskype

Syntagm is a limited company registered in England and Wales (1985).
Registered number: 1895345. Registered office: 10 Oxford Road, Abingdon
OX14 2DS.

Confused about dates in interaction design? See our new study (free):
http://www.syntagm.co.uk/design/datesstudy.htm

12 UK mobile phone e-commerce sites compared! Buy the report:
http://www.syntagm.co.uk/design/uxbench.shtml

Courses in card sorting and Ajax interaction design - Las Vegas and
Berlin:
http://www.nngroup.com/events/

> -----Original Message-----
> From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-
> bounces at lists.interactiondesigners.com] On Behalf Of Sam Menter
> Sent: 09 October 2009 12:04 PM
> To: discuss at ixda.org
> Subject: [IxDA Discuss] shopping cart (basket) design pattern
>
> (apologies if this appears twice on the list)
>
> Hi all
>
> Working on a project where a client is keen to implement a shopping
> cart design ...

9 Oct 2009 - 7:48am
William Hudson
2009

Sam -

Sure, go to www.jcpenny.com and add something to your shopping bag (all
US clothing retailers appear to have shopping bags rather than
baskets!).

Regards,

William

> -----Original Message-----
> From: Sam Menter [mailto:sam at pixelthread.co.uk]
> Sent: 09 October 2009 1:44 PM
> To: William Hudson
> Cc: discuss at ixda.org
> Subject: Re: [IxDA Discuss] shopping cart (basket) design pattern
>
> Great, thanks for the info - can you provide an example?
>
> I had been considering a Buy Now button that on mouseover gives the
> user the option of Checkout or Add to cart and continue shopping...
> Feels a bit clunky, really I want one button, one click but I guess
> one size desn't fit all...
>
> 2009/10/9 William Hudson <william.hudson at syntagm.co.uk>:
> > Sam -
> >
> > I am currently benchmarking US clothing web sites. Many use Ajax to
> > inform users that the item has been added to their basket with the
> > option of choosing to go straight to the checkout or continue
> shopping.
> > (In fact, I discuss this and related issues in my Ajax Design and
> > Usability course in Las Vegas next week and in Berlin next month.
See
> > http://www.nngroup.com/events/)
> >
> > Regards,
> >
> > William Hudson
> > Syntagm Ltd
> > Design for Usability
> > UK 01235-522859
> > World +44-1235-522859
> > US Toll Free 1-866-SYNTAGM
> > mailto:william.hudson at syntagm.co.uk
> > http://www.syntagm.co.uk
> > skype:williamhudsonskype
> >
> > Syntagm is a limited company registered in England and Wales (1985).
> > Registered number: 1895345. Registered office: 10 Oxford Road,
> Abingdon
> > OX14 2DS.
> >
> > Confused about dates in interaction design? See our new study
(free):
> > http://www.syntagm.co.uk/design/datesstudy.htm
> >
> > 12 UK mobile phone e-commerce sites compared! Buy the report:
> > http://www.syntagm.co.uk/design/uxbench.shtml
> >
> > Courses in card sorting and Ajax interaction design - Las Vegas and
> > Berlin:
> > http://www.nngroup.com/events/
> >
> >
> >> -----Original Message-----
> >> From: discuss-bounces at lists.interactiondesigners.com
> [mailto:discuss-
> >> bounces at lists.interactiondesigners.com] On Behalf Of Sam Menter
> >> Sent: 09 October 2009 12:04 PM
> >> To: discuss at ixda.org
> >> Subject: [IxDA Discuss] shopping cart (basket) design pattern
> >>
> >> (apologies if this appears twice on the list)
> >>
> >> Hi all
> >>
> >> Working on a project where a client is keen to implement a shopping
> >> cart design ...
> >
>
>
>
> --
> New site: www.pixelthread.co.uk
>
> Pixel Thread Ltd
> Spike Design,
> 133 Cumberland Road,
> Bristol, BS1 6UX
>
> Tel: 07985 979 852

9 Oct 2009 - 8:09am
Amy Silvers
2007

We use both behaviors on Audible.com. If the customer is on a page
with multiple products--for example, a category page or a wish
list--adding an item to the cart triggers an AJAX notification and
keeps the customer on the page. If they're on a detail page for a
single item, adding that item to the cart takes them to the cart
page. This supports the ways that our customers tend to shop, and it
hasn't negatively affected sales at all.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=46550

9 Oct 2009 - 9:25am
Harry Brignull
2004

This article seems relevant to your question, Sam -
http://www.getelastic.com/continue-shopping-means-what/
<http://www.getelastic.com/continue-shopping-means-what/>"You’ve added your
item to your cart, but you’re not finished shopping. So, you look for the
“Continue Shopping” link to thrust you back to…to what? The product page?
The category page? The *home* page?...."

23 Oct 2009 - 8:04am
Jared M. Spool
2003

On Oct 9, 2009, at 7:03 AM, Sam Menter wrote:

> Jared - I'm sure you have a strong opinion on this, would love to hear
> it : ) Have you done any testing on this type of cart?

Hi Sam,

I have tested sites that look like this. There's a whole bunch of
things happening here, some good and some I think probably cause
problems.

I think that leaving the shopper on the page with their product makes
sense, particularly since there's strong lateral links to other
products on the page. Going to a page that just has a cart will do
what Harry said, encourage the shopper to only purchase the one item.
If the goal is to increase order size, you probably don't want to go
to the cart.

A third alternative is to do what Amazon does and give a new gallery
page that contains likely items the shopper might also want. However,
this only really works if you've got an analytics engine that can
truly predict highly-likely next purchases. If you just post random
items, it's likely to be the same as posting nothing. Amazon is good
at this. Most sites don't have the data or the analysis tools to pull
this off.

Another example of a site that stays on the page really well is
LandsEnd.com. When you add a product to their shopping bag, it pops up
a layered dialog that asks you if you want to checkout or keep
shopping. In our studies, this has performed really well and does tend
to increase order size.

A big difference between the Lands' End and House of Fraser is that
Lands' End is modal, while House of Fraser is not. Both pop up a
message saying that you can add to the cart, but the House of Fraser
message disappears quite quickly. A shopper who isn't paying close
attention could miss the interaction. (There's also a quick animation
of the item adding to the upper left cart summary, but this could also
easily be missed.)

In our studies, shoppers didn't seem flustered by having to dismiss
the dialog (either by pressing Keep Shopping or Shopping bag). Keep in
mind, that on the Lands' End site, a common shopping behavior is to
get the same product with different colors. (Men, for example, once
they find a style of pants they like, will order different colors in
the same size.) This design is tuned for that behavior. You'll want to
tune your design for the behavior of your shoppers, which will vary
based on the products you're selling and the audience you're selling to.

There's another behavior on House of Fraser that I wouldn't emulate:
If the shopper choose a product, but leaves out a selector, say size,
the Add to Cart button is disabled without any visible indication.
While this makes sense on a technical level (you need size to
purchase), I'd bet that we'd see users not understanding why they
can't continue, as the only error message appears in a tooltip. Either
there should be a message near the button (and it should look
unavailable) or it should pop up a message.

(This is a place where I could see improving the Lands' End
experience: If you don't select the size and press Add to Bag, it pops
up an error message telling you that you need to select a size.
However, I'm thinking it would be even better if it provided the pull-
down for size in that error dialog. Why make the user dismiss the
error and hunt for the size selector they obviously missed the first
time?)

The other thing I would look at closely before emulating House of
Fraser's design is their choice of buttons to view the bag & checkout.
It's pretty subtle in the current design. I wonder if shoppers have to
hunt for it a little too much. I would think that a talented visual
designer (which they obviously have access to) could come up with
something better than a link to start the checkout process. If I saw
shoppers stalling on this, I'd suggest making it a little more
visually obvious.

In general, I think the House of Fraser design is ok. But, if you
watch people shop as often as I have, you'll learn that the devil is
in the details on these things. It's very dependent on the shopping
context, the types of products being sold, and the nature of the
store. What works well for one site will fail miserably for another,
because one of those factors has subtly changed.

Hope that helps,

Jared

Jared M. Spool
User Interface Engineering
510 Turnpike St., Suite 102, North Andover, MA 01845
e: jspool at uie.com p: +1 978 327 5561
http://uie.com Blog: http://uie.com/brainsparks Twitter: @jmspool

25 Oct 2009 - 5:21am
Sam Menter
2008

Thanks Jared - really useful stuff.

The project I'm working on has high value items with associated lower value
items, so the upsell step between add to basket and checkout should work
well.

I've also been running some research interviews around our prototype and
found that people are pleased to be offered associated items prior to
checkout and don't see it as a hard sell.

I guess context is everything - it's critical that the upsell is very
focused on the main item being purchased. Fortunately this is fairly easy in
this case.

All the best,
Sam

--
www.pixelthread.co.uk

Pixel Thread Ltd
Spike Design,
133 Cumberland Road,
Bristol, BS1 6UX

Tel: 07985 979 852

Syndicate content Get the feed