Auto-Fill Compatibility

Usage

Autofill functionality can cover all the forms necessary for a checkout – personal info and payment info – and reaping the full benefits of autofill requires accurate and complete compatibility. HTML5 specifications include 53 different possible autofill fields, though most sites will only need a handful of these. (NOTE: Credit card CVC numbers are not included in autofill for security purposes.)

But there are a couple ways this can go wrong.

Auto-filling fields incorrectly or incompletely can be worse than not implementing autocomplete at all – the user is less likely to catch an error, leading to a spike in friction when they hit CONTINUE and discover that they cannot progress. Some sites don’t autofill the State field in an address, or they miss the expiration date on a credit card. Forcing the user to find and fix these fields undoing much of autofill’s convenience.

A worse error is when a site is autofilled incorrectly. Information can be placed incompletely or in the incorrect field, such as placing a name in the address field of mixing up phone numbers. This increases friction and annoys any user that comes across it.

Finishline effectively implements auto-fill functionality.

Urban Outfitters does not.

Best Practices

Everything In the Right Place

Make sure forms are not mixed up. Don’t let names get put into address fields or phone numbers placed in a fax number field.

Don’t Skip Fields

Auto-fill should be implemented on all relevant fields. Users expect this, and auto-fill misses a field, the user often misses this omission. When the user attempts to move to the next step, they receive error messages requiring them to locate and fix the error, a high friction experience.