My website gives users a report for their search term, this report contains many different datasets.

Each dataset can be configured via options on their profile page, to either;

  1. Load when the report is generated
  2. Load on demand (click)
  3. Be hidden completely

Currently I have several rows of radio buttons (see below), one row for each dataset. Though I find it to be really clunky and I would love to find a better way to implement it.

Ternary (3 way) switch

Any suggestions on how to improve this?

2 Answers 2

  1. Try relabeling the radio buttons to something shorted so you can either have the labels only mentioned at the top or even if you want to repeat the labels, they are not so real estate intense.

  2. You can convert them into a dropdown menu. Each dataset has a menu beside it with these 3 options, and you can have the most frequently used option as the default.

  3. Do you have the data on which options people select? I mean if people rarely select the "off" option, then you can have just 2 radio buttons, automatic and click and keep the off option hidden away somewhere to be brought up manually.

  • 1. Good point, I could move the label to a column header. 2. I feel this would just add an extra click to expand the dropdown box first. 3. Unfortunately no, there is no differentiation between users who have turned off the dataset, and those who have had it completely disabled by the sales team. Mar 20, 2013 at 16:18
  • A friend on Twitter has pointed me here, what is your opinion on something like this? Mar 20, 2013 at 16:55
  • So, creating a slider-ish button, right? Looks like an interesting idea, though you will need to work on the visuals a bit to make it clear to the user. Make the selection button/lens prominent and clear.
    – rk.
    Mar 20, 2013 at 17:19
  • 1
    Just for completeness, here is what I went with in the end. jsfiddle.net/will_hawker/ewFgf Mar 22, 2013 at 10:05
  • Nice! Also, you mentioned that there is no difference between users who turn off the dataset and other 2 options. That, and if, off is not a particularly 'bad' state, why do you choose to highlight it in red color? If the three are equal options, you can just change the background color to a grey to visually highlight the current state selection.
    – rk.
    Mar 22, 2013 at 11:51

Interesting trinary problem.html does not natively support tristate switches. However, you can use jQuery's tristate switch. https://vanderlee.github.io/tristate/enter image description here

<input type="checkbox" class="tristate" value="1">
<input type="checkbox" class="tristate" value="1" checked="checked">
<input type="checkbox" class="tristate" value="1" indeterminate="1">

Your Answer

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

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