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

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

---

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.