Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers 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.

share|improve this answer
    
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
add comment

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

share|improve this answer
add comment

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 …)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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