3

I have a button in my interface that when clicked show a listbox so the user can apply a filter by those items she has selected. It looks like this:

Filter

My question is: How do I tell the user there is an active filter? The tooltip of the button will have a description of the active filters but I was thinking about a change in the icon or the border of the button. What color would you made the icon for when a filter is active and when it is not?

Edit: Screenshot of the top of the application where the button is placed (the button is in the middle after the three comboboxs:

Top

| improve this question | |
1

Go for a change in shape and/or border.

You could overlay something (a crossed circle perhaps - though this particular icon might be interpreted as "action not available") on the filter icon to show that one isn't active.

Another alternative might be to add a tick - though there are cultural differences on whether a tick means OK or not. I can't find the reference right now though.

| improve this answer | |
  • Thanks, I liked the tick option. The crossed circle may tell the user he cannot filter, may give a message of forbidden action. – jpsstavares Apr 5 '11 at 11:11
  • @jpsstavares - that's a good point. – ChrisF Apr 5 '11 at 11:12
1

Because the functionality behind the filtering icon possibly hides some otherwise visible data I'd probably would start by adding an exclamation mark to the corner of the icon - if restricted to change the icon only.

A better first thought would include showing the active filters without the drop down.

| improve this answer | |
  • We have space constraint on the interface so we went with this solution. The button is in the application toolstrip bar so showing all the filters without the drop down isn't really an option. I liked the exclamation mark though! – jpsstavares Apr 5 '11 at 11:08
1

When I use filters I can usually tell the filter is active if the filter button itself is in colour. When no filter is applied its usually just black & white.

I find this solution works best as the button will always remain black & white until a selection is made then it instantly turns to a colour one.

In addition I have used a few solutions that hiughlight the background of any text that matches the filter along with a tooltip.

| improve this answer | |
  • Thanks for you suggestion. I liked the b&w approach a lot. In this case the filter will only filter the tree on the left so the highlight suggestion is of no use here. – jpsstavares Apr 5 '11 at 13:10
  • 1
    I just realized that the b&w approach can lead the user to think the button is disabled.. – jpsstavares Apr 5 '11 at 14:31
  • Yeah it can be an issue. Depends if you acknowledge a difference in the contrast between B&W and scales of grey. If it was disabled I'd make it grey. – saybeano Apr 5 '11 at 20:42
1

If I understand correctly, the filter will affect the tree under Project Explorer? Seeing how far the filter is from the tree, I think it would be even for a seasoned user quite easy to forget that there are any filters applied. If you can’t move the filter closer to the region it affects, another approach I’ve seen is to show a small label/panel above the tree stating “Showing filtered results” or something similar; and possibly a linkbutton to remove the filters. (This all of course in addition to showing the current filter state on the filter icon as well).

| improve this answer | |
0

The current approach can't be very obvious, i'd suggest you draw this one again.

make a larger screenshot so we can see how much space you got there.

| improve this answer | |
  • I've just posted a global screenshot of the application. Hope it helps – jpsstavares Apr 5 '11 at 11:38
0

I would change the color of the icon. you can see a live example here: telerik

| 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.