Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Why do you have two fields for Street? –  sergiol Jul 18 at 23:52

2 Answers 2

up vote 0 down vote accepted

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

share|improve this answer
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 '13 at 13:55
1  
You are completely right, I get lost in my explanations. I realized that after read over. –  Gildas Frémont May 2 '13 at 14:08

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 progressbar somewhere visible; hovering over the progressbar 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.

share|improve this answer
    
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 '13 at 10:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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