How to create an N:N relation editor in web page?

Question

I have to create a small "who does what" web application for incoming letter routing:

• there is a relatively long list (about 600 items) of employees;
• there is a short list (about 5 items) of tasks;
• when assigning a task to an employee, due date must be specified;

As a result, i need a list (sequence of items matters in this case, since the first employee in the list is considered the "main responsible person"):

• John Smith - write a response letter - 20.01.2010
• Frederica Minoso - review the incoming letter - 18.01.2010
• Robert Geer - review the incoming letter - 18.01.2010

If we had, say, 10 employees, the design would be quite easy - a drop-down list of employees, a drop-down list of tasks, a date picker for due date, a "Add to list button" Like this
And of course, I would add a result list with "move up"/"move down" buttons besides it.
However, a drop-down list of 600 items is obviously too much; this means that some user searching by name, surname, department must take place.

I am skilled enough to technically create the application (JavaScript, jQuery and ajax requests being my friends), but the trouble is - how to design the interface of the web form so that the users would understand what exactly they are doing? How to lay out the items in form? What to show in the beginning, what to hide?

Maybe there are there some modern UI form patterns I could use here? For instance, maybe a text box where user can type in and auto-suggest with closest matches drops out? Maybe some draggable/droppable pattern can be applied (for instance, after you have entered user's name, you drop it on an appropriate task)? How easily do users typically adopt to such non-standard interfaces?

To state a question - how do people typically solve this kind of data input problems? Have you seen good examples of this somewhere on the web? Tell me, because I can't think of any right now.

Sorry, there are many questions and many of them are discussable. Should I mark it as "community wiki"?

Answer 1

As soon as I saw the problem, I thought AutoComplete. Since you thought the same, it is probably the obvious solution to the problem. The "To" field of emails has the same issue - how to select that one person from 1,000s of contacts.

Yahoo has some good accessibility considerations to be sure that the AutoComplete field works in a manner that is obvious and consistent with typical behavior.

Since the task contains 5 items, drop downs are acceptable. The recommended upper limit for drop downs is 7 items, so you are within the limit. One suggestion would be to end the tasks with "by" or "on" so that the line reads like a sentence - John Doe writes a response letter on 22/01/2010. Also, including a little visual aid in the drop down could increase conprehension in some situations.

Answer 2

To begin with with, I'm not sure I agree with the non-standard interface part. I suppose it depends on who the users actually are, but I would definitely say that that kind of text box/auto search functionality is becoming very standard from airline booking forms to search engines.

About the selection method, I would go for the text box method, so that when a user types in text a search starts the results of which are displayed in a drop down. The search should of course search both surnames and first names with some kind of intelligent regex at least.

On top of that I would still add a selection field, maybe not a drop down but perhaps a list box that contains all the employees, possibly with options to order the names by surname or first. This would be for those who don't know the spelling of a persons name, or can't quite remember the name.

Otherwise the layout you have there seems to work for me. I wouldn't play around with dragging and dropping anything. This of course creates a nice feeling to it, but is way more unclear on what should be done to assign the tasks. If you find yourself writing instructions on how to use the thing then you've gone overboard.

The other thing that I thought of would be to have an appleish menu where you have an empty list at first and when you click on the list, the input fields appear. The problem with this is that since the UI doesn't have indication on what you should do to add stuff to the list, people are easily left baffled.