Facet Design: Don't show (1) bubble on single selects

[masonmcelvain]

Problem

Many of our facets are now single selects as of #476. On desktop, it looks a little funny to have an expanded single select that has a (1) bubble on it, when the selected facet option is already highlighted.

However, collapsed facets on desktop and the facet overview on mobile currently depend on the (1) bubble to indicate that there is an option selected within that facet.

Desktop view:

Mobile facet overview:

Mobile facet panel:

Do this

For active filter feedback, let's try this:

<Box w="2" h="2" borderRadius="full" bg="brand.500"></Box>

CC @mmarcon91

[mmarcon91]

I didn't follow the previous discussion about wanting to make filters like radio buttons.

In my opinion, not allowing checkboxes to select more filters only takes away functionality without providing any benefit in terms of UX. Is there a technical motivation behind the choice to limit the user?

It is a bit confusing that all filters now look like links and not selectable things, having checkboxes makes the selection more evident and more in line with what the user expects.

Answering your question, if the direction is to keep only one selectable item, we could convert the (1) into a dot, just to give the feedback that that category has an active filter, and I would not remove it if the accordion is open. Let me know how you want to move forward with this

[masonmcelvain]

Thanks for the response @mmarcon91!

In my opinion, not allowing checkboxes to select more filters only takes away functionality without providing any benefit in terms of UX. Is there a technical motivation behind the choice to limit the user?

I'm not the best person to answer this, maybe @sterlinghirsh can chime in.

It is a bit confusing that all filters now look like links and not selectable things, having checkboxes makes the selection more evident and more in line with what the user expects.

You're right, they do look like links and it's misleading. I think the intent was to differentiate the single-select facets from the multi-select facets. If we choose to keep the single-selects, we should reconsider their appearance.

Answering your question, if the direction is to keep only one selectable item, we could convert the (1) into a dot, just to give the feedback that that category has an active filter, and I would not remove it if the accordion is open. Let me know how you want to move forward with this

I like this idea, thanks.

[sterlinghirsh]

This is from Amazon. Their single selects don't have a checkbox. I don't think it's actually that confusing.

[mmarcon91]

I believe it may work for category selection which links a different page. Amazon have a different UI for the "Department" selections, with a tree.

Why do you think it is better to block multi-selection? Is there an advantage?

What if you want to see kits and parts together and decide by looking at the prices? (This is an example but it might work for other cases)

[sterlinghirsh]

I think disjunctive (i.e. OR) multi-selection makes sense when you want to compare multiple items that could fit your needs based on price, specs, etc. This makes sense with generic tools or parts where multiple could be compatible, like hard drives or usb cables. It doesn't make sense when selecting items that can't be compared that way, like items in non-overlapping categories. I don't expect a user to select batteries and screens at the same time, since they almost certainly only care about one or the other. In our case, Part or Kit only has two options, and every part should fall into either Part Only or Fix Kit. However, since parts and kits are variants of the same product, selecting "Part Only" really means showing "product groups that contain a Part Only option", meaning you can't comparison shop those products anyway.

That's why I don't think it's useful. You could argue that just because we offer multi-select doesn't mean that users have to click multiple options, but I think it's more common that if people are browsing by item type, they'll click through multiple types one at a time. The experience of doing that with checkboxes means you have to remove the filter every time you want to look at a new type. So I think it's a smoother UX for the use case that I anticipate will be more common to use single-selects here and use multi-selects only on facets for comparison-shopping. Also, I think it's visually less busy on single selects since we don't have all those checkboxes.

There's another case we haven't really talked about, which is conjuctive (i.e. AND) multi-selection. I'm not sure if we'll implement it soon or ever, but I can see a case for it. Imagine a facet for selecting a toolkit that lets you shop by screwdriver bit type. For example, Ph 00, Ph 0, Torx T6, Torx T5, Pentalobe P5, etc. It would be cool if someone could just check all the bits they wanted and progressively limit the results to only kits that include all the required bits. But we don't have the data for that in Akeneo yet, so that's a ways off.

[mmarcon91]

Ok, let's leave it like this. Maybe for these things in the future it could be interesting to do some user tests and take feedback.

@masonmcelvain For active filter feedback, let's try this:

<Box w="2" h="2" borderRadius="full" bg="brand.500"></Box>