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 alt text http://naivist.net/tmp/layout.jpg
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”?
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.