10

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 enter image description here

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.

1
  • Why do you have two fields for Street?
    – sergiol
    Jul 18, 2014 at 23:52

2 Answers 2

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).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

2
  • 1
    While you may be right about condensing the form to the most basic fields most of this doesn't really answer the question about how to ask for multiple addresses. The only part of your answer that does address this is just a one-liner 'Make Address 1 editable and once the address is completed (or not), collapse the form and leave the address apparent.'. Can you expand on this point? That's really what the question is looking for.
    – JonW
    May 2, 2013 at 13:55
  • 1
    You are completely right, I get lost in my explanations. I realized that after read over. May 2, 2013 at 14:08
2

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

enter image description here

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.

1
  • I'd prefer to position the address choice like tabs just above the address form. People are used to that pattern due to their browsers: `/Home\/Billing\/ + \`
    – nibra
    May 6, 2013 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.