Misleading icons: The funnel

One day we all just have to wake up and smell the reality: when it comes to choosing a default icon to depict a filtering function, we’ve all been duped by a funnel. (Or is it a martini glass?)

There is no question about it, the funnel is indeed the default icon of choice for most when it comes to the filter function. (See for yourself!)

The question is why? Why did the funnel earn this prime spot? I’ve been thinking about this for a while now, and all I can come up with is: I don’t know!

What is a filter?

First, let’s define what a filter is and does. A filter function takes in a large amount of data and after applying a set of rules excludes a part of the data, resulting in a smaller dataset than the original. (Or as Wikipedia defines it: “a higher-order function that processes a data structure (typically a list) in some order to produce a new data structure containing exactly those elements of the original data structure for which a given predicate returns the boolean value true”)

Basically, we have a list of some sort to begin with. The problem is that us humans are limited in how much data we can handle, so we need to somehow remove everything in the list we’re not interested in. We do this by applying some rules that filter out everything else, and only leaves a list of stuff we’re interested in.

Case example: We want to find a picture of a dog. We go to google and search for “dog”. The result is way too big and contains both sites and images. Thanks to the filtering function, we can easily click “Images” which filters out any result that is not an image.

What is a funnel?

“A funnel is a pipe with a wide, often conical mouth and a narrow stem. It is used to channel liquid or fine-grained substances into containers with a small opening. Without a funnel, spillage would occur.” [Wikipedia]

The funnel is designed to aid in getting stuff from containers with large openings into containers with small openings, reducing the messiness of spillage.

It doesn’t exclude anything. The whole point of the funnel is to NOT exclude (spill) anything!

The problem:

So, we have a function designed to make a dataset smaller by excluding stuff. Somehow we decided that it was convenient to depict this with an item that is designed NOT to exclude anything.

The solution:

As it seems, I’m not the only one who have started to wake up from this bad dream. (There’s even a survey on LinkedIn where more people hate this icon than love it)

Some people are also trying to create alternatives to the current standard. Here are a few I’ve found:

New Filter Icon

New Filter Icon

I can see the basic idea behind this icon, even if I agree with some of the dribbble commenters saying that it could be visualized more clearly.

Filter icon

Filter icon

The simplicity of this one is interesting, but also hides its intention. What does a upside down pyramid of dots have to do with filtering?

Filter icon

Filter icon

This one is a bit unclear, I think. Two dots become one, or is it the one dot that is split up into two? Or is it three nodes connected in a network?

Filter

Filter

This one is based on the same idea that there’s some kind of “wall” that lets through one arrow but not another. I like this concept, but I feel that the reason why one arrow is bounced (aka the filter) isn’t immediately recognised, which makes it hard to immediately form an idea of what is depicted.

One of the newer alternatives I found in TweetDeck (It’s the icon in the top right of each column):

TweetDeck Filter

TweetDeck Filter

And a variant of this I found in the swedish news app, Omni [http://omni.se/]:

Omni

Omni

I can understand where this icon comes from, since one of the common controls in a filter function is a slider, to define a range fo two values. But, really, does this depict a filter function? I’m not convinced.

One common flaw I see in these examples is that to understand them, the user needs to know that they’re trying to depict a filter. Once you know that, it’s easy to see the basic idea “many -> few” or the idea of “exclusion”. But what about someone who doesn’t know that, or if there isn’t a label next to it to tell? Then all we’re seeing is lines and arrows or dots.

There has to be a better way to depict a filter. I’ll dedicate my soul to finding it.

PS:

I know, there is something called a “filter funnel”.[http://en.wikipedia.org/wiki/Filter_funnel] It wouldn’t be fair of me not to mention it. Basically, it’s a funnel that you put a filter paper in and separates particles out of liquids. And really, do any of the currently used funnel icons show any filter paper?! Nope.

Posted: January 17th, 2014
Categories: Design, Ideas, Mobile, Thoughts, UX, Webdesign
Tags:
Comments: Comments.