semi automatic prizing system UX/UI

Question

Am working on a project where system determines certain number of winners based on their scores. They are marked by system as gold, silver and bronze. The admin must be able to manually select winners after certain numbers of winners that system has picked.

So, I was thinking to generate users list and implement following method

• provide 3 check box for making it gold, silver or bronze against each user
• provide dropdown gold, silver and bronze to select against each user list.

Both methods works, but I am hesitant to use both methods. Can anyone suggest any better UX for making such semi automate process? Or least, which is the best practice out of the two methods I have specified? Tnx

Answer 1

When you select one and only on out of three options you should use radio buttons. You see all the options at once (apart from a dropdown) and you can select only one item (apart from a checkbox).

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

There can be only one gold, one silver, and one bronze user, and they obviously can't be the same person. Radio buttons, being the standard 'there can be only one' control is the obvious choice.

First, you can't 'Turn off' a radio button. In the case of accidentally choose a 'Gold' winner, a set of radio buttons provides no clear way to give the input of 'whoopsie, I didn't mean to select that person as a winner!'

Second, the choice needs to be locked out in two dimensions. You can't have two Gold winners and you can't have a single winner with more than one type of win. This means we need a logic-puzzle grid, where only a single choice can be made in a column and row.

(taken from logic-puzzles.org)

The above is a common logic puzzle 'control', where when one item in a box is true, none of the other items in the same row or column can be true. If we adapt that control to a prize selection screen, we get something a bit like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

In this mockup, selecting one item disables the checkboxes in the same column (only one Gold prize) and row (only one prize per entry); notice how the other checkboxes in the same row and column become disabled (faded) when one is chosen. If you make a mistake, you can uncheck the box which will return the blocked checkboxes to being enabled.

This interface clearly indicates when a choice is prevented due to a conflicting selection that has already been made. This gets more important when your list of potential winners cannot all be displayed on one screen. Context is lost when you scroll down, but the disabled buttons prevent a user from accidentally making a conflicting choice.

Answer 3

I think the dropdown is superior because it takes less space and makes less clutter. Also you can make it only appear when you hover over the name and have the background of the selected user and the dropdown's div the same color as if they are one block:

User1 [Gold] 
User2 [Silver] [Dropdown]  
User3 [Bronze]

Having the dropdown only appear on hover will make for a pleasant overview when you are done making changes.