2

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

3 Answers 3

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1
  • 1
    ok so ll consider this option as a substitute or check box. thanks
    – sree
    May 13, 2012 at 17:28
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.

Logic puzzle example. (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:

mockup

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.

8
  • u r right, and explanation is very good. But, in my case their can be certain no: of gold , silver, bronze winners(chosen by system), rest, however needs to be manually assigned by admin, for some reasons(client requirement). My problem is here , how to give this UX/UI control to manually assign prizing. :)
    – sree
    May 15, 2012 at 5:46
  • whats the best UI/UX i can think of here to have a clean approach!
    – sree
    May 15, 2012 at 5:47
  • @sree could you try explaining that again? I do apologize, I do not understand what you are trying to say in this comment, though I get the impression that I have misunderstood your question in some way. May 15, 2012 at 7:36
  • Ok, np, system automatically picks up certain winners say 20 gold, 10 silver and 5 bronze. But, all the winners will be listed along their marks, after showing these automatically picked users. Next, the admin needs to manually assign each user with gold, silver or bronze. after that it will be saved in database. So my question is, how to effectively design for the later part of UX/UI. (now u can read my initial question for better unerstanding). :)
    – sree
    May 15, 2012 at 7:47
  • Am I accurately understanding that the administrator is assigning additional Gold, Silver, and Bronze winners above and beyond the automatically assigned ones? And there could be multiple additional Gold, Silver, and Bronze winners, so the item of locking out more than one winner in a category would be incorrect? May 15, 2012 at 17:07
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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