Layout for adding one or more contacts to a record

Question

The context:

The user is creating a client record. Against each record their could be one or more contacts (people) provided. Often this will be adding 1 or 2 but could sometimes be up to 5-10.

The task:

Simply, The user will add each known person to the list then continue to the next step in the account creation process. Changes are saved when the page is submitted (no technical need to do this at each line).

Current mockup:

This is what I have proposed. The top one is the default view. The second is when a contact has been added. Note: There will be a delete line option.

Question:

Are there any potential issues with this approach?

• Will the user expect a 'save' option at the end of the line? (saving is technically done when the page is submitted).
• Is the placement of the 'Add another' / add new line appropriate?
• Would an 'Add contact' button be more appropriate near the top of the list?

Answer 1

This looks like a pretty good starting point. To explicitly answer your questions:

Will the user expect a 'save' option at the end of the line? (saving is technically done when the page is submitted).

Do not present a 'save' button unless it actually saves the data! So if data is only saved when page is complete, I would not recommend having line-by-line save buttons.

This does raise several questions, though:

• How will errors be presented? If I've just filled in 5-10 contacts, will I get errors for all lines at once? This might be much harder to deal with than checking each field as it is entered. You should consider using in-line validation, presenting alerts OnChange (e.g. if email address does not appear to be valid -- no '@', for instance.

• Can you auto-save each field OnChange? This would lessen potential errors if something crashes after the user enters a number of contacts but has not yet clicked the explicit save option.

Is the placement of the 'Add another' / add new line appropriate?

Would an 'Add contact' button be more appropriate near the top of the list?

Given the current specification, it makes a lot more sense to me to have the button at the bottom of the list, where the new line will appear. However, you may want to consider whether you need the button at all, versus simply adding a new blank line when the line above is typed into. This is the approach that iOS contact pages take, for instance, and it seems to make it easier to not break the user's flow.

I would consider something like the following flow:

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

Answer 2

1. Now you may want to add a Save button for this page so that the user knows that he added all of those contacts successfully. However, this is not absolutely necessary and it depends on the context of this page and the way you are using the Save button throughout the application.

2. I think the position of the 'Add contact' is alright and it suggests and it follows the flow of your UI. I would not recommend putting this button on the top because if you had 100 contact records, each time you'd want to add another one you would have to scroll back to the top to do it.

Some suggestions:

1. You might consider adding a divider in between every contact to get a better visual separation of every record. Also try changing the background of that row when the user hovers on it. That will work as an indicator and show them on what row they are at.
2. I am not sure about the position of the 'Edit' button. What happens if the email address is too long? I'd suggest showing the 'Edit' button only only when the user hovers that row or make the 'Edit' text more like a smaller button sticking out of your container upon hover.

Answer 3

Working on something similar, it may be more complicated than it seems to add multiple fieldsets with an auto-append way

I would like to hear your opinions about the following issues:

1. In the initial state should the user see that it is possible to add multiple fieldsets?

2. The new line added should appear just when the user starts to type in the first field or on focus out of the last field?