2

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.

3

This could be a job for a palette interface:

mockup

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.

  • This might work. My only concern is that I can't think of a way for this to degrade gracefully (for accessibility and for, say, mobile devices). Also the list is sufficiently long that unless I made it a fixed scrolling box (which would obscure some of the options), people would scroll down and the right box would disappear. – Jordan Reiter Aug 29 '12 at 23:29
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.

enter image description here

1

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:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.