Auto-Fill Compatibility - Spiralyze

Auto-Fill Compatibility

Data Input High Priority 80% Adoption 10 Seconds Saved

Autofill-compatible checkout forms allow users to complete checkout at warp speed, drastically reducing friction, and therefore abandonment rates.
Conversion Opportunity 0.2%

Most modern web browsers have autofill – allowing information ranging from name and address to credit card numbers is stored in the browser and automatically populated into the checkout form.

Users with autofill complete checkout faster. Way faster. Autofill takes almost all the effort out of checkouts, giving even first-time customers something close to a one-click purchase. The user doesn’t have to go find their wallet, there are no typos, they just click and go.

Autofill lets the customer stay in auto-pilot, and is a must-have feature in any high converting checkout.

Auto-fill also helpfully highlights the auto-filled fields in yellow.

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.

Adoption

0
20%
40%
60%
80%
100%

Auto-Fill Compatibility has an 80% adoption rate among our benchmark group.

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.

Examples

Good

Forever 21 Example

Forever 21 implements simple, effective auto-fill.

Okay

Office Depot Example

Office Depot adds a phone extension erroneously, but is otherwise a functional, effective auto-fill.

Ikea Example

Ikea incorrectly auto-fills the phone section, duplicating numbers and filling out the extension field incorrectly.

Bad

Urban Outfitters Example

Urban Outfitters implements no form of auto-fill.