Best interface for selecting a set of many objects from another set of many objects?

Question

Suppose you're designing a tourism site and you want to let your users compile a list of "Potential Destinations" so that you can send them hot deals for only those places.

This list consists of an arbitrary number of cities picked from the universe of cities. The universe has (say) 1000 cities, and the average list will consist of (say) 20 cities.

What interface would you offer users for maintaining their list of "Potential Destinations"?

BONUS QUESTION: How does your answer change if you need to give users the ability to RANK cities (in order of preference) in their "Potential Destinations"?

My thought is to have an interface with 2 widgets: an autocomplete text box on the left and a list on the right. The textbox autocompletes on city name, and when you select something it gets removed from the textbox and added to the list. You can remove items from the list by clicking "X" next to them and drag to re-order.

Answer 1

This is just MHO, but:

In terms of widgets, if you can afford the screen real estate, you may be best off for the initial selection screen with two side-by-side list boxes, with a move here and move back buttons.

The left list (of cities) can be swapped with a combo box with some sort of lookup functionality.

However, you would probably want a list on the left because then you can arrange it into table (e.g., add state, country, etc.), and offer means to sort things within that column. So that, for example, if I want to find all resorts in Portugal, I can easily find them. With autocomplete, I have to figure them out for myself.

If you really have space, then you could go with three boxes or a tree-list for the left box, to offer some categories.

Of course, if you do it all with flash and can process things faster, then maybe you can go with the standard shopping cart approach.

Answer 2

I would have two lists, one on the left with all possible unselected choices in some useful order (alphabetical), and one on the right for the selected destinations.

I would allow users to drag items from one side to the other, and also drag up and down the right hand list if necessary

Some central buttons could also provide keyboard navigation equivalent controls

Answer 3

Why stop at textboxes?

Here's my fancy, time-consuming idea (since you didn't specify time constraints... and its snowing a lot so I'm thinking of sandy beaches).

I'm thinking a nice google map with overlaying. You can search for a city and it will transport you to the general region of that city. Zooming in close enough to a city will place different markers on the map with points of interest for that city and would load some blurbs about it. Imagine, you search for Miami, and it zoom into the region of Miami with pictures of beaches, sand, and other goodies. Next to the map you would have a "Add to my destinations", which will add the list to the list of destinations. This list will always be available on the right hand side. Clicking on an item on the list will transport you to that city on the map. There will be an [x] on each item to delete it from the list. Ranking would be done using a drag and drop.

The idea is to get your users really excited about these places and be able to see some of these locations. Since it's a tourism web site I expect some of this data to be available already, just a matter of writing it.