Improving mobile web conversions just by optimizing web forms

A big shift to mobile is still undergoing. Increasing number of people are moving to mobile only.

In mobile, screen size is not the only difference. It’s ubiquitous, connection is flaky, input methods are touch-based, users are easily distracted. Subtle yet important differences are countless.

To win the business in this mobile world, seamless and speedy experience is the key differentiator. E-commerce is a great example.

Data shows 66% of mobile checkouts are done on web sites rather than on native apps. One hypothesis is that people prefer purchasing items directly from search results rather than taking 3 steps: installing an app, registering an account and finally making purchase from there.

On the other hand, the conversion rate on mobile web is 66% lower comparing to that of the desktop web sites. This statistic should be seen as a tremendous opportunity to improve conversion rates on the mobile web.

In this article, I would like to introduce two tips to improve the conversion rate on your mobile website just by tweaking your existing web forms.

Browser Autofill may not be working as well as you expect

In checkout flows, users are asked to provide various personal information. HTML forms have been used for that purpose for many years. While forms still remain widely used in 2017 for their flexibility and ease of integration, it is still seen as a painful process by users. A recent study by Chrome noticed that disabling the browser’s Autofill feature resulted in 25% fewer form submissions, which can mean that without help, some users are just going to abandon the flow. Typing on a software keyboard is something people want to avoid.

Luckily, most modern browsers provide a nice and clever feature to help users entering those information. The feature, called Autofill, automatically finds relevant input fields and fills them out with the most appropriate information the user has entered in the past. Autofill drastically reduces user’s pain of typing on a software keyboard.

Improving Autofill’s performance on your website is an easy way to improve the aforementioned conversion rate on mobile, by following just a few simple steps.

How autofill works

Before talking about how to improve forms, let’s look into how browser’s autofill works.

Usually, browsers store information when a user enters and submits them through forms. Moving forward, the same information will be used to autofill similar forms.

A news is that the latest Chrome and Safari store those information structured if they consists an address or a credit card, and they will be made available as autofill across origins.

Chrome’s autofill settings (addresses)
Chrome’s autofill settings (credit cards)

Above screenshots show how Chrome holds addresses and credit cards respectively in settings. Autofill information is stored and reused dynamically from user inputs.

Safari’s autofill settings (credit cards)

Above is similar UI in Safari settings. Interesting part is that addresses can be pulled from the Contacts app in its OS (iOS) instead autofill. Credit card still uses autofill though.

On a related note, Firefox and Edge don’t seem to store form data structured like Chrome and Safari yet, as of March 2017, but I’m expecting them going similar direction in the future.

Structured data

The important point here again is that both Chrome and Safari treat these information structured data. In Chrome particularly,

For addresses:

  • Name
  • Organization
  • Country
  • Postal code
  • City
  • State
  • Street Addresses
  • Phone number
  • E-mail address

For credit cards:

  • Card number
  • Card holder name
  • Expiration month
  • Expiration Year

Autofill allows these information available across domains and the browser suggests addresses and credit cards when an autofillable form is detected. Users can fill in those fields just by one tap instead of typing keyboard.

Following screenshots show how an input element suggests autofill candidates and then autocompletes rest of the fields by tapping one.

Autofill in action in Safari
Autofill in action in Chrome

Also note that since both Chrome and Safari can synchronize autofill information across devices through cloud, information stored on a desktop browser, can be used on a mobile browser.

Optimize for the latest autofill

In the previous section’s screenshots, most fields are properly autocompleted as expected. How about yours? If they are not autocompleted as much, there are two reasons.

Form structure is not aligned with the standard

One reason is because the structure of input fields in your form are not fully compliant with the standard.

But don’t worry, it’s totally understandable. The standard structure have only been introduced recently and the HTML form is too flexible by its nature.

For example, typical credit card number form should look either of these:

4 input fields for a credit card
1 input field for a credit card

A credit card number consists of 16 digits. Some websites implement a form for this using 4 separate input fields with 4 digits each. Other websites implement it using 1 input field with 16 digits.

Which one should you use?

There’s an explicit answer. Use a single input field for a credit card number. Do not divide them. By doing so, browser fits the credit card number perfectly in its autofill storage, and will use it as an autofill data in the future.

Not well annotated

Another reason autofill not working as expected is poor annotation.

Browser’s autofill feature targets input fields based on heuristics. For example, if an input element has name="address", it's easy to guess that it’s an address information. But what if it’s annotated as name="kokyakuJushoBanchi"? kokyakuJushoBanchi is “customer’s address” in Japanese but this is not clear even for Japanese people?

As a remedy, you can use an attribute to tell a browser explicitly what information the field indicates. It’s the autocomplete attribute.

autocomplete attribute has been only allowed to use with values of on or off, but it’s been a while since it added quite a few variations.

Specification for autofill values

These parameters are mostly available in Chrome and Safari. Hoping other browser supports will come soon.

By the way, did you notice the trick? The structured autofill information I have introduced earlier actually corresponds to the values of autocomplete defined:

For the address:

  • Name (name)
  • Organization (organization)
  • Country (country)
  • Zip code (postal-code)
  • State (address-level1)
  • City (address-level2)
  • Street address (street-address)
  • Phone number (tel)
  • E-mail address (email)

For credit cards:

  • Card number (cc-number)
  • Card holder name (cc-name)
  • Expiration month (cc-exp-month)
  • Expiration year (cc-exp-year)

For example, a zip code field can be written as follows.

<input type="text" name="zip-code" autocomplete="postal-code">

Note that in this case, the name attribute can be anything, but for browsers not compatible with autocomplete, it is safe to specify it like zip-code or postal-code in the hope that browser’s heuristic properly works.

Summary

There are 2 things to keep in mind when you design a form that accepts address and credit card information aiming better conversion rates on mobile web.

  • Fit with the standard form structure
  • Annotate fields properly with autocomplete attribute

Finally, here’s an example code that includes techniques described above. (There are many other best practices for forms in general, but I will omit this time. If you are interested refer to this article.)

You can try a webpage with the form from here. (Autofill for credit cards require HTTPS).

<form action="#">
<fieldset>
<legend>Address</legend>
<label>
Name: <input type="text" name="name" autocomplete="name">
</label><br>
<label>
Organization: <input type="text" name="organization" autocomplete="organization">
</label><br>
<label>
Postal code: <input type="text" name="postal-code" autocomplete="postal-code">
</label><br>
<label>
State: <input type="text" name="address-level1" autocomplete="address-level1">
</label><br>
<label>
City: <input type="text" name="address-level2" autocomplete="address-level2">
</label><br>
<label>
Street Address: <input type="text" name="street-address" autocomplete="street-address">
</label><br>
<label>
Country: <input type="text" name="country" autocomplete="country-name">
</label><br>
<label>
E-mail address: <input type="text" name="email" autocomplete="email">
</label><br>
<label>
Phone number: <input type="text" name="tel" autocomplete="tel">
</label>
</fieldset>
<fieldset>
<legend>Credit card</legend>
<label>
Credit card number: <input type="number" name="cc-number" autocomplete="cc-number">
</label><br>
<label>
Name: <input type="text" name="cc-name" autocomplete="cc-name">
</label><br>
<label>
Expiration:
<select autocomplete="cc-exp-month">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> Month
<select autocomplete="cc-exp-year">
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select> Year
</label><br>
</fieldset>
<input type="submit" value="Submit"> (Information won't be posted anywhere)
</form>
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.