Question

I need to make form which will be used to rank the students in a class – i.e. best student is rank 1, next best is rank 2, worst student is rank N (where N = number of students in the class, in this case generally less than 10). What’s the best (easiest to use, most accessible) interface for doing this, with the caveat that it needs to work even if Javascript isn’t available?

I was thinking of using radio buttons, something like:

Student   Rank 1    Rank 2    Rank 3
Joe        ()1       ()2       ()3
Julie      ()1       ()2       ()3
John       ()1       ()2       ()3

The problem, of course, is that radio buttons can only belong to one group: either each row is a group, or each column is a group, but not both. So no matter what, I’ll have to do validation server-side to ensure either that each rank is used only once (if I group by row) or that each student is assigned only one rank (if I group by column).

My question is, which is more understandable to the average user? Grouping by rows, so that each student can have only one ranking but it’s hard to tell if a ranking has already been used? Or grouping by columns, so that each rank can only be assigned once, but it’s hard to tell if a particular student has been ranked twice or not at all?

Alternatively, would a different interface be better? Dropdown list with possible rankings? Textboxes? Something else I’m not thinking of?

Answer 1

I would use a dropdown list by rank. Then it’s easy to see who’s been chosen already, and it’s intuitive to see the current ranking. You could use javascript to ensure there are no duplicate choices and validate on the server side too when javascript isn’t available.

Rank 1       [Joe]

Rank 2       [Julie]

Rank 3       [John]

Or, even better, use jQueryUI Sortable with a dropdown fallback when javascript isn’t available.