Best ux design for "add row" to enter multiple values

Question

Ive seen this following method on Xing that allows multiple entries of unknown limit:

I want a better way, since the + and - look confusing i sometimes get confused myself, in addition the high-maintenance nature of these fields (client side reliance, validation, double check on server, ajax security checks!... the list goes on)

So i came up with the following way, problem with it, is this is the second version, but i still cannot get users to know how to use it, they claim its hard to understand, is it? any best practices, ideas?

First time there are no values and the buttons says "Enter value", after any value added it looks like this:

When clicking on Enter another, looks like this

Answer 1

A choice you haven't mentioned is to automatically create rows as needed: there is always exactly one blank field at the bottom, and as soon as you type in it another appears. In this way you do not need an “add” button, only buttons to delete existing entries (or you could have them be deleted by the user deleting all text from them, but that might be too unobvious).

A current example of this on the web is Google Forms's form editor.

---

Also, I would like to note that your original design with − and + buttons is very often used in Apple's Mac OS X; in the Address Book editor and in every “search criteria” constructing UI (Finder search/Smart Folders, Mail Rules, iTunes Smart Playlists, iPhoto Smart Albums). These buttons are labeled “−” and “+”, and are typically located either in a toolbar joined to the bottom edge of a scrolling list box, or repeated at the right edge of each item (the latter particularly in "Smart ____" rules editors).

Answer 2

Just thought of adding an answer to show how I solved this issue taking @kevin-reid answer

First state is the default empty state with "x" to remove it

Then when user presses any key, the "Add more" link appears

Clicking add another, reveals a second field, and the processes begins again. I even went as far as hiding "Add another" if one of the fields is emptied, to force user to always fill out the empty spots. Of course, leaving empty fields and clicking submit, will just ignore the empty fields.

When user deletes all fields, he gets the "Add something" link instead

Answer 3

Xing +/- signs look effectively confusing, especially the last row, with both signs side by side. Does it mean increase/decrease a value? If I filled only the first row, do I have to click on "-" before submitting?

Yours is ways better, since it's very clear, both for the button which adds a value and the one which removes one. It's also the most used solution, from what I've seen.

There are still several points to note:

• As suggested Kevin Reid in his comment, the rows can appear automatically when the last one is being edited. The less the user has to do to accomplish the task, the better is the user experience. If you can make the user avoid one click, do it.

  Don't forget about users who don't have JavaScript enabled. You still want to have an "+ Enter another" button for them, otherwise they will just be unable to enter more than one value.

• The popup "Cancel" button is close to "+ Enter value". Putting it in the top right corner of the popup will reduce the risk of clicking on the wrong button, and will be more intuitive, since most windows and popups use already a close button in the top right corner.

• The popup is not separated from "EO 11" field. It's confusing: am I really adding a new entry, or am I editing the EO 11"? The "+" in "+ Enter value" is a hint that I'm actually adding a new value, but it requires to think about it.

• Is it possible to edit the values without populating the popup? It's much shorter to click and write "BP2003" than to click, type "BP", <Tab>, "2003", <Enter>. It may also make auto-completion more useful, if numbers are associated with letters (i.e. there may be EO11, but not EO12, but there is a BP12).