Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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. Add contacts

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?
share|improve this question

2 Answers 2

up vote 5 down vote accepted

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
2  
+1 I like some of the ideas in this. I wonder, when a user first arrives at the page could they have a moment where they say "Oh no, I only see one row. But I want to add 5 contacts"? Is there a way to reassure them or hint at the ability to add more? –  Jay Aug 17 '12 at 8:27
3  
A word on the in-line validation: This should be implimented with intelligence. Don't validate on every change, because the user will then get the nice message: "This is not a valid adress" immediately after type in the first letter. (Of course it's not a valid adress, but I'm not finished yet!) So the best moment to validate is onBlur. –  Alexej Froehlich Aug 17 '12 at 11:02
  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.
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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