We are developing a fantasy sports game where you have to assemble a team of 15 footballers.

During a game week you have to assign the captaincy and the vice-captaincy to 2 footballers by accessing their profile cards (you open a footballer's card and then assign him as a captain or as a vice-captain). A footballer cannot hold both roles.

Our UI Designer suggested the following solution, but I don't feel confident with it; can you please give me your suggestions as to how to represent the buttons?

captain and vice captain buttons

  • Why doesn't this make you feel confident? To me it appears to be a select one or the other UI.
    – Majo0od
    May 22 '17 at 17:48

Have you considered a toggle switch rather than two buttons, that way you can have a second button used to clear state.

So rather than having two buttons or radio buttons you have a toggle switch as you said you can not have a player in both roles, so a toggle would be a good way to force the user to choose one plus would help to reinforce this to the user. then you could use the space where the second button was to have a clear state.

The clear state button would not need to be as big as the buttons you showed and you could have a 80/20 split for the space allocation. The clear state button could just be a cross.


Definitely not correct in my opinion. The two blocks should be visually grouped because there is only a single state of "captaincy level"

I think the best approach would be simple (but stylized) "radio buttons" - which are after all the UI mechanism for not accepting two values at once.

One square element, labelled "Captaincy level" or similar, with two circles to chose "Captain" or "Vice-captain". Not two separate boxes.

  • Thank you for your reply! What happens though when you have selected a player as a captain and you want to remove the captaincy without assigning any captaincy to the player? Will you have to press the captaincy radio button again to deselect it? Will it be obvious to the user? *a player can be either a captain, a vc or nothing at all; 13 out of 15 will have no captaincy and only two will share the captain and the vice captain armband
    – Dimi
    May 19 '17 at 12:59
  • 1
    You could provide a third option "No captaincy" or similar, or style the radio buttons to look more like toggles. Various approaches, but the question was, I felt, kinda limited to whether the approach you have there already is visually correct, and in my opinion it is visually wrong :)
    – mayersdesign
    May 19 '17 at 13:02
  • There is no space to add a third option I am afraid; given the design we have at the moment we can only the space as shown in the picture and only follow an horizontal route. Do you think that using 2 raised buttons following the material guidelines will solve the issue?
    – Dimi
    May 19 '17 at 13:08
  • 1
    I would agree a third option is necessary to have the UI be logical. If someone is NOT a captain or a vice-captain they must be something else, even if it's just "player" or "member" -- three radios buttons (styled) and only 1 is selectable at any time.
    – Metis
    May 19 '17 at 13:19
  • @Metis even though the norm would be that 13/15 players are not being assigned the captaincy? Sounds a bit of an overkill, no? It's like you have to give a boost to 1 out of 10 selections and although you assign the boost to one of them you have to tag the rest as non-boosted, which is a unnecessary in my opinion.
    – Dimi
    May 19 '17 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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