15 Elements of Your Mobile Checkout That Need Improvement

15 Elements of Your Mobile Checkout That Need Improvement

Smartphones have become the preferred shopping devices for a lot of individuals. A recent survey revealed that more than 75% of social media activity happens on the mobile platform. In fact, mobile devices alone accounted for more than 50% e-commerce activity.

These numbers are incredibly surprising, especially considering the rate at which the transformation took place. People use mobile devices to research their products and even catch last minute deals. Mobile devices are becoming extremely portable, especially considering the ‘bezel-less’ time that we live in. The advantage that mobile devices have over laptops or tablets is that, a person is likely to have their smartphone with them, even when they go to the bathroom.

Unfortunately though, mobile devices have accounted for over 80% cart abandonment in recent past. The mobile platform could account for only 1.25% conversions which is extremely worrying. An average of 35% of these sales came from mobile. In 2017, the overall cart abandonment rate was close to 78%. What that essentially means is that two out of every three customers chose to leave their purchases mid way. Apparently, cart abandonment cost e-commerce websites a whopping $40,200,000 in 2014. The numbers might be worse for the following years. Let us try to find out why people tend to abandon their purchases and how you can change that.

Talking particularly about mobile cart abandonment, the most prominent reason could be the small visual area. Since the surface area on a mobile device is limited, you might want to consider making specific changes to your mobile site. Pay extra attention to your mobile site checkout process. The checking out on a mobile device is an incredibly tedious task. It is nowhere as seamless as we are used to on their desktop counterparts. To add to the misery, the keyboard takes up half of the space on the screen which leaves the users scrolling constantly to fill in essential information.

We take a look at a few tips that you could follow to streamline your mobile checkout process below

1. Breakup The Checkout Process Into Multiple Pages and Display A Progress Bar

One of the biggest mistakes that we have come across multiple e-commerce mobile websites is their lengthy checkout processes. This is hands down the surest way to drive away your potential customers. The customers add their preferred items to their cart and see a long form on the checkout page. A single in-depth form can seem to be too much of an effort for a few people.

Follow the practice of breaking up your checkout process on multiple pages. Ask for information in bits, and the customers are more likely to complete the process. However, that does not mean taking them through five or six steps which can further complicate the checkout process.

In fact, if the customers sense too many steps on your checkout pages, they are likely to abandon the transaction. Provide a progress bar over each page so that the customers can know how many more steps it is going to take to complete the purchase.

Check out progress bar

Take a look at the Boohoo Canada mobile checkout page.

  • The checkout process is broken into multiple pages.
  • The progress bar clearly mentions the user is at the first stage of the checkout process.

2. Ask Essential Information Only

As we established, it is imperative for you to ease the customers in the process. Asking too many questions will not help your cause and is likely to make the customer frustrated. There are two rules to follow here. First is never to make the user enter the information that you already have. For instance, the customers might have already provided you default shipping addresses. Ask them to fill in address details only if they want the order to be shipped to a different address.

Secondly, do not ask them for information that is irrelevant to the transaction. Asking for a contact number is justified. However, asking for alternate phone numbers is simply defined as pushing it. Apart from frustrating and highly time-consuming for the customer, the customers also fear getting spammed. Similarly, some websites ask for date of birth and gender details which are again, just not relevant to the transaction. On the contrary, asking for these details in the sign-up process doesn’t hurt.

Look how Best Buy USA automatically puts in a pickup address which the user can later replace with a delivery address

Customer Information

Some simple steps that you can implement:

  • Ask for sensitive information in the last
  • Do not force the user to submit alternate contact details
  • Keep the process straightforward
  • Explain how you plan to use the information in case absolutely necessary to ask sensitive details

3. Design It For ‘Touch’

A website designed for PC is never recommended for a mobile device. You need to have a separate mobile based site that can serve your smartphone-centric customer. You should have the basic understanding of how users interact with their devices and build your mobile site based on this aspect.

For instance, users on PC have a large surface area and have to navigate via a pointer device such as a mouse. This makes the experience more accurate than the touch devices like smartphones. In the case of smartphones, the users interact via their thumb which has its limitations.

In a survey, it was found that most people used their mobile devices with one hand. This means that a large part of the screen is ‘hard to reach’ for them. Therefore, your primary focus buttons should appear in the easily accessible regions of the mobile screen to allow easy navigation.

Mobile first strategy


Design your page like Amazon India.

  • The ‘place your order’ button is within easy reach and remains the focus of the page.
  • The rest of the information is squeezed into the area which is harder to reach for single handed users.
  • ‘Place Your Order’ button is extremely wide which reduces the chances of accidental touches somewhere else.

4. Redesign Your Header

Perhaps one of the most overlooked aspects of a mobile website is the header. As we discussed, mobile screens have limited visual area, and everything needs to be optimized keeping that in mind.  If your header takes up too much space in a page, the user will have to scroll down to see the critical information in each step.

This becomes incredibly annoying and requires an extra action for the users to reach the checkout details. If the users are not able to navigate efficiently through your website, they are likely to purchase your more ‘convenient’ competitor.

However, do not make the mistake of taking it off entirely. Your customers need to see your logo on the checkout process, possibly in the same layout as the rest of the website. Once the users suspect they have been directed to a third party website, they will abandon the transaction immediately.

Below is a minimalistic example from eBay Australia. The header is of perfect proportions and does not take too much space on the screen.

Mobile first strategy

5. Test Your Mobile Site For Speed

Customers who are visiting your website from mobile devices instead of PCs are losing out on screen real estate. They might be looking to save some time by making a quick purchase without having to go through the trouble of switching on their laptops. Since the primary reason why they opt for a mobile site is speed, it is imperative for you to streamline your checkout process.

Experts believe that roughly 40% of mobile customers tend to abandon items in their cart if a page takes more than three seconds to load. In fact, they want the pages to load faster on mobile than on desktop. Use the Page Insight Tool from Google. You can see the load times of your site for both the web as well as mobile versions. It will also make a few recommended fixes that you can implement.

Web Performance

Some simple rules for decreasing load times are:

  • Remove Social Media Scripts if any
  • Ditch intense graphics such as carousels
  • Store graphics and logos on a content delivery network

Guest Checkout

Some websites lose out on business because they do not allow guest users to buy from them without signing up. Let’s face it. Signing up is a lengthy process and is best refrained from when people already have items in their cart. It can significantly increase the time it takes the users to complete a purchase. This is something in complete contrast with the idea of purchasing online.

Another reason why users do not like the idea of signing up for a website is that they fear being spammed. Putting in their Email addresses and mobile numbers at multiple sites makes them vulnerable to a lot of spam emails and messages.

The entire idea of procuring the email ids and contact numbers is to market your products to ‘potential customers’. However, if you streamline your checkout process for customers, they are likely to return for future purchases automatically.

Take the example of the eBay Australia website again. For your sign-up process on your site you can:

  • Enable Facebook and Google+ integration
  • Allow users to sign in as guest
  • Implement traditional approach via Forms

Social Sign in7. Redesign Your Buttons

Your buttons are of great significance, especially in the checkout process. This is why you should give proper attention to their design. The buttons will serve as ‘Call To Action’ (CTA) for the users and it is imperative for you to design them accordingly. Ensure that the buttons that will take the user to the next step are especially highlighted. In fact, go ahead and make them stand out from everything else on the page. Stay away from radio buttons and use wide end to end selection buttons for the checkout process.

Apply a gradient effect to your priority button, so the user knows when the button has been clicked. The rest of the buttons like ‘Continue Shopping’ or ‘Back’ that might distract the customer from completing the transaction should use lighter colors that do not attract too much attention.


Take cues from the Apple US website. While it allows the users to navigate to different pages, the focus remains on the ‘Continue’ button which is highlighted in blue color. Additional value add-ons are also listed near the final checkout button.

8. Expandable Menus

There are times when the users would like some assistance before finally purchasing something from your website. We usually take care of this by routing these customers to FAQs. However, instead of providing links to your FAQs, you could simply offer a drop-down menu for questions that users frequently ask during a checkout. This will minimize the distractions for the users and prevent them from leaving the purchase midway.

Moreover, use the same technique for your privacy policy or terms and conditions as well. This will make the users stay on the page and focus on completing the transaction.

See the screenshot below that we took from Amazon India’s checkout process. Even major players in the industry provide links to their ‘Return Policy’. You could substitute it with some questions in the FAQ  form factor.

Expandable Menus9. Payment Options

Getting to the primary change that your mobile site might require is more payment options. This is especially important for businesses that sell their products internationally. You need to understand that payment preferences might vary in different parts of the world. For instance, credit cards are the preferred choice for American customers, but other countries might have their respective wallets. Try to localize your website for each customer. This comes in handy if the customer you are catering to has not shopped from before. Finding their preferred payment options on your website will help to establish a trust which significantly increases their chances of completing their payments.

In countries like India, major players like Amazon provide the option to pay at the customer’s doorstep via cash. This is the perfect example of how even the most prominent players tend to blend in with the habits of their customers.

The e-commerce giant Alibaba has a wide variety of payment options available. Along with traditional net banking and credit cards, it also allows the users to pay through Western Union and even Boleto. Boleto is a popular payments system in many countries.

Payment Options

10. Triggering The Right Input Methods

The most significant inconvenience for mobile users is typing in the details. What if you could minimize the inconvenience caused to them? A typical mobile user ill choose to shop at the desktop site simply for the availability of a physical keyboard and a large surface area.

Typing accurate details during checkout process can be quite a task. For starters, the user will have to switch between the numeric and alphabetic keyboards every other second which increases the complexity of the buying process. Secondly, some specific information is autocorrected which can further frustrate the buyer.

However, you can ease the checkout process for the buyer in a few simple steps.

  • Trigger different input techniques for different fields. Display a numeric keyboard when the customer needs to type in credit card details and an alphabetic keyboard for names and addresses.
  • If the process requires the user to input a date, trigger a calendar input that promises accurate data.
  • Disable autocorrect in a few input fields. There is no database that can handle the unique names of people and places in the world. Therefore, you can choose to disable autocorrect in such fields that will make the job easier for the customers.

Below is a screenshot from Apple Music India. It automatically displays a numeric keyboard for credit card information.

Mobile input method

11. Enhance Your Forms

Since the entire checkout process is centered on forms, consider tweaking the forms on your website. Just redesigning your website for mobile view does not make the cut. A smartphone user expects the same convenience from a mobile site that you offer on your desktop version. The best possible way to enhance the ‘convenience’ factor is by making a few smart changes to your forms.

  • Use Floating Labels: There are times when the customers forget what they were supposed to enter in a specific field. This usually happens when the inline text disappears after clicking on the field. By using floating labels, you can help them keep a track of all the information which can come handy especially in the case of long forms.
  • Autocomplete fields: Some web browsers like Safari and Google Chrome allow the users to auto-fill some data like name, contact number, email addresses and more. Moreover, you can auto-fill some fields like city and state when the user inputs the Pin Code.

For instance, see how this Indian fashion clothing website Myntra autofills the city and state fields. You only need to type in the exact locality and you are done.

12. Streamline Cross Device Checkout

Customers who buy from your mobile site can only see tiny images of the product you are selling. It is likely that they already shortlisted the product at your desktop site and returned to buy the product from mobile site after checking out your competitors.

Experts believe that the customers visit your website more than twice before actually buying your product. They might browse your products on the desktop in office and then finally purchase on their commute back from work. Sometimes they will complete the purchase several days later after adding the items to the cart.

For a streamlined checkout process on multiple devices you need to:

  • Make the shopping cart persistent with the user’s account and not just a single device’s cookies.
  • In case of a guest user, you should keep their contents in the cart for up to 30 days. This will allow them to pick up right from where they left in case they return.

The cross-device users convert at 1.4x rate compared to single-device users. However, make sure you do not spam the guest users reminding them of items in their cart repeatedly.

13. Trust Signals

The primary reason why a lot of individuals do not shop online is the ‘Trust’ factor. They do not feel safe sharing their personal information with an e-commerce website that is largely unheard of. These people refrain from sharing their payment details on a ‘questionable’ website which keeps them from completing the purchase process.

Consider displaying your trust nodes throughout your website, especially in the checkout process. This will let the customers know that their data is safe and the payment details are protected.  When they see a prominent trust badge on your website they will buy more confidently and won’t hesitate from sharing sensitive details.

However, ensure that you do not have too many security badges on the checkout process which might raise suspicion. In fact, it might even end up distracting the customers and hence keep them from completing the purchase.

Trust Signal


The above data represents the results of a survey by Baymard institute.  49% people did not have any preference when it comes to a security seal. However, Norton and McAfee seals still dominated the competition. Using security badges that people know of can help you establish trust with the buyers.

14. Kill Popup Error Messages

As we discussed above, the forms at your website need to be tweaked for a streamlined checkout process. Similarly, the error messages too might need your attention. Consider making it easier for your customers to spot an error in their forms. You would not want to frustrate the customers further by making them spot hard to find errors. Ditch the pop-up error messages. They can be incredibly irritating, especially if the users have typed in all the information in the form.

Replace them with floating labels that provide real time data validation. The users will know of any errors in the respective fields without moving on to the next one. They can also help the users to know what mistakes they made. For instance, if they entered the date in the wrong format, the floating errors can enlighten the users about the expected format.

Take a cue from Shein India website. The registration process displays floating errors that help the users to enter the required details. If you see clearly, it mentions that the email address format is wrong right next to the email address field which helps to spot the error easily.

Similarly, it also explains why there is an error in the password field.

Floating Errors


15. Click-to-call integration

We can think of a million questions that customers would want to ask during the checkout process. They may be finding difficulty navigating through your website or couldn’t find their preferred payment option there. They might not be able to understand your return policy and might want help with the same. There are possibly several other reasons why they would want to get in touch with you before making the purchase.

It makes up for a good practice to provide a ‘Click-to-call’ button at the checkout process. In fact, go a step further and give them the option of chatting live with your representatives. When the customers are already in the checkout process, you should ensure that they do not abandon the transaction mid way. Any last minute doubts or questions should not be routed to your email but attended instantly.

The Barney’s USA website clearly mentions a contact number right beneath the checkout button. Customers are likely to think of them as ‘proactive’ which helps them to establish trust with the business. In fact, you can also use this opportunity to connect them to your sales team. These users will be able to place their orders directly to your sales team which eliminates the need to complete the checkout process online.

Click to call mobile integration


Following these simple rules can significantly help to decrease cart abandonment rates at your web store. The essential thing is to focus on streamlining your checkout process for your mobile site. It is hands down the biggest reason why customers tend to leave their transactions mid way.

Since the users interact with their mobile devices using touchscreens, your website needs to be accurately optimized for that. Pay special attention to your forms and error messages. The forms make up for the most significant part of the process. With just a few smart upgrades, you can enhance the experience of the users at your mobile site.

Never redirect the users to a third party website for the checkout process. This might raise suspicions and make them abandon the purchase. In fact, the entire transaction needs to be hosted at your website where the users are able to see your logos and trust badges clearly.

If you like to be extra cautious then follow the same design layout in the checkout process as on the rest of the website. This will make up for a consistent experience for the users and help you establish trust with them.

2 thoughts on “15 Elements of Your Mobile Checkout That Need Improvement

Leave a Reply

Your email address will not be published. Required fields are marked *