Ranking list of items in html form, preferably without javascript

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

This is a user interface issue. Best is to test the different alternatives with real, and un-coached, test subjects. See the web articles by Jacob Nelson. (sp).

Remember that even if you don't have javascript, you have your server computer. So I'd make simple dropdowns, and have your server-side verify that the answers are logically consistent.

Also, you can and should detect whether js is available, and if it is, then you can make a smoother client-side experience

Added: there are also good books about running low cost UI testing. You don't need a million dollar lab. Eg Don't Make Me Think! by Steve Krug

The only real way to determine UI answers is to try them with test subjects.

Answer 2

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.

Answer 3

To my mind the most intuitive interface for this would be simple list with links to move each student up or down.

  Rank 1  ^ Joe   v
  Rank 2  ^ Julie v
  Rank 3  ^ John  v

And so on. This wouldn't be too hard to do either serverside or through javascript and it would guarantee that no two users could be at the same rank by mistake in a very transparent way.

Slightly more work for you as the creator of the page but a big advantage to your users.

Answer 4

If you are using exclusive rankings (i.e., there can only be one #1, one #2, etc.) I would suggest that the most intuitive way for users to understand is, unfortunately, drag and drop. Having each row contain a radio button group that is as long as the number of rows would be confusing, and you would still need code to maintain the uniqueness of each rank.