showing 20 of 216

#85

Checkout

Allow buyers to edit or cancel their order right after placing it

Directly from the receipt page Add an ‘Edit Order’ link or button directly in the Order Confirmation page.   Contact information (Optionally) add a section with ways to contact you if they need to edit their order and prefer speaking to a customer service representative.

Checkout

Limit the exit points during the checkout process

Remove the main navigation This will reduce the likelihood of them navigating away to another page of the site and abandoning their cart. For a good example to illustrate this best practice, take a look at how Shopify does it (see below). The header and footer are removed, but they keep a couple of ways […]

Checkout

Offer a guest checkout

Some data According to Business Insider, 28% of US online shoppers abandon their cart because they don’t want to register/create account just to make a purchase. According to Baymard, it is the reason given by 31% of shoppers. (source) ASOS’s approach removed the account creation step on the checkout login page and it reduced their […]

Checkout

Offer relevant upsells at checkout and after purchase

Before you do… If you have very low conversion rates everywhere, then try to optimize that first.   Start with high converting steps If you have a low conversion rate on your checkout page, then put an upsell only in your product pages (or in any other part where you don’t have low conversion rates). […]

Checkout

Offer multiple payment methods

Typical payment methods Credit card PayPal Google Pay Apple Pay   PayPal In regards to PayPal, roughly half the stores I looked at (see the table below in the examples) offer an express PayPal checkout with a CTA button at the same place as the normal ‘Checkout’ button (in the cart). And the other half […]

Checkout

Implement inline validation in forms

Inline validation Show a checkmark after each correct input. When the user makes an error, such as entering a wrong credit card number, show the error message right next to or below the field it relates to.   Preserve data Preserve the form field data entered on validation errors   Side note Credit card numbers […]

Checkout

Clearly mark form fields as optional or required

Be explicit According to Baymard, 73% of stores don’t explicitly mark both required and optional fields. Only a few of the stores I looked at implement this – and it is very easy to do. As a consequence, 32% of users during testing encountered a validation error because they did not complete a required field. […]

Checkout

Ask for the minimal amount of information

Optional fields are disruptive Showing optional fields by default disrupts the checkout experience: Completing the checkout steps takes 5% to 30% longer Users doubt the correctness of order data More validation error messages More orders are submitted with incorrect information   Default visible fields Typically, those fields are: Full Name Street Address Zip Code Country […]

Checkout

Show the appropriate keyboard

Based on the field type Show the correct keyboard based on the type of the field the user is typing into. For example, if they’re entering a phone number or an email, then it should be a different keyboard than when they enter their first name.   Email keyboard   Name keyboard     Phone […]

Checkout

Allow and auto-format spaces in the credit card number field

A confusing number Shoppers struggle with verifying that they typed their credit card number correctly, which is a cause of cart abandonment. Baymard observed that 23% of users either type or verify their card number in 4-digit blocks.   Increase accuracy Allowing them to type spaces and auto-formatting their card number with spaces can increase […]

Checkout

In the checkout form, use field labels instead of placeholder text

Avoid disappearing field labels The issue is when the placeholder text disappears as soon as you start typing, you can easily forget which field that was – especially if you’ve filled out a few fields.   Shopify Shopify’s default behavior is fine because once you start typing in a form field, the placeholder text becomes a […]

Checkout

Autocomplete the state/province

Too many options State dropdowns contain too many options and make it unusable. A province dropdown isn’t as bad since it only contains 13 options.   An address finder is preferable This recommendation is if you don’t have an address finder (see best practice #123).

Checkout

Automatically pre-fill City and State fields when the user enters a zip/postal code

An address finder is preferable This tip is valid only if you don’t have an Address Finder field and keep the traditional address fields (street, city, state/province, country, zip). It will simplify the checkout form a little. Please see best practice #123 for that better solution.   Complex checkouts create abandonments From the data I […]

Checkout

Format the expiration date field the same as on the physical credit card

ISO format The ISO standard for this format is “MM / YY”. Make sure that keyboard use is supported for these fields, and not force users to use the mouse as 24% of users prefer filling out the expiration date with the keyboard.   And as you type, the formatting (the slash separator) is automatically […]

Checkout

Avoid multi-column form layouts

Multi-column forms create usability issues users omit to notice some fields fill out the wrong fields out of confusion (source)   Shopify And actually, Shopify implemented this, their checkout form is a single column (except for the name fields and the country / state / zip). Their second column has a summary, discount code, subtotal, […]

Checkout

Test both a one-page and a multi-page checkout

Test, test, test Test a One-Page Checkout especially if your average order value is low and you’re selling impulse purchases. If you can, split test against a multi-step checkout, because it is not clear which option will yield higher results for your specific industry and store, as evidenced below.   Power Support One-page checkouts and […]

Checkout

Use input masks for restricted fields

Fewer errors Input masks reduce the number of validation errors, which can reduce site abandonments. Restricted fields are for example a phone number, credit card number or a date.   Regional differences You should also consider regional differences in format. For example, the date format in the US is MM/DD/YY, in Europe it’s DD/MM/YY, and […]

Checkout

Increase the perceived security of your checkout page

Especially for smaller brands According to Baymard, 18% of shoppers (from 1044 respondents in US) abandon their cart because they do not trust the site with their credit card information. The tips below are especially important if your store is NOT a large brand such as Apple, Microsoft or Walmart.   Trust seals, padlocks, and […]

Checkout

Validate the address and warn the shopper if it cannot be verified

Catch errors and suggest a correction I’ve seen examples where you could type an address with a street number (only a street name), which is invalid. So depending on the quality of the address finder, you may still want to have an address validator to catch invalid addresses that the Address Finder allows. If the […]

Checkout

Localize your payment methods

Payment options change per country If you sell internationally, users prefer certain payment methods based on where they live. For example, in South America, bank transfers are very common. (source)

Checkout

Present the Guest Checkout as the prominent option

How? Give them the choice to sign up or log in to their account, but the guest checkout could be selected by default, and visually attract more attention than the other options. Users expect it in the upper-left on desktop, and on top on mobile. Clearly label the Guest Checkout option (include the word “Guest”) […]

Checkout

Match the order of credit card fields to the physical card

36% of stores Baymard reports that 36% of stores don’t! (source)   Confusing And if the cardholder name is your first field, 33% of users will type their credit card number in it because that’s what appears on their card.   Order of fields Typically, the order of the information on credit cards is: Credit […]

Checkout

Allow shoppers to edit information directly in the Order Review step

Most stores Let’s say you’re buying something and made it to the Order Review step, you’re ready to hit the Place Order button, and you realize that you messed up your address, or your card expiration date. What do you do? Most stores force you to go back to one of the previous steps to […]

Checkout

Specify why the phone number is required

Required phone fields cause abandonments Required but unexplained phone fields were observed to be a direct cause of abandonments for the subgroup of users who are suspicious of a site’s motives. – Baymard   58% of brands don’t provide an explanation Below is a poll done by Baymard to 2800 shoppers.   Do you need […]

Checkout

Allow customers to edit their credit card number

PCI compliance PCI compliance prevents stores from saving a user’s credit card number directly. As a consequence, 84% of stores do not allow users to edit the credit number directly. Users are required to add a new credit card and delete the old one.   A solution An elegant solution to this problem is to […]

LOAD 20 MORE