2

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.

3 Answers 3

6

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:

Multiple rows of sets of three radio buttons, one row per tag

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:

List only must-have and excluded tags, with Set button

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.

2
  • Maybe "recommended" and "coming soon" weren't the best examples. In those cases having just 1 checkbox (e.g. only show recommended products) would make sense. I think part of the issue is we're trying to make 1 component for all these tags/filters while they shouldn't all work the same and marketing and category management are adding tags willy-nilly. A better example might be a brand; e.g. show me products of brand X, don't show products of brand X or show both. I'll have to get back to management and discuss what kind of tags would be available and how they should filterable.
    – Mosh
    Oct 7, 2022 at 8:19
  • @Mosh. I see. I've elaborated on the three-state solution specifically addressing willy-nilly tagging under the assumption that management really insists on having lots of tags (of perhaps questionable use to users). Oct 7, 2022 at 14:45
0

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

Neutral:

neutral

Selected:

Selected

Clear filter (on hover):

clear filter

3
  • Definitely an interesting way of adding filters! The only thing I'm missing here is there's no way to say (for example) show me all monitors EXCEPT the ones made by Acer, if that makes sense.
    – Mosh
    Oct 6, 2022 at 13:35
  • 2
    Looks like just an another rather space-consuming way of doing a checkbox. The user can X out all options, which, for the OP case, mean no results returned. I think that's the state the OP wants to avoid. Also, dynamically adding an "All" button adds space the OP says is not available. Oct 6, 2022 at 13:42
  • yoshiMannaert Yes, that use case can be quite click-intensive. @MichaelZuschlag The website uses the filter to filter down the results. By default you will see everything (All results=Neutral=No filters applied). The "All" button is just a convenience function to quickly go to the neutral state. You can leave it out.
    – Nash
    Oct 6, 2022 at 14:27
0

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.

2
  • 1
    It's a B2B shop that's a part of our Saas. So if by professionally you mean it's used by businesses then yes, it's a professional shop. Your second example is definitely a great way to add copy to make it clear to users what to expect, but there's still the issue of it being radio buttons (you can only select "recommend" OR "not recommended") but you also need to be able to remove your selection. Grouping them wouldn't solve this issue either. Maybe a good approach would be your second example with a "clear" button next to the filter title?
    – Mosh
    Oct 6, 2022 at 14:07
  • @yoshiMannaert my idea was that this are not radio buttons but checkboxes. When filtering grouped attributes usually the options should be OR connected so if a user checks multiple options all product with either one of the options should be shown. But between groups it is an 'AND' operator so if someone checks: 'in store', 'coming soon' and 'recommended' all products that have the attribute in store OR coming soon AND recommended should be shown. So checking all checkboxes within a group would give the same result as unchecking all attributes. For easier handling i added the 'clear' button.
    – BrunoH
    Oct 7, 2022 at 9:15

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.