Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Revive abandoned shopping carts with responsive design

Friday, June 20th, 2014 by Servage

Fear of Data Loss

In the financial year 2013, Jumio ran an important study on mobile e-commerce. The results of their analysis indicate that payment friction accounted for a huge loss in revenue. In fact, about $16 Billion is the amount online retailers lost, according to the Jumio study, in just the past holiday season alone. This being attributed to poor user experiences with payment gateways, leading to abandoned shopping carts during checkout.

Reading this news compels me, a web developer, to write on the topic of abandoned shopping cart rates by mobile e-commerce shoppers. According to major surveys, 66% of mobile shoppers experience a problem with such transactions, which I find unacceptable. These users blame the long checkout process for the payment friction, citing a zealous practice of data gathering at time of checkout as their primary frustration.

A former colleague of mine once shared an interesting observation about e-commerce owners and us developers. She noted that we are not really serious about the user experience for mobile e-commerce designing. And she added that we seem to forget we are investing money in order to get return through maximum conversion. Instead, she stated, we show up repeating marketing tactics after already having collected data from our users.

And I say that intentionally setting up a long and winding checkout process is a sin for any mobile e-commerce designer. If you really want to keep the abandonment rate in check, you have to create an effective responsive website design for your clients. Otherwise, you are simply not a serious web developer. Here are my practical tips for making a responsive website design efficient enough to drastically reduce the abandonment rate.

Tips For Creating A Responsive E-Commerce Web Design

  • Minimize Data Input: Typing on a mobile device, as we already know, is not a convenient action. Likewise, customers are often put off by filling lengthy data forms on a shopping cart page. They ultimately have two concerns: avoiding typos before final submission and being booted from a page so they don’t lose the entered data.
  • Don’t Ask Shoppers To Leave The Checkout Page: What common mistakes are we making during design? Frequently asking users to perform associated actions, such as a pop up asking users to push an “ok” button or similar actions that confuse our shoppers about whether they are leaving the existing page or not, if they take any action on that prompt. Therefore, I strongly suggest if you need your users to take such essential actions, give clear instructions regarding what will happen if they follow it. Better yet, avoid such disturbances by dealing with this before the checkout process.
  • Utilize Off-Canvas Approaches: If you simply can’t avoid putting links in your shopping cart, then always try to open those links in a new window instead of existing ones. Alternatively, you make use of off-canvas designing to solve this problem and keep users constantly on the checkout process. Off-canvas makes content or navigation invisible until either a larger screen size allows it to be visible or a user takes action to reveal it. Therefore, offering off-canvas design is the best solution in mobile as well as responsive web designing. Use the off-canvas approach during the checkout process, when considering that your shoppers may want to buy more products, but don’t want to leave the existing checkout page. You can offer (hidden) surfing product pages through off-canvas designing instead of using the existing page’s navigation.
  • Use Multiple, Identical CTA Buttons: My experience with long pages on mobile devices suggests using updated strategies. If we have only one Call To Action (CTA) button like “Add To Cart” at the top of the page, or in mid-way of content, this can get lost to mobile users. Mobile shoppers may push the cart icon located in the footer link (to show items in the cart) and assume they have then added a new item, but that is not the case. Therefore, always try to give identical “Add To Cart” buttons on top as well as at the bottom or end of the content.

References & More Reading
Abandoned Shopping Carts Are Running Rampant in Mobile Commerce: This is What You Can Do About It
Exploring Ten Fundamental Aspects Of M-Commerce Usability

Revive abandoned shopping carts with responsive design, 5.0 out of 5 based on 3 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.