We debate a lot with our ui designer in regards to the following so I wonder whether you can help us make a decision.

We have a game screen with 2 options, where a user can either select only one of these two or not select any of these at all. User can also select one and then upon he selects the other one the first one will be deselected automatically.

He suggested buttons with check marks but I am not a fan of these! Is there another option being represented in a better way from an aesthetics and ux point of view?

options with check mark

  • Three position toggle? – plainclothes May 18 '17 at 23:38
  • 3 position toggle would have been a good solution if these 3 options had the same gravity in my opinion - captaincy and vice captaincy work as a boost and out of 11 players in the pitch 9 of them won t have it so the norm is without the boost. Using a 3 position toggle will require one of the 3 options to be ''none'' which does not look good since this is the norm for every player. What about raised buttons such as the ones from material design? – Dimitris May 24 '17 at 14:44
  • I'd need more context text on your app to recommend the right solution. But since I don't read Greek, that might not help. – plainclothes May 24 '17 at 15:12

As far as UX Guidelines and Best Practices are concerned, go for Radio Buttons

Radio Buttons were created specifically to represent a state where only one of the many options can be selected at a time.

Checkbox representation can be confusing.

| improve this answer | |
  • Exactly. Check boxes are the opposite of what you use to represent exclusive choices, they are used for multiple choices. I feel like OP's UI designer has a lot to learn yet. – Big_Chair May 19 '17 at 9:45
  • This is a Fantasy Sports game where you have to select 15 players and assign the Captaincy and Vice Captaincy to 2 of them so that will leave 13 players with no captaincy at all. If we were going with Radio buttons then we would have not only to introduce a 3rd option for those following the norm of not being assigned any captaincy but also to design it in an horizontal way as we have no other space to represent it in the mobile – Dimitris May 19 '17 at 13:17
  • How about using a drop-down menu with the two options: Αρχηγος and Αν. Αρχηγός? – John Kouraklis Jun 20 '17 at 13:45

As @plainclothes suggests, having a third option (none) solves the ambiguity.

This isn't a graphic design forum, so we can help with the user experience:

  • If you go with 3 buttons, the "None" option will be selected by default (I'm in favor of a pressed state rather than a checkbox) and when any of the other 2 is pressed, "None" and the remaining option "pop".
  • A slider, nob, or any other control that can only have one selected state would work just as well.
| improve this answer | |
  • This is a Fantasy Sports game where you have to select 15 players and assign the Captaincy and Vice Captaincy to 2 of them. So I have been thinking not to include a third option for none since 13 of them will follow the norm not being assign C or VC. Furthermore, given the way the screen has been designed we only have the space you see in the screenshot attached to use for a C/VC selection :( – Dimitris May 19 '17 at 13:13

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.