The Design of Sites: A Pattern Language for the web

Transcription

1 62. SHOPPING CART [Graphic: Encouraging E-Commerce Icon] Your customers need a way of purchasing multiple items in one transaction. The Shopping Cart is a common metaphor used for letting customers keep track of what they want before they finalize the purchase. Pattern Type: Design Phases: Encouraging E-Commerce Discovery Exploration Refinement Production Implementation Maintenance and Evaluation e-commerce, shopping Keywords: Tools: Effort Required: Pros: Common metaphor used for online shopping Cons: Team: Database Designer HTML Programmer Application Programmer E-merchandising manager Marketing Manager Security Consultant Related Patterns: INTERNATIONALIZATION (##) PRODUCT DETAIL (61) CHECKOUT (63) CROSS-SELLING (77) Also See: Solution Diagram Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-5

2 Figure Shopping carts are a well-developed and common pattern for buying things online. ( The Shopping Cart is a metaphor for online purchases that leverages our existing understanding of how real-world purchases work. Shopping Carts provide detailed information about each product to be purchased, including the name of the item, quantity to purchase, availability, and price. The Shopping Cart is also the first part of the CHECKOUT (63) process. From the Shopping Cart, customers can go on to finalize their purchase. Below, we describe some ways to make the most of your shopping carts. 1. Make the shopping cart available on each page. The shopping cart is one of the most important features of any ecommerce website, as it lets your customers keep track of what they want to buy. For this reason, you should let customers get to the shopping cart from any page in your website. Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-6

3 Figure Each product page should have a clear way of adding the product to the shopping cart. Note how Amazon.com uses CUSTOM 3D ACTION BUTTONS (4) to make it look like you can push down on the Add to Shopping Cart button. ( 2. Make it easy to add items to the shopping cart from product pages. You might think that this is obvious, but you would be surprised at how many websites make this a difficult task! Amazon.com does this right, as shown in the detailed product page in Figure On the right of the page is a CUSTOM 3D ACTION BUTTON (4) that draws the eye. Also note the label. Besides saying, Add to Shopping Cart, it even provides a reassurance, saying (you can always remove it later). 3. Provide detailed information on each item in the shopping cart. Each item in the shopping cart should have the following: The name of the item to be purchased and a link to a detailed view of the item The quantity to be purchased and a way of modifying the quantity A short description of the item (e.g. book, CD, software, etc.) The availability of the item (this is especially important during the holiday season) The price of each item A way of removing the item from the shopping cart 4. Also provide information about all of the items in the shopping cart. Shopping carts should also provide information about the following: Shipping and handling costs (if known at this point) Any applicable taxes Any other charges that contribute to the total cost Subtotals 5. Have a link to go to the checkout. The checkout is a short process for purchasing all of the items in the shopping cart. Amazon.com puts a CUSTOM 3D ACTION BUTTON (4) in a prominent location making it clear how to check out (see Figure 62-1). The checkout process is illustrated in more detail in the CHECKOUT (63) pattern. Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-7

4 6. Have a link to let people go back to shopping. One source of confusion is what to do after adding something to a shopping cart. You can help your customers by making clear what their options are (beyond hitting the Back button, of course). In the Amazon.com example in Figure 62-2, there is a CUSTOM 3D ACTION BUTTON (4) labeled Continue Shopping that lets customers go back to the Amazon s home page. 7. Don t let unavailable things be added to the shopping cart. It can be a frustrating experience, to be shopping and adding things to your shopping cart, and not being told that the item you want is not available until the very end. The simple way to fix this is to make the availability clear on the product page, and not have an Add to Shopping Cart button for products that can t be processed and shipped in a reasonable amount of time. Figure CDNow lets customers save things in a wish list, helping you to remember what things you would like to purchase. The wish list also makes it easy to move things from the wish list to the shopping cart. ( 8. Let customers keep shopping carts around for a while. One serious problem we ve seen on some ecommerce websites is that shopping carts become empty if the customer doesn t do anything on the website for a while. There are dozens of plausible explanations beyond the customer abandoned the shopping cart. They could be comparison shopping on other websites (yes, it happens). They could be taking a lunch Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-8

5 break. They could even be talking to someone next to them. The point is clear, though: shopping carts should not be automatically emptied until after a reasonable time. So how long is reasonable? The longest we have seen is Amazon.com, which lets customers save things in a Saved Items section, which is kept for 90 days. Another approach that has sprung up is the Wish List, which is just a list of items that you would like to own. CDNow has a great wish list that can also be shared with friends and family (see Figure 62-4). Clearly, wish lists aren t very useful if they only stay around for 90 days. It s best if an item in a wish list remains until it has been purchased or explicitly removed. 9. Consider having cross-selling or up-selling options. Cross-selling consists of trying to sell products related to ones the customer already wants to purchase. For example, printers also need paper and toner. Up-selling consists of trying to sell products that are more expensive alternatives of the ones the customer already wants to purchase. For example, if your customer has a certain kind of cell phone in her shopping cart, you could recommend what cell phones are available in the next price level. You have to be careful when cross-selling and up-selling, though, because it s easy to do these wrong. Keep the center of attention on the products your customer wants, and make the cross-selling and up-selling recommendations secondary. Remember, on an ecommerce website, your main goals are to help your customer close the sale and to provide a positive customer experience so that they become repeat customers. Everything else is extra. Figure Shopping carts can also provide extra information. CDNow s shopping cart tells customers how many items are in the cart. ( ) Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-9

6 Figure Staples provides a mini-shopping cart on the right side of each page, which has a link to the full shopping cart. ( ). 10. Decide what information to provide with the shopping cart link. Links to shopping carts can also contain useful information. For example, Figure 62-5 shows how CDNow displays the number of items in a customer s shopping cart. Staples takes a slightly unconventional approach by having a mini-shopping cart on each page in their website (see Figure 62-6). This approach gives constant feedback to customers as to what they have in their shopping carts, but it also takes up a fair amount of screen real estate. It s not clear yet if this approach will take off, so the best thing to do is to test it out with your customers and see if it works better and if they like it better. Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-10

7 Figure Be aware of the needs and customs of international audiences. In the example above, note that it s a Shopping Basket as opposed to a Shopping Cart, since many people in Europe use baskets and not carts. ( 11. Be aware of local customs and terms when serving international audiences. Here s a simple example: shopping carts aren t always used in other countries. If you take a look at Amazon.com s website in England, you ll see that they use a Shopping Basket metaphor, something more easily understood in England (See Figure 62-7). These issues are discussed in more detail in the CHECKOUT (63) and INTERNATIONALIZATION (##) patterns. Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-11

8 63. CHECKOUT [Graphic: Encouraging E-Commerce Icon] You need a simple and reliable way for customers to finalize purchases. The Checkout pattern describes a five-step process that minimizes problems, smoothing the way to a successful sale. Pattern Type: Design Phases: Encouraging E-Commerce Discovery Exploration Refinement Production Implementation Maintenance and Evaluation e-commerce, shopping, checkout Keywords: Tools: Effort Required: Pros: Minimal and streamlined checkout process Cons: Team: Information Architect Database Designer HTML Programmer Application Programmer E-merchandising manager Marketing Manager Legal Counsel Security Consultant Related Patterns: INTERNATIONALIZATION (##) SHOPPING CART (62) SIGN-IN / NEW ACCOUNT (64) BILLING / SHIPPING ADDRESS SELECTION (65) CREDIT CARD ENTRY (66) ORDER CONFIRMATION (67) THANK YOU FOR SHOPPING (68) ORDER TRACKING (69) STORING SHIPPING ADDRESSES (71) STORING CREDIT CARDS (72) STORING PERSONAL PREFERENCES (73) Also See: Solution Diagram Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-12

9 Figure The checkout process has evolved into a specific five-step process: the Shopping Cart, Sign- In, Shipping, Payment, and Confirmation. Each part groups together related pieces of information needed before the checkout is complete. The checkout is one of the key pieces of any ecommerce website. Without a simple and straightforward checkout, ecommerce websites risk losing customers just as they are about to purchase products. This pattern is an overview of the entire checkout process. We have broken up the checkout process into five separate steps. Below we give a broad description of each step, with specific details contained in separate patterns. Note that there is not necessarily a one-to-one mapping between each of these steps and a web page. In other words, even though we outline five steps below, you may find that fewer or more web pages works better for your customers. Step 1 Shopping Cart The Shopping Cart stores all of the items to be purchased. The Shopping Cart provides detailed information about each product to be purchased, including quantity to purchase, availability, and price. Customers can choose to proceed to the rest of the checkout process from the Shopping Cart. More information can be found in the SHOPPING CART (62) pattern. Step 2 Sign-In The goal of the Sign-In step is to verify the identity of the customer. This step is useful if the website stores personal information, such as shipping address and credit card numbers. However, you may also need some way of sending passwords to returning customers, in case they have forgotten it. If your customer is creating a new account, be sure to minimize the amount of information needed. Many people balk and abandon their shopping cart when they see a long list of information that really isn t needed. For example, do you really need someone s age or gender to let them buy your products? At any rate, see the SIGN-IN / NEW ACCOUNT (64) pattern for more details. Step 3 Shipping The Shipping step allows your customers to choose the shipping address or addresses, the shipping method, any gift-wrapping options, and any special shipping instructions. Address books are useful here, so that customers don t have to re-type anything. Another useful feature is to let your customers choose whether to ship all the items together or ship separately as items become available. Also, provide a way for your customers to specify special shipping instructions, such as leave on back porch or ship on September 1. Lastly, be sure that your website is clear on how much each shipping Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-13

10 method costs. Additional details are in the BILLING / SHIPPING ADDRESS SELECTION (65) and the STORING SHIPPING ADDRESSES (71) patterns. Step 4 Payment In the Payment step, customers can choose the payment method, such as check, credit card, debit card, money order, or gift certificate. Customers can also apply coupons here. Furthermore, since some people do not feel secure typing in a credit card number, a phone call option should be provided. At this point, the total price for purchasing the products and for shipping should already be settled and clear to the customer. Don t give them any nasty surprises! See the patterns on CREDIT CARD ENTRY (66) and STORING CREDIT CARDS (72) for more information. Step 5 Confirmation In this final step, customers verify that all of the options are correct before finalizing the purchase. Once the purchase is finalized, the website confirms the order, by providing a web page as a temporary receipt and by sending to the customer. For some businesses, it also makes sense to send postal mail confirmation (e.g. airline itineraries). Order tracking is also provided in both the web page and confirmation. More information is contained in the ORDER CONFIRMATION (67) and ORDER TRACKING (69) patterns. However, there s more to the checkout process than just these five steps. Here are some other tips for helping your customers to make that purchase. 1. Make it easy for your customers cancel or change an order at any time in the checkout before the final Confirmation step. This is just good business practice. However, be sure to preserve all of the information your customers have already typed in. This argument is re-iterated in the next point. 2. Don t have your customers type in anything twice. Although this is a general principle for website design, it s worth saying again: it s not fun typing in the same information, especially when you know you just typed it in. There are two common cases where some websites force customers to type in the same thing again. The first case is with addresses. If your customer has ever entered their address, your website should remember it. This is a pretty easy problem to solve if your website is using COOKIES (38). The second case is if the billing address for the credit card used is the same as the shipping address. This is also pretty easy to solve: have a checkbox that says My billing address is the same as the shipping address. 3. Streamline the checkout process for returning customers. This is really an extension of the previous point. You can also reduce the amount of text your customers have to enter by saving the information that they have provided, such as their name, their shipping address, their billing address, and their credit card number. This way, when they Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-14

11 return, the checkout process is greatly simplified. See the STORING SHIPPING ADDRESSES (71) pattern, the STORING CREDIT CARDS (72) pattern, and the STORING PERSONAL PREFERENCES (73) pattern. One feature that you should be aware of is Amazon.com s patented one-click purchase method 1. One-click lets customers make purchases by only specifying the address (the shipping method and payment method are automatically taken care of). As you can guess, this patent is at the center of a massive intellectual property debate going on in the digital world. However, until this debate is resolved, your only options are to license the oneclick approach from Amazon.com, or have the additional steps in the checkout process. 4. Don t distract customers with irrelevant links. Once customers have chosen to begin the checkout process from the Shopping Cart, don t provide extraneous links to things that don t make sense. You re about to make a sale, so don t divert your customers attention from this task! This means that you shouldn t have things like banner ads or recommended products in the Sign-In, Shipping, Payment, or Confirmation steps. 5. Be aware of INTERNATIONALIZATION (##) issues. Internationalization is an especially important concern as more and more people from many countries start using the web for ecommerce. In fact, Forrester Research has reported that by 2004, about 50% of all online sales will occur outside the United States, making internationalization an essential part of your website s design. Some of the things you need to think about include: The currency used for product prices The currency used for purchasing Units of measurement (e.g. pounds versus kilograms) Dates (e.g. does 9/2/2000 mean September 2nd or February 9th? A simple solution is to always use the month name, like Sep 2, 2000) International phone numbers and addresses (e.g. zip codes aren t used outside of the United States) Tariffs and customs are made clear (these should be taken care of for the customer where possible) Foreign trade laws (e.g. it may be illegal to ship certain items to certain locales) International sales taxes As you can see, there are a host of serious issues that must be resolved before you can successfully cater to an international audience. 6. Consider having a Frequently Asked Questions (FAQ) on buying online. A FAQ is just what the letters stand for: frequently asked questions. These are the questions that customers often ask. To save time, though, you can compile all of these questions into a single web page, and make it available under the help options on your website. Having a 1 Patent US Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-15

12 good FAQ can save a significant amount of time for new and returning customers, as well as reducing your helpdesk costs. Some common questions include: How do I order? How can I find what I m looking for? I can t remember my password, what do I do? How do I use my coupon? How do I use my gift certificate? Is it safe to use credit card? What forms of payment do you accept? What are your shipping options? How long will it take to get what I order? Do you ship internationally? Can I track my orders? How do I cancel an order after it s been submitted? How do I return a product? How can I contact your company? What is your privacy policy? 7. It s not over until your customer is satisfied. Keep in mind that the checkout is just one part of the entire customer experience, and that it s not over once your customers give you their credit card number and submit their order. No, on the contrary, you still have to make sure that ORDER TRACKING (69) is done correctly, that the order is shipped on time (as promised), that your website s helpdesk is well-prepared to handle any potential problems with the order, and lastly, that the purchased items are easy to return if your customer is unsatisfied. Draft Please do not redistribute Send comments to jasonh@cs.berkeley.edu 16-16