It’s a harsh reality in eCommerce. The average global shopping cart abandonment rate hovers currently around 67%. These visitors have seen your ad. Clicked it, browsed your store and Read your product descriptions. Zoomed in on the product images. Hit ‘add to cart’. And they chose that extra accessory you suggested to go with their buying process. But then… they abandon it all
To research how any site can improve the checkout process and create lifetime customers. It should be part of an ongoing UX strategy.
Your website’s user experience (UX) must focus on building your visitor’s confidence. It is by helping them achieve their end goals.
Going by Nielson Norman Group, a user-experience research firm. There are over 800 best practices for e-commerce usability. Either you have billions of dollars to spend on development. Else you’re not going to meet every guideline.
Let’s break down basic best practices by three category type as listed below. We bring you nineteen eCommerce UX tips to make it easy for your visitors to buy from your site.
Category: Data Input- any data input the customer must enter during checkout
- By default, use shipping address as billing address
ISSUE: Most customers order products to their personal address. It makes no sense to ask for both billing and shipping addresses.
By defaulting the billing address onto the shipping address. You’ll have a lot less fields in your checkout process. Making it less intimidating to your customers. It also reduces the risk of misspelling the address. If you only have to enter it once. As people won’t rush quick through the form. If there are errors in the form, the customer only has to fix them once. It’s preferable to use a checkbox (or something similar) for choosing. Whether to use a separate address for billing. By using this approach (as opposed to having a ‘Copy shipping address’ button). Any errors will only have correction once.
TIP: Default the billing address to be the same as the shipping address. Use a checkbox to ask. If ‘Billing address’ should be different from the ‘Shipping address.’
2. For same information, just ask once
* ISSUE: Customers find it annoying providing the same information twice.
Customers hate having to re-enter the same information many times. So if your customer has already provided some information once, don’t ask for it again later. Or at least, pre-fill the fields that ask for the same information.
TIP: Never ask for the same information twice, always reuse the prior entered information.
3. Use a single name field
* ISSUE: Customers enter their entire name in the ‘First name’ field. Because they think it’s a single entity.
A bonus of combining these fields into a single ‘Name’ field. It is that you end up with one less form field, making your form, less intimidating.
TIP: Use a single ‘Name’ Field instead of two separate fields for ‘First name’ and ‘Last name’.
4.Remove select features when there’s only one option
* ISSUE: Customers get confused by drop-downs when there’s only one option.
Let’s say you have three different shipping options in your e-commerce store. But for a few products. Only one of those shipping options are available due to weight restrictions. If a customer then has one of those products in their shopping cart. Remove the unavailable options and present the remaining shipping option as standard text.
TIP: When there’s only one option to choose. Write it as text instead of displaying it as a selectable option.
5. Auto-detect city and state immediately once you receive the Zip code
* ISSUE: Customers end up misspelling while filling up fields, if they have to write it themselves.
Now, since each ZIP code embeds data such as state and city. You can fill out these fields for your customers. Make their shopping experience more pleasant. Meanwhile, decrease the number of misspelled towns and states in your orders.
TIP: Auto-detect the customer’s city (or, at least, possible cities) and state. Once they enter their ZIP code.
6. Disable the paste function in email confirmation fields
* ISSUE: Customers copy/paste their e-mail address into the ‘E-mail confirmation’ field. Thereby rendering the proof meaningless.
60% of visitors copy/pasted their e-mail address. When they had to retype it in a confirmation field. They didn’t think they would misspell their e-mail. Or were just too bothered to type it twice. Even if they realized the possibility of their e-mail address being wrong.
TIP: Either disable the paste function in your ‘Confirm E-mail’ Field. Else don’t use a confirmation Field at all.
7.Use drop-down menus only when there are less than 20 options
* ISSUE: Massive drop-down menus are difficult to scan and can overwhelm customers.
Whenever you have 20+ options, consider other ways of presenting the data. Can you use an auto-complete enabled text field instead? It will still ensure that the provided data is valid. People don’t have to scroll through a huge list of options. In such cases, you should also support synonyms typed for every option. If there is a doubt on how to spell a word or what to call a concept, you support all standard interpretations.
TIP: Keep drop-down lists to no more than 20 options. Take care to think about sorting. As the list gets bigger, consider alternative options (such as an auto-complete). Or, at least, include the most popular options at the top of the list.
Category: Copywriting- the use and wording of text throughout the checkout process
8. Provide extra information on introducing unique features
* ISSUE: Customers have a hard time understanding not so standard features. Without providing extra help or information.
If you’re introducing a new feature not found on the vast majority of e-commerce sites out there. Then you need to be more careful in explaining the function. Provide clear instructions and easy access to in-depth help.
TIP: Be extra vigilant in providing proper help for any uncommon features. That your customers are unfamiliar with (features you don’t find on most e-commerce sites).
9. Avoid technical jargon
* ISSUE: Most customers don’t understand technical jargon. (While any jargon is wrong, technical jargon is particularly prevalent.)
When customers don’t know what you’re asking. Or if they’re just unsure about it. There’s a much greater risk that they’ll provide you with the wrong type of input or leave the field blank. It results in more errors during checkout. Because some customers try to leave required fields blank.
TIP: Avoid technical jargon – use clear and neutral language and expressions.
10. Avoid using contextual words like Continue
* ISSUE: Contextual terms such as ‘Continue’ are ambiguous and tend to confuse customers.
Depending on your customer’s state of mind. A button named ‘Continue’ in the shopping cart could mean one of two things:
- ‘Continue shopping’ – if the customer is also looking for a shirt to go with those jeans, or
- ‘Continue to checkout’ – if the customer has all the products she needs and just wants to pay.
Another example is ‘Back’. Back to last page? Back to search results? Where? Or how about ‘Proceed’? These are all contextual words that change the meaning. Depending on the context (your page) and your customer’s state of mind.
TIP: Avoid using contextual words like ‘Continue’. Instead, add extra words. Or replace with words or phrases that aren’t open to interpretation.
11.Make it clear when the transaction takes place
* ISSUE: It’s often unclear to the customer. If clicking the primary button will complete the buying process.
Some sites end their checkout process with a ‘Confirm Order’ page. While other sites end with an ‘Order Confirmation’ page. They sound similar but are in fact opposites. In the first case, you haven’t yet paid and still need to confirm the order. In the latter, you have paid and don’t need to do anything else.
Instead, use words that do not confuse. For example, ‘Review Order’ and ‘Receipt’ in that respect. It’s just a good idea to think about what you name the button. On the page where the transaction happens, to make sure. It’s clear to the customer that they’re about to place their order. ‘Buy Now’ or ‘Place Order’ is much more explicit. Than the oft-used ‘Next’, ‘Continue’ and ‘Proceed’.
TIP: Show in clear terms whether the primary button will complete the buying process or not.
12. Use clear and meaningful shipping terms
* ISSUE: Customers can’t figure out what ‘Standard Shipping.’ Or ‘EggSaver’ represents from the name alone.
When selecting an option like ‘Standard Shipping’. Your customers can only guess how long it will be before they receive their order. Making it difficult to compare the different shipping options.
‘Next Day’ and ‘2 Day’ shipping are quite clear and self-explanatory. But a name like ‘Standard Shipping’ gives the customer, little information about the option.
It is especially important if you provide to choose from many shipping options. So it makes easy for your customers to compare them.
TIP: Include shipping information in the name of your shipping options, e.g. ‘Standard shipping (4-7 days)’ instead of ‘Standard shipping’.
13. Format the expiry date fields as they appear on the credit card
* ISSUE: Credit card ‘Expiry Date’ fields are tricky to decipher for the customer. When they don’t depict as shown on the credit card.
The ISO7813 standard specify the characteristics of “Financial Transaction Cards.” In section 6.2, the standard specifics MM/YY or MM-YY. As the correct way to emboss the expiry date on credit cards. Hence designing your expiry date fields to match these values will allow the customer. To have the ease in entering the correct input. They need not translate the numbers on their card to the corresponding month name. Or worry whether they’re supposed to begin another set of values altogether.
TIP: The credit card ‘Expiry Date’ fields need the writing to match the physical credit card. The month field being two digits long (with a 0-prefix for single-digit months). Followed by the month name, and the year field being two digits long – e.g. ‘03 – March / 16’ for March 2016.
Category: Layout- the visual layout of the checkout page
14. Show error in a clear and prominent way
* ISSUE: Customers overlook error messages, leaving them unable to resolve the error.
If a customer doesn’t notice or, understand your error message. They fail to address the error to proceed with the checkout process. In such cases, an abandonment is inevitable. Thus, you need to put time and effort into designing and wording your error messages.
It is especially important on pages with many form fields. Lots of text, or, in general, pages that just have a decent amount of elements (text, graphics, etc.). As the error messages tend to ‘drown’ in clutter on such pages.
TIP: Provide clear error indications, located as close to the error. It’s preferable to have high visual contrast to the rest of the page.
15. Make Guest checkout a prominent option
* ISSUE: Customers often overlook the ‘Guest Checkout’ option.
If you use a single-column layout with a description of each checkout type. Then you should place the ‘Guest Checkout’ option at the top. It’s the first choice your customers will see. Customers who know they already have an account will be alert to look for the sign-in option.
Also, form fields get a huge amount of the customer’s attention. So if you have any other form fields on the page (e.g. sign in areas). The ‘Guest Checkout’ must have the most dominant place on the page (top-left). Making sure your customers notice it.
TIP: Make your ‘Guest Checkout’ the most prominent option. It’s preferable if placed in the top-left area of the page.
16. Explain when you obscure information
* ISSUE: People don’t understand when or why you obscure informat***.
Considering that people can’t verify the validity of hidden information. It even confuses some. Not displaying sensitive information is a valid option. Don’t show information that you need to hide. If you do cover confidential information like credit card information. Then offer your customers an explanation, so they understand why you’re doing this. Or you can consider showing only the snippet and write ‘Visa card ending in 0807.’ This way the user won’t get confused by obscured characters. You still show them the ending digits so the user can identify the card.
TIP: Either don’t show information that needs obscuring at all. Or offer an explanation about why you obscure it.
17. How and where to place the primary button
* ISSUE: Customers can have a hard time finding the button. For proceeding to the ‘next’ step of the checkout.
It’s such a good idea to have an extra primary button at the top-right if your page is long.
When you have two main buttons. There is always, at least, one button visible, so the customer feels in control of the page. They know how to proceed with the buying process at all times.
Furthermore, it’s important to place your primary button(s) always consistent throughout the entire checkout. This way your customers always know where to look for it. They feel in control of the checkout process as they instinctively know how to proceed.
TIP: Place the primary button in a consistent manner throughout the checkout. It’s preferable at the bottom of the form.
18. Conceal navigation during checkout
* ISSUE: Showing navigation during checkout adds unnecessary visual clutter to the process.
Since navigation is something, you display on all pages. Slimming it down or removing it in its entirety from your checkout. Will make all your checkout pages feel less intimidating to your customers. By doing so, you will allow the customer to focus on the task at hand, that is, buying a product from your store.
TIP: Hide or slim down the standard navigation links during checkout to reduce complexity.
19.Use smart defaults so customers can proceed in a seamless manner
* ISSUE: Customers often overlook options, resulting in unnecessary error messages.
In general, you should always make a default selection for your customers. For them proceed with ease. The default selection should be the most popular of the available options. If you have no data to inform this decision, choose the one you think most of your customers will select. In the cases where you want to force your customers to choose an option themselves. You should make it crystal clear that they have to select something to proceed forth.
TIP: Make a default selection so your customers can move without friction. Or make it clear a selection is necessary to proceed.
You don’t need a million dollars to bring about a positive user experience. None of the big brands meet the 800+ guidelines suggested by Nielson Norman Group. Never assume your customers know your site like you do. Nail these basic tips and you will get Google and customers to love your site and buy from you.