Choosing from a list of options and preserving order

Question

We have a listing of topics and would like users to be able to choose three topics from the list and would also like to preserve the order in which the topics are chosen.

Using three <select>s labeled "Topic 1", "Topic 2", "Topic 3" is probably the easiest option but means that the user has to scroll through the topics in a dropdown list which seems less than ideal to me.

One list of checkboxes lets the user see all the options, but makes it difficult to record order of choice.

Worst seems to me three lists of radio buttons, but that at least ensures that the user definitely chooses three topics and the order they should come in.

Answer 1

This could be a job for a palette interface:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Users can add items from the left field into the selection on the right. They can then view and manipulate the order of the selected items in the panel dedicated to them.

Answer 2

If you don't want to do this via drag and drop, add some button functionality to the list.

On the left is a list with all options and on the right the three selected options.

Users can add three items by clicking the add-Button on the left side. The right list shows the selected items. Users can sort them by clicking the up and down buttons.

Answer 3

I might be getting a bit overly creative here … But given your concerns about degradeability and mobile devices, the following approach looks suitable to me:

^{download bmml source – Wireframes created with Balsamiq Mockups}

(Note: my labels suck, you'll want to replace them with ones that make more sense …)