Asking for multiple postal addresses

Question

I need to design an intuitive form to get one or more (current and previous) postal addresses.

I have created a quick mockup of the current idea

When a user clicks 'add another address' the idea is for a new address field to be added (via javascript - or falling back to a page reload) - while the list of fields may change before the system is finalized - is too much space taken up vertically and are there any better options for this?

It has to be able to take up to 3 addresses, and be intuitive enough for non technical people to use.

Answer 1

You probably can gain some space since there are too many fields in this form.

• You probably do not need a title, Name and Surname are enough.
• How relevant is the date of birth in this address form? (I mean the first one, because the other two on the foot are probably a mistake)
• The 5 first fields of the address can be condensed in two : address 1 et adress 2. People know their address.
• The general idea is : simplify the input for the user, you will have the opportunity to format it afterwards.

Paradoxically I propose you to add a field. Make Address 1 editable and once the address is completed (or not), collapse the form and leave some relevant information apparent.

The user can now see all the addresses he added to your system. It would be a smart move to organize those addresses in a timeline (ranked by chronological order is enough).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Here is a quick mockup I did thinking bout your problem:

Introduce a list of addresses which will contain a predefined list of addresses you need to collect. If address is incorrect or incomplete - highlight it's alias in address list with one color (red for example) and a icon, if it is correct/completed - highlight it with other color (green for example) or place an icon next to it which will symbolize that address is correct/complete. You may also introduce a link/button to call a form to add a new address.

Once user clicks on a address inside the address list, bring up a form for the address where she can edit it. Think of it as of vertical tabs.

If you want to force collect number of addresses from user you may disable the complete button until all the information has been provided; but give user clear information about what is still missing - for example by placing a progress bar somewhere visible; hovering over the progress bar will bring up the popover with information about what is still missing.

This are just few raw ideas to get you going, hope it helps.