How to group common (to a list and other input groups) input fields

Question

Here's my scenario - I have the following three input fields:

• Type
• Remarks
• Uploads (Popup which allows users to drop files)

Now, these three fields are associated to a person object. The user has the option to select an existing person (from a drop-down list) or add a new person.

I have laid out the fields in the following manner.

On the top of the page, I have the three fields (type, remarks, uploads) one after the other. Below that, the user has the option to select an existing user (from a drop-down) or create a new user via a form (which is collapsed by default).

However, this can be confusing for the user (for example, if the user does not select a type before selecting a person, the person would be added without the type to the model and this would fail when submitting to the backend).

What would be the best way to structure this form?

Screenshot: (the "Or Add New" header is collapsed right now).

Answer 1

I would think something like this. Give them a drop down to select existing contacts, with an option for "New contact...". If they select an existing contact, pre-populate the form. If they select "New contact..." clear it out so they can enter details for a new contact.

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

Answer 2

A few points:

1) Make sure there is a default state so that if a user type is not manually selected it doesn't trigger a fault with the back-end, is saved into a findable default place/category/type, and the info is not lost completely.

2) What is the most vital information to capture? As this is titled "Add a contact" I suspect it's the user type and user name; bring them together at the top so that the user will, at the very least, fill those in before they get bored.

3) Put the less interesting and less vital stuff at the bottom.

4) Only use "an" before a vowel sound ;-)

Something like this:

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

Answer 3

To me the main function of your form is to create or update a contact. So I'd suggest renaming it to: Create / update a contact. Then move the drop-down with existing contacts and the button to create a new contact to the top, side-by-side:

[ existing contacts drop-down ] [ + new contact ]

This makes the purpose of the modal much clearer. Don't show the other fields, or dim and disable them. After the user picks one of the two options show the other fields. If an existing contact was selected populate those fields, otherwise leave them empty.

Answer 4

Without knowing what would be the platform and other elements that go along makes it difficult to suggest for best possible approach at its interactions. By general you have to conform with the flow of importance or how most users perceive the entries. Don't sacrifice the functionality and always check if the elements are sensible.