26

Ive seen this following method on Xing that allows multiple entries of unknown limit: enter image description here

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: enter image description here

When clicking on Enter another, looks like this enter image description here

  • having three (for example) by default might be easy to code, adding a forth dynamically tho is gonna take us back with maintenance, but the fact that user does not have to click a plus button is BRILLIANT, i've never seen google docs, so I think this is an idea worth putting as a potential answer :) – Ayyash Jan 1 '12 at 19:59
  • @KevinReid You should make it an answer, it's a good one. – Vitaly Mijiritsky Jan 2 '12 at 6:48
  • @VitalyMijiritsky Done. – Kevin Reid Jan 2 '12 at 16:21
14

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).

| improve this answer | |
  • thank you, i think im gonna go with ur suggestion and see how it works – Ayyash Jan 7 '12 at 7:39
  • I am wondering how would this approach work when the table is sorted? Would the new row always go/stay at the bottom after it is entered therefore meaning that the user needs to reaply sorting? – FableBlaze Jan 16 at 12:39
  • 1
    @FableBlaze This question is mainly about a form (all new data), not editing a large existing data set, but for that case, one option is to have an exception for that row until data is entered into it. There is a trade-off in exactly when it moves, between staying still for data entry and being properly sorted — you certainly don't want the field(s) to disappear from the viewport while being used, for example. – Kevin Reid Jan 16 at 15:17
3

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 Default state

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

Add Another

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

Empty state

| improve this answer | |
1

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).

| improve this answer | |
  • regarding last point, i had the solution in place, but the problem is that the form does not understand the fields until u click "enter" so that it gets added to the list, which confused a lot of people (including myself!!!) that i kept filling the fields and moving on to the next item... thus it never reaches the server, thats why we decided to hide the fields to force user to click "enter" – Ayyash Jan 2 '12 at 10:43
  • The labeling (including the "+") of the "+ Enter value" button is confusing, I think. How about just labeling it something standard like "OK", "Submit" or "Save"? Also the "x" icon has two different meanings (Cancel entry and remove item from list), but I don't know, if that is a problem in practice. And how about scrapping the dialogue altogether, and using inline editing instead - then it's easier for the user to see what s/he is creating (or editing). Something like this: 24ways.org/2005/edit-in-place-with-ajax – agib Jan 2 '12 at 15:34
  • changing the label is a valid point... as for edit in place, i tried that, thats what i mean by the "first version" that confused everyone including me... bu i think im going to give it another shot with clearer buttons... – Ayyash Jan 4 '12 at 7:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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