0

I'm looking for an intuitive, user-friendly way to enable users to select (and switch between) two possible values.

Normally, in a form, this would be done with radio-buttons, but I will have table with this choice in every row. Using radio buttons would make the table look very cramped.

A drop-down is also a possibility, but it means that changing selecting requires two clicks instead of one.

I thought about two toggle-buttons acting as radio-buttons (only one can be toggled at the same time), but I was wondering if anyone has any better ideas?


Note that the two values are not boolean. It;s not on/off, yes/no or true/false. Think of the choices as blue/red, and no, there will not be more options in the future.

edit: My problem with radio buttons is that I do not want a table with rows like this:

O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line
O Green O Orange | Some data | A lot more data on the rest of the line

Rather, I'd have something more visual showing whether Green or Orange was selected (and it should be editable).

An option with two toggle buttons would be

[G|o] | Some data | A lot more data on the rest of the line
[g|O] | Some data | A lot more data on the rest of the line
[G|o] | Some data | A lot more data on the rest of the line
[g|O] | Some data | A lot more data on the rest of the line
[G|o] | Some data | A lot more data on the rest of the line
[g|O] | Some data | A lot more data on the rest of the line
oerkelens
  • 101
  • 3
  • @EdwinLambregts: but that shows like "on/off", which is boolean. Any connotation to true/false or on/off I want to avoid. – oerkelens Jun 12 '15 at 14:02
  • How is blue/red any different from on/off, yes/no, true/false? 2 choices is still a boolean, just a different appellative. – Edwin Lambregts Jun 12 '15 at 14:05
  • A boolean can be represented with a checkbox. Non-boolean (like the ubiquitous Male/Female) can not (well, you could ask "Male?" with a checkbox, implying that not-male = female. But not-red is certainly not the same as green. In a database they may both be just a bit, but in my UI I see a big difference between on/off or male/female. – oerkelens Jun 12 '15 at 14:09

3 Answers3

2

I don't think radio buttons are that bad, but as an alternative you could use a slider with the labels outside it.

enter image description here

Alejandro Veltri
  • 10,487
  • 2
  • 33
  • 49
0

Just use three radio buttons (value 1, value 2, disabled). It's the least complicated solution.

If you want more separation between the enabled/disabled states, use two radio buttons and a check box

megapctr
  • 325
  • 1
  • 3
0

You are in a situation where you have a trade off between UI screen real estate and clicks so you need to use your judgement.

Like you said, a combobox requires two clicks but it saves the most screen real estate. If saving space is your top priority then a combo box is your answer.

17 of 26
  • 1,675
  • 12
  • 12