Mobile Commerce Usability: Low-Hanging Fruit for Checkout Success

Now that the mcommerce rush is over, it’s time to stop and smell the usability roses. You ventured into mcommerce because of its immense potential but, if you don’t get it right, you will have wasted much of your time and resources. Mcommerce will have growing pains; it is a new platform with a whole host of limitations and pitfalls. Our job as ecommerce experts is to help guide you toward an optimal user experience. Here are a few of the most common, yet most important to avoid, checkout process blunders.


Disable Auto-Correction

Auto-correction is such a handy feature when sending a text or email, but not when trying to complete a checkout form. It works very poorly for email addresses, home addresses and, of course, names. We have repeatedly seen this issue when conducting user testing; auto-complete changes users’ inputs to unintended entries, resulting in negative experiences. For example, during one test, the auto-complete function changed “newyork” to “network”. Most of the time, users don’t even realize that the “correction” occurred.


Default to Numeric Keyboard Where Applicable

Prompting the user with an alphabetical keyboard for a zip code field is not an “abandonment” offense, but prompting with a numeric keyboard instead is a simple way to help optimize the checkout experience. The goal in checkout is to minimize clicks and make it a quick and an easy experience, so why not prompt the user with the correct keyboard? Save your users an extra touch and prompt them with the numeric keyboard when entering number-only fields such as a zip code, credit card, and security code.


Always Show Guest Checkout Option First

This was an interesting find during our user tests. Our client’s site had the login option listed first above the fold. Users assumed there was no guest checkout option and thought they had to create an account to checkout. We all know how popular guest checkout has become; it’s the greatest invention since sliced bread! Be sure to place your guest checkout option above the login option so that users will always see it. An even better way of approaching it is fitting both options above the fold. Check your own data to see what the majority of your users do (guest checkout or login) to determine if a change is needed.


Entry Field Length

In many of our tests, we noticed that users proofread their information as they are entering it in the form field. Providing fields that do not fully display all the data entered makes it harder for them to view what they typed, which could lead to errors. A short entry field was especially frustrating when a user received an error message but couldn’t view the entire entry to see what needed correcting. Be sure to review all your entry fields to see if they are long enough to fully display the data.


Error Messaging

Given the smaller screen size, field-level error messaging is not enough. The best way to approach error messages in checkout is to also provide error messaging to the field(s) in question above the form. To make this work best, anchor the user to the top of the page so that they see all the fields that need attention in one place.

 

3 HOT TIPS:

  • Offer Alternative Payment Methods: Including options such as PayPal and other alternate methods is critical to mobile shopping. Since these payment options save user addresses and payment options, it eliminates the need for users to fill out forms, significantly reducing time spent during checkout.
  • Beware of the back button in checkout: If the user clicks on the “back” button on their phone, don’t send them out of checkout. Instead, send them to the previous step in checkout. The last thing the user wants is to suddenly leave checkout and lose all their information.
  • Make Order Summary Accessible in Checkout: A well-known best practice is to provide an order summary throughout checkout on desktop sites; the same should be done on mobile. Yes, it’s harder to do, given the limited amount of space, but include a consistent link throughout checkout that expands into a light box when engaged.

Responsive Design: What it is and How You Should Use it

Responsive design is the idea of approaching a site’s design from the standpoint that the site’s design flexibly ‘responds’ to the user based on a number of factors, including device type, screen size, screen orientation, and browser. Implementation is done by using a combination of flexible layouts and creative CSS rules. Is responsive design the right choice for your company? That depends.

If you’re like many companies, you have noticed that the percentage of visitors to your site via mobile phones and tablets has steadily increased with no signs of slowing down. You may have a team devoted to the ecommerce site, but perhaps you view it from a holistic level and not as a different set of user experiences based on user device. And you see that conversion and revenue varies widely from Android phone users to iPad users to desktop users. Some factors to consider when deciding whether to move forward with responsive design:

  • Know who your customers are. Use analytic data to determine your largest and most important customer demographics. Which devices (and their corresponding screen sizes) your visitors are using will direct where your responsive design efforts should be pointed. Track key metrics as changes are made to monitor the effectiveness of each tactic.
  • Know what your customers want. Usability tests and actively soliciting customer feedback through interviews and surveys are both good ways of learning your customers’ needs. Use this to design with your users in mind.
  • Don’t forget the basics. While good responsive design can be a great way to gain exposure for your site, it can also have the unintended consequence of drawing attention to the shortcomings of your ecommerce business. Make sure you address any fundamental flaws in your product content management processes prior to executing any mobile strategy.
  • Design for functionality, not just space. Remember, in addition to smaller screen sizes, mobile devices often have additional functionality built-in, such as GPS location, cameras, and ability to make phone calls. Providing in-site functionality for click-to-call and maps can be a huge boost to usability.
  • Stay fluid. Design using a flexible and modular approach; this way you will not only be able to accomodate the existing multitude of devices and screen sizes, but you’ll also be ready for any of the nearly limitless and unpredictable new devices that are sure to come in the future.


Responsive vs. Adaptive Design

You may have heard these terms used interchangably, but they do in fact have different meanings.

At the simplest level, adaptive design refers to the existence of multiple versions of the site, one of which is served from the server-side based on which device attributes are detected by the server.

Responsive design refers to the existence of only one version of the site, the display of which is adjusted on the client-side by the browser, based on the display and relation to other page elements.

Choosing between adaptive and responsive design often comes down to the pros and cons of each. While adaptive design can be more finely tuned to specific devices and screen sizes, it also takes more time and resources to deploy effectively. Responsive design is often a quicker and easier solution, especially when starting from an existing site, but some of the finer-tuning can get lost in the shuffle.
An effective responsive design deployment can help you increase conversion and revenue across multiple user experiences. FitForCommerce has the expertise and people to help your company develop an intelligent responsive design strategy. Let us know if we can help!

3 HOT TIPS:

  • Start small and work your way up: When executing your responsive design plan, start by designing for the smallest (mobile browsers) and scale up for tablets and desktop browsers by using CSS rules to display additional content.
  • Use icon fonts: Replace commonly used icon images with icon fonts when possible as they provide a scalable and editable alternative for commonly used images, resulting in a much lighter footprint and quicker page load times.
  • Don’t leave out the important stuff: Visitors come to your site for a reason. Regardless of what your site looks like, make sure that you always provide your site’s most essential information and services no matter what device your visitor uses.