Postcode lookup UX

Guide to creating a great experience for postcode lookup

When creating a postcode lookup UI (User Interface), there are a few UX (User Experience) considerations to take into account.

Of course with most UX related subjects you should always consider your audience and try to test. Not every solution will work best for your users.

Which form fields to use

The best starting place is with four elements: Country drop down menu, postcode text field, "Find Address" button and link to allow manual address entry.

Initial form elements for postcode lookup UX pattern.

The country drop down allows you to narrow your initial search; you can use IP address to location technology to auto select this for your users (allow them to override though), which means most people won't need to interact with the element, as we all know a country list isn't always that friendly.

The postcode field is a nice and straight forward, text field. For the UK this is typically the fastest way to find your address, however in other countries you may want to do a more general address search (we'll come back to this). Avoid adding any character limitations as the formats vary around the world, while many countries use the term "postcode" or "postal code", some use a different term like "ZIP Code" in the US and "Eircode" in Ireland. It’s a good idea to customise the field label based on which country is selected.

The "Find address" button; this will fire off the search for the user. It's best to positioned close to the postcode field so that the user associates the two fields as linked.

Finally add a link to allow the user to enter their address by hand - this avoids the chance of them moving away from your form if they don't know their postcode or if they struggle to use the address lookup feature.

After they click the button

Once a user clicks the "Find address" button your script will send the country and postcode off to our API; our web service typically returns data within a second. However it's always nice to show your user that something is happening in the background in case it takes longer. Perhaps show a nice progress indicator.

Once you have the address results for your search the typical way to display the results is in a drop down menu below the postcode field and "Find address" button.

However there have been several talks and articles about <select> tags not being great for UX, so we recommend using a list of radio buttons instead. These can be contained within a scrollable area if space is a problem within your design.

We suggest using a list of radio buttons and labels rather than a select menu

Our address data includes a summary line field which is great for the stage where your user is selecting their address from a list.

After the user selects their address from the list your script will use the data to populate the relevant fields in your form. You could hide these fields before the search to reduce the number of fields visible.

If your address form field are visible before a search, position them below your address lookup elements. That way someone won't start entering their address by hand to then find out they could have just searched instead.

Form fields populated via a postcode lookup tool

Remember it is always best to allow your users to edit these fields in case there is an error in the data returned.

Handling international customers

Our address lookup API is more than capable of returning address data for 240+ countries around the world, however not all the countries handle addressing in the same way. Some countries do not use a postal code system and in others a postcode might cover an entire town, which makes searching by postcode less useful than here in the UK. This is where our service's ability to also accept address fragments, such as the first line of the address can help out.

In the United States you can use the building number or name along with the ZIP code to search with, this typically brings back a small enough list to be useful compared with the ZIP code alone which can bring back several hundred addresses. Of course if your user knows their ZIP+4 code this list will be even shorter.

The Republic of Ireland recently introduced Eircodes which are a property specific postal code, meaning that searching using Eircode should bring back just one address. However because this is a new system, not everyone knows the Eircode for their address yet.

When things go wrong

No matter how good your UI or UX is users will find a way of using it differently to how you intended. Common things to look out for are:

No address results returned
Give your user the chance to search again or enter their address by hand.

The user selected the wrong address
Either allow the fields to be edited or search again.

Postcode has only one address
Skip the drop down menu step and save the user a mouse click.

Some fields in the address are incorrect
Allow the user to edit the final address fields to correct.

Find out more about our postcode lookup API and try it for yourself »

Read about how we have made PostCoder Web very forgiving if a user makes a typo in their search »

More tips for improving forms at:

Useful articles and guides