Guest post by Jeffrey Li
More people are shopping online than ever before since the rise of mobile commerce.
Unfortunately, mobile shoppers are impatient people. They don’t have the patience for long forms, long load times, or small, hyperlinked text. At the same time, they expect that when making a purchase, the experience is going to be seamless, convenient, and secure.
Because of this shift in shopping habits, you should prioritize optimizing your checkout experience so your customers don’t abandon their carts (which is something that 69.23% of people do).
This post shares some key areas you want to focus on optimizing so as to convert as many shoppers as possible in the unforgiving world of mobile commerce.
1. Security
Do you feel safe when shopping online with your smartphone? If not, then you aren’t alone.
A mere 23% of online shoppers believe their personal data is secure. This statistic reveals how important it is for online retailers to reassure their customers that measures are being taken to protect customer data. Keeping this in mind, here are some ways you can get your customers to trust you:
Trustmarks
Trustmarks are indicators on websites used to reassure visitors that it’s a safe place to provide their information. One Trustmark you probably recognize is the SSL Certificate. This certificate is what makes the “https” part of URLs green and include a padlock icon, as a way of indicating the site is secure.
Below, you’ll find a list of trustmarks that you can use to up your game in the privacy department.
Streamlined Experience
In order for retailers to establish trust, they should keep customers on the same domain for the entirety of their transactions.
Sending customers to a different website at any point during the checkout process is not a good move, as it diminishes customers’ trust and confidence in the site’s safety. As a result, customers may become more apprehensive about providing their data.
2. Payment
The landscape of ecommerce payments has changed vastly in the last few years. Formerly, there was payment by card. Now, there are more payment providers than most people can recall.
Providing customers with more payment options can be the metaphoric cure to checkout pains. Furthermore, it allows customers to stay laser-focused on their primary goal, which is completing their orders. Here are some things to consider in the new payment-processing ecosystem:
Offer More Payment Options
Nowadays, customers have the ability to make purchases simply by tapping their smartphones on a card machine.
Retailers can benefit considerably by keeping up with the times and providing a wider array of payment options. As of December 17, 2017, only 5.3% of adult smartphone users have used Android Pay. This figure stands at 12.8% for Apple Pay. Clearly, usage of mobile wallets is not yet widespread (but there is still glory to be had in being an early adopter).
Here are some payment providers you can adapt to get ahead of the curve:
Expedited Payment
In 1999, Amazon patented its 1-click purchase process. This patent expired on September 12, 2017, opening the floodgate for competitors to reproduce the feature.
Innovations like 1-click ordering work because they drastically simplify processes otherwise considered bothersome. Striking a balance between convenience and security can be tough, however. But Amazon has proven that the upside potential is tremendous.
Whether it’s adding 1-click purchase or checking out with a fingerprint, consider what other ways you can help speed up the payment process for customers.
3. Make Better Forms
Filling out forms on a mobile device is not usually a positive experience. After all, screens are small, and it’s much easier to type things out with a physical keyboard. Given that, forms should be designed with this physical limitation in mind so as to make them as intuitive as possible.
Addresses
Most users don’t want to fill out the same information twice. People usually have the same billing and shipping addresses. So offering a checkbox that allows them to use their shipping address as their billing address can easily remedy this particular annoyance. This feature is often overlooked, however, even though it can save customers time and effort.
Layout
With the small size of mobile screens, you should be mindful of how to best utilize the space. You can improve ease of navigation with these guidelines:
- Keep the form on one continuous column and avoid placing questions side-by-side.
- Top align your labels to reduce the horizontal space required.
- Use some form of zebra striping to visually contrast elements.
Autocomplete
Autocomplete should be enabled in HTML so users can complete the form using the information they have historically entered. In Google Chrome, Autofill can automatically fill out forms based on users’ Autofill profiles.
Length
Keep your forms as short as possible. By asking for too much information, you run the risk of cart abandonment because, as previously mentioned, people don’t want to spend a lot of time filling out forms.
Moreover, adjusting the size of the fields to match the length of the expected response can result in better user experience.
Effective CTAs
There are numerous elements that go into creating an effective call-to-action. Here are some tips:
- Design the CTA to fit the space while making it easy for users to find it. This can be done by choosing a color that contrasts with the surroundings and making the CTA span the width of the page.
- Experiment with the copy so you can understand what attracts the most customers. For buttons, test multiple variations to figure out how to maximize your click-through rate.
- Position the CTA where visitors are most likely to see it.
- Draw attention to the CTA by utilizing white space.
- Limit the number of distractions (the checkout page is not the place for social media and any other external links, which could divert users’ attention).
Inline Errors
It’s really annoying when you submit a form only to have the page reload and tell you there was an error that you have to scroll to find. This is even more annoying on a mobile device.
To combat this, replace your popup errors with floating errors to validate the data in real-time. This way, the error is apparent as soon as it’s made and users can easily make corrections.
4. Reducing Friction
Friction in this context refers to any obstacles that hinder users from completing the checkout process. Whenever there’s too much friction, visitors are more likely to bail. Here is a general set of pointers to help get your visitors from point A to point B as seamlessly as possible:
Order Summary
It should be incredibly easy for customers to review and modify their carts prior to checkout. This idea is similar to how servers at restaurants often recite your order back to you. They’re providing you with an opportunity to either confirm or modify your order.
Everlane’s order summary page is a nice and clean example of this. Notice how you can easily adjust the quantity or remove the item(s) from your cart. With just the essential information, customers can choose to place their orders.
Guest Access
Unless you’re offering some extremely exclusive service, there’s no reason your customers should be required to sign up before checking out. This barrier can be eliminated by including a Guest Checkout option and delivering your value proposition for creating an account once the purchase is complete.
Promotion & Discount
You’ve probably experienced this before. You’re in the middle of checking out and you come across a discount field but you don’t have a code, so you leave the site to try and find one.
You don’t want your visitors to do this, however, because it may discourage them from placing their orders if their search is unfruitful.
Avoid setting visitors up for disappointment. Hide the discount field by default or make it small enough so it can be found only if visitors are looking for it.
One-Handed Usage
Studies by UX matters have shown that 49% of people hold their phones with one hand. Therefore, you should design your app with one-handed usage in mind.
Consider how you can place vital app elements where they’re easily accessible. Another factor to consider is how scrolling might affect the shopping experience.
Below is a diagram showing the “zones” where elements are most comfortable to reach via a person’s thumb, depending on grip preference.
5. Progression
There’s something innately satisfying about completing a task. Specifically, it’s the release of certain neurotransmitters associated with positive feelings.
Taking this into account, representing the progression of the checkout flow contributes to improving the overall user experience and conversion rates. Here are some suggestions for getting this right:
Progress Bar
In a survey conducted by Kissmetrics, 75 percent of survey respondents were in favor of including progress bars. Progress bars serve to eliminate uncertainty in mobile checkouts by helping users gauge the time required to complete the task.
This is a highly versatile feature that’s an asset to any checkout system. Using its tracking system, Domino’s Pizza does an exceptional job of keeping customers in the loop, all the way from placing their orders to pickup.
Multiple Stages
Not only does segmenting your checkout into multiple stages help deliver information in a more digestible manner, it also acts as a safety measure against losing data if back navigation is accidentally triggered. These stages can also be used to create the progress bar.
Extras
Bonus round! Here are a couple of extra features you might consider implementing:
Capture Email Addresses Early
By capturing email addresses at an early stage, you can use them to launch a cart abandonment campaign and potentially recover sales that would otherwise be lost.
You can take this even further by incentivizing users with a discount code of some sort. For example, you could offer users free shipping on their next order.
See how Squarespace offers abandoned cart recovery as an option in its website settings:
Alternate Way Out
If your customers decide they don’t wish to complete the purchase process, offer the option to add the items in their carts to a wish list. Who knows? They might reconsider in the future, and if they do, the items will be waiting for them.
Save the Cart
To satisfy those customers who would rather complete their purchases using a computer as opposed to a smartphone, provide an option to finish their purchase later, either by saving or emailing the cart elsewhere. Integrate this with users’ accounts, if you have that option at your disposal.
Great! Now what?
In this post, we’ve gone through many different design patterns you can incorporate into your checkout flows. But if there’s no one-size-fits-all checkout system to maximize conversions, how do you know where to start?
The answer is simple: experiment!
While you probably won’t finish reading this and immediately modify your checkout system to comply with everything that’s been discussed, you can go about it methodically by A/B testing.
In its simplest form, A/B testing consists of running a controlled experiment with version A, the baseline, and version B, the variation. These experiments run simultaneously, and the resulting metrics are what allow you to make informed product decisions. You can learn more about A/B testing in our handy guide.
While it might take time, data-driven decision making is invaluable to any conversion tactic and ever-important in the world of complex user behavior.
About the author: Jeffrey Li is a student who has developed his expertise working in high-growth mobile startups such as Thanx, Ritual, and Flipp. Currently, he is at a YC Startup, Taplytics, as a Digital Marketing Intern. Outside of work, Jeffrey spends his time pursuing his passion for photography and filmmaking.