It should come as no surprise that we're big online shoppers at eHouse. We've scrapped the weekly grocery runs for Amazon Pantry and book concert tickets and cooking classes weekly with the haptic click of a mouse or tap of a finger.
Needless to say, our team prefers online shopping to be quick, pretty, and painless, which is not always the case in a mobile checkout. Lately, we've started implementing two practices in our ecommerce projects that make most tedious part of the checkout — entering in your credit card number — as straightforward as possible. Below, I outline these two practices.
1. Model the credit card form to look exactly like the credit card face.
This sounds simple, but we have made a point in our recent projects to have credit card fields on our forms match the order and layout of actual credit cards as closely as possible. This way, visitors to the site who actually want to check out won't have to go on an easter egg hunt around their credit cards to fill in the corresponding information. Straightforward and simple often involves milli-second-saving changes like this.
On that note, I can't be the only one who counts on my fingers to figure out which month corresponds with which number, 1-12. We decided to eliminate the need to look at your credit card's expiration month and convert it to a spelled out month in your head, then pick the correct one in whatever dropdown menu is presented to you. On our forms, shoppers will simply type in their expiration month and continue on their purchase process.
2. Optimize forms to be compatible with iOS's autofill features
To take it a step further and eliminate having to punch in credit card information altogether (apart from the CCV code), we've started optimizing our forms so that iOS autofill pulls all of the information off the front of the card when scanned with the camera, instead of just the credit card number.
Below is an example of the process, and the code behind it. It's likely that your forms are already set up so that they will already work with this feature, but I found that separating the expiration month and year fields and adding an autofill attribute increased the likelihood that all information would transfer to the fields quickly and with one scan.
<div id="cc-wrapper">
<fieldset name="payment-method-fields" class="payment-method-fields" id="cc-demo">
<div class="name">
<label for="credit_card_name">Name on Card</label>
<input type="text" name="credit_card_name" id="cc_number" placeholder="•••• •••• •••• ••••" value="" tabindex="10" autocomplete="cc-name">
</div>
<div class="number">
<label for="credit_card_number">Card Number</label>
<input type="text" name="credit_card_number" id="billing_cc_number" placeholder="•••• •••• •••• ••••" value="" tabindex="10" autocomplete="cc-number">
</div>
<div class="exp">
<label for="billing_exp">Expiration Month</label>
<input type="text" name="cc_exp_month" id="billing_exp_month" placeholder="MM" value="" tabindex="11" autocomplete="cc-exp-month">
</div>
<div class="exp">
<label for="billing_exp_year">Expiration Year</label>
<input type="text" name="cc_exp_year" id="billing_exp_year" placeholder="YY" value="" tabindex="11" autocomplete="cc-exp-year">
</div>
<div class="cvc">
<label for="CVV2">Security Code</label>
<input type="text" name="csc" id="CVV2" pattern="\d*" value="" tabindex="12">
</div>
</fieldset>
</div>
This feature will only help in getting mobile e-commerce customers from "Add to Cart" to "Thanks for Your Order." With shopping cart abandonment hovering somewhere around 90% (M-Commerce Usability, Appleseed, Holst), any incentive to power through to the checkout is worth taking note of.
The * - Because any sort of mobile payment comes with issues of security, that's the main concern for users hoping to start utilizing the autofill feature in their daily shopping. Right off the bat, this option is pretty appealing because users can easily populate their credit card info in without every having to store anything in the Apple Keychain. It's autofilling without commitment.