Fundamental Guidelines Of E-Commerce Checkout Design

Advertisement

Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, at least 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at 59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why do customers abandon their shopping cart so often? Is there some fundamental mistake that designers of e-commerce websites do very often? Are there any common guidelines or rules of thumbs that make it more difficult for our users to purchase products? And is there some meaningful way to improve the conversion rates for our products?

Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web users and conducted a usability study, focusing only on the checkout user experience, from “Cart” to “Completed order.” The study was conducted using the “think aloud” protocol and was documented by recording everything that happened on the computer screen. The behavior of the test subjects was then analyzed by scrutinizing these recordings at a later date.

Screenshot
The study has shown that it is often difficult to lead customers to the final step in the checkout process when the only thing left is to submit their credit card details.

The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.

In total, the test subjects were given more than 500 usability issues, ranging from being distracted by animated graphics to being thrown off course by an illogical checkout flow. These issues were then analyzed and distilled into 63 checkout usability guidelines in a report titled “E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelines from that report with you.

1. Your Checkout Process Should Be Completely Linear

Issue: Having steps within steps confuses and intimidates customers as it breaks with their mental model of a linear checkout.

One of the worst usability violations that we discovered in our testing was non-linear checkout processes. Websites with a non-linear checkout process left several of our test subjects confused and intimidated. At the time of testing, both Walmart and Zappos had a non-linear checkout process.

The typical way to “accidentally” end up with a non-linear checkout process is to create steps within steps. This happens, for example, when the customer has to set a “Preferred shipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on a separate page, and is then redirected to a previous checkout step upon completion.

Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Notice that it’s non-linear because the “Preferred shipping address” sub-step directs the user to a previous step:

Walmart’s non-linear process
Walmart’s non-linear process. Large view.

Luckily, making the process completely linear is easy. In this case, a sub-step such as “Account creation” should never redirect to a previous step in the checkout process, but instead direct the customer to the next step in the checkout process.

This is critical because the mental model of most customers dictates that a checkout process should be linear. Upon seeing the same page twice, most customers would conclude that the website has an error, because this is what happens with validation errors.

As one test subject said, “This looks suspiciously like the page I was on before. Is there something I didn’t do correctly?”

2. Add Descriptions To Form Field Labels

Issue: Without descriptions, many form field labels can be ambiguous.

“What does this “Address line 2” mean?” a test subject mumbled. Other test subjects were confused by “Billing address.”

The vast majority of test subjects had problems understanding certain labels. They varied in which labels they had trouble with. The problem was critical in a few cases, and one subject gave up a purchase because she couldn’t understand the label for a required field, making it impossible for her to complete the checkout process. Therefore, always provide clear instructions for each field.

One form that caused confusion belongs to HobbyTron, where test subjects had to guess what “First” refers to:

HobbyTron lack label descriptions

On Apple’s website, the majority of test subjects started typing their zip code in the field labeled “Area code”:

Apple lack label descriptions

When you have form field labels without any explanation, some of your customers will likely be confused about what information is being asked of them. Alleviate this by adding short descriptions and examples next to labels. Because not all customers need the extra help, you may want to hide these instructions behind a “What’s this?” link, or perhaps slightly fade its color or reduce the font size.

Below are examples of how descriptions below form field labels can help customers understands what inputs are required of them:

Form fields with correct labels

Even unambiguous fields, such as “Email address,” are great opportunities to explain what you’ll use the data for. “Email address” may be a sufficient description, but most people would want to know how you’ll use their email address. Why do you need it?

Finally, for fields that users have to fill in by referring to a paper or card, illustrations can enhance the descriptions a lot (for example, an image of an expiration date from a credit card).

3. Avoid Contextual Words Like “Continue”

Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.

Depending on the customer’s state of mind, a button labelled “Continue” in a shopping cart could mean one of two things:

  1. Continue shopping
    Say, if the customer is also looking for a shirt to go with those jeans.
  2. Continue to checkout
    If the customer has all the products they need and just wants to pay.

Another example is “Back.” Back to the last page? Back to the search results? Where? And how about “Proceed”? These are all contextual words that change in meaning depending on the context (i.e. the page) and the customer’s state of mind.

HobbyTron was one of the websites on which multiple test subjects clicked on the “Continue” button thinking they would continue to the checkout section:

Hobbytron Continue button
Hobbytron’s Continue button. Large view.

After clicking a wrong button, one test subject said:

It was confusing because I thought, “I want to continue.” I didn’t think about continuing shopping, but rather I was continuing to checkout.

This is a good example of how contextual words, being open to interpretation, can confuse customers. Roughly half of the test subjects at least once clicked a wrong button because of contextual words.

Instead, use words that aren’t open to interpretation, such as “Check out now” and “Shop more.”

4. Visually Reinforce All Sensitive Fields On The Payment Page

Issue: Customers might hesitate if credit card fields don’t appear secure (regardless of actual security).

Many test subjects didn’t think about security until they had to enter their credit card details. In fact, several test subjects talked about certain parts of the checkout page in terms of being “secure” and “insecure” (typically related to credit card details).

Parts of the page with security icons, badges or text and a general “robustness” were perceived as being more secure, while parts without these visual cues inspired less confidence, despite the fact that these fields were all part of the same form on the same page. Technically, there was no difference in security. However, most customers don’t understand the technical workings of forms. All they know about your website is what their gut feeling tells them.

There is a clear divergence between the customer’s mental model of form-field security and the actual security.

As one test subject who had just abandoned their purchase said, “It didn’t look safe enough.” Her reaction wasn’t based on the technical security of the website, but rather on the perceived security of the fields.

Below is a quick mock-up I made to illustrate how you can visually secure your credit card form fields (version B). Notice the background color, padlock image and placement of the GeoTrust seal:

Mockup of visual reinforcement
Mock-up of a visual reinforcement. Large view.

By adding visual cues (such as borders, background color, and security icons and badges) around the form fields for credit cards, you can increase their perceived security for non-technical customers.

5. Don’t Use An “Apply” Button In Your Form

Issue: Customers don’t understand “Apply” buttons for distinct sections of a form.

More than half of test subjects were confused by websites with an “Apply” button somewhere in the form; for example, to apply a shipping method to an order.

In almost every case, these buttons were either:

  1. Not clicked, even if the relevant input field was filled out;
  2. Mistaken for the main form submission button.

Test subjects simply didn’t understand the purpose of having a separate “Apply” button in a form.

Below is Newegg’s checkout, where only half of test subjects who filled in their zip code also clicked the “Go” button (problem 1 from above):

NewEgg Apply button
NewEgg’s Apply button. Large view.

The consequence of mistaking “Apply” for the main form submission button is that customers will be redirected back to the same page in order to apply the change, thwarting their expectation of moving to the next step and likely leading them to think that there’s an error on the page (as we saw in guideline #1). This happened to two test subjects, who were left to guess what the error was because no error message was displayed (since a technical error never actually occurred on the page).

Below is a form for American Apparel, where test subjects mistook the “Apply” button for the main form submission button (problem 2) and consequently couldn’t proceed with the purchase.

American Apparel Apply button
American Apparel’s Apply button. Large view.

If you really need to update a value before moving on to the next step, then auto-update the value using AJAX or the like, without showing an “Apply” button.

6. Format Field For Expiration Date Exactly As It Appears On Credit Card

Issue: Fields for credit card expiration dates can be tricky to decipher if they aren’t written exactly as they are on the credit card.

Some websites use month names, while other websites use a combination of month names and numbers, while still others just use numbers. Which is best? The correct way to format a field for an expiration date is to match what the customer sees on their credit card (i.e. numbers only). This minimizes confusion and misreading because the user can easily verify the field against their credit card.

Below are four examples of how not to format the fields for expiration date. Example D, with the month written as text and the year in four digits, is the worst.

4 examples of credit card expiration date fields

The correct way to format the month field is to use numbers and to prefix all single-digit numbers (i.e. 1 to 9) with a 0, so that they appear exactly as they do on credit cards (for example, 03 for March).

The correct way to format the year field is to use just two digits, to match the number on the credit card (for example, 14 for 2014).

Our test subjects didn’t have any difficulties when month names were included, as long as they came after the digits. So, “03 – March” is okay, but “March – 03” is not. Whatever is on the credit card should appear at the beginning of each option.

You could put a forward slash (/) between the month and year fields to further match credit cards (so, 03 / 14 for March 2014).

7. Use Only One Column For Form Fields

Issue: Customers have an amazingly difficult time understanding the relationships between form fields in two columns.

Half of the test subjects had problems when form fields were in two columns. There were two typical scenarios:

  1. One of the two columns of form fields was missed. It was either dismissed as unrelated or simply overlooked by test subjects.
  2. Unrelated form fields were filled in and/or submitted, often causing validation errors.

Below is Perfume’s form for signing into and creating an account:

Perfume.com shipping form
Perfume.com’s shipping form. Large view.

This form was interpreted in three ways:

  1. All form fields should be completed in order to create an account.
  2. The “Email address” field and the fields in the right column should be completed to use “Guest checkout.”
  3. Either the left or right column should be filled out.

Another example is PetSmart. There, the most common behavior was to overlook the second column, with the “Credit card identification number,” resulting in an error message:

PetSmart.com payment form
PetSmart.com’s payment form. Large view.

On two occasions, test subjects abandoned their purchase because they kept submitting the wrong data in the wrong column.

Our suggestion is to use a single column. None of our test subjects showed any difficulty with this.

8. Use Shipping Address As Billing Address By Default

Issue: Most customers order products to their home, so requiring both a billing and shipping address doesn’t make sense.

Customers typically order products to their home address. So, by default, you should use the same address for shipping and billing, unless you happen to record data differently for your store.

By defaulting the billing address to the shipping address, your checkout process will have many fewer fields, making it less intimidating for customers. Users also reduce the risk of misspelling their address if they have to enter it only once; they won’t rush through the form as quickly, and if there are errors, the customer will have to fix them only once.

NewEgg’s checkout
NewEgg’s checkout. Large view.

Moreover, you should hide the billing address fields entirely. Disabling the fields isn’t good enough. On the one website that did this, most test subjects were confused by why the fields were grayed out, with some users clicking on them. Instead, show only the fields for the billing address, unless the customer explicitly asks to use separate shipping and billing addresses.

Some websites have a “Copy shipping address” button. The problem with this is that it also copies any errors, so the customer has to correct the same information twice. While the customer could just click the “Copy shipping address” button once they’ve corrected the error, all of the test subjects in this situation forgot to do so.

Apple’s copy shipping address feature
Apple’s copy shipping address feature. Large view.

Also, depending on the website’s layout, such a feature could be easily overlooked. On Apple’s website, half of test subjects overlooked the “Copy shipping address” link and ended up typing in the same address again.

A check box (or something similar) is better for this purpose because errors will have to be corrected only once. Amnesty International’s checkout page is a good example of how to do this right:

Amnesty International’s checkout
Amnesty International’s checkout. Large view.

9. Use Clear Error Indications

Issue: Customers overlook error messages, making them less likely to resolve the errors.

More than half our test subjects had serious problems finding or understanding error messages on the websites we tested.

When a customer has problems with a form, the likelihood that they abandon the purchase increases significantly. When a customer fails more than once, they will be inclined to leave the website altogether (whether because they assume they were blocked or the website has a bug or something else).

Below are four examples of a lack of a clear indication of error.

On American Apparel’s website, the yellow bar at the top is actually an error message, saying that the data in the phone field at the bottom isn’t valid:

AmericanApparel error message

On Walmart’s website, the two red arrows (next to “Ship to home” and “Site-to-store”) are actually error indicators:

Walmart error message

On PetSmart’s website, the red of “State/Province” is not an error indicator, but rather just the style chosen for this particular label:

PetSmart error message

On Perfume.com’s website, the red does indicate an error in the “Phone” field:

Perfume error message

Unless placed in close proximity to the relevant fields, error messages were likely to be overlooked by our test subjects. Many websites present error messages only at the top of the page, not next to the form fields.

Without this proximity, error messages can be difficult to understand. Some test subjects, seeing nothing wrong with the fields, tried to submit the form again, assuming the page didn’t load properly the first time. This, of course, resulted in the same page being shown again with the same error message.

If a customer doesn’t notice or understand your error message, they will not be able to resolve the error or proceed through the checkout process. In such cases, abandonment is inevitable. So, put time and effort into designing and wording your error messages.

Make sure your error messages:

  • Are contextualized (that is, not at the top of the page but in close proximity to the relevant fields);
  • Are clear and concise;
  • Stand out so people notice them (provide high contrast and maybe even use arrows or other visual indicators).

10. Registration Should Be Optional

Issue: Customers strongly resent having to sign up for an account.

Customers dislike having to register for yet another account. This quickly became evident during our testing as every single subject showed great frustration when forced to do it. 30% of them ended up abandoning one of their purchases as a result.

There are many reasons for this resentment.

For one, customers already have a myriad of user names and passwords to remember and don’t want to create an entirely new account just to buy one or two products from an online store.

Registration required

Another reason is that 40% of test subjects expected to be spammed with marketing material, even if they explicitly declined to sign up for a newsletter during the checkout process. These customers have a mental model in which Account = Newsletter. Or, as one subject described it: “If I create an account, they can send me spam from now on and forever.” Their prior experience on websites that check the newsletter box by default and obscure it likely led them to this conclusion.

Also, customers likely realize that you’re storing their information indefinitely. While most companies keep a customer’s information in their database regardless of whether they registered an account, most customers don’t think of this. It’s about perception, and some customers just don’t like the idea of a website storing their personal information.

Signing up for an account also takes time. It adds more steps and fields to the process—and complexity. Yet another reason to dislike it.

Finally, many customers just don’t understand why they need an account to buy a product. As one subject clearly put it, “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.”

Most test subjects didn’t mind having the option to create an account, but they found it illogical and annoying to be required to do so. Some said they would voluntarily create an account if they regularly bought from the website.

If you’re looking for an unobtrusive way to get customers to sign up for an account, then consider simply asking them after they have completed their purchase. “Would you like an account? Just enter a password in the field below.” You can set their email address as their user name and fill in the account information with their order details. This way, the customer isn’t forced to create an account but has an easy way to do so after completing their purchase. (Remember to explain the benefits of having an account.)

11. Don’t Require Seemingly Unnecessary Information

Issue: Customers feel that their privacy is being invaded when they are required to submit seemingly unnecessary personal information.

Refusing to give up their phone number, one test subject anxiously clamored, “Look, why do they need my phone number? What do they need that for? They don’t need it!” Every test subject at one point or another complained about a website that asked for too much personal information.

Being asked for a phone number when the website already had an email address was especially irritating when subjects were trying to make a purchase. The logic goes, if the store already has one way to contact them, why does it need another?

Apple’s checkout process
Apple’s checkout process.

If the information is necessary, at least explain why. What is obvious to you may not be obvious to the customer. They have learned to expect the worst when shopping online (usually spam email and phone calls).

Our test subjects were surprisingly forgiving, as long as the website explained why the information was needed. Here’s a tip: don’t hide it behind a link; state it directly in the field’s description. In fact, the test subject we quoted above provided their phone number to another website without any complaints because the store clearly explained that the phone number was needed so that it could contact the customer in case of delivery problems.

The more expensive the order, the more accommodating the customer will be. When buying a laptop, customers want you to be able to contact them. But this holds true only if you require the information in order to complete the purchase. On websites where the field was optional, our subjects weren’t comfortable giving their phone number and simply left the field blank. However, this means that required and optional fields must be clearly distinguished.

Designing A Better Checkout Experience

While there are many more subtleties to designing a good checkout experience, these 11 guidelines go a long way. If you adhere to them, your checkout process will perform well above average.

In a study that he conducted 10 years ago, usability guru Jakob Nielsen concluded that large e-commerce websites violated many basic checkout usability guidelines. It seems little has changed when you look at websites like AllPosters and Walmart.

While a lot of the big websites boast impressive features such as geo-targeting, address validation and state look-up, they don’t manage to get basic usability principles right, and they suffer greatly as a consequence.

With the latest improvements in Web technology and browsers, the potential to create an amazing user experience has increased dramatically. Yet, advanced features shouldn’t be the focus until basic usability guidelines are met. If we add the latest technology just because it’s new and exciting, then today’s abandonment rate of 59.8% is unlikely to decrease.

Things like meaningful flow (see guideline 1), good copywriting (2, 3), simple form design (4, 5, 6, 7, 8, 9), and privacy considerations (10 and 11) go a long way to creating a great checkout experience.

Do yourself and your customers a favor by following these 11 guidelines. Once you’ve covered the basics, you can venture into more advanced territory.

You can find further checkout usability guidelines in our report titled E-Commerce Checkout Usability (not free).

Further Resources

You may be interested in the following related resources:

(al)

↑ Back to top

Christian Holst is co-founder of Baymard Institute where he writes bi-weekly articles on web usability and e-commerce optimization. He's also the author of the E-Commerce Checkout Usability and M-Commerce Usability research reports.

  1. 1

    FYI the 4th image in the article has a spelling/grammatical mistake! (The the digits)

    2
    • 2

      “FYI the 4th image in the article has a spelling/grammatical mistake! (The the digits)”.

      Is that all you have to do. I suggest you get a life.

      -29
      • 3

        Paul you idiot, he’s just pointing out things that you dont want to be doing when designing a checkout.

        Get a life and stop hating on people who are giving suitable suggestions. Bearpig was not hating on the author.

        16
  2. 4

    These are great design guidelines. I happen to abandon most of my shopping carts though, I often use it as a temporary wish list and intend to come back to it later. I’m sure others like me skew the statistics.

    19
    • 5

      Christian Holst

      April 7, 2011 3:56 am

      Thanks. I sometimes do that too.

      If you want a truly meaningful shopping cart abandonment statistic for your own store, you’d probably want to leave out the “Cart” page so you only count people who actually start to engage with the checkout process.

      3
    • 6

      I also use the Cart to figure out what shipping is going to be. I usually wait to see what shipping is going to be before I order (especially for items under $25); if it’s too much, I don’t place the order.

      I’m always very annoyed by online stores that don’t show your final cost w/shipping until the Order Confirmation page — making you enter your entire address and all of your payment information just to get a shipping estimate. Why can’t all sites let you estimate shipping costs at the beginning by entering your postal code?

      7
      • 7

        FedEx rates are based on more than zipcode. A single zipcode can cover a very large area that encompasses everything from commercial zones in mid city to rural areas. FedEx has several surcharges including fuel, residential, extended residential, and out of area. Without a complete address, shipping rates can be way off.

        0
  3. 8

    I would add:
    Do not require your customers to enter a state, if they live in a country that doesn’t have states. It’s impossible for people to guess what they can add slip past the validation and still have their order show up.

    I have had packages with shipping address like:
    Simon
    Street XYZ
    City
    Not Available / Denmark Doesn’t have states / –
    Denmark

    State should not be require or at least only for countries where it makes sense.

    19
    • 9

      I agree with that! But why do they even need the state when they have the postal code, which will give them the state if done correctly. That way it is clear for all countries.

      4
      • 10

        Maybe for security reasons. They can use it as a check against the credit card information entered.

        0
        • 11

          “Maybe for security reasons.”

          Doubtful. Very often even the expiration date is not used. Try it. Enter any future date for your expiration date on your next purchase. I bet it goes through.

          -2
    • 12

      Christian Holst

      April 6, 2011 10:18 am

      Absolutely correct. In fact you can put it a bit more general; never show options that aren’t relevant to the current customers context.
      E.g. a ‘state’ field when a non-state country is already selected, or ‘start date’ credit card fields when a VISA card number is provided (‘start date’ is primarily used on Maestro and Solo cards).

      1
    • 13

      Denmark, much like England, has “counties” (15 in fact) which you would expect users to enter in place of “state”. Canada, and other countries, have provinces, which you would also expect users to enter in place of “state”. I usually label that field “state or province”. I may start labeling it “state, province, or county” to try to clarify it further.

      I can’t think of many countries that don’t have states, provinces, or counties and that information is necessary for credit card authorization so it is required.

      A trick I use when building ecommerce sites is to geotarget the visitor and automatically select the country they are visiting from. Then you can prepopulate the state dropdown with the states, provinces or counties available to them. There’s a small chance this might not be correct, if they are using a proxy or if they are out of the country they would like to bill or deliver to, but in those cases they can choose a different country from the dropdown and the states list will update itself.

      0
      • 14

        I live in London, which is not in a county (I don’t live on the outskirts), and so I usually forced to enter London for the county as well because they tend to make it a required field.

        3
      • 15

        Just because a country has subdivisions doesn’t mean those who aren’t geography majors know them. Or would ever consider them useful, necessary or meaningful on a postal address. Example: where I live, I am in a province, Zuid-Holland. However, postal addresses over here never use those. If I must add it to my billing address on an order, I know it means it’ll be slower getting to me because it’ll be an excuse for my postal system to get confused by it (since we do not use provinces in mail).

        If you don’t need it, don’t ask for it. Americans are used to filling in their states, so it’s not a big deal. Asking me to fill in my province is a “Huh, what? Why?” moment for me.

        The geotargeting thing is a good idea, IF I’m not ordering from a hotel in another country while at a conference, or visiting relatives somewhere. Though a “clear all this” option fixes this.

        1
      • 16

        Does it make sense to ask for province/state/county when I already filled in the ZIP code and city? Shouldn’t you know what province/state/county a given ZIP code belongs to? Just asking, I honestly don’t know.

        3
        • 17

          Not all countries have states or other subdivisions. My country, Hungary, has counties, but I’m not evil enough to force American eBay sellers to scribble my long, multiple-hyphenated, diacritic-heavy Hungarian county name on parcels, especially that it’s completely unnecessary as we have post codes that identify the cities, and city names are unique anyway.
          (This led to some funny addressed parcels; eBay used to automatically fill “default” in textboxes that were left empty, and my stuff was always addressed to “Miskolc, Default, Hungary”…)

          1
      • 18

        Just wanted to note that you have to be careful with the term “county”. In the US each state is broken into “counties” which are collections of towns. We don’t use counties in mailing addresses, though.

        A better option might be to have them select the country first, then display the appropriate fields for the selected country.

        0
      • 19

        New Zealand doesn’t.

        You may be surprised at the number of small countries that don’t, NZ still had 4million people so imagine there are plenty more than don’t use state/province or county in billing and shipping.

        0
      • 20

        Frederik Krautwald

        March 14, 2012 7:39 pm

        You should not expect your users to enter anything meaningful in meaningless labelled fields such as ‘state’, when it is not applicable to them. FYI, counties are not used in postal addresses in Denmark. The same is true for most other European countries, where the postal code directly translates to a certain location.

        It is also false that states, provinces, counties, etc. are needed for credit card verification. Credit cards, per default, only holds the credit card holder’s name, a credit card number (a special case of ISO/IEC 7812 bank card numbers), a three or four digit card security code, and an expiration date as a two digit month and a two digit year.

        0
  4. 21

    This is one of the best articles I’ve read on here in a long time. Salient points with great explanations and examples.

    Thanks!

    15
  5. 23

    A great article
    It covered just about all my frustrations with online buying

    3
  6. 24

    A comprehensive article with important guidelines. Thank you!

    0
  7. 25

    Just this morning we realised our checkout page could be performing better and decided to take a look to see what we could do to reduce customers abandoning at this stage, so this is PERFECT timing for me!

    2
  8. 27

    Excellent advice (I’ve never commented here before). While we’re on the topic, why is it comment boxes always ask me to supply an email address. It can’t be to avoid spam, as any fake email will do.

    0
    • 28

      Vitaly Friedman

      April 6, 2011 5:19 am

      We are using emails to load gravatar images on the left side, to make the comments a bit more personal. This is actually the only reason why we require email information.

      2
    • 29

      Johnathan Williamson

      April 6, 2011 5:21 am

      Most are to link in to services like Gravatar … which is why you see an image next to some peoples names.

      0
    • 30

      Elizabeth Kaylene

      April 6, 2011 10:01 am

      You can also subscribe to comment replies.

      I think initially, before Gravatar and comment subscriptions, email fields were required because of spam. If you really think about it, though, it doesn’t make much sense, because you’re right — anyone could throw in a fake email address.

      1
      • 31

        Unless you needed to confirm your email address before the comment was approved. Who knows?

        0
      • 32

        Email could be used as a confirmation (we will email you a confirmation link, bla bla), if you are trying to build a high quality content resource. If people are passionate about what you do, they will take time to complete the process.

        0
  9. 33

    #6
    One problem I find with drop down menus for expiration dates. Users sometimes move their mouse scroll wheel. I find that 50% of credit card mistakes is due to wrong exp date.

    During checkout, is it best to not display any elements from the rest of the site, like menu, footer, etc? They say, the less distractions, the less chance someone will click out of the checkout process.

    2
    • 34

      Christian Holst

      April 7, 2011 4:12 am

      I’ve seen the scroll-incident before, although we didn’t stumble upon this particular hiccup during our study so we didn’t include it – b that obviously doesn’t mean it’s not happening.

      In general it is best to remove clutter from the checkout so potential customers don’t get distracted by a graphic in the sidebar. However, removing too many standard elements can also make people feel they left the original site, which can be a problem if you’re not a well-known brand (Amazon can remove everything from their checkout except for their logo since people inherently trust the brand).

      3
  10. 35

    You go into great detail about letting the user see dates as they appear on the credit card, but skip the issue that has always bothered me about credit cards online: forms that insist on no punctuation or spaces in the credit card number! Why on earth can’t I include spaces in the number, if the card is printed with spaces in the number? Is your shopping cart code so fragile that it doesn’t know how to remove spaces?

    8
    • 36

      Indeed, especially since the JavaScript (or Ruby or Python or whatever) required to strip non-numeric characters is so trivial.

      0
    • 37

      Christian Holst

      April 6, 2011 10:47 am

      Thanks for adding this. In general one should accept all common formatting (and abbreviations) for all form submitted data and then reformat it back-end. At the time of testing Nordstrom.com allowed spaces in the credit card number – in fact they add spaces themselves while the user is typing without spaces.

      2
  11. 38

    A really interesting article, once again. Thanks !

    0
  12. 39

    Great information. I abandon many shopping carts because I have to give out so much information, sometimes a credit card number, just to find out what shipping is. Not worth giving out the information when there’s so many other places to buy from.

    5
    • 40

      I often find myself going through an entire cart process just to find out the shipping costs, intending to find comparative costs.
      I too usually end up abandoning many and ultimately going with one that made this process a lot easier and was more considerate in giving out this information.

      1
    • 41

      Christian Holst

      April 6, 2011 10:55 am

      Yes, in during our usability testing we found this to be true as well (guideline #50).
      The shipping cost and tax should be provided as early as possible. An alternative option is to provide an estimated lowest shipping charge (clearly marked as “estimated”) already at the cart step – this saves the customer the hassle to typing everything just to get an idea of total cost of the order. Ideally the two can be combined.

      0
  13. 42

    Well done, very informative. Looks like I need to update my infographic of said subject. http://www.studiodino.com/images/shopping_pipeline.jpg

    0
  14. 43

    superb article, you really explained well what elements to use & why to use them

    1
  15. 44

    Great post!

    0
  16. 45

    One more: don’t use a country list sorted alphabetically. I’m pretty sure most e-commerce sites have more customers in the US than in Afghanistan.

    Better yet, use IP geolocation to set the country defaults. There are many free country-level IP geoloc databases available, and at that resolution they are well over 90% accurate.

    5
    • 46

      Christian Holst

      April 6, 2011 11:02 am

      Good one. In fact when writing the report we got an idea for a new way to have the user provide their country – we are currently coding the last bits – so in the future you might see a “re-inventing the country selector” post here on SmashingMagazine (if the editors is interested?) or at the very least at the Baymard blog.

      But yes, otherwise use some of the dirt cheap or free IP lookups that are very precise when you only need to know the country, to pre-select the country drop-down. At the very least the the 5 most popular shipping countries should be copied to the top of the list as well.

      0
      • 47

        Using autocomplete (like Google’s autocomplete in their search field) might eliminates the usage of dropdown for country/state/county etc.

        This way, developer can add in new country/state/county if it is not in their database already and User (especially user) dont need to click-scroll-hunt for their country anymore.

        The only bad side of this method is when user dont have keyboard to type. But hey, that’s most probably 0.1% chances ;) hehe.

        0
    • 48

      I really doubt about presetting country for customers and the use of IP geolocation. Well, I admitted that such method may provide some convenience, but on the other hand they also make the “country” label easier to be overlooked. If we leave this label blank and let customers make the selection actively, the possibility of entering wrong country will be lower than that of results estimated by IP geolocation. And the cost of handling an after-sale service problem caused by wrong address exceeds the cost of one more selection.

      -1
    • 49

      Yes! This drives me up the wall. I can’t believe I have to scroll through Afghanistan and all of the countries beyond when obviously I’m in the US and the site is primarily geared towards the US. It blows my mind that someone wouldn’t have thought of this – in so many cases.

      0
  17. 50

    Great guidelines, thanks for sharing. I’m so tempted to buy the full article now!

    0
  18. 51

    Love this one! Some great tips for streamlining the checkout process. Linear is key, as is eliminating the superfluous questions.

    The “continue shopping” tip is one I never thought of, and is used a lot. Will take that one to heart.

    0
  19. 52

    You guys should have used the XenForo.com checkout system, I was impressed with their UX/UI and simplicity. Very simple to use, understand, and modern.

    Great article guys, always a thrill to read and learn from.

    0
  20. 53

    Chilliwack Website Design

    April 6, 2011 7:43 am

    Wow, great article. Very easy to understand and a pleasure to read. This should be considered the go-to manual for anyone creating an e-commerce checkout page. I learned a ton by reading this article and brushed up on a few of the basics. You couldn’t have done a better job teaching this stuff!

    0
  21. 54

    Your advice about dates on cards (#6) is incorrect as there is no standard way of formatting dates on credit cards. I have one card that has 07/12 (uk date format) and another that has 08/2013. I have also seen Amex cards that have July 2010 as the expiry date. Therefore, I believe the best format is ’07 – July’ / ’2012′

    Don’t use two digit years anywhere. That’s what led to the millenium bug last time ;)

    3
    • 55

      I was thinking the exact same thing when reading over that part, and I agree that ’07 – July’ / ’2012′ is best. The information is still there, no matter what format your credit card uses, and should be easily understood by everyone.

      0
      • 56

        Not talking about credit card dates here, but mostly (because we use multiple dropdowns which I’m not totally in favour of, but, that’s just what we have) I will use names of months in the month-dropdown, as well as 4-digit years in the year drop-down. While people using my forms will not wonder if they should use American or Rest Of World date format, listing the month as a name rather than a number is always more clear which box is which.

        1
  22. 57

    One of the best articles I’ve read on this site. Some seriously good points made here. It’s definately made think some parts of my checkout process design.

    Was a pleasure to read and had a lot of ‘a-ha’ moments for me :)

    Thanks

    @roballport

    0
  23. 58

    Re: #9. Use Clear Error Indications

    From my personal experience, I think the error messages should be both on top of the page and next to the form field. When you submit a form and page reloads with error, you may not see the error message if it is “below the fold”. I had a form with large WYSIWYG editor on top and a check-box (a required field) at the bottom of page. Users who forgot to did not see the error after page reloaded since the message was at the bottom, along with the form field.

    2
  24. 59

    Great analysis.
    It would be great to see an unbiased comparison of “out of the box” checkout processes like Google Checkout and PayPal, from a UX perspective.

    0
  25. 60

    Absolutely fantastic piece of research. Thanks for posting this article smashing magazine!

    I did have a thought, however, about Amnesty’s checkout experience when it was highlighted in the article:

    I think the checkbox to copy the billing address should be under the Shipping Address title area (in addition to being below the billing address form maybe?) because when you load up that page your eye is immediately drawn to the “Error Message” indicating that products will be shipped to the billing address

    At least some customers will consequently think, immediately, not after entering their billing address…”wait a second, that’s not the case for me! How do I change this option? Where do I click? What do I do? Can I not do it? Well if I can’t do it then there’s no point for me to be on here ordering this item. Ah screw it, I’m ordering take out……..”

    Just a thought.

    I have to say again though, fantastic article!

    0
  26. 61

    Elizabeth Kaylene

    April 6, 2011 10:06 am

    I have a problem with the claim that people breeze through checkout forms — unless I am an endangered species. I carefully fill out and reread checkout forms when buying online or donating, because the last thing I want to deal with is having to give my credit card info again because I made a mistake, or being charged $200 for a donation instead of $20.

    However, I agree entirely that some checkout systems are just completely ridiculous. I especially dislike two-column checkout forms, because the right hand column almost always gets ignored. Sometimes I’ll see it at the last minute, or sometimes I won’t notice until I get an error message!

    Speaking of error messages, another thing that checkout designers should keep in mind is testing to make sure the form isn’t putting out mistaken error messages. I was actually on a site today that asked for my site’s RSS URL, and no matter how many times I put it in, I still got an error message — all the way at the top of the page, out of sight — telling me that I couldn’t leave that field blank. Test, test, test! That’s the #1 rule of designing for usability.

    0
    • 62

      People breeze through forms cus they’re busy and just don’t have the time, just like I skipped reading half of your comment cus i didn’t have time.

      2
  27. 63

    > The main question is why do customers abandon their shopping cart so often ?

    Because in many sites the only way to see the price of an item, including shipping, taxes, fees, etc, is in the shopping cart. So when surfing around you fill your cart, go to checkout, look at the price decide it’s too much and go somewhere else.

    6
  28. 64

    First off, great article and thank you for sharing it.

    But under #2 some of the “problems” are ridiculous. I wouldn’t call it problems with the site, I’d call it problems with the users. And I know I’m gonna get blasted with “You need to make your site easy-to-use for all people.” That’s bullshit. If you don’t know what “Address Line 2″ is you’re a moron and should not be on the computer. If you don’t know what to put in the text field marked “First” after it’s followed by “Middle” and “Last” you’re an idiot and should be shot before you have kids, so we don’t have idiot kids walking around. If we keep dumbing things down for people we are going to end up like the society in the movie “Idiocracy”.

    5
    • 65

      Yeah, you’re going to get blasted, and rightfully so.

      0
    • 66

      John Flickinger

      April 6, 2011 2:20 pm

      I kind of agree, but the user testing showed confusion and it needs to be addressed no matter how ridiculous it seems. If there are 2 websites selling the same thing and one has labels that are easier to understand, even slightly, they will make more money because more people will be able to successfully complete a conversion.

      Maybe the test subject was testing based on a second language? Who knows, but whether you think they’re idiots or not, their money is just as valuable as anyone else’s, so why would you refuse to accommodate them?

      3
      • 67

        exactly. It also has the effect of making the site look clunky and dare I say it unfriendly…what would you think if you were a customer standing infront of a cashier who asked you “First, Middle, Last”, bit short and impolite.

        When people are buying things, they want a pleasant, easy, experience and the shopping cart should facilitate this.

        2
    • 68

      The developer in me agrees. But after seeing smart people screw up again and again (and, yeah, ME too… not two-line addresses but other stuff that, once it was pointed out to me, I wondered why I didn’t see that??), I realised that it’s not that users are stupid (even if they are), it’s that All People Become Stupid when using the web. They grab onto the first thing that looks like it works and they don’t double-check. They Don’t Read Directions (and this isn’t just men). They miss “obvious” stuff. People filling out forms focus only on the form inputs, not the obvious headers above them stating what that form is for.

      So, to be good designers, we need to design for Stupid. It’s like computers automatically turn on the stupid gene in us. We can’t stop that from happening, so we try to design around it. And when we do, we get happy customers and money. Yay. Good enough for me.

      5
    • 69

      I totally agree with this. We have to dumb things down for the lowest common denominator, but where is the line. When can we say that the user is too dumb for the internet and politely ask them to leave.

      0
    • 70

      Steven Baskett

      May 23, 2013 5:46 am

      Let’s just say for a minute you are right, people are morons, people are idiots etc etc, you can state that without any real blowback.

      Now let’s say you are the owner of a site and make that exact same statement, you still might be right but that will not change the fact that these people (who make mistakes, are in a hurry, or are just not savvy when purchasing online) can shop elsewhere on a site that is better presented and more intuative, these are also folks who put food on the owners table.
      So say what you want about supposed morons and idiots, at the end of the day their money is just as good as yours, and if you are not careful that money will be spent elsewhere :o)

      You’d have to be a moron to ignore such advice.

      0
  29. 71

    Fantastic article! Great points and very actionable.

    1
  30. 72

    Great info, but #3… my god the HUGE button says “Continue Shopping”…. that shouldn’t have been the problem…. the other says “Checkout” so, granted, for people who don’t use the net much, perhaps “continue to checkout” would help, but there is a line where education needs to get back in place rather than over-simplifying everything to compensate for the general low-reading level of people in the U.S.

    Don’t get me wrong, standards, best practice, etc., are fine guidelines and make things consistent over time, but catering to the lowest denominator isn’t going to help people in the end. Pretty soon, all websites will be Red, Blue, Yellow and just in Helvetica…!

    1
  31. 73

    In response to Markus’ response above, here’s a new idea that will soon sweep the net and, one that somebody else will take credit for and say ‘was done on http://www.suchAndsuch.com in 95:

    Right next to any “view cart” button/link, put the current total cost of items in the cart.

    boom.

    -1
  32. 74

    Bravo. Love this wrap-up and deep analysis. You guys spent a lot of work and did your homework on this. I’m off to do some re-designing now of our checkout area at Cutcaster so its even easier to checkout when you want to buy an image. haha

    Thanks.

    0
  33. 75

    I will sometime go through the checkout and then abandon just to see what the shipping charges would be. If there was a clear table to look at or an estimator based on postal code I wouldn’t need to do that.

    1
  34. 76

    Great article. Often the checkout process becomes diluted during design, build and testing and it’s important to take a step back once in a while and reassess the user journey.

    0
  35. 77

    Great article with lots of examples. This should be *common sense* to online merchants, but the ones who get it right are far out-numbered by those who get it wrong (and suffer as a result).

    1
  36. 78

    Uniformity would also help.

    Autos originally had ignition keys in all kinds of places on and under the dashboard; drivers sometimes couldn’t start the car because they couldn’t find the place to put the key. Car designers decided to universalize the spot and the problem simply vanished.

    We are currently in the process of developing check out protocols that work smoothly – this article is a good step in doing that. Eventually we’ll get to the point that we understand the process well enough to design check out sites that help rather than frustrate customers.

    1
  37. 79

    Fantastic article, especially agree with the ‘having to register’ to purchase something. I have walked out of a physical store because they wouldn’t let me purchase something without registering with them, there are countless online stores who have lost me because of this.
    My only constructive criticism is the billing address scenario. The most helpful scenario for this is if/when you are buying a gift for someone and don’t want the invoice sent to them. A line stating “If this is a gift, would you like the bill to go to another address?” checkbox…, javascript reveal.

    1
  38. 80

    This article is seriously phenomenal! So comprehensive :)

    0
  39. 81

    How about one- vs multiple-page checkouts? Any statistics on that?

    2
  40. 82

    Great article!

    I actually catch myself playing with the idea of stuff sometimes, putting it in a shopping basket, but actually without the intent of actually completing the ordering process. I do it because with many shops, it’s hard to figure out if extra costs get added, or how shipping fees get calculated with multiple products. It’s a real problem that this isn’t obvious, don’t we all want to know how much we’ll pay?

    0
  41. 83

    thanks christian! great article!

    0
  42. 84

    Also, don’t hide shipping charges or information on international shipping in your shopping cart.
    Too many sites force me to enter items into a cart just to see if they even ship to my country.
    This sometimes even appears in the shipping information page (which I always check): “to find ouut if we ship to your country, see if your country appears in the checkout drop down list”

    0
  43. 85

    Very nice article, i disagree however that the main cause of shopping cart abandonment lies in usability. When people really want to have a product, they don’t care how difficult it is. Just think of the the waiting line outside the Apple store when the new iPad came out. I saw a lot of companies invest in usabilty improvement of the checkout forms, without increasing the conversion rate. This is because the reason why people leave their shopping baskets behind is lack of motivation or not being really sure that the product is good enough or concerns that there are cheaper options elsewhere or fear that the product will not be delivered in time. I think a likely scenario is that people go through the checkout procedure to check if there are hidden costs or other important information that is not shown on the product pages. Having seen the checkout page (the final page) they conclude that they are not convinced enough to buy it right away and they go look for more information or better deals. Will investing in better checkout usability increase conversion? I think the answer is yes, a littlebit, and especially for products that can be bought in many different shops for about the same price. But where you should put most of your money is in stronger persuasion, in taking away objections, in providing transparancy about the delivery and after-sales process. For this you need to listen to your target audience and create good content about your product. This means investing in better product information and pages, instead of a blind focus on the checkout. It’s like my friend who gave his number to a lady he met, but she never called. He was convinced the lady must have lost his number. But isn’t it far more likely she just wasn’t that interested?

    1
  44. 86

    This is possibly the best article I have read on SmashingMagazine. Please, please, please more of the same.

    Tim

    2
  45. 87

    Great article, Christian, thank you.

    0
  46. 88

    Well done, well written!
    @Simon in comment #3 is completely correct.
    I am guessing this was tested in the US, and fair enough. But another major irritant for customers worldwide, is the practice of using the American address system. This does not apply worldwide, and for – for example – European customers. And though Ryan in comment #45 is obviously an obnoxious child and should be ignored, here goes: some countries have other practices for first, second and last name. A lot of countries, most, in fact, have another address system, where area code and zip code makes little or no sense. Not to mention state. Or address line 2. Or town. Or City. In fact, some countries write their addresses with country first, then area, then street, then name, then a numeric code. Idiocracy is a brilliant film, but little Ryan here needs to get a passport, cross some borders and have mail sent to his poste restante.

    It is of course also true that idiot websites does not give shipping costs, estimates, taxes, added costs etc etc., so the only option often is to race through the form to see what the real cost will be. In addition, I have often intended to buy something, only to discover in the final stage that the company does not ship outside US. THAT is unbelieveably annoying. And unnecessary. If there are no world-wide shipping, then SAY so early on.

    and @joris groen – you are way out on that people don’t care how difficult it is if they “reeeeaaaally want” the product. If the company got me as far as the creditcard page, I am generally fairly committed, but that is the place where they often mess it up, and I leave. Besides, this article is not against good product sites, it is not an either-or. Some of the suggestions here are pretty simple, and any developer could fix three or four bumps in a day. It is simple improvements for the most part, and things to have in the back of your head while building a site. Improve the web little by little.

    0
    • 89

      You means thars others people across them thar water? I thoughts the world were flat! Gee, Bobby you da best. I’m going to go play with my Tickle-Me-Elmo now.

      But first, dearest Bobby, most sites have different sites for different countries. That way if someone in Zimbabwe is trying to buy that hot new Justin Bieber album they’ve been hearing so much about, the address fields will have labels they understand, organized in a way they understand. And when a visitor from the U.S. is trying to buy that same Justin Bieber album from that same site, they will see the address labels people in the U.S. are used to seeing organized in a way they understand. And that typically includes the label “Address Line 2″. Which is the point I was trying to make to begin with. So let’s recap shall we. I’ll try to make it all encompassing for Bobby.

      If you are a U.S. shopper shopping on a U.S. site and you can’t figure out what “Address Line 2″ is YOU… ARE… A… MORON.

      Oh and Boblet, I like your avatar. We should get together and color some time.

      -3
      • 90

        Sounds like someone is bitter about not getting those Justin Bieber tickets they were saving up for.

        2
      • 92

        >But first, dearest Bobby, most sites have different sites for different countries.

        Not really. I shop at places like Amazon.com… international but US-based companies (why? because they are everywhere and market everything). They really don’t change that much just because I’m not there.

        But they don’t deal with the way my address is set up in my country:

        street name, house number (opposite US)
        postal code, city (opposite US)
        (no provinces here! redundant, possibly confusing)
        (country if international)

        0
  47. 93

    In Romania we are also dealing with this kind of difficulty, but, when creating ecommerce websites, we’re trying to make customers realise that they should trust us before paying, because of our expertise. Last week, Magento Proffesional declared Innobyte, the official partner in Romania, and I think that this is only the beginining, that of being certified as proffesionals.

    -2
  48. 94

    Truly valuable. Thanks!

    0
  49. 95

    Great article! Good examples. Thanks!

    1
  50. 96

    Think it has more to do with people seeing their total, shipping charges, changing their mind about an item in general, or just making wish lists than any usability issues.

    0
  51. 97

    Great post !

    0
  52. 98

    Great article, lots of interesting tips, some of which need implementing on all websites!

    0
  53. 99

    Excellent article, thanks.

    Made me think about a lot of the checkouts on the web that fall down on these points. I will definitely consider these points when I build future checkouts.

    0
  54. 100

    Christian, Great article but, I’m surprised you didn’t touch on the single page checkout vs. multi-page checkout. Too much controversy still surrounds the subject. Do you have a preference or have you consistently seen one out-perform the other?

    0
  55. 101

    You may have missed one very important reason. Many sites force shoppers to initiate a checkout just to determine a price for certain items. I guesstimate that 98% of the time I abandon a checkout the reason is because I am still doing comparative shopping between sites.

    In a small number of cases it may be because availability can only be determined after initiating a checkout.

    0
  56. 102

    Great summary. Thanks! Luckily we are matching with almost every recommendation ;O)

    One thing which should be helpful for others: We match the correctness of the fields while the customer fills in the information. And if there is an error, we show the error messages immediately right beside the text field.

    Check out on seton.de

    0
  57. 103

    Caroline Jarrett

    April 8, 2011 3:40 am

    I loved this wonderful article. It is realistic, based on what ordinary people really do on everyday sites. The recommendations are superb.

    I have added a section to my forms advice web site in order to link to it. (You can find the site by looking for “Forms that work”).

    0
  58. 104

    Very good article with great suggestion that will definitely be implemented for future projects I work on for my clients.

    Thanks

    0
  59. 105

    Chris,

    Excellent, pragmatic list. I’ve been doing web design and testing since 2004. I did Kimberly-Clark’s first global site back in 1995.

    I founded The CareGiver Partnership, a national retailer of home medical supplies. We’re testing all the time and actaully created a white paper on what we’ve learned about web design for seniors (which is who we sell to). There are differences between them and a younger target. Eyesight in one obvious physical difference. We’ve learned you really have to design from their perspective. One example: we don’t use FAQ’s; rather we say Find Answers. We don’t say “Page Size” to make it larger, we say “Change Type Size” since that is what they really want to do.

    Great points. I’ve added these to our list of “don’t forgets”.

    0
  60. 106

    #1 reason I leave my cart… most sites don’t bother to tell me what to expect for shipping charges to Canada until I go through the whole checkout process. Leaving my cart is punishment for making me fill out my details just to get a final cost.

    #2 reason is similar… prices aren’t even listed until I get to the cart (software is #1 culprit here).

    0
  61. 108

    Superb article. Lots of really good points well made, with good examples of why each point is relevant.

    We’ll be using some of these points to fine tune our checkouts on various websites we have designed.

    Thank you – always learning….

    0
  62. 109

    Hmmm.

    My experience tells me that the most common reason that people abandon carts is because they don’t want the item at that price.

    You might take a shirt off the rail in the shop and have a look at it only to replace it when you see it costs $200.00. Normal behaviour.

    I am not saying that good checkout design does not influence people. You can reduce the number of people that give up in frustration. But don’t think that everyone who gives up has given up because of poor design.

    3
  63. 110

    The mentioned sites all target consumers.

    We will have to design a checkout process for a wholesale shop soon and I just wondered if all these guidelines are valid for wholesale customers as well. I guessed so, as usability adopts more to the ‘human factor’ than to a ‘customer type’ or ‘trade level’. Maybe I’m wrong, what do you think?

    0
  64. 111

    This is an excellent article that anyone involved in ecommerce checkout design will find helpful. Please consider including more “best practices” articles as future content.

    Thanks for posting.

    0
  65. 112

    Regarding Shipping addresses in the U.S.:

    If a PO Box is used by the customer, there are two possible shipping addresses. One is the address that USPS ships to — the PO Box, and the other is the physical address that UPS, FedEx, and others ship to — “UPS does not ship to a PO Box.”

    So the customer needs to know how the order is to be shipped: USPS, UPS, FedEx, or other, if they are to give the correct shipping address. Or, the checkout should allow PO Box customers to give two shipping addresses.

    0
  66. 113

    As Jaap Rood mentioned, I also toy around with shopping baskets. The majority of sites are not as forthcoming with full costs as they should be and very very often I find myself just adding things to carts and beginning the checkout process just so I can actually see the full and total cost I might have to pay (and more often than not, abandon the cart because I have been misled/mis-sold or think the shipping etc. is much too expensive).

    Not everything is easily monitored and fixed by design or layout or functionality. And in his day and age I dont believe carts are being abandoned just because somone it getting confused with what details to enter, or has a form layout issue.

    1
  67. 114

    My biggest complaint involves password field. I will generally miss some other field. Then I submit the form, and it sends me back to fill in the field I missed. But it also CLEARS the password field, which of course I don’t notice. So I fill out the first field and re-submit and get another error. THAT gets confusing and frustrating.

    Please don’t do this on your website (or post a reminder to re-fill the password field).

    2
  68. 115

    @Christian: Could you clarify how many test subjects were used in the study? I apologize if I missed it.

    Loved the article!!

    3
  69. 116

    Patrick Thompson

    April 11, 2011 12:07 pm

    Great article, very helpful I hope to implement many of these changes in the next round of testing I will be doing for the cart process.

    Patrick

    0
  70. 117

    One thing I get frustrated with but I don’t necessarily abandoned the purchase is the coupon code. If you offer a coupon code make sure you have relevent coupons out there. I get frustrated when I try to go to a couple of reliable coupon code websites and I don’t find anything offered for the particular store that I am looking at or the latest coupon code posting is 6 months expired.
    Also I do not like when big box brick and mortar stores are not consistent with their e-commerce store. I had a big box Office supply retailer charge me a month and half later after my e-commerce purchase. There was no error on my end. To me that makes me not trust their system and I wonder if my private information is being compromised. So a good lesson to you Brick and Mortar stores you need to make sure that your e-commerce is consistent as your retail store front on how you deal with transactions.

    By the way great online article!

    0
  71. 118

    Very good article. Reading through this piece made me nauseous and disoriented, which is to say that my gut reacted violently to the many errors you cited which frequently occur on checkout pages, and kill sales.

    0
  72. 119

    Also: When they sell series or seasonal movies/books etc – let us have the option of buying all (tick all) – way to many have only the option to “shop more” – but when you go back – all the similar books/DVDs in same series are missing!

    0
  73. 120

    I actually purchased this report a couple weeks ago as part of a re-design on one of my ecommerce websites.

    I highly recommend that you buy the full guide as it covers a lot more useful information than this small article.

    Once you read the complete guide: everything makes sense and once you’ve made the changes, you can speed through the checkout effortlessly!

    I haven’t finished the re-design yet but I’m excited to launch because of the much improved checkout.

    The purchase price of this guide is absolutely nothing compared to the benefits you’ll get!

    0
  74. 121

    Peter Riley Osborne

    April 12, 2011 3:02 pm

    I would be interested to know if you tested people who are returning customers. Or if you tested them making ten individual orders in a row. I bet your results on creating an account would be a lot different if that were the case. Just a guess, but since it seems most items revolve around being intuitive and speed, then really, setting up an account, which in many cases is just filling in a password, is far less annoying than entering your address every time you order. Or not being able to have a wish list or going back and reviewing your order.

    But this is obviously my own bias and also deals with running support for a site that doesn’t force the creation of accounts and then getting the easily avoidable phone calls. But that is the end result and not necessarily tied into conversion rates, so maybe that is not applicable here.

    But overall, a very, very great article! I definitely feel like I have a lot of things I can apply to my site(s) to improve conversion or at least test it. Thanks so much!

    0
  75. 122

    Great article with useful suggestion – Let’s have more of the same!
    A few weeks ago I discovered a similar good article by Holger Maassen
    http://ux4dotcom.blogspot.com/2011/01/shopping-carts-check-out-there-is-often.html

    1
  76. 123

    Great article thanks everybody

    1
  77. 124

    Personally when I’m shopping online price plays a major role, I have struggled through many a sub par checkout process because the price was too good to pass up. If someone wants your product and the price is right I really don’t feel that the design of the checkout process is a major factor.

    0
  78. 125

    No one has mentioned postage as an issue you abandoning shopping. Thats usually why I leave before purchasing…..often sites don’t/won’t tell you how much shipping is until you get the end of the cart process. I often don’t go further when I see the final cost including postage. Great post though…really useful.

    1
  79. 126

    Just a quick point about #6. Some credit cards, mine included, include the 4 digit year, 04/2011. While I agree that the majority of credit card providers likely use the xx/xx format, it is not always the case.

    1
  80. 127

    Christian, or any other readers, what companies or organizations have you found really “get it” when it come to providing a great e-commerce / donation experience?

    Thanks!

    0
  81. 128

    Excellent article!

    Would love to see you tackle the age old debate of 1 page vs multi page checkout

    1
  82. 129

    As a Canadian, one thing I find frustrating with some checkouts is that the state/province section uses a drop down menu populating US States by default, and changing depending upon the Country drop down which comes at a later point, causing you to fill the form out in a non-natural order.

    I personally understand how/why this happens, but only populating US States by default, and having the country setting come later, may confuse users into thinking that they can not order from outside the US.

    I think it is the best idea to set the country before the state/province if you are going to have it change depending on the setting.

    3
  83. 130

    Another major factor in abandonment rates is the speed of the page. Users will wait little longer than a few seconds for an ecommerce page to load.

    Slow pages reduce casual browsing time and increase checkout time – lowering revenue. It’s even worse if the page is down as all users are abandoned.

    We use a tool called Aware Monitoring to monitor the performance of our sites. It alerts us to downtime and slow periods so we can fix the issue without losing customers.

    Great user interface + great performance = very happy customers!

    2
  84. 131

    I think the main reason people abandon is they are surprised at how high shipping costs are.

    3
  85. 132

    Great article, covering almost everything except the quirky issues that affect me but very few other users in the U.S. I have two homes with two very unusual address situations. At both, I will abandon an online order if I can’t figure out whether the purchase will come by USPS (postal mail) or UPS/FedEx. That’s because at one home, I get no mail at the house at all, and only have a PO Box, but UPS and FedEx both deliver there. I have had to cancel orders after the fact because of that problem. I could have a mailbox on the road a half mile from the house, but don’t want that.

    And at the other home on a fairly small island, there is no street address at all that any computer system will recognize and mail has to go to “General Delivery” at the post office. However, UPS and FedEx both deliver to a ferry dock on the mainland, and the ferry will bring packages over to the island dock and send me a monthly bill. Again, I have to know how an item will be sent, in order to minimize costs as well as to avoid address problems. But some online order systems won’t accept any delivery address for the island because they won’t recognize the Address Line 1 (which could actually be left blank). Sometimes, putting in a phony PO box will work, but I stopped trying that.

    0
  86. 133

    Of all the carts I abandon, 70% percent of them are due to shipping costs. I am apt to buy more, spend more and buy more often when free shipping is offered. Of course, we don’t live in a perfect world so free shipping doesn’t happen often. But low cost shipping works too. There are some retailers I really want to buy from but will only do so when they send me emails or newsletters offering free or very reduced shipping charges. To me, shipping costs are the deal breaker. If I can buy locally and the cost is comparable to that of online with shipping, then I’m going to buy local because I can get it faster. Also if basic shipping is free, I am more apt to upgrade my shipping and pay the difference for 2 day or overnight.

    0
  87. 134

    Good article though I think its important to have a different shipping and billing address. I’m a student so my card’s billing address is my parents house where as naturally I want something I order to be shipped to wherever I’m living during term-time.

    0
  88. 135

    This reminded me of something I was watching on the TV the other day.

    -3
  89. 136

    Great article Christian, thanks! I have a quick question regarding the rules and legality of online billing, maybe you can offer some advice?

    Consider for example, an airline. If the consumer trys to pay for a flight with a Visa Electron card, but the airline only accepts standard Visa, is it not the airlines (or any online merchants) responsibility to expressly say at the point of purchase that they DO NOT accept Visa Electron and cancel the order until such a time that the customer uses a valid card?

    or… is the airline legally entitled to complete the transaction/booking anyway and insist on payment later? From a European perspective, do you know of any laws protecting the consumer against merchants who chance their arms and then use illegal/unfair terms to justify their position?

    Looking forward to hearing your thoughts!

    regards
    DB

    0
  90. 137

    Dmitri from ArtSocket

    November 18, 2011 1:16 pm

    Great article. Thanks.

    0
  91. 138

    Fantastic web page. Plenty of helpful information right here. So i am mailing it to 3 good friends ans also spreading in delicious. Of course, good sweat!

    0
  92. 139

    Excellent!
    Great use of examples to illustrate various points.

    0
  93. 140

    Great content! Although improving the conversion page is key, also store each element in small segment/chucks as the checkout page is completed. Doing this allows you to address or call carts that didn’t complete. Some gateways have this option available.

    0
  94. 141

    This article deserves an award! Thanks.

    0
  95. 142

    Your article states:
    “Customers typically order products to their home address. So, by default, you should use the same address for shipping and billing…”
    The above statement is not exactly general.
    Shipping to work address is highly trendy nowadays as that is where we are during delivery hours.
    Denis Carbonaro

    1
  96. 143

    Great Article, I just shared it with our Designers Team, I’m also looking fundamental guidelines for Product Catalog Navigation Design, any ideas?

    0
  97. 144

    Feels like a extremely rewarding. Can’t complain I am to stumble with your article. I was able so you can get some fruitful ideas in your composition. You write a pretty suggestive and educative point that many internet browsers are seeking on. I am assuming you to ultimately keep on posting since you also are such a masterlyon this field. Thank you so considerably. I am excited to read simple things your next post relating to this part.

    0
  98. 145

    What a great bit of information ! I especially like the point no. 4 “Visually Reinforce All Sensitive Fields On The Payment Page”.

    0
  99. 146

    wow, there’s so much great content to absorb here, I’ll have to bookmark. Personaly I think a lot of these mistakes are easier to dodge with a good shopping cart system, I recently changed to this one (link below) and found it so much more flexible and in control of my site.
    https://www.google.co.uk/search?q=absolute+shopping+cart&aq=f&oq=absolu&aqs=chrome.1.57j59j61j60l2j5.2761&sourceid=chrome&ie=UTF-8

    0
  100. 147

    I am busy with my first ever eCommerce site, and I found your article to be a fabulous guideline for me to start out and learn with good habits. I share many of the frustrations mentioned above and was looking to make mine as simple as possible so I appreciate the time you took to share this information with the rest of us.

    0
  101. 148

    Rodrigo Albuquerque

    July 7, 2013 6:08 pm

    What an amazing study! It may help a lot of people (myself included!). One thing to comment related the “create an account” topic: as frustrating that is to set up a new account, a good alternative is to set your website with a functionality that permits the costumer to login by it’s facebook or google+ accounts. Those functionality are great since it saves times in the registration process.

    0
  102. 149

    My biggest gripe is more than 50% of the websites that have a drop down list for “state” do not include AA, AE, or AP for a state. These are valid US addresses for all US military bases overseas.

    Another gripe is websites not displaying shipping methods on the home page. I abandon most sites if I have to dig to find the shipping methods as I can only use USPS. The cost to ship to an overseas military base is the same as shipping within the US, the military picks up the other cost.

    Excellent article!

    0
  103. 150

    I heard a very interesting story about ecommerce sites removing the “Confirm Page” right before you submit your order. You insert your shipping information, and then credit card number, and “thanks for your purchase!” without any warning or double-check.
    I found out that a lot of people gets really annoyed by this step, but I think it is really important. What do you guys think?

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top