Form Empathy: Use Zip Codes to Populate City and State Fields

Published July 3, 2016 by Jason Ferrell

Good form design reduces the amount of input fields that are required which in turn reduces the amount of information the user must submit to complete a form. This includes using external means to populate data from a back-end API service or using capabilities of the device being used.

Typical Address Form Design

Address forms are one area where there is room for a better user experience. Typically, a user is required to enter a name, street address, city, state and zip code.

However, if we know a zip code, we can look up the city and state automatically. We would need a back-end service of some sort to do the lookup, but the point is that there are ways to lookup a city and state based on a zip code value. Doing so would eliminate two fields from the address form, saving time for the user.

Better-Designed Address Forms

A better-designed address form would change the order of our form fields to be name, street address, zip code, city and state. A javascript event would listen for the user to enter their zip code and then issue an AJAX request. The AJAX request would pass the zip code to our back-end service and the back-end service would return the city and state values.

city and state lookup based on zip code input Animated GIF showing city and state lookup

We want to allow the user to have the ability to manually change the city and state information that gets populated automatically if for any reason the values aren't correct. So we use normal, editable text inputs in case a change needs to be made.

While the city and state lookup is taking place, we show an indicator to the user that the lookup is happening.

Overview

Reducing the number of inputs on a form not only increases actual form conversions and provides a better user experience, but it also shows empathy toward people interacting with your website

Form empathy creates a positive user experience and therefore adds credibility to the brand associated with the website.