UX: buttons to validate value selection in the dropdown lists

[bunekcca]

After several sessions of user testing, we noticed some issues.
1-we need a button to validate the values selected in the dropdown lists (like we have in the prototype).

2-change the label of the button that apply all filters and name it "Apply filters"

[jraddaoui]

Hi @bunekcca and @stefanabreitwieser,

What should be the behavior when some filters are selected in the drop-down and it's closed without clicking "Apply"?

Each check-box is a form field and when you click outside the drop-down they remain selected by default. Cleaning those selections on drop-down close (if apply was not clicked) may get complicated, for example, if some filters were already applied before opening and some extra filters are added but apply is not clicked. However, if it doesn't matter how the drop-down is closed, adding the "Apply" button won't be more than an aesthetic change.

[stefanabreitwieser]

Bun is out on vacation this week, but I'll try to answer this! Given what you just said, I think maybe Bun's second screenshot is what we should start with now. The reasoning behind doing this change is that when users made selections from the drop-down, they didn't know they also had to click the blue search button. Making it more explicit with the "Apply filters" text will hopefully make it more user friendly.

Let's start with the second screenshot for now, and then maybe Bun can review whether he still wants to go ahead with the first screenshot when he returns. Does that work?

[stefanabreitwieser]

Just an update -- Is there a way to make the filters automatically apply? Rather than having to click "apply," the field is automatically updated after the selection is made? I think this might be the most intuitive option!

[jraddaoui]

Hi @stefanabreitwieser,

In the current implementation, to actually apply a filter, the page needs to be fully reloaded. This could be improved in the future to listen to filter changes and fetch the results when they happen without reloading the entire page, but that's not a quick change.

[bunekcca]

Hi @jraddaoui
I took the time yesterday to think about it.
I added the "Apply" button for the multiselection purpose. What I hate when I want to multiselect values, is that the page has to refresh everytime I select one item. I wanted to avoid that by adding a button to validate the selection.

Here is an example that I like and I think we should replicate: https://www.zalando.fr/mode-homme/
When the dropdown list is open, you can select all the values you want and validate your selection by clicking on the "Enregistrer" button or by clicking anywhere else. Basically a click anywhere on the page validate the selection.

What do you think ?

[jraddaoui]

Thanks @bunekcca, that clarifies a lot!

If no filter is applied, you can select more than one before submitting the form in SCOPE. We have #143 to be able to select other filters when there are filters applied in the same drop-down. That "Apply" button to validate the selection on each drop-down will actually submit the entire form, causing a page reload, like the "Apply filters" button to the right.

In the example you're showing only the results are reloaded, but that's something we won't have time to implement in this phase. For now, we'll have to reload the entire page when any of the "Apply" buttons is clicked. Moreover, the "Enregistrer" button is disabled (and the page is not reloaded if you click outside) when there are no real changes in the selected filters, something that will also require some time to implement in SCOPE at the moment.

My suggestion to start with this would be to add the "Apply" button to all drop-downs and submit the form when they're clicked, but do not track the filter applied status and do not submit the form when clicking anywhere else. It's important to notice that in this case, if you make changes in a drop-down and it's closed without applying and then you submit the form from somewhere else, those changes will be applied, something not very intuitive, but I think it's a good compromise for the moment.

[bunekcca]

Just to be sure. For example, a click on "apply" in the Date list will also apply the values selected in the Format list (if there are values selected). If that's the case, it's not optimal, but it's better than what we offer now.

[jraddaoui]

Yes, that will be the case. Thanks @bunekcca.