The source filter icon on the main page changes to an entirely different icon when the filter is enabled. This is confusing and inconsistent UI design as the function behind the icon remains the same.
Brought benefits:
Keep the UI experience intuitive and avoid confusion by not changing the look of things that aren’t actually different. The way the source filter icon behaves now makes you think that something in the UI changed when the icon is different, like you’re looking at a different page of the UI for instance.
Other application solutions:
Dim the icon brightness and/or color to signal enabled/disabled
Use the default funnel icon along with a variant of the same icon to signal enabled/disabled.
Combining the two above would be efficient since showing the disabled state of the filter with a mark added to the default funnel icon would be clear even to those with color vision impairments like discussed before. A color change may even be redundant if the icon variants are clearly distinct from each other.
The main thing in any case is to use the same base icon consistently.
Screenshots / Mockup:
The below shows an example of using the same base icon and adding a marker to convey the needed extra information.
I’m well aware and do not like current solution and icons, but there were quite a few reports of people not seeing enough that a filter was enabled and did not understand the displayed content.
The problem of the disabled filter icon is that they do not convey the action that will occur on clicking.
It would be more logic to have the default filter icon as no filter enabled, and the disable one when there’s a filter since the action you can do is remove the filter.
But the intent is still not very clear for the users.
I have not found a proper solution from existing icon for something that convey properly both the state and the possible actions.
It’s to convey a global function of a button and a state at the same time;
It’s not possible to have both action and state on an icon at the same time, that’s incredibly confusing, and probably impossible to pull off in a readable manner. You need to choose one or the other.
It doesn’t make sense for the source filter icon to show action in this case since clicking the icon opens up a multi selection menu, as it is now clicking the icon has no guarantee that the user will enable or disable anything at all. The only guaranteed action is that the menu will open.
Continuing in that direction a more correct icon when considering the action would be to have something like the below which signifies that you’re opening a menu. This example is a bit ugly, but you get the idea, a funnel icon with a burger menu sub icon is what I’m trying to convey.
I would say that using something like the above together with an inverted version of the icon to signify that a filter is enabled/disabled would be quite good. That would be consistent with how the icons in the player view work, the shuffle and repeat icons there invert when those options are enabled.
Or you could mimic the heart icon for favorites in the player and go from an outlined filter menu icon to a filled one.
The icon also needs to be clear for the users (And I’m completely unable to create any icon myself so for consistency I’m limited to material icons)
And yes it’s possible to have as you said with the favorite icon for example.
Unfortunately for filters this is not as clear as the favorite one but I’m using that in Yatse and it never confused anyone, and the distinction between empty and filled is not that big. But I can try and see how many users complains
I have experience in both design and graphics, making a new icon or variants of this funnel type is not a big deal if you want help finding a custom solution that hopefully fits better than off the shelf icons.
I agree that the outlined vs filled filter icon is not very distinguishable, they both look idle, I would think that an inverted one would be more clear.
(And I’m completely unable to create any icon myself so for consistency I’m limited to material icons)