4

I'm struggling to find the best way to mark a filter as active in a multi-filter customize option panel.

Here is a screenshot of the current UI. Filters are the most right column.

enter image description here

I'm already using different border color for focusing in the field.

You can see live example here, by clicking the "CUSTOMIZE" button in the table (see screen below)

https://coincodex.com

enter image description here

Improve this question

2 Answers 2

Reset to default
5

Well as you have already decided to use a blue colour to highlight elements that are active, like your toggle switches in the other columns, then it might be best to use that colour to highlight active filters too.

Option 1: Make the whole filter element background blue

Benefit of this option is it works well for other input elements, not just text input.

enter image description here

Option 2: Make only the input elements blue

Benefit of this option is you can apply it to only 1 part of this filter if you allow open ended ranges. For example, 10 to any.

enter image description here

Additional Suggestion

Just a thought, but it might also be worth considering hiding the "clear filter" option unless there is actually a filter value specified. This will help de-clutter the UI and also helps to further highlight which options have filters applied.

If you are concerned about the extra whitespace between options when the "clear filter" link is not visible, then you could consider moving it somewhere else. For example:

enter image description here

Improve this answer
5
  • I'm not a fan of hiding the "clear filter" option because (1) either there would be huge spacings between the different filters, or, (2) the elements would jump up and down as you add/remove a filter. What is your take on that?
    – Renecc
    Jul 8, 2020 at 14:25
  • @Renecc: It was just a thought, it would be worth playing around with it and seeing how it looks. Definitely just set visibility to false though, like you said you don't want them jumping about. I don't think the extra space will make much different in your design, but if you find the extra space looks weird, you could consider moving the "clear filter" text to be inline with the filter title (e.g. "Market Cap") perhaps having the link right-aligned. If you know what I mean.
    – musefan
    Jul 8, 2020 at 14:28
  • @Renecc: I edited answer to show what I mean.
    – musefan
    Jul 8, 2020 at 14:35
  • Both of your suggestions are excellent. I've edited my original post to showcase the changes on a dev branch. Thank you musafen!
    – Renecc
    Jul 8, 2020 at 14:53
  • Well, it seems I cannot edit my original post. Here's a link to changes if you care to see: i.imgur.com/SJhW1Gr.png
    – Renecc
    Jul 8, 2020 at 14:54
2

Another alternative solution besides the one presented is using the tag labels to have fix values inside of the input filter fields users have already set.

Filter tag labels

Even I saw it applied to the filters on some of the existing e-commerce sites, I just wanted to make a simpler showcase above. As I simply tried to explain, you may have your users, seeing these labels after an applied filter. If they see it, it absolutely means a value already applied as a filter and that makes it easier for them to remove and apply another.

Edit: By this way you also don't need Clear filter texts under each of the filters.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.