Reading list Switch to dark mode

    Mobile checkout experience

    Updated 1 September 2022

    We are going to cover the following topic in the mobile checkout experience :

    • Why checkout experience is important?
    • Checkout Initiated in mobile
    • Discuss Cart Page Experience
    • Discuss Checkout page
    • Order Confirmation Notification

    Summary: Optimize the mobile checkout experience with the least action and requirement from the customer.

    Why mobile checkout experience is important?

    User Experience counts at every node, from online order booking to delivery of the product. If everything is fine, then only we gain the trust of the customer and review. Review gains the trust of another customer.

    But here, we discuss the mobile user experience during the checkout process. In research, we find only 30% checkout is successful others 70% count as abandonment cart.

    abandonment-rate-report
    Source – Baymard Institute

    So we don’t have an option here and we should have a better user experience process for checkout to reduce cart abandonment, and then only we can increase our sales.

    Start your headless eCommerce
    now.
    Find out More

    Please check out our mobile app with a better mobile checkout experience.

    Checkout Initiated in mobile

    We can initiate checkout from 2 pages

    1. Checkout directly from product page

    When a user buys a costly product or a single product, they usually click on Buy “Buy Now” and this button directly redirects the user to the checkout page.

    buy-now-mobile-checkout-experience

    2. Checkout from Cart Page

    When a user wants to purchase numbers of products like grocery products, food items, or event items then use the “Add to Cart” button

    add-to-cart-mobile-checkout-experience


    It depends on the eCommerce store. If your store likes Amazon, Etsy, and eBay use both buttons.

    both-button-mobile-checkout-experience

    Cart Page Experience

    Checklist for the cart page UI

    • Product photo, name, custom details, and product link
    • Ability to remove, save for later, and change details like item quantity
    • Order Summary : product prices, tax, shipping and any discounts
    • Estimated date of delivery
    • Calls to action (Checkout, Keep Shopping)

    Cart Icon

    1. Cart Icons should be upfront and directly navigate to the shopping cart page.
    cart-icon-mobile-checkout-experience
    Directly open cart page without showing any popup in-between.

    2. Proper feedback to users about products added into the cart.

    feedbak-mobile-checkout-experience
    Proper feedback the item is added into the cart

    3. Ignore the additional popup or cart summary screen on mobile.

    Remove or Delete Button

    Cart page should have a clear ‘X’ or Remove or Delete button beside every product. So that users find it upfront and act. Nowadays, the Remove or Delete button comes under Quantity update with choosing ‘0’ zero from the dropdown or Clicking “-” minus multiple times to remove the product for a single action.

    delete-mobile-checkout-experience

    Update Quantity Button

    ” Update Quantity “ button in mobile as an additional action to update the quantity of the product. Don’t use this button on the site.

    According to Jakob’s Law of UX, users prefer your site to work the same way as all the other sites they already know.

    update-cart-mobile-checkout-experience

    So many time, user move to the checkout page without acting and on the checkout page, he finds unexpected quantity which becomes the cause of abandonment.

    Button Accessibility

    The shopping cart UI is critical because every product in the shopping cart has the product name, image, configurable option, estimated delivery time information with some action button like quantity, remove the item, and save for later.

    Button-Accessibility-mobile-checkout-experience

    Keep standard “Tap Size” for these actions to perform their activities without any hindrance. The standard tap size is 48×48

    Order Summary

    The order summary should be upfront and clear amount for the product, discount, tax, and shipping charges.

    order-summary-mobile-checkout-experience

    Checkout page experience

    Provide the easiest way to log in to the eCommerce Store. Don’t make unnecessary or mandatory fields like county, language, etc. If possible provide social login option for quick verification of user.

    checkout-mobile-checkout-experience

    After login, As we know checkout process is quite lengthy. We can break the process into various steps. We break into the following steps

    1. Shipping Address
    2. Order Summary
    3. Payment Option

    or we can have 2 states by margining order summary and payment option

    Shipping Address

    Checkout should have the option to save the address in Address Book. So that, user need not fill address on the next checkout.

    address-book-mobile-checkout-experience

    Provide the option to enter pin code or zip code text filed. By doing so, all the 3 fields that get auto-filled will save the time of the user or customer or we can use auto detect location to fetch location.

    address-good--mobile-checkout-experience
    Good Practice – Zipcode and Geolocation help to autofill required fields

    Ignore such type of user experience, options to choose Country > State > City. Really I don’t like if I have to fill a number of the field for a single product for a time.

    address-wrong-mobile-checkout-experience
    Wrong Practice

    The promising “Continue” button is fixed at the bottom of the mobile screen.

    Order Summary

    The order summary should have the product name, image, configurable option, quantity, estimated delivery time, subtotal, discount, total, shipping address, and billing address.

    ordre-summary-mobile-checkout-experience

    The promising “Pay Now” button is fixed at the bottom of the mobile screen and the stepper should have a back button option to update the address.

    Payment Option

    On this page just show the payable amount and available payment methods and It’s nice if we have a scan credit card or debit card option to auto-fill the information of the cart.

    payment-option-mobile-checkout-experience

    Order Confirmation Notification

    It’s most important to give proper notification to the customer that the order has been placed successfully with all requirements and must have a link to view the order.

    order-placed-mobile-checkout-experience

    For this blog, Thanks to the following apps that I list as follow

    A good user experience is not for mobile-only, also needed for the websites. We have Magento 2 One Step Checkout for the eCommerce store for quick and easy checkout on the web.

    Thanks! like to see you here.

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home