Best practices for address form design | by Tina Remiz | Dec, 2021


Whether you were buying a pair of trainers or registering to vote in a local election, chances are, you came across an online address form before. They can range from single input field to multipage questionnaires, but all share the same usability principles.

Choosing the right solution for your use case can be hard, and the stakes are high. Entering postal address into an online form bridges the gap between virtual and physical worlds and giving away this information may require a lot of trust for your users. Mistakes in this area can costly — from abandoned checkouts and lost packages to more serious security risks — so here are some design guidelines you should follow.

1. Use search and autofill in conjunction with manual entry

Predictive search that suggests address details once the user starts typing is a great way of streamlining the process and reducing the number of errors. Often presented as a stand-alone field, it can be an excellent space saver, but don’t fall into the trap of creating a minimalist UI at the expense of a good user experience.

While search should work fine for most common addresses, a significant number of users will either want to edit the result they selected or, failing to find what they were looking for, will need to enter their address manually. Make sure you cater for both cases without making your users do the extra legwork.

A common solution is to present the user with a single search field and a secondary call to action that opens a manual entry form. Assuming the user succeeds in finding something that resembles their address, the system will present it back to them as non-interactive text with options to edit or remove the entry (left). This is a good solution for the “happy path” but requires a lot of clicking around for users who can’t find the correct address on the list. A better solution is to show the full address form upfront and use the first line as an optional tool to populates it (right). This way users have a choice of using autofill or completing the form manually by following a linear journey on a single page.

Left: GOOD! User selects their address from the search dropdown and the system displays is back as non-interactive text. They have an option to edit or remove it before submitting. Right: BETTER! User selects their address from the search dropdown, which populates the form. They can review and edit it there and then.

Same principles apply to the postcode search that should be placed above the manual entry form and populate the fields which are visible to the user at all times.

2. Use descriptive labels but account for regional differences

Form labels such as “address line 1”, “address line 2” and “address line 3” can be incredibly confusing for the user. Did I give all the necessary information? Will they be able to tell my flat and house numbers apart?…

That said, including separate field for all regional variations such as apartments, buildings, estates, neighbourhoods, districts, states, regions, provinces etc will results in extremely long and arguably even more confusing address forms.

The happy compromise lies somewhere in between. Use descriptive labels such as “street address” to indicate the type of information you expect users to submit. Then add optional fields with labels such as “apt, suite, etc” that offer enough flexibility for users to decided if and how to use them without worrying that they are doing it wrong. And ensure your mandatory / optional fields are clearly labeled!

Left: GOOD! Labels such as “Address line 1” and “Address line 2” are very flexible, so users can decide on the optimal format for their address entry, but they can also be confusing. Right: BETTER! Descriptive labels such as “Street address” indicate the type of information users are expected to provided without being too prescriptive. Optional fields allow users to enter additional information and can be left blank if not needed.

However, if your address will be used globally and you have scope to add regional variations, you may want to adjust the form structure and labels for each use case. This is a huge topic and I won’t go into details here, but recommend you check out this article on designing address form for everyone everywhere.

3. Guide the users but let them choose their own path

Some back-end systems require rigid form structures, but, where possible, you should give your users freedom to enter their address in whichever format they think works best. Give them plenty of support with form autofill, in-line validation and helpful error messages, but don’t assume you know better what fields their address should have.

Of course, every web form you design should follow the basic usability principles and address forms are no exception. And if you are not just designing, but also building it, make sure you familiarise yourself with address form best practices for developers.

Source link

Leave a reply

Please enter your comment!
Please enter your name here