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.

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

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

2 Answers 2

up vote 5 down vote accepted

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 Spreadsheets' 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 always circular and labeled “–” and “+”, but have no other consistent appearance.

share|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

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

share|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

 
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.