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?
undecidedthe actual choices? I'd really need to understand what that third choice means in order to design here. Undecided is different from unselected, which in turn is different from "neither". Irrespective of the layout constraints, what does that third choice actually mean in your domain and would the user find it helpful for it to be explicit?