6

A button ("Filter by") allows the user to select a subset of all choices. After the user configures a filter, how should I indicate that a filter has been configured?

I've thought about adding text next to the button that says "Not filtered" or "Filtered". (I don't have room to list all of the potential parameters of the filter.)

I've thought about modifying the text within the button, such as changing it from "Filter by..." to "Filtered by..." but I think that's too subtle.

And I've thought about modifying the appearance of the button itself, perhaps to indicate that's toggled vs. not toggled. But that could be too subtle too.

Any advice? Thanks!

Here's a screen shot of the dialog that pops up after the user presses "Filter by...":

enter image description here

Improve this question
2
  • Hi User31380, welcome to UX.se! Can you add some screenshot or mockup of your filter buttons in the UI so people can better answer your question?
    – rk.
    May 5, 2013 at 19:07
  • Thanks for the welcome! I'll try to embed the dialog in my original question.
    – user31380
    May 5, 2013 at 19:52

1 Answer 1

Reset to default
3

Indicating the state of a button is always difficult and you are right : you do not want to be subtle. Subtlety is too close to ambiguity and you do not want ambiguity in your interface.

You also want to give a feedback for any action by the user: in your case something has to happen after the user configures a filter. Maybe the list changes, maybe the button changes, maybe you indicate clearly what has changed in a sentence.

It is going to depend on what is the use of the filter: is it to help search? is it to display a new list for printing? is it to delete or classify items?

In the case you want to display a new list: then you have to show in some way what it is that you display.

In the case you want to select items in a list, it depends:

  • If there is an action directly connected to this selection: you do not need to change the button since the user is going to remember what she just did.
  • If there is no direct action or for search then you can use a sentence like: 4 items of this type have been selected, 4 results for : [search], the thing is you have to be clear, or labels (that you can add and remove). But the button does not have to change (since you can use a different filter: the button is related to the action not the state).

It is hard to say what fits better to your situation so I would say : you do not need to change the button since there is a clear understanding of what has been done the exceptions being a selection that is going to be used in a row for another action since the user will remember what she just did. Furthermore changing the button might lead the user to think it is not actionable anymore.

All that said it really depends on context. For instance a good use of changing buttons in Gmail :

enter image description here

enter image description here

Something else: if the filter functionality is really going to be helpful and used by the user it may deserve a little more room than it apparently has.

Improve this answer
1
  • Thanks for your thorough reply. This is for an analytics application where the user can choose to reduce the data set being displayed for a report. One wrinkle is that the user can send a link to the report to someone else, so I need a positive indicator when the report data is filtered. I like your suggestion to add a text string, for example: "Report filtered by 3 fields". Thank you!
    – user31380
    May 5, 2013 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.