Are two toggle buttons better than a tri-state switch?

Question

I have a grid of people where for each person the user needs to decide whether to include the person in a predefined group, exclude them from the group, or leave it undecided. The initial state is undecided. Having two radio buttons won't work because the user should be able to change their mind back to "undecided" after initially selecting "in" or "out" (that's why this is a different question).

Two approaches came up. One is to have two toggle buttons, and the other is to have a tri-state "switch" (which is essentially a group of three radios, visualized differently).

^{download bmml source – Wireframes created with Balsamiq Mockups}

• The toggle buttons would be mutually exclusive (only one can be selected, but both can be unselected)
• This is inside a pretty busy grid, so real estate (column width) is definitely a factor
• This is not a touch interface

What's the best approach here? Pros and cons?

Answer 1

Design for the micro-workflow

---

Observations

• Most users will make a selection and move on, as you noted. Users are not very likely to deselect a choice, either immediately or afterwards.

• In and Out are the primary choices here. The undecided choice is an unbiased default.

  • Null/default/undecided/unknown choices are often very difficult to design correctly, and designers often don't think about these enough when designing controls.
  • Programmers are often better at this by habit (think of null vs '' vs undefined in javascript), but even then the semantics are often easy to screw up.

• Grid alignment and economy of space are important....given that there are a lot of other controls on the page.

One possible design

The design logic here is:

• Make the primary choices clear. The large buttons provide easy landing spots for the cursor, and the primary options are visually clear.

• De-emphasize the undecided choice. You can hide it until the user makes a choice (top example), or keep it shown (bottom example and probably better). This button is a relatively rare option/scenario, so there is no need to promote it to the prominence of the primary selections.

• Get rid of the icons. These just add visual clutter and take up valuable horizontal real estate.

• Consider adding a checkmark to the selected button for clarity (bottom example).

• Keep the buttons grid-compliant for compactness and to calm the overall interface.

On toggle vs tri-state...

This answer (hopefully) illustrates that neither approach is intrinsically better than the other. I believe the way to decide between the two is to lay out the design goals and constraints, think carefully about what the null state means, and then the design task should become much clearer.

Answer 2

If you do not mind hiding the available options at first glance, you can also use a combo instead of radio buttons that could save you some column width.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

I would suggest a set of three radio buttons: one for 'in', one for 'out' and one for 'undecided'.

Mutually exclusive toggles is likely to require lots of explanation and could leave the user confused: A pair of toggled buttons seems to offer 4 different combinations (A+/B+, A+/B-, A-/B+, A-/B-) but you are going to need to explain that there are only three (A+/B-, A-/B+, A-/B-). On top of that the third option is never explicitly show in the control settings - in your case you show 'in' or 'out' but 'undecided' is only shown by the absence of any other setting. This too would require further explanation.

A set of three exclusive radio buttons should do exactly what you want: all three options are visible and the fact that the user can only select one is indicated by an established pattern.

Answer 4

To answer your question, the frequency of this action should be considered.

---

Low frequency:

Users do not remember their options when they don't use them regularly and so the options should be easily findable and understandable.

Considering the screen real estate you have mentioned, and for users to easily understand their options, I would also suggest a dropdown similar to Vincent's.

Of course, the dropdown adds an extra click to reach the options, but it is ok as the primary focus here is to make the user identify and decide his next action without much hassle. Hence, it is recommended to use UI elements that the user is already familiar with for screens that are not frequently used.

---

High frequency:

If this screen is used often, and the users have to frequently toggle between undecided, in, and out, a dropdown is going to frustrate the user. Here, the users should be given quick access to their options.

In this case, I would recommend the tri-state switch. The learning curve is small when users use this toggle frequently, and so in due course will be able to adapt to your tri-state switch. But, I would not suggest a Question mark.

Please check out my mock-up below. It's a simple tri-state switch with some fun added to it, which might result in better user engagement. It will fit the real estate you have described. But, take my suggestion into account only if this toggle action is frequently used. Thanks

Answer 5

First option is better, with the toggle. The reason why is because users given clear instruction on possible answers are more likely to understand and answer them (correctly) than when the instructions are obscured. In the case of the tri-switch, there are two visible options and one invisible option. Each has three states, but the latter has one option that isn't inherent, meaning you'll have to provide instruction or hope the user can "figure it out".

Depending on your demographic, that may not be a problem. Younger and more tech savvy users will get the switch with a single instruction. However, since I've switched jobs to a company whose demographic is white 55+ year olds, even simple instructions aren't always enough. For instance, your example of three buttons wouldn't work: the undecided button doesn't list that it's undecided, only that it has a question mark. In my universe that means "I have a question and clicking this button will either let me ask it or provide tips".

Answer 6

There appears to be two issues at hand

Explicit or Implicit Tri-state? Quite unanimously for reasons given explicit Tri-state is better

Compact visualisation of explicit Tri-state Three buttons, radio button group, combo box all do the job. But another UI that helps communicate connectedness of concepts clearly is also the slider - or other similar visuals reminiscent of a likert scale

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 7

Your solution is still a radio button. It's a radio button with three options: "in", "out" and "undecided"; of which "undecided" is the default. If you clearly show "undecided" as a third option, then there is no ambiguity to the user.

There is no UX reason why you can't select one radio button option and then change it later, same as selecting toggle buttons or typing stuff. I'm not sure where your preconception comes from that this wouldn't be acceptable. If your design launches a whole load of stuff when you select one or the other then I can understand how it would complicate your implementation, but in that case you'd probably be starting with the wrong design in the first place.

Answer 8

Although some UI guides would suggest that check-boxes should only be used in cases where any combination of selections would be valid, I would suggest (and some designers seem to agree with me) that they are also appropriate in many cases where, given any combination of previous states and clicked state, it would be "obvious" what the desired next combination of states would be.

In the particular situation where check-boxes would represent a choice with "A, B, or neither" semantics [with "both" not being a valid choice], the choice of whether to use a three-state button or a pair of check-boxes would depend upon whether the "neither" case represents a state in and of itself, versus a lack of other states. For example, the "Font" box for 1990s MS-Word had check boxes for "All caps" and "Small caps", and for "Superscript" and "Subscript", along side the boxes for "Bold", "Italic", etc. Using checkboxes for everything gave a neater appearance than radio buttons would have, and also avoided the need to come up with labels for "Not all caps or small caps" and "Not superscript or subscript" buttons.

If one uses a three-state button for "include", "exclude", or "undecided", the latter choice would suggest that their state should be set to "undecided". Given checkboxes "include" or "excluded", leaving both boxes unselected would suggest that the people should be left inside if inside, or outside if outside. If the latter semantics are intended, using checkboxes might be better.

Answer 9

Between your two mentioned options, the two toggle button option will be a good method. Advantages:

• clear affordances
• doesn't distract from the main content

existing examples:

upvote / downvote buttons across various sites like this (stackexchange), reddit, quora etc.

[ p.s. since the elements would be inside a busy grid, implementing a design with emphasis on visuals would draw a lot of attention and add to the busy-ness]

Answer 10

This is one that should be tested because I have no idea if it will work. I wanted to come up with something that uses common elements and shows all options in a compact way. The idea is to leave out the "undecided" label by using two checkboxes.

Why checkboxes? It should be common to people that if no option is wanted you just have to uncheck them. It's unavoidable that people think that both can be checked. This can be solved in two ways:

1. by disabling the other checkbox when one gets checked:

2. with a message when people try to check both. In this example, "Out" got clicked:

I like #2 better because it doesn't give the idea that you're stuck with your choice and is more helpful when someone doesn't understand the intention.

Answer 11

You can use three radiobuttons with their backgroundcolor colored with Red = Out, Yellow = Undecided and Green = In (this because you mentioned a busy (tied) grid) and use a legend explaining the color meaning.

Answer 12

Why not simply use an intuitive tri-state check-box column (if it's available)?

It saves space, and properly represents your data (if/when users are familiar with such controls).