Have separate icon for a filter when Active and when Inactive (on/off)

Hi @mperrott  looks like we have the same idea. I posted Styling active pre-filters with different icon earlier and have 1 upvote which makes this the best idea :-D
 

Hi Jaap,

I would have voted yours but I missed it, end goal is the same so it needs to be merged :)

Thanks

Hi @Mark Jongeling, 15 updates ;-) Yes!
Is it possible to post an status update about this open idea?

Not much to tell I think, it's not yet on the backlog but seeing the amount of votes, I'm sure this will be on there in some time. The idea first has to be thought out well and implemented by multiple teams, so the Universal GUI team also needs to have time for this 

At first glance, the Software Factory implementation is quite simple as you would only have to upload another icon for it. For the GUI on the other hand, it might be challenging but to be honest, I'm not the guy that can judge the implementation in the Universal GUI   Keep the votes coming!

PI is working on Icons in database | Thinkwise Community (thinkwisesoftware.com) right now. I thought maybe it can be combined with each other  

Basically this is an essential feature the Universal GUI must have and will be used everywhere. A similar functionality like ticking a checkbox and enabling/disabling (activating/deactivating)something.

@Jaap van Beusekom, Correct, we are working on that and we hope to have the idea implemented by 2021.3 but we are also working on other features which have more priority over the Icons in database idea. I understand combining them looks like a good idea, but considering the complexity of the idea, it's not desirable to combine these ideas and implement them both.

(I actually started working on that Icon idea   but it is quite a big change and has a lot of impact that we likely will implement over multiple versions; this also to limit the impact of the 2021.3 version)

@Spyros.Neofytou, I understand this idea is great and I also think it should be implemented, but it's also important to prioritize all features and ideas to be implemented. The most I can do right now is passing on that this idea is very much desired by our Community, should be looked at, and considered to be implemented.

“You can lead a horse to water, but you can't make him drink”

I’d like to see this added 👍

@mperrott How about actually displaying the Pre-filter icons with sort of a Toggle in the background/around it that more clearly shows whether it is active or not? Then also the UX should look like toggling when clicking a Pre-filter. Would it in that case suffice to have a single icon?

I know @Bart Metselaar does have some ideas about this. We also raised a TCP this week to request a better distinction between Pre-filter icons and Tasks displayed as Icon.

@mperrott, @Jaap van Beusekom and @Arie V, I want to share an idea with you where I'm working on as a solution for the prefilters in the Universal GUI.

The use of a switch has crossed our minds, but has some challenges

• Where to put them visually (under the icon, when the prefilters are shown in a horizontal manner? Or on the left/right? But then, how will a user know which switch belongs to which prefilter button? And how will we show them when the prefilters are aligned vertically?)
  • The necessary space for an added switch will be a discussion of itself
• Disabled prefilters can be visually difficult to differentiate
• When a lot of prefilters are shown next to each other, there will also be a lot of switches. These switches will visually become an object of themselves, distracting the user of the function of the prefilters next to them:

So, I think this feature needs a different approach alltogether.

I am thinking about introducing Chips as the vessel to show a prefilter.

I made a quick example on how this could look like:

In my opinion, there are a lot of benefits (and challenges!) when using chips;

• On/off is distinctly more obvious thanks to the whole chip getting colorized
  • Active/not active is shown with the primary color
  • Disabled state is more prominent
• Default active filters which are not able to be switched of by the user (in this example: Top 8 filter)
• User defined filters are a more distinct option, which can also be deleted (in this example ‘Team actief’)

And, with this Chip component, we can show this element in other components as well, like the Pivot Grid (where there are some differences in the chip functionally, like being able to be dragged, and the delete button doesn't delete the filter, but removes it from the filter dimension) but the idea stays the same. 

In this example, 2 prefilters are shown in a Pivot Grid. One of them is active:

However, like I said, there are some drawbacks, which I need your opinion on:

• Larger object than current prefilters
  • The objects take a lot more horizontal space
  • There are screens with more than 10 prefilters, how can we cope with these situations?
    • Use on touch interfaces will become an extra challenge
•  More color in the screen
  • Can distract the user
  • Big difference compared to current solution
• How will we show prefilters in Chips when the buttons are vertically aligned?
  • We want to prevent vertically aligned text, as it is more difficult to read

I would love to hear your opinions, and as stated before, these are ideas, not designs yet. 

@Bart Metselaar thanks for sharing your ideas, let’s iterate on this as both options don’t feel ideal just yet.

Why do you show the prefilter name with the Chips? Would love to see that design without the name included, so only as background color for the icon. Could you share something like that?

• Chips with icon only  would not cost additional space
• Chips with icon only reduces the additional color in the screen
• Chips with icon only don’t have a vertical display issue

For me it’s perfectly fine to see the Prefilter name only on hover over and in the overflow menu.

Agree with @Arie V , the proposed Chips are not a winner in my opinion. 

Although I don't know how ecstatically it will turn out.. can't you play with the visual height (raised vs flat) of the icon/button of the pre-filter? 

I took your ideas to heart and I am curious what you think about the above idea.

The Prefilters get a round background (now in Universal only seen on Hover) and when active, they get the primary color. 
When hovered, the background circle gets darker (emphasising cursor placement) and the tooltip. 
When the prefilter is disabled, the disabled state is emphasised with the lighter color of the icon.

This idea follows the current design of the prefilter (doesn't cost any extra room, as this room is already reserved for Hover state), only makes the background solid, which we can use to colorize when the prefilter is active.

@Freddy , what do you mean with Raised vs Flat regarding the visual height?

I like that this draws more attention to the active prefilters and doesn’t require us to create two icons for each prefilter to get a clear on and off state. I am curious why the prefilters in your example always get a background, even when not active. Does this look better? This seems a little bit more cluttered to me.

@J. de Lange good question!

The two main reasons are: 

1. Prefilters can have an active, but disabled state. Without the background, this would be hard to tell.
2. Because we intent to offer Prefilters and Tasks/Report Tasks in the future in an ‘Action bar’. This would mean that prefilter and task buttons could stand next to each other and the user needs a visual cue what a prefilter is and what an Task button is.

Bart Metselaar wrote:

I took your ideas to heart and I am curious what you think about the above idea.

The Prefilters get a round background (now in Universal only seen on Hover) and when active, they get the primary color. 
When hovered, the background circle gets darker (emphasising cursor placement) and the tooltip. 
When the prefilter is disabled, the disabled state is emphasised with the lighter color of the icon.

This idea follows the current design of the prefilter (doesn't cost any extra room, as this room is already reserved for Hover state), only makes the background solid, which we can use to colorize when the prefilter is active.

@Freddy , what do you mean with Raised vs Flat regarding the visual height?

@Bart Metselaar i think raised vs flat is about the elevation concept https://m3.material.io/styles/elevation/applying-elevation

I like the tooltip solution..  however I think I would fancy more that the whole background gets the primary color, but to use for example a circle-border that has an active color and inactive color. 

 @Freddy thanks for the clear up! 

I believe you mean something like this, is that correct?
 

Bart Metselaar wrote:

 @Freddy thanks for the clear up! 

I believe you mean something like this, is that correct?
 

 

 

Correct. And I didn't check my previous response 100%..  maybe together with the elevation, or without, I think that instead of full background coloring, Only the border would be better. 

• Inactive (sunken)
• Available (normal)
• Active (raised with active colored border)

Check. I do have to disagree with you here though.

We use the concept of elevation only for the paper backgrounds and interactively for the Tiles concept.

Introducing this for the prefilter buttons would introduce a visual hierarchy which conflicts with our current style guide and would make the prefilter controls stand out from other controls in a way which is overkill.
Also, elevation is not something to throw around, it quickly makes your interface look cluttered, due to the amount of shadows and extra elements potentially overshadowing (pun intended) the content of the buttons:
 

I think that adding elevation to controls is a different idea/question all together (We already diverged from the original subject of a different icon on active state of a prefilter), but I do like the idea and I do think we should look into it.