Deselectable radio button or limited checkbox in search filters

Question

I'm currently working on a change request for a search filter we have in our product overview. Our search form has some basic search filters e.g. price range, delivery time,... Our products can also have tags added to them. An example of this would be "coming soon" or "recommended". Each tag currently has it's own filter in the search form with a checkbox that looks like this:

Coming soon
  [] Yes

What management wants now is that the user can explicitly show or hide gifts with a certain tag. So they want something like this:

Coming soon
  [] Yes
  [] No

If you select yes, you would only see gifts that have the coming soon tag added to them. If you select no you would not see any gifts with that tag.
Now the issue is that users can only select yes OR no, not both, however they still need to be able to deselect it as well, when it doesn't matter to them if a gift has that certain tag. Management and dev team talked about having checkboxes that should also behave like radio buttons(or vice versa).

I would definitely change the copy from yes/no to something like show/don't show. But I also feel like combining radios / checkboxes into one component won't be the best approach since users probably don't expect both of these behaviours in one component.
I wonder if it would be better to use radio buttons with a third option "Doesn't matter", but that would definitely increase the length of the search form, especially when we have a lot of tags to filter on, and it would add another option to worry about making sure the copy is clear.

Answer 1

If you really have the three states:

• Show Only “Coming Soon”
• Exclude “Coming Soon”
• Show Both

Then for clarity you need a control the handles three states, such as three radio buttons. For example, if you have an arbitrary number of binary attributes or “tags” (i.e., either the product has it or not), it could look like this:

If three radio buttons take too much room, then use a dropdown instead. If there are a large number of tags and users actually don’t use them that much, then use progressive disclosure and put the selection controls in a separate page/pop-up/expander, and only show a summary of active tags on the search page:

Or you can put the few tags that are actually useful (or perhaps used frequently by users) on the search page and all the rare ones only management wants under progressive disclosure.

I don’t see a way of representing three states using two radio buttons or two check boxes. No matter what you do, you’ll make the controls act in an unconventional way that many users will not be able to anticipate or understand.

However, whenever someone asks for something weird, you need to ask them why. There’s a good chance they’re trying to design the wrong solution to a real problem. Once you understand the problem better, you, with your superior design skills, will recognize an obvious solution.

In this case, maybe management doesn’t believe users will use all three states. I can see why users would want to Show Both (they’re willing to wait if something better is soon available) or Exclude “Coming Soon” (they need something now), but it’s hard to imagine a use case where a user wants to Show Only “Coming Soon,” assuming “Coming Soon” products are marked as such in the search results. Maybe what management recognizes is that your current “Coming soon [ ] Yes “ design is ambiguous: Does it mean Show Both or Show Only “coming soon”? So they “solve” this problem by trying to make all three possibilities explicit. They don’t realize that all you really need to do is to relabel (and possibly re-implement) your single checkbox

 [ ] Include unavailable products that are coming soon.

Likewise for the recommended states:

• Show Only “recommended”
• Exclude “recommended”
• Show Both

Why would users ever want to exclude recommended? (I assume any recommendations are a subset of products that fit with other search criteria.) Is your recommendation algorithm so awful that users realize the product they actually want will be one that isn’t recommended? But, like above, unchecking something labeled “Recommended [ ] Yes” is ambiguous. Does it mean Show Both or Exclude “recommended”? Maybe what you really need is, again, relabeling/reimplementation:

 [ ] Show only recommended products.

I’d return to management and get more information on what the problem actually is.

Answer 2

I like the custom selectable buttons of skinflint.co.uk. I agree with you combining behavior of checkboxes and radiobuttons can be confusing.

Neutral:

Selected:

Clear filter (on hover):

Answer 3

Assuming it you are talking about some kind of shop system with users that are not using the shop professionally it think such a type of filter would be confusing.

Instead of having a tag and add a yes/no/doesn't matter option you could turn the filter around and phrase it in a form that users will understand. Examples:

availability [clear]
   [] in store
   [] coming soon
   [] release date unknown

or

recommendation status [clear]
   [] recommended
   [] not recommended

This is depending on the content you have, it might even be possible to combine certain attributes into one filter category.