How to highlight that drop down filter has non-default option selected

Question

I have a drop down filter with a different options, where the first item in list is the default one.

How would you highlight when user change that default option to something else? For example when she return back to some view to make sure that she notice that filter is set to some non-default value, so there might be different data than one would expect.

I'm either thinking about:

• using a different background color for such state (it has to be really visually different, like gray vs yellow etc...)
• display some icon... somewhere...

Answer 1

Add a button that says "Remove all filters" or similar. This can also be an icon, a cross or some other graphical item, meaning "remove", "clear" etc. In this way your icon works as both a messenger that somethings has changed, and as a reset button.

Highlight the drop down list with a vivid color that stands out from the rest of the GUI to make it look active. If you have a small number of options you can enumerate them. If the selected item says "6. Oranges" one might guess that there are at least 5 options before that one.

The two important things in this scenario is to show where the filters (or non default state settings) are, and how to turn them off.

But don't forget to try to think outside the box here - if you can list all options in a list (for example) instead of a drop down list, you won't have the invisible options problem.

Answer 2

I dont find any necessity for highlighting the filter because when the user changes the value of the filter, the user knows that he had changed few values. May be you can show a warning message to the user as what happens after he changes the default values. If you really feel it has to be highlighted, you can better give it a bright border rather than filling it with colour.

Answer 3

A drop-down filter should have have (show (all)) by default. I think having a default value is important and leaves the user in no doubt about what is being displayed at any given time.

Answer 4

I would use a light grey color for the default option text and darker color for the selected option text. Another convention is to display "Select XYZ" as a placeholder.