3

In a web application I am building, I need to allow users to add multiple contact addresses to their account. The form for adding one address is quite long and I would like to avoid modals for this. Right now i am using the in-page form for adding one address.

Now, to add multiple addresses, is it a good idea to use multiple tabs for each address? (the number of addresses is not limited, can even be 10)

Are there any references for this where users add a new entity in a tab?

Adding Mocks for reference: enter image description here

Once the user clicks on "+Add New Address", a new tab opens with the form for creating another address, as follows:

enter image description here

0

2 Answers 2

2

Just leave your one form and simply add a combo box allowing the user to select what type. You could even have a checkbox and another combo box that says "Same as [address type combo box here]" that would autofill an already existing address.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

7
  • Im on mobile right now. Ill add a visual example when I get to work. Commented Apr 8, 2015 at 13:07
  • Ok ... I added my mockup Commented Apr 8, 2015 at 14:03
  • But in this design the user should provide the type if it's of a new type. Wouldn't a text box be more apt for "Address Type"? Commented Apr 8, 2015 at 14:12
  • Thank you Code Maverick. Thats a good idea. In fact, that is one of the requirement (to be able to copy within different addresses). I will come to that later. Right now my problem is: will it work if i allow adding each address in a tab? I am attaching mocks for reference.
    – DesignUser
    Commented Apr 15, 2015 at 12:04
  • 1
    I had exactly same problem, i came cross here to find some way and thank to @CodeMaverick, your solution is excellent .
    – Amitis
    Commented Apr 24, 2015 at 8:28
0

You can use the method of having an extra button called "Add another Address" which will add another address.

Advantage: It won't be fixed for all and can be added as necessary.

Example.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can also refer the addition of multiple address in your Google contacts for a single contact. Can't be a better example than that.

4
  • Thanks Siva-Dev-Wizard. In my case, the address form is very very long, with at least 20 fields. Hence I wanted to avoid this approach. I am attaching few screenshots for the idea i have in mind. Let me know your thoughts on that.
    – DesignUser
    Commented Apr 15, 2015 at 11:55
  • Avoid which one ? :) Commented Apr 15, 2015 at 11:57
  • The one with "Add Another Address" button below previously added address :)
    – DesignUser
    Commented Apr 15, 2015 at 12:10
  • @DesignUser I think the idea of tabs is good. But do remember to add side scrolling once the address gets out of scope. Also one suggestion is you can provide Address name as the name of the tab. Commented Apr 16, 2015 at 2:34

Your Answer

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

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