Mobile Web Form Innovation: Scan to Autocomplete

I’ve designed and developed a lot of web forms in my lifetime – as well as a few mobile forms.  A lot of developers and designers try to avoid this task.  They think it’s boring.  What possible innovation can you bring to a form? Developing forms have always challenged me.  Customers dislike completing them so much that if you develop an interface that your customers will love then you’ve truly built something that has disrupted the tech industry!

 Web Forms & Mobile Conversion Rate

On mobile, two-thumb typing is hard enough! A long form to complete on a phone sends many prospective customers running for the hills.  In fact, according to a 2016 Adobe Mobile Retail Report only 16% of cart on a smartphone turn into orders.  That conversion rate becomes a measly 1.55% when you consider how many mobile site visits turn into orders.

But what is a mobile commerce site to do?  I still need customers to tell me where they want their order shipped, what payment method they are using and which email I should send their receipt to.  I need email subscribers to give me their email address and email preferences.

 Scan Credit Card to Autocomplete Form

I was looking for concert tickets last night on my iPhone. When it came time to fill in my credit card information, a link that said Scan Credit Card appeared on the top of my keypad.  I clicked on it and my phone camera was activated to look for a credit card.  Once I had my card centered on the rectangle on my screen, my phone recognized the information needed to auto-fill the form.


I loved the interface so much, I researched how to implement it on our own mobile site.  It turned out that this was a feature of iOS and Android.

The easiest way for me to implement it was to change 3 ids on the following input fields:

  • Credit card number to id=’cardNumber’
  • Expiration Month to id=’creditCardMonth’
  • Expiration Year to id=’creditCardYear’

And, voila! Our customers can just scan the front of their credit card and their smart phone will automatically fill in their information in the proper input fields.

Another Source for Auto-completion

Last weekend we went to the Temecula Valley Balloon and Wine Festival.  To check our ids before selling us beverage tickets, they had a machine to swipe the id in.  Instead of having to read the information and mentally compute a person’s age, it read the information in our Driver’s License/State ID.

It got me thinking.  We have a lot of information in our ids.  Why can’t iOS and Android scan these and get shipping address, age, height, weight, etc?  Wouldn’t that make completing web forms much much easier?  Then maybe the 16% cart conversion rate on mobile can double to match desktop conversion.  Maybe even overtake it because scanning is probably faster than typing even on a full keyboard.

There already is an application that you can install to scan information from State IDs and Driver’s Licenses for completing forms.  But this would be a great native feature in our devices’ operating systems instead.  They already have the technology, they just need to adapt it to a new source of information.

 What About Security?

With all the biometrics technology becoming available on our phones, maybe these ids and credit cards can use our fingerprint or irises to confirm our identity.  Touch ID or eye scanning technology serves as the key to unlock the information.

Something you have, your ID, and something you are, your fingerprint or iris pattern.  A PIN for unlocking your information will work as well.


In user experience development, it is in the most painful experiences that you can do the most good.  What roadblock does your customer encounter every time they go to your website?  What stops them from completing the task you want them to finish?

In my experience, forms are always a roadblock.  I’ve installed form validation scripts to help customers know what information to type in.  I’ve added scripts that auto-fill the city and state when customers type in their postal code.  I’ve reformatted forms to make them shorter and easier on the eyes.  And now, I’ve added 3 ids so our customers don’t even need to type information in – they can have their smart phones do all the work!

I feel really good about implementing the last task because as a customer myself – I experienced the delight of actually using this interface.  It amazed me and made me happy – this is how I want our customers to feel when they fill out our mobile web form as well.