Edited Filter Panel

Issues

1. Users are unclear they can click the sections to initiate filtering.

2. Popover location is highly unpredictable and moving mouse into the ControlPanel drilldown is fiddly and can cause mouseleave events to trigger.

3. Stylistically feels dated and heavy and distracts from the content users are interested in (products and data analysis)

4. Multi level ControlPanels break on smaller width screens.

5. Inconsistent styling and placement of controls in filter panel drilldowns.

Improvements

1. Plus icon is recognised by users more universally in testing with nearly all identifying where to add filters

2. Thanks to the use of the new Breadcrumbs, context is contained within the drilldown, meaning multi level menus can be encapsulated without the need to show the parent item.

3. Width and placement of ControlPanels are predictable and easier to interact with.

Issues

1. Segment selection performed very poorly in user testing. Very few users could correctly describe what the segment filter would do when clicking on the buttons. It was unclear that it was a multi-select filter that was ANDing with the market filters above.

2. MultiSelectButton components were just one of over five unique multi-select components we were maintaining - an unjustified ongoing cost to the product.

Improvements

1. Utilising the tried and test checkbox pattern resulted in a better understanding from users and a more predictable interface.

2. We reduced the need to support CheckboxButton as a component and all the accessibility complexities it brought with it.

Issues

1. Users were sometimes unclear that the items were selectable.

2. Another multi-select component to maintain.

3. No titling on FilterControl, so it requires referencing the parent FilterPanelItem that the drilldown originates from to understand the context making reading patterns more complex.

Issues

1. Users weren't clear that the item was included by default so we the issues was previously solved by adding copy to explain

2. It wasn't clear that "re-clicking" the button would unset the filter to "include"

3. There was internal arguments about whether it was correct to highlight the default state when we didn't have an "all" state in other filter panels, so we tested.

Improvements

1. Adding the radio button improved the understand our users had of the item being included

2. We ended up testing another version with a "clear" button that could then be reused across other filter panels, like multi selects, etc. This also performed about as well (though is less traditional) and we eventually switched out to using that.

Issues

Visual noise could be reduced by utilising the label inside TextFieldInput when it’s empty.

Issues

1. Users were sometimes unclear that the items were selectable.

2. Another multi-select component to maintain.

Issues

1. Nested multi-selects didn't scale well and we were using a new pattern to fix that in another filter so we needed to utilise the same pattern here.

2. Two columns made the content harder to scan and also made the width of the ControlPanel take up nearly all the screen on smaller laptop devices, meaning visual feedback on the filtered product results was hampered.

Improvements

1. We built an infinitely scalable UX pattern that allowed for any level of nesting under a parent category, which was becoming more of a problem as our neural nets and categorisers were becoming better and better at picking up product nuances.

2. We allowed the majority of our users who weren't interested in filtering by individual pattern types a less cluttered, confusing experience in the majority case, whilst making the selection of patterns easier.

3. The reduced width of the filter control panel meant more product results could be see whilst filtering. Meaning users were able to more accurately assess the quality of the results without needing to close the panel and re-find their place.