When creating an address form that features postcode lookup, there are a few UX (User Experience) considerations to take into account.
Of course, as with most UX related subjects, you should always consider your own audience and try to test. Not every solution will work best for your users, but in this guide we'll give you a solid point to start from.
The best form fields to begin with are these four elements: Country drop down menu, postcode text field, "Find Address" button, and a link to allow manual address entry.
Let's work our way through these elements.
Our biggest tip for the country drop-down menu is to use IP address-to-location technology to auto select this for your users (just make sure you allow them to override if they need to). This means most people won’t need to interact with the element, because as we all know, a country list isn’t always that friendly to navigate.
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 need 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.
Once a user has finished typing and clicks the “Find address” button (or hits the Enter/Return key from the input field), your script will send the country and address off to our API. Our web service typically returns data within a second, but it’s always nice for a user to know that something is happening behind the scenes in case it takes longer - consider showing a progress indicator.
After the click
Once you have the address results for your search, the typical next step is to display the results in a drop down menu below the postcode field and “Find address” button.
However there have been many articles, talks, and discussions about why <select> tags aren't great for UX, so we recommend using a list of radio buttons instead. These can be contained within a scrollable area if space is at a premium within your design.
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 fields 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.
Remember it is always best to allow your users to edit these fields in case there is an error in the data returned.
Many countries in the world use postal codes as part of their addressing system, but some of these are not suitable for using to search for a single address as we are used to in the UK.
In some countries, a postal code can be shared by hundreds (if not thousands) of addresses at once. We don’t want to ask a user to submit their zipcode and then expect them to scroll through these thousands of addresses to find their own, so we need to take a slightly different approach.
This different approach can range from asking a user to provide the first line of their address along with their postal code, to suggesting they search for their address using their house number and the name of their street.
Get in touch with us if you have a question about a particular country.
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 manually.
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.