17 UX DESIGN PRACTICES TO REDUCE ABANDONED SHOPPING CARTS : PART 1 DATA INPUT

Shopping-Carts-2

The facts speak for themselves, the global average for cart abandonment is around 69%

1

To put that in perspective Econsultancy estimated global retailers are losing $3 trillion in sales each year from cart abandonment alone.2

We have been working with UX/UI Design clients in Eindhoven implementing the following UX (user experience) changes with great results and we would now like to share the first 17 improvements of them with our blog readers.

Let’s face it, if your abandonment rate is anything over 1% let alone the average 69% you are losing money. Getting to 1% is perhaps impossible but with the strategies below you will surely see your conversion rates improve which is money in your pocket.

But don’t feel bad if your cart UX is not to good! Many poor practices you have probably picked up from global brand thinking and looking at how they are doing it. Or perhaps you are relying on a standard off the shelf shopping cart product… don’t do that!

Anyone can get it wrong…

Even the big eCommerce websites such as Apple, NewEgg, Walmart, Zappos… get it wrong more than you would think. Moreover most of the big cart solutions like Magento, Zencart, Woocommerce… slip big time when optimizing their shopping cart checkout UX. But never fear this is our first installment of a 5 part User Experience session into what makes users fall in love with your checkout.

Part 1 : 17 Data Input Guidelines for your Cart to improve conversion rates

In part 1 we’re tackling perhaps the most important area of UX design relating to your cart – Data Entry. Or how your users enter information to complete a transaction. So let’s get started…

Step 1: Iterate & Measure your changes as you go

You’ve heard it before but I will say it again. Iterate and measure the result of your changes. Here are some tools to track performance. We have used plenty of UX (user experience) tools over the past couple of years and have come back to these because they’ve proven to perform well.

Setup-Ecommerce-Google-Analytics

Google Analytics – Here’ some info to setup ecommerce tracking

CrazyEgg – Set it up so you can see how users scroll and click through your cart or checkout page

More from Techsmith – Run more in-depth usability studies, focus groups, field research… not cheap but highly effective.

Once you have your tracking systems installed I suggest you look carefully at your past data and get KPI’s, goals and statistics in place to help you make informed user experience decisions to move forward with.

KPI’s should follow this kind of format

  • Goal 1 – Reduce shopping cart abandonment rate by X over the next X weeks
  • Goal 2 – Perform X users tests over the next X months to get feedback and iterate
  • Goal 3 – Grow repurchase customer growth rate by X over the next X weeks
  • Goal 4 – Reduce customer services requests by X relating to payments and shipping over the next X months

Note that KPI’s can change as you proceed and be brought into realistic focus. We tend to address existing/new metrics at the end at our weekly SCRUM meetings and even ask about performance during the week during our morning stand-up meetings.

Good news; it should pay for itself the more time you invest the more you will get back.

Track your before and after data and test test test test!

Step 2: Use ‘shipping address’ as ‘billing address’ by default 3

Since more customers want to define a ‘Shipping address’, you should always ask if the ‘Billing address’ should be different from the ‘Shipping address’ and not the other way around.

Only show billing address form fields when a customer asks to use separate billing details. Customers tend to forget to click buttons to copy details from shipping to billing so use a check box. Note though as we said above the actual billing address fields should be hidden and accessed via the ‘use same billing address as shipping [cb]’ – uncheck it and it displays.

Less clutter and a cleaner UI (user interface) easier to see what a user needs to do and less drop off.

Below is a pretty good example of what we mean from PayPal but research shows having it on one page using AJAX is better as is a check box.

UX-Design-Cart-Shipping-vs-Billing-Info

Step 3: Only ask for the same information once

Once a user enters their information once whether it is an email address, credit card holder name or shipping contact name or phone number make sure you auto fill that data. Automatically your checkout process will seem not to smart if you don’t store and re-propagate data. As simple as this sounds many major players still make users enter their name on the billing area again after they just entered it on the details pages.

UX-Self-Populate-Name

Step 4: Indicate both required and optional fields

When fields aren’t indicated as needing to be filled out users tend to leave out information resulting in error messages. Don’t want to figure it out by trial and error. – they want you to clearly inform them up-front.

UX-Required-Elements-Input-Example

 

 Step 5: Preserve all customer input despite errors in the form

Nothing upsets customers more than having to re-enter content every-time they have an input error, it is a major cause of user falloff. This issue can also be overcome dynamic instant validation with AJAX/Javascript something we’ve discussed below.

 

UX-Keep-Data-on-Validation-Error

Step 6: Show examples of input format

Fields such as phone numbers tend to be confusing for users. It’s best to provide an example of the format for the users. This can be done in the non-focused field but you should always accept fields like phone number in many different formations.

Likewise for credit cards you should accept formatting in multiple ways with or without spacing between the digits. Then reformat it for the gateway in the code.

Step 7: Use only a single ‘Name’ field

Users don’t tend to look ahead when filling out fields and when they see a field that says name or even first name they tend to scan and then by reflex enter their full name. Only to have to return to the first field and delete half their name later. An easy solution to the user centric option of having one name field then doing the formatting of the name if required for say e-newsletter sending ‘Dear Peter’ in the code. Hardly any sites do this properly but user research show’s users are cutting and pasting their second name so why not get with the program?

Step 8: Validate form Fields online

Validating a users inputs as they go is definitely best practice. Users enjoy being validated for their good work and it prompts them to continue on the path. Use AJAX / JavaScript to validate form fields so users don’t even need to submit a form to realise there’s a mistake.

UX-Dynamic-Validation

 

Dynamic validation can also be used creatively to talk to users during the payment process. This is perhaps your greatest weapon.

 

UX-AJAX-Validation-Example-DOB-Birthday

 

Step 9: Remove select features (e.g. a drop-down) when there’s only one option

With intelligent fields populating data from a database for example ‘choose payment method’ or ‘shipping options’ for specific scenarios sometimes there isn’t multiple options to choose from. In these cases there is no reason to provide a drop-down menu so cull it for less than two options.

Step 10: Auto-detect city and state immediately after ZIP code is provided

Your customers should only have to fill out the minimum amount of fields. Also the more fields they have to fill in the more chance of error. So building in auto detection and then completion of state and city based on a post code is best practice.

There are sometimes technical difficulties with ZIP code/Postal code duplication so in these cases users should be prompted to pick the correct one.

Plus don’t remove the possibility to edit the city and state information because any errors will result in a bounce.

Step 11: Disable the paste-function in ‘E-mail confirmation’ fields

A large number of users copy and paste theirs emails into the validation fields so it is best practice to disable user’s ability to do this. I tend to simply delete the email validation field since it has limited value, it’s a personal preference thing. Social logins are also a popular validation option which we’ve discussed below.

Step 12: Only use drop-down lists when there are less than 20 options

Customers can become overwhelmed when faced with long drop down lists. It also poses usability issues when scanning on mobile devices. Other more user friendly options are auto complete text fields instead. This provides that the data is valid but limit the users need to scroll. If however you do wish to use dropdown menus assure they’re alphabetically functional allowing users to skip to an option with a letter press or synonym typed. Moreover, consider putting common selections at the top or even better, in the case of geolocation and country state selection autocomplete it with and IP address location database or GPRS data.

Step 13: Keep labels visible at all times

Websites such as Apple tend to hide internal field labels once a user begins interacting with them, for example typing in a text field. This means the element input info is actually is gone and the content has to be deleted to see it again. Moreover when there is a form validation issue users have to use basic logic to sort it out instead of simply glancing at the elements label above the field.

Always keep labels visible for the user even at the cost of page real-estate and it being clean. I’m a designer who loves clean UX but not at the cost of users having to think and back track.

Step 14: Use geo-targeting to auto-select smart defaults for your customers

Geotargeting is a must now for sites either via IP address databases or smart devices with GPRS. Additionally there are other ways like via a user being logged into a social or search engine account to request location. Developers looking to make it super easy for users should consider how they manage this process because it will result in drastic improvements in conversion statistics.

For ecommerce companies having geodata it also allows shipping information costs to be customised to users. Landing page, product and language customisations. It’s a no brainer that it’s a powerful feature that should be a priority.

UX-Auto-Location

Step 15: Add new input fields below the trigger-field

It sounds logical but it still should be touched upon that if you have drop down menus, check boxes, radio buttons, buttons or other elements changing the form makeup then those dynamic elements should proceed the element changing the form.

This is because, like with reading, users move down the page. So have the country with Geo-location then postcode then state city data. Your post code / zip can look up state, city town and the other functions mentioned above.

Users will love you for it.

Step 16: Form field length should never conflict with the expected input length

The data length of text fields and boxes should always be in-line with user requirements. So a text box for shipping instructions maybe 500 characters but a ‘Card Security Number’ or the three digit number on the back of the card should conform to the three required numbers.

Step 17: Social log-ins

Social log-in and account setup options can provide a heap of functionality for ecommerce sites.

Dave Chaffey gives some great social sign-on information in his article here

65% of internet users have a social account of some type and using social sign-in during account sign-up can greatly reduce time and have benefits like being about to personalise the site with a photo from services such as Facebook Graph.

23% of people indicated account setup as a reason for shopping cart abandonment so it’s logical that introducing social sign-on combined with payment systems like Paypal which allows access to a clients address information can provide a seemless quick purchase workflow. The stats indicate that social sign-up is worth the time to limit data entry. Plus there’s side benefits such as:

  • 40% of customers (2 out of 5) prefer social logins
  • 68% of customers go to social networking sites to read reviews so social sharing can be streamlined with social sign-on
  • The average number of page views increases from 4 for email sign-up to 11 for social sign-up

UX-Shopping-Cart-Social-Sign-up

Seriously consider social sign-up along with the other 16 data-input steps we’ve provided above to streamline your eCommerce UX. And remember if we can help you with UX/UI Design in Eindhoven we’d love to hear from you.

Please share and comment on the impact these steps have had on your conversions and watch out for part 2 of the UX Shopping Cart series.

  1. e-Commerce Checkout Usability, Exploring customer’s checkout experience, Baymard Institute Research, June 6, 2013, ISBN 978-87-994365-2-1
  2. https://econsultancy.com/blog/64680-six-tactics-for-reducing-cart-abandonment-rates#i.weabnjzqdeyu10
  3. e-Commerce Checkout Usability, Exploring customer’s checkout experience, Baymard Institute Research, June 6, 2013, ISBN 978-87-994365-2-1

Tags:

Reply on this Blog post