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

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

  • Im on mobile right now. Ill add a visual example when I get to work. – Code Maverick Apr 8 '15 at 13:07
  • Ok ... I added my mockup – Code Maverick Apr 8 '15 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"? – Siva-Dev-Wizard Apr 8 '15 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 Apr 15 '15 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 Apr 24 '15 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.

  • 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 Apr 15 '15 at 11:55
  • Avoid which one ? :) – Siva-Dev-Wizard Apr 15 '15 at 11:57
  • The one with "Add Another Address" button below previously added address :) – DesignUser Apr 15 '15 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. – Siva-Dev-Wizard Apr 16 '15 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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