How to indicate a table is missing rows that have been filtered out?

Question

Do you know of any aesthetically-pleasing and effective ways of indicating that a table's contents have been filtered, without the filter information getting in the way?

Some background on my particular app...

Background
We've got data tables throughout our app -- sometimes, more than one per screen -- and each of these tables can be filtered independently. That is, the user can set up a filter to show/hide rows based on categories they've assigned to the row items e.g. show all items categorised as both 'important' and 'mine' unless they've also been categorised as 'old'.

Due to the flexibility and complexity of the filters, they're set up in a separate, modal dialog, which has room for in-place help. We simply can't afford to use up valuable real estate by having the filtering options permanently visible. It would add significantly to visual clutter.

Problem
All of this stuff works, but we've found that people sometimes forget they've got a filter applied and then make decisions / take actions based on false assumptions about their data. To prevent this, we figure we need to indicate that the user may not be looking at their full data set (when a filter's applied). But, as stated earlier, we really can't afford to clutter the screen with the details of the filter itself.

Our current implementation
For the record, here's the UI we currently have:

It's the "Tag filter applied" panel, btw, not the text-box to the right as well. It's cumbersome, to say the least.

Examples in the wild
The only example of this kind of UI that I can recall is in Microsoft Outlook 2003(?). They had a rather poor implementation, in which the status bar simply held a bit of text saying "Filter applied". This was practically invisible to most people, so wouldn't address the problem. I guess MS got away with it because, in their case, people rarely edited the filter, which isn't the case for my users.

Do you know of any better examples? Or do you have any good ideas of your own?

Answer 1

I agree with @Nir that what you currently have is functional. It is difficult to miss the fact that not all records may be visible. What I don't like is the uncertainty, i.e. how you state that "proteins may be hidden". Are they hidden or not?

This screen snapshot describes a couple of different ways of doing it:

The record count is shown on top, along with information on whether a tag filter is applied or not. But, if the user scrolls all the way down, they will also see Post-It note-style information that really cannot be missed! This might be overkill though. Also, I put the Edit button only because you had it in your screen snapshot, but I find it duplicative.

Regarding the top part:

• To make it more likely that your users will pay attention to the message "40/150 records etc.", I would suggest completely hiding it when all records happen to be visible. In other words, don't show "150/150 records".

• The gears menu can be used for related functionality like "Disable Tag Filter" and "Reapply Tag Filter".

I hope this helps.

Answer 2

I know Gmail has this same issue, that is when you search emails and apply a label to only those on screen it ask if you like to apply it to 100% of the search results, or only just those on screen.

In your case, instead of "Tag filter applied, Proteins may be hidden" why not just say "Tag filter applied, Hiding X% of proteins"

String Length Comparison:

"Proteins may be hidden"
"Hiding XX% of proteins"

Should fit, and at the very least would present more information in the same space. If you're worried about the user leaving out data from the current results, as in the case of Google, I'd take a look at what they've done; which I still really don't care for.

Answer 3

I had the same dilemma a few years back and experimented a bit with generating nice string-representations of the filters when they were edited (and also allowing the user to save filters) and then applying them (several if wanted) to the list by stacking them visually at the top of the list with a similar yellow-looking bar.

So there would be one row height bars at the top which stated approximately or exactly each filter that was applied ("Excluding things starting with ABS*" or "- category x"), with an X to remove them and some mechanism to apply existing or new filters to the list.

I'm curious about how the filter edit dialog looks and works in your case.