42244

econsultancy_xml

By the time a customer is ready to hit the 'proceed to checkout' button, they need to have a clear understanding of the following: <ul> <li> The products they are buying. </li> <li> How much they will cost. </li> <li> How and when they will be delivered. </li> <li> Payment methods and security. </li> <li> Terms and conditions. </li> </ul> Ideally, a shopping basket should give customers all of this information, making it easy to access and review their order. Other desirable features include: <ul> <li> A mini-basket on every page so customers can easily see what they have added. </li> <li> Clear controls to update the contents of the basket. </li> <li> Clear navigation away from the basket (continue shopping / go to checkout). </li> </ul> So, how many of these major retailers include these features in their shopping baskets? Amazon does some of this well, providing a clear summary of product and price, links to information about delivery options pricing and T&Cs, as well as clear tools to edit and update the basket: <img alt="Amazon shopping basket" src="http://farm4.static.flickr.com/3100/2655636384_267911b1dc_o.jpg" /> However, it doesn't provide a mini basketfor quick reference, and to navigate away from the basket you need to click on another section of the site as there is no 'continue shopping' link. What Amazon does well is to provide a nice clear checkout button, and saves the contents of the basket for 90 days so customers can return later and pick up where they left off. Next's shopping basket is more basic. It does the job of showing products and prices, as well as providing a 'shop more' link, but it fails on the other points: <img alt="Next shopping basket" src="http://farm4.static.flickr.com/3285/2655755010_50d6219e53_o.jpg" /> While the delivery charges are stated, there is no information on times and dates, payment methods or other T&Cs like privacy and returns policies. Navigation away from the basket can be confusing as well, despite the 'shop more' link. For example, if I have added items to the basket and select 'flowers and wine' from the navigation bar, I get this message: <img alt="Next abandon order" src="http://farm4.static.flickr.com/3031/2654930057_e063d64594_o.jpg" /> HMV provides a better example of how it should be done. Once you have added items, you are then shown a mini basket on each page of the site, which links to the full size one: <img alt="" src="http://farm4.static.flickr.com/3278/2654995647_dac591242c_o.jpg" /> The main shopping basket page contains most of the elements listed above; payment methods, T&Cs, navigation away from the basket and controls to update the contents are all there: <img alt="HMV shopping basket" src="http://farm4.static.flickr.com/3266/2654995169_51e1a22cf1_o.jpg" /> There are also some tips on how to use the shopping basket for the uninitiated, though one important omission is information on delivery dates and times, for which you need to enter the checkout. For a successful online retailer, Tesco's shopping basket is pretty sparse, and lacks information that would be useful to shoppers. <img alt="Tesco shopping basket" src="http://farm4.static.flickr.com/3025/2655171611_5f5dc4a9df_o.jpg" /> Tesco has only listed the products and price; for delivery charges you need to enter the checkout, though there is a small link at the bottom of the page. Can you point us at any other retailers that have perfected the art of basket design? Which ones are innovating in this space? Please leave your suggestions below... Related research: <a href="../../../publications/online-retail-checkout-2007/" title="Online Retail 2007: Checkout Special">Online Retail 2007: Checkout Special</a> <a href="../../../publications/user-experience-roundtable-briefing-may-2008/">User Experience Roundtable Briefing - May 2008</a> Related stories: <a href="../../../news-blog/364239/warning-i-can-t-find-your-checkout.html?keywords=checkout">Warning: I can't find your checkout!</a> <a href="../../../news-blog/365079/how-to-plug-leaks-in-your-shopping-basket.html?keywords=checkout">How to plug leaks in your shopping basket </a>

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <Paragraph>By the time a customer is ready to hit the <Quote>'proceed to checkout'</Quote> button, they need to have a clear understanding of the following: </Paragraph> <List Type="Disc"> <ListItem> <Emphasis>The products they are buying. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>How much they will cost. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>How and when they will be delivered. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>Payment methods and security. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>Terms and conditions.</Emphasis> </ListItem> </List> <Paragraph>Ideally, a shopping basket should give customers all of this information, making it easy to access and review their order.<LineBreak /></Paragraph> <Paragraph>Other desirable features include: </Paragraph> <List Type="Disc"> <ListItem> <Emphasis>A mini-basket on every page so customers can easily see what they have added. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>Clear controls to update the contents of the basket. <LineBreak /></Emphasis> </ListItem> <ListItem> <Emphasis>Clear navigation away from the basket (continue shopping / go to checkout).</Emphasis> </ListItem> </List> <Paragraph> So, how many of these major retailers include these features in their shopping baskets? </Paragraph> <Paragraph> <Emphasis>Amazon</Emphasis> does some of this well, providing a clear summary of product and price, links to information about delivery options pricing and T&Cs, as well as clear tools to edit and update the basket: </Paragraph> <Paragraph Align="Center"> <Image AlternateText="Amazon shopping basket" Source="http://farm4.static.flickr.com/3100/2655636384_267911b1dc_o.jpg"> </Image> </Paragraph> <Paragraph>However, it doesn't provide a mini basket<Emphasis></Emphasis>for quick reference, and to navigate away from the basket you need to click on another section of the site as there is no <Quote>'continue shopping' </Quote>link. </Paragraph> <Paragraph>What Amazon does well is to provide a nice clear checkout button, and saves the contents of the basket for 90 days so customers can return later and pick up where they left off. </Paragraph> <Paragraph> <Emphasis>Next's</Emphasis> shopping basket is more basic. It does the job of showing products and prices, as well as providing a 'shop more' link, but it fails on the other points: </Paragraph> <Paragraph Align="Center"> <Image AlternateText="Next shopping basket" Source="http://farm4.static.flickr.com/3285/2655755010_50d6219e53_o.jpg"> </Image> </Paragraph> <Paragraph>While the delivery charges are stated, there is no information on times and dates, payment methods or other T&Cs like privacy and returns policies. </Paragraph> <Paragraph>Navigation away from the basket can be confusing as well, despite the <Quote>'shop more' </Quote>link. For example, if I have added items to the basket and select 'flowers and wine' from the navigation bar, I get this message: </Paragraph> <Paragraph Align="Center"> <Image AlternateText="Next abandon order" Source="http://farm4.static.flickr.com/3031/2654930057_e063d64594_o.jpg"> </Image> </Paragraph> <Paragraph> <Emphasis>HMV</Emphasis> provides a better example of how it should be done. Once you have added items, you are then shown a mini basket on each page of the site, which links to the full size one: <LineBreak /></Paragraph> <Paragraph> <Image Source="http://farm4.static.flickr.com/3278/2654995647_dac591242c_o.jpg"> </Image> <LineBreak /> </Paragraph> <Paragraph>The main shopping basket page contains most of the elements listed above; payment methods, T&Cs, navigation away from the basket and controls to update the contents are all there:</Paragraph> <Paragraph> <Image AlternateText="HMV shopping basket" Source="http://farm4.static.flickr.com/3266/2654995169_51e1a22cf1_o.jpg"> </Image> <LineBreak /> </Paragraph> <Paragraph>There are also some tips on how to use the shopping basket for the uninitiated, though one important omission is information on delivery dates and times, for which you need to enter the checkout. <LineBreak /></Paragraph> <Paragraph>For a successful online retailer, Tesco's shopping basket is pretty sparse, and lacks information that would be useful to shoppers. <LineBreak /></Paragraph> <Paragraph> <Image AlternateText="Tesco shopping basket" Source="http://farm4.static.flickr.com/3025/2655171611_5f5dc4a9df_o.jpg"> </Image> </Paragraph> <Paragraph>Tesco has only listed the products and price; for delivery charges you need to enter the checkout, though there is a small link at the bottom of the page. </Paragraph> <Paragraph>Can you point us at any other retailers that have perfected the art of basket design? Which ones are innovating in this space? Please leave your suggestions below...<LineBreak /></Paragraph> <Paragraph> <Quote> </Quote> <Emphasis>Related research:</Emphasis> <LineBreak /> <Link URL="../../../publications/online-retail-checkout-2007/" Title="Online Retail 2007: Checkout Special" Window="Self">Online Retail 2007: Checkout Special</Link> <LineBreak /> <Link URL="../../../publications/user-experience-roundtable-briefing-may-2008/" Window="Self">User Experience Roundtable Briefing - May 2008</Link> <LineBreak /> </Paragraph> <Paragraph> <Emphasis>Related stories:</Emphasis> <LineBreak /> <Link URL="../../../news-blog/364239/warning-i-can-t-find-your-checkout.html?keywords=checkout" Window="Self">Warning: I can't find your checkout!</Link> <LineBreak /> <Link URL="../../../news-blog/365079/how-to-plug-leaks-in-your-shopping-basket.html?keywords=checkout" Window="Self">How to plug leaks in your shopping basket </Link> </Paragraph> </FormattedContent>

2008-07-10T11:45:00+01:00

econsultancy_xml

Shopping baskets are a key part of the design of an e-commerce site, forming a stepping stone between finding products and entering the checkout process. They also provide a useful way to review the products selected for purchasing, and offer site owners a chance to reassure customers about security and payment options. Let's look at some examples of basket design used by popular online retailers, to see what works, and what doesn't...

<FormattedContent xmlns="http://www.e-consultancy.com/schema/formattedContent/"> <Emphasis>Shopping baskets are a key part of the design of an e-commerce site, forming a stepping stone between finding products and entering the checkout process.</Emphasis> <Paragraph>They also provide a useful way to review the products selected for purchasing, and offer site owners a chance to reassure customers about security and payment options. </Paragraph> <Paragraph> Let's look at some examples of basket design used by popular online retailers, to see what works, and what doesn't...</Paragraph> </FormattedContent>

false 2589

Refer also to Econsultancy's <a href="http://econsultancy.com/reports/user-experience-buyers-guide">User Experience Buyer's Guide</a> and <a href="http://econsultancy.com/reports/effective-web-design-best-practice-guide">Effective Web Design Guide</a> for more information about best practice in these areas.

365951

What should you have in your shopping basket? false

2008-07-15T10:40:00+01:00

what-should-you-have-in-your-shopping-basket

2009-04-29T21:49:22+01:00

2009-10-13T09:42:48+01:00

752