6

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:

enter image description here

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:

enter image description here - All Status
enter image description here - Not Started Tasks
enter image description here - NOT Not Started Tasks
enter image description here - In Progress Tasks
enter image description here - NOT In Progress Tasks
enter image description here - Complete Tasks
enter image description here - 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:

enter image description here

closed as off-topic by Mike M, Joel Tebbett, Evil Closet Monkey, Shreyas Tripathy, Wanda Jan 10 at 11:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions requesting Icon Suggestions are off topic. While the subject of icons is on topic, there's very little value in soliciting suggestions for a specific icon in a specific context. See this meta post for more information about this topic." – Mike M, Joel Tebbett, Evil Closet Monkey, Shreyas Tripathy, Wanda
If this question can be reworded to fit the rules in the help center, please edit the question.

  • What are the other icons? In the bar I'm seeing " in progress", ??? , ???, not started? And do these all have 3 colors/states? – PixelSnader Jan 6 at 17:23
  • 2
    For those that voted to close, I don't think you can say this is a question about specific icon suggestion without arguing your case. Unless you didn't read the question properly... – RobbyReindeer Jan 7 at 7:42
  • @PixelSnader No, only the one with the arrow pointing at it is for status. The others are Urgency, Importance, and Time of Day, respectively. – richard Jan 7 at 8:25
  • 2
    @RobbyReindeer Thank you, you are correct. I'm not asking for specific icon suggestions. – richard Jan 7 at 8:25
7

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.

mockup

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:

mockup

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.

  • This is pretty good. The only problem with it is it now requires a 3-line height vertical. If I did this as a dropdown with checkboxes, then I have to figure out how to represent the current state when it's collapsed. – richard Jan 7 at 8:27
  • @richard: When collapsed, you could display summarized text? See my update. – SNag Jan 7 at 9:15
  • @richard: Thanks, you're welcome! Do put up your final results here if you can! – SNag Jan 8 at 5:02
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:

Overlay icons in Windows
Image taken from Let’s Rock With Azure

  • Yeah I agree with most of what you said. The trouble is trying to get intuition into a compact and succinct interface. This also has to work on mobile (with even less space). – richard Jan 7 at 8:28
1

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

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

  • I tried a slash through it, but it muddies the icon and makes it hard to see what it is. As far as state:open and state: closed...that's fine if there are only two states, but with many different states, you might want all states EXCEPT one particular state, which makes NOT OPEN and NOT CLOSED a necessity. – richard Jan 6 at 7:44
  • Possibly putting the equal/not equal sign above the status icon could work. Then it would serve as like a "modifier". – richard Jan 6 at 7:46
1

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.

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