Error getting theme layout

Form Layouts: Rethinking the Postal Address

Posted @ 3:33 pm by Yusuf Asgerally | Category: User Experience | 0 Comments

Postal addresses are one of the most basic form elements we encounter on the web, and not much has been done to change the way they appear on a form since their inception. For most cases this format is functional, but it leaves much to be desired in the way of usability. Their layout is one of the remnants of the offline world that was not fully thought out when ported into the web.

Let’s look at how addresses are formatted in the United States:

Address line 1
Address line 2
Zip/Postal Code

When thinking web, a more usable layout would be to ask for the ZIP code before the state and pre-populate the state based on the ZIP code entered by the user. Ideally it  would have been nice to ask for the ZIP before the city, and then populate both the city and state fields for the user based on the ZIP, but there are some rare instances where a ZIP code can span multiple counties and therefore this does not work.



So we face a very common argument. Familiarity with what you are used to versus making the user’s online life easier. Is it worth changing this layout (i.e.: bringing the zip up above the state) to make this form more usable vs. keeping it in this format that everyone is already familiar with and therefore is usable due to familiarity? It is my opinion that the confusion caused by introducing a few approach here outweighs the improvement to the forms usability, so I would keep the traditional format.

It is when you start to make your address form compatible with international addresses that we start to encounter a real need to re-think how the form is presented to the user.

Some countries have addresses that need three address lines versus the two fields that is commonly used in the United States. The United States is one of the few countries that uses state and ZIP. Most others use province and postal code. While it is possible to list the states within the United States in a drop-down, is not possible to do the same for all the countries in the world.

Some sites overcome this problem by having just one input field labeled “State/Province.” While this works, it is not the most user-friendly.

One variation of satisfying both US and International addresses

An input field for the state causes quite a bit of confusion for the user. What does the site expect them to enter? Should they spell the entire state out? Should they enter the two character abbreviation? Will the system accept their entry if they make a spelling mistake or don’t enter it exactly as it’s programmed to accept?

In a traditional address format, the country comes last. This is the root of all our address formatting woes. The country tells us how the rest of the address fields should be formatted and therefore it makes sense to gather this information early on.

I’ve started advocating the collecting of the country early on for addresses in my wireframes and I find that once clients overcome their initial surprise of being asked for the country first they really like how it simplifies their interaction with the rest of the form.

The default selection will be the country of primary focus or where your primary user base is located with the form containing fields for that country. If the user changes the country selection to something else, the rest of the address fields can very easily be changed by either using AJAX or if needed a page refresh, to match the requirements of the selected country. One thing to keep in mind when doing a page refresh is that you should never lose information that a user might have already entered into the form. This is a golden usability rule that when ignored leaves you with some very unhappy users.

In most cases you will not need to have more than two variations to the address field, one that satisfies an international address format and one that satisfies US and Canadian address formats.

Proposed US address format

How the form would look when an international address is selected

Leave a reply

Error getting theme layout