Cart abandonment is one of many frustrations for an online merchant. It’s difficult to understand where customers decide to abandon their carts before completing their purchases without knowing the specific reason why the decision was made. According to SleekNote study published in 2022, the average cart abandonment rate is just under 70%.
Cart abandonment is a regular occurrence across all devices, but most frequently on mobile. In fact, cart abandonment is as high as 81% when utilizing a mobile device. Why is there such a high percentage of incomplete purchases when customers use their phones? Mitigating cart abandonment is an essential obstacle to overcome with your eCommerce business in a world where “mobile-first” is becoming the new normal.
CHECKOUT
The checkout process must be designed with speed and efficiency for customers, as shopping cart abandonment typically occurs during checkout.
1. FORM FIELDS AND INPUT INTERACTIONS
First and foremost, reduce the number of form fields.
The checkout process is made possible by form fields. The reality of eCommerce is that merchants require user data to complete purchases. However, excessive form fields are detrimental to the checkout process. Too many fields create user frustration and cause buyers to become less attentive. This often leads to users entering incorrect information to speed up the process, or immediate abandonment of transactions entirely. Fewer form fields not only speed up the checkout process but also give shoppers less work to do.
From a UX perspective, design your fields to allow keyboards that correspond to the form field they’re supporting. For example, if the form field is for a phone number, adjust the keyboard to display the numerical keyboard. Likewise, provide an alphabetical keyboard that includes “@” and “.com” keys for the email address.
Another way to help users quickly complete form fields is by utilizing autofill or autocomplete.
Example of a keyboard corresponding to the form field it wishes to fill (source).
Allowing customers to skip the manual process of entering each field individually eliminates a pain point that annoys customers during checkout, which leads to an increase in transactions.
As of April 2019, Safari, the default browser on iOS, is the most used mobile web browser. Safari on iOS supports iPhone and iPad and includes autofill capabilities, though this feature must be enabled by the user due to privacy concerns. Google Chrome, the second most popular mobile browser, auto-fills by default.
If you’re unsure about whether or not to cut a form field, or if you just want to make sure your fields are as user-friendly as possible, refer to this checklist:
- Needed or needless: Is the form field absolutely necessary?
- Description: Where is the label? Is there placeholder content still present within the field? Is the form field labeled required (*) or optional?
- Visibility: Is the form field easily visible? Is the entirety of the form field visible when the keyboard is present?
- Autofill: Provide field defaults based on available history and/or frequently used inputs and values
- Typing: Is copy and paste into the field permissible? Which keyboard is appropriate for the field?
Use this checklist while reviewing each of your forms and use it as a guide moving forward. When best practices are followed from a user experience perspective, conversions have a much greater chance of success.
2. PAYMENT
A clear and concise customer experience before, during, and after a payment process should be an obvious requirement for any eCommerce site. However, 60% of shopping carts are abandoned due to hidden or surprise costs, leaving users feeling deceived and cheated.
It is essential to make all costs visible before the transaction even starts, including shipping fees, taxes and any other extra costs relevant to the purchase when designing your eCommerce store. You can remain transparent with customers by including a price calculator so that they can see all their charges and totals.
Easier and more mobile-friendly options should be offered to customers completing transactions on mobile. Shopping cart abandonment is reduced by 8% when vendors simply provide more than one mobile-friendly payment option. Solutions include PayPal, Apple Pay, or Amazon Pay, all of which can be performed as a single-click option, often with added security features. Even instant payment services, like Venmo, are now a mobile eCommerce payment option for Shopify merchants.
While some payment methods are more popular than others, not all users will want to use the same option, so providing alternatives is helpful to the end-user. Either way, fumbling around to enter physical credit card details into a form field is not a pleasant user experience.
Designers can incorporate the ability for users to take pictures of their credit card to complete the transaction instead of providing a form field. This type of functionality compensates for human error caused by manually typing credit card details and it also expedites the payment process, satisfying a users’ desire for speedier checkouts.
Remember that choice is a luxury. Offering too many payment options could confuse or overwhelm a customer. Be specific and thoughtful in your payment options.
OPTIMIZING FOR MOBILE
The mobile user experience is often drastically different from that of the desktop user experience. Differences between desktop and mobile experiences include interaction techniques, readability of the site and reasoning behind visiting the site. It’s these differences in the context of eCommerce that dictate a purchase or cart abandonment.
3. DESIGNING FOR TOUCH
Designing for touch is a crucial aspect of any mobile optimization project. Designers need to consider gestures, which are physical movements made by the user to activate a specific function on mobile devices. Gestures provide efficiency and ease during the mobile shopping experience when utilized correctly.
Reference of common gestures made by users courtesy of Touch Gesture Reference Guide. Creative Commons.
Designing for touch also means taking what physical aspect a user is utilizing into account, as they’re the primary point of contact between users and their phones. The placement of the essential elements of a mobile eCommerce site or application should be contingent on how customers hold their phones and where their thumbs or styluses may land as a result.
Heatmap demonstrating where thumb placement typically occurs.
Take the Amazon screenshot below: Amazon’s placement of important elements is in accordance with the heatmap above as the logo and subtotal are in a harder to reach area. Meanwhile, the checkout button and other products are within an easily accessible zone.
It’s also worth considering accessibility options for those who are sight or touch impaired. How does a user navigate your site if they have mobility restrictions and are unable to physically interact with a screen?
4. NAVIGATION
67% of mobile users will leave a mobile site due to poor navigation. A successful mobile site has navigation that is quickly discoverable, accessible and requires little screen space.
The homepage is usually the designated navigational epicenter of a site, especially for task-oriented sites like eCommerce. In addition to a standard navigation menu, homepages should include a search function for more specific navigation.
There are generally two types of shoppers: those who browse your site’s catalogs and those who know exactly what they want to buy. The shoppers who know what they want are the ones who will benefit the most from a search function.
Mobile guidelines for the search functions should include a text box and a “search” button. The text box should be able to handle up to 20 characters. As a general rule of thumb, don’t return a blank page if there are no search results for their query. This is not only off-putting but in the mobile space could create confusion from the user on whether they have a stable connection to your site. Instead, provide a brief “no search results” message in addition to recommended products.
Your navigation menu should answer the following four questions:
- Where is the user?
- Where else can the user go?
- What will users see when they arrive?
- What can the user do when they get there?
Design a menu that is equally intuitive and informative. Additionally, the navigation menu should be consistent throughout the entire mobile site and designed to be similar across all pages. Research the various menu types and design one that best enhances your site that is responsive and easy to interact with.
SHOPPING CART ABANDONMENT: GOODBYE FOREVER?
To completely eliminate shopping cart abandonment from your mobile eCommerce site is impossible.
Complete elimination of shopping cart abandonment from your mobile eCommerce site is impossible. The nature of human indecision will always play a role in the sales funnel. However, ensuring a positive mobile experience is imperative and entirely possible, with the right strategy and design focus.
Customers who have a poor experience on a particular mobile site are 62% less likely to make purchases on that site in the future. Implementation of design best practices, like the ones detailed above, should prevent or at the very least, decrease, shopping cart abandonment.
Whether your mobile eCommerce site or application is up and running or it’s in the development stage, consider user experience research services or a design audit to identify where and how you’re either succeeding or lacking in terms of the best practices. Consider contacting us, a custom eCommerce and user experience web development company, for any additional questions or support.
