Address Field Design Best Practices
The address field is an essential part of many forms. Billing information, Shipping information, Mailing information - all those forms require an address.
In this article, I want to share nine practical tips on how to streamline the process of filling out the address field.
1. Don't use 'Address 2' field
According to Baymard research, 'Address 2' can be confusing for many users. Reduce the cognitive load on a user by removing any objects that can cause confusion.
2. Use text area instead of a text field for 'Address'
Text area accommodates more space for user input. As a result, the entire user address will be visible for users all of the time. The ability to see the entire address will prevent users from making mistakes.
3. Don't split Address block into Street, House, Entrance
Don't divide address field into sub-sections such as House, Entrance, Appartement. With this solution, it will be hard to accommodate variations in the address block. For example, this format will be confusing for users who don't have 'Entrance.'
4. Use separate fields for Country, City and ZIP code
Country, Сity and ZIP should be parsed to ensure a unique geographic location. And the user has to choose the country first.
Why country, not ZIP? Postal codes are not unique by country. The postal code can appear in many different countries. Also, some areas don't have postal codes. That's why you should ask for the country first.
5. Avoid changing the 'default' order of address fields
Is it ok to change the address input field order in favor of a pre-fill feature? For example, show the city before the street?
The accepted answer to this question is to stick to the order we have in real life. In most countries, the street always comes before the City/ZIP. When users see a familiar order, they tend to go to "auto-pilot" when filling details.
6. Auto-fill address
Pre-fill/auto-detect as much as you can. By automating the user's input you reduce the interaction cost. According to Google's research, auto-filling helps people fill out forms 30% faster. If you already have information about user address (i.e. the user is already registered with your service), auto-fill data from their account in the relevant fields but don't forget to leave these fields available for editing to give users control.
7. Use field length as a hint for the answer
The size of an input field acts as visual constraints for users. For fields like ZIP/postcode, you can use filed length as a hint for how many characters is expected.
8. Mind the local differences
Names of fields, hints, inputs and other parts of the form can vary based on region. Here are two things you need to consider in the context of the address field:
- Labels. The US says 'ZIP', whereas, in Europe, it is a postal code.
- Specific fields. The "state" field is needed only in the US; it's better to hide it if users type address which does not belong to the US. In some parts of Europe, you need to add "province" or "region."
9. Use address lookup services
Services like Google's Place Autocomplete or Loqate can simplify the process of filling out the address field.
