overflow - Best way to select a subset of items in a long list

One of our clients wants us to build a web application to share information about the magazines he publishes. Each edition of a magazine contains a variable amount of advertisers. These advertisers come from a central pool of advertisers. This pool contains (at the moment) about 150 advertisers. Each edition of a magazine contains a subset (about 70-80) of these advertisers.

Our client wants us to come up with a way for him to add 70-80 advertisers from this list of 150 to an edition of a magazine. It needs to be as fast as possible, as easy as possible and as intuitive as possible.

What would be an ideal solution here? I was thinking about something in the lines of the image below.

1. List of available advertisers.


2. List of selected advertisers. Advertisers have a delete button.


3. Textbox with auto-suggest for advertisers in the list on the left. removes the advertiser from the left list and adds it to the right one. Textbox gets cleared and remains focus.

My colleagues suggested drag-and-drop or just one list with a checkbox for each advertiser, but those approaches force the user to do a lot of searching and clicking. With my approach the user can just keep on typing.

Any other suggestions for this situation?

Answer

Your design Kristof is pretty good already. You've nailed very important things like stopping this mouse and keyboard back-and-fourth action - that's gonna ruin the experience. And I'm with you on the drag-and-drop - yuk!

I've just refined your idea a little:

• Obviously mouse clicks on the left items will add them to the right.


• You would want the text filter to be Google Style - ie. multi-word, partial matching. As in the search input "rce bm" would match the third item shown in the diagram. This is easy to do and gives the user a powerful, intuitive way to look for names. Second-rate filtering (like start-of-string) will only frustrate users and put them off from using it again. Since the filtering is so critical to the interface, it better work well.


• Another way to save time for the user (as someone else suggested) would be to have a partially completed list in the "selected advertisers" side. If you thought that there was a good chance the "top 10 most used" advertisers would be a 70% or greater hit, then might as well dump them in the right hand list on load right? Worst case the user has to delete one or two (1 mouse click each) of the top 10 and the remaining 7 items that they want have saved them searching for them. Tweak the numbers in this idea to relieve the user of more work.

Remember: The more work you can do for the user; to reduce their clicking, looking and searching, the faster, easier and likeable your interface will be.