Skip to main content

Active prefilter indicator svg versus png


Harm Horstman
Superhero
Forum|alt.badge.img+21

We prefer using SVG for icons, but the circle around active prefilters with a png icon are more clear

 

 

It is also difficult to find a optimal solution, that works for dark and light mode

Hopefully this can be improved a little.

 

Did this topic help you find an answer to your question?

Bart Metselaar
Moderator
Forum|alt.badge.img+3

Hi Harm!

It would be of great help if you can give context to what your users encounter with prefilters, your question is more of a statement now which forces me to guess what you are trying to achieve.

I think you are talking about showing active prefilters with only an outline on .svg buttons? And if so, the outline on .png was already a work-around, the solid background for.svg buttons is designed to improve seeing the active state. What makes you think differently?

In the second part you are referring to ‘an optimal solution’, can you elaborate on this subject as well? I am unable to look into your mind, help us to think with you!


Harm Horstman
Superhero
Forum|alt.badge.img+21

These prefilters belong to a very simplified screen for order pickers which need to filter orders for today (Vandaag), tomorrow (Morgen), this week (Week) or next week.

In this case it could even work without assigning a icon.

If we use transparent svg icons it could happen that there is not enough contrast between the color of the icon and the background of the filter button, it could also happen that the contrast is good for light mode and worse for dark mode. 

We have seen that when we use a transparent png, the background remains always the same and active state of the prefilters are made clear with just the colored outline.

Maybe the picture below makes it more clear:
 


and another example, with transparent svg
 

 


Bart Metselaar
Moderator
Forum|alt.badge.img+3

Hee Harm,

To be fair, you are going against our guidelines regarding UI options.

Per this Idea, we deliberately made the background of the prefilter buttons solid, as to make them stand out when they are on. This is also why the multi colored icons work against you now, because if they wouldn't have a color they would gain the contrast color automatically from Universal in both light and darkmode.


Harm Horstman
Superhero
Forum|alt.badge.img+21

Hi ​@Bart Metselaar ,

I understand from the guideline that it is desirable not to make it too colorful and I can agree with that.

The GUI will always work well if we would only work with monochrome svg icons, is that what you mean?

However, we think that there can be good reasons to work with different colors, as long as it remains limited to a limited number of colors. Think of a red trash can for deleted items and a gray trash can for non-deleted items.

What I mainly wanted to point out is that the behavior of the GUI for transparent png icons was perceived as clearer by end users than the behavior of transparent svg icons.


Bart Metselaar
Moderator
Forum|alt.badge.img+3

Hi ​@Harm Horstman,

The GUI will always work if the icons don't have a color set to them.

I also think that using colors may improve a UI, when used correctly. Coloring icons is not the most effective way, as they make the UI a lot more busy and harder to scan for the user. Using color should be used as sparingly as possible, to guide the users' eye to the place they need to be at the right moment of their process (whereas I think that the coming feature of setting a button as ‘Call to Action’ would be a very useful feature for your usecase, see the ‘Highlighting’ chapter in this blog for explanation of what I mean with ‘Call to Action')

When all buttons have a separate color to emphasize a different function, the color distracts and makes it harder to sift through the options. As I'd like to say: if everything demands attention, nothing gets attention.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings