Implement Type-Ahead Functionality - Spiralyze

Implement Type-Ahead Functionality

Data Input High Priority 10% Adoption 10 Seconds Saved

Implementing type-ahead address completion is a simple way to reduce friction by cutting the effort and time required to complete checkout.
Conversion Opportunity 0.4%

The two main sections of a checkout can be summarized as Address and Payment. These are what users spend most of their checkout time completing.

Imagine writing a letter to a friend, and writing out the address on the envelope. Now imagine the time and tedium you could save if you snapped your fingers and the address instantly appeared on the envelope. This is the experience of using type-ahead address completion.

Type-ahead address completion turns address forms – billing and shipping – into nearly single-click steps. As soon as the user begins typing their street in, a dropdown of possible addresses appears, getting more precise as they type. When the user sees their address, they can select with arrow keys or the mouse. Then *poof* the address form is completed.

The accuracy of the Google Maps API also helps ensure the user won’t be slowed by an error in the address form, further reducing friction.

Google makes it simple to implement effective type-ahead address completion.

Usage

The best implementation of type-ahead address completion is the Google Maps API. It can complete Street, City, State, and ZIP with ease and accuracy. Simply start typing the address, and multiple options for the full address will be presented in a dropdown. Users can choose one there, or continue typing until more accurate options are visible and they can select the correct address.

Some websites implement a different functionality where the ZIP code is entered first and the city and state are populated from that. This is still a useful tool, but doesn’t save as much time and effort as full type-ahead completion.

Bed, Bath & Beyond implements effect type-ahead address completion.

Office Depot uses the ZIP to populate the City and State automatically.

Adoption

0
20%
40%
60%
80%
100%

Implement Type-Ahead Functionality has an 10% adoption rate among our benchmark group.

Best Practices

Billing AND Shipping

Remember to copy the billing address from the shipping by default. Doing so doubles the benefits of using type-ahead address completion.

The Whole Address

If type-ahead is implemented, make sure that it populates the entire address. Going only partway will annoy your users and increase friction.

Next Best Option: ZIP detection

If for whatever reason the full type-ahead address completion cannot be implemented (maybe Google bullied you as a kid?), populating the city and state from the ZIP is the next best thing.

Examples

Good

Staples Example

Staples fully implements type-ahead address completion.

iHerb Example

iHerb fully implements type-ahead address completion.

Okay

Sephora Example

Sephora uses the ZIP field to popular the City and State fields.

Bad

Zappos Example

Zappos implements no form of type-ahead address completion.

[Issue16-Zappos]