Examples of good UI for selecting multiple records

I like the way StackOverflow relates many tags with many questions:

_{Items are displayed as user types}

1. You start obviously with the record you want to associate multiple items with.

2. As you type the search displays the matches ( no need to press on "Search" )

3. The user select the desired record ( Sorting would be nice. SO uses "tag relevance". For instance typing 'a' brings Java rather than asp because Java has more questions than asp, in your case relevance may be the user name )

4. The system creates the relationship ( in memory )

5. If a number of records ( 5+ ) are filling the input field, they are moved into a semi-regid area ( not a SO problem because it only has 5 tag withing a single question, but in your case something like the "interesting tags" feature would be needed )

_{Associated items are moved to a "rigid" area}

Of course in an ordered manner ( using a table )

• Finally when the user end with the association it clicks SAVE or CANCEL buttons.

This approach has more efficiency by not needing to have the user press on "search" or "add other" which distracts them from what they're doing, it is being said it interrupts its train of thought.

Also, if you make the user grab the mouse to click on something while they are typing the UI is less efficient ( I think there is something called the Hick's law about that, but quite frankly I may be wrong )

As you see this approach is pretty much already what you have in mind, but adding some facilities to make the user happier ( The danger would be if the user loves this approach and wants it in other parts of the system )

A search feature that filters records in real time as you type would probably be a good idea to include. Another would be the possibility to sort the records.

Since there may be a lot of records, the best choice in this case is probably to have a separate area which displays what you have already chosen, so that the user won't have to scroll around the selection areas to find what they already have.

It's an interesting and fairly common UI problem, how to efficiently select items. I'm assuming that you are intending on having the user first select a single item and that the mechanism you are interested is how to choose other items that get related to this first single item.

There ares various select methods. From a usability standpoint, it would be preferable to just have ONE method used for each scenario. Then when the user sees it, they will know what to do.

various selection techniques:

1. dropdown list - obvious for single selects.
2. open list multi select - eg: a multiline textbox that shows 10 or 20 lines and has a scroll bar
3. dropdown list where you select then hit and 'add' link or button to add multiple selects
4. list moving - where you have two open lists, with all the choices available in the left list, you select a few then click a button to move your selection to the right list.
5. Check boxes - good for just a few choices of multiple selection possibilities.
6. List of items, each with an 'add' button next to them - good for short lists

You've said that you'll have thousands of possible choices, so that eliminates 1 and 5. Really, thousands will eliminate all of them, as the usability doesn't scale well with more than a few hundred in the list.

If you can count on the user to filter the list, like in your example, then 6 may be suitable. If you think of how Facebook picture tagging works, I think that it fairly efficient for long lists: background: Facebook picture tagging is a mechanism that allows you to assign one or more people to portions of an image - ie 'tag' them.

When you select an image to tag (ie the 'single item') and wish to relate other items(people) to it, A dialog box pops up. It contains the top 6 or so names that you've used in the past, and a textbox where you can start to type the person's name you wish to use. As you type, the list dynamically changes to reduce the number of people to only those who contain the letter sequence you've typed. This works very well for large lists, but it does rely on the user typing to filter. It also will rely on use of scripting to intelligently reduce the list based on the user's input.

For your application it would rely on the user performing this step once for each association, as I'm assuming that the other items won't all have similar names!

Here's an image of the Facebook tagging application: http://screencast.com/t/9MPlpJQJzBQ