tags:

views:

127

answers:

2

I am trying to create a form for my php/mysql application. I want my users to list the priority of thier choices where they have 5 options and they have to choose each in order of preference

+1  A: 

Why not simply provide five slots (one under the other) for each of the choices and provide a higher/lower control on the right of each to change the order? That's always more attractive than assigning an out-of-order sequence number.

For example, start with:

Favorite Friends:
    1 Pax             ^   v
    2 Litb            ^   v
    3 Jon Skeet       ^   v
    4 VonC            ^   v
    5 Jeff Atwood     ^   v

Then, if you want to bump Jon up to position 2, just click on the "^" next to his name once.

Favorite Friends:
    1 Pax             ^   v
    2 Jon Skeet       ^   v
    3 Litb            ^   v
    4 VonC            ^   v
    5 Jeff Atwood     ^   v

If, for some reason, you think I've wronged you (and I'm truly sorry :-), click on my "v" character four times and you end up with:

Favorite Friends:
    1 Jon Skeet       ^   v
    2 Litb            ^   v
    3 VonC            ^   v
    4 Jeff Atwood     ^   v
    5 Pax             ^   v

This variable-position/fixed-number is (IMNSHO) much better than the fixed-position/variable-number solution thus:

Favorite Friends:
    5 Pax
    2 Litb
    1 Jon Skeet
    3 VonC
    4 Jeff Atwood
paxdiablo
The question is: Should you have the out-of-order selection as a fallback for Javascript-disabled clients, have them reload the page every time they move somebody one rank up or down, or just leave the noscript kiddies to think about what they've done wrong?
Chuck
You should always have a non-JS fallback position, if only for accessibility purposes (mandated by equality laws in many countries). But I'd make it look as similar as possible (i.e., page reload) - out-of-order would still look ugly.
paxdiablo
+1  A: 

I would place a text input next to each field, with brief instructions stating how the control works. For JavaScript disabled clients you can simply validate that each input contains a unique integer from 1 to 5.

For JavaScript-enabled clients, the jQuery UI library has you covered.

Mark Hurd