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
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.
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.