forms - Layout for adding one or more contacts to a record

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

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}