How do I succinctly portray the status of a filter, showing which options are enabled or disabled? [closed]

Question

Suppose you have a todo list application with a filter bar (for searching and filtering what tasks to see in the list), and the filter bar has a status selection, thus:

The status filter can have one of these values for

"SHOW ME ALL TASKS THAT ARE":

1. All Status Tasks (irrespective of status)
2. Not Started Tasks
3. NOT Not Started Tasks (Everything EXCEPT Not Started Tasks)
4. In Progress Tasks
5. NOT In Progress Tasks (Everything EXCEPT In Progress Tasks)
6. Complete Tasks
7. Not Complete Tasks (Everything EXCEPT Complete Tasks)

For the negations I've used a RED color for the icon. The icons I've used for this are the following:

- All Status
- Not Started Tasks
- NOT Not Started Tasks
- In Progress Tasks
- NOT In Progress Tasks
- Complete Tasks
- NOT Complete Tasks

As you can see, the red negation color makes it hard to see and doesn't REALLY clearly and intuitively indicate a negation, in my opinion. You would have to be told that it meant negation.

Is there some clearer and more intuitive way of depicting a negation in a filter?

EDIT

FINAL RESULT as per SNag's suggestion:

Answer 1

Keep it simple. You could redesign your UI to present icons with checkboxes -- New (Not Started), Started (In Progress), Completed Tasks -- and the user could tick all or none or any combination, and you could display results accordingly. This will work in a way that the user is already used to on most other UIs and there's no learning or confusion.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Not ticking any, or ticking all of them, will result in All Status results, ticking New and Started will give the user NOT Completed results as you would expect, and so on.

You'd be solving the problem without introducing negation of icons visually as you'd originally wanted.

Update:
If this is a dropdown of checkboxes in the UI, you could display the current state when collapsed as a summary text. Here's a sample of all 8 combinations for 3 checkboxes:

^{download bmml source}

Inspiration for the summary concept comes from my Android alarm clock app's 'Repeat' feature -- setting Repeat alarm for Mon-Fri shows 'Weekdays', setting it for Sat-Sun shows 'Weekends', Mon-Sat shows 'All days except Sun' etc. Any odd combination results in something like 'Mon, Thu, Sat' etc.

Answer 2

It’s not the answer you want, but I’d suggest you strongly consider using text for this job.

As you can see, the red negation color makes it hard to see and doesn't REALLY clearly and intuitively indicate a negation, in my opinion. You would have to be told that it meant negation.

Right now I dispute that any of the icons “really clearly and intuitively” indicate anything. In fact I’m not sure I’d have understood that they’re actions, nor that they’re filters.

A checkbox icon looks an awful lot like a checkbox. An in progress icon looks exactly like a loading indicator. A hollow circle conveys very little.

In all these cases, the problem is caused by trying to convey a relatively complicated concept with a single, small icon in isolation; while I appreciate the space constraints, redesigning the interface to accommodate textual labels would almost certainly do the job better. As Luke Wroblewski is fond of saying, obvious always wins (and there’s no shortage of additional examples).

That problem is compounded by trying to distinguish two icons by colour alone, which is not recommended even disregarding the contrast issues in your specific example. Colour distinctions become less clear on different displays, in different lighting, and especially with different colour vision. If you insist on using icons, a small overlay cross or banned icon like this is more helpful:

^{Image taken from Let’s Rock With Azure}

Answer 3

For negation, try using the positive icon with a slash through it. For example...

• equal
• not equal

Also consider using a text search rather than icons. For example, people might search for “state:open OR state:closed” instead of searching for “not not open” (which is probably less intuitive for most people).

Answer 4

Following Gestalt Principals, have you tried grouping the filters so that all of the negated are grouped on one side and the enabled are group on the other?

You could then add a small text label to define this grouping.