News for the ‘Webdesign’ Category

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?



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 []:



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.


I know, there is something called a “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
Comments: Comments.

TV Guide for Status Board

Note: This Status Board panel displays the tv guide for swedish channels, and is mostly intended for swedish Status Board users. That said, I’m switching to swedish.


Status Board för iPad kan användas för att visa en mängd oliks orters data. När jag är hemma vill jag ofta snabbt kunna se vad som går på tv (att slå på tv:n bara för att bläddra igenom kanalerna för att sedan se att ingenting av intresse visades är ju alldeles för jobbigt!), så jag byggde denna panel som visar vad som går nu på tv, samt vad som kommer efter nuvarande programmet. Panelen använder sig av :s javascript för att hämta programmen.

Ingen konfiguration behövs, så det är bara att klicka på knappen nedan från den iPad där du har Status Board installerat.

Klicka här från din iPad!


Posted: May 2nd, 2013
Categories: Design, Mobile, Status Board, TV, Webdesign, Widgets
Comments: Comments.

Trello in Status Board

Update 2: Apparently, there was a change in how Trello supplied the user token, so my script simply didn’t work. This should be fixed now, and the scripts work!

Update: Instructions to get this panel on your iPad are now up and running, and it should be easy enough for most people to get this working! See post for details!

One of the first widgets I planned on building after getting Status Board was one for Trello, the taskplanning tool.

Of course I want to keep track of how many tasks I’m working on right now, and how many are still in the queue. Maybe I want to see the names of the cards in my list, and maybe I want a burndown-chart for some projects, I haven’t decided…

I wasn’t very familiar with the API, and I couldn’t find a functional php-wrapper for it, so I used VeggieMeats php-trello as a starting point, and fixed it where it had to be fixed. (Yes, when I get the time, I will fork it and upload the corrections I’ve found).

Because of this, the trello widgets was put in the back of my head for a while, while I developed a few other widgets, such as the Google Analytics ones and the SL widget.

But now the time has come, and my focus is now on Trello. The first of three planned widgets is done, and it looks like this:


It’s very simple. You enter a boardID (plus some other sensitive info, since this board is private) and then it shows you how many (open) cards are in each list. Folks, this is pulled right from the API, no manual CSV here.

There’s probably more info to be added to this graph later o, but for now this does what I need it to.

In a while, I will make this availible for anyone. I need to come up with a (kind-of) user-friendly way to get all the info correct. We’re talkin loong user tokens and id:s you need to find. There will probably be some kind of form on this page where you can enter you info and then it will give you a link to open on your iPad to install the widget. But, as I said, I’m working on how to make this easy for everyone.

Instructions to get this working in your own status board with your own Trello board

First, make sure you do this on the iPad where you have Status Board installed!

1. Get your user token from Trello (if you haven’t got it already). I made a script for this to make it easy for you to get your own. You open a link from my site (further down) and it will redirect you to Trello’s authentication page. There, you’ll need to approve my “app” to access your data (read-only) and then it will redirect you back to my site where your token will be presented. Copy this token and paste it in the form below. Here’s the link!

2. Get your Board ID from the Trello Board you wish to use in this widget. I found that the easiest way to get the ID is to open the board in a browser and then find the board id in the url (as pictured below). Then copy this ID and paste in the form below.



3. Get your username from Trello (If you need help with this, tweet me, and I’ll help you) Copy it and paste it into the form below.

4. When all fields are entered correctly, tap the button below the form, and Status Board should open with this new Panel in it!

Form to enter your data in:

Paste your user token: Paste your username:

Paste your Board ID:

Click here on your iPad!

(If above button doesn’t work)

Come back here for more info, or follow me on twitter where I will post as I update.

Also, if there’s some trello functionality or stats you’d like to see that I haven’t thought of, post it in the comments, and I’ll see what I can do!


Posted: April 22nd, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Comments: Comments.

GA Top Viewed Pages panel for Status Board

After creating my first Google Analytics panel for Status Board, showing a nice graph over number of Visitors and Pageviews the last week, I wanted to see more of what content users found interesting. So I quickly wrote a table panel that showed the top pages and how many views they had, also over the last week. Some of the code is rather custom, as in my page titles I have a “ >>” prefix completely messing up my table names. I hade to parse the name string to only get the interesting portion. And I never realized this would be interesting to anyone else.

Until today, when @timteeling posted on twitter that he had forked my repo to do exactly this! Since I noticed he hadn’t implemented this string parsing, I decided to share what I had come up with, and here it is!



As you can see, the pageviews show in yellow, just to match the yellow in the other panel. They go nicely together!

Get the script here
Posted: April 19th, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Comments: Comments.

SL panel till Status Board

This panel is mostly intended for swedish users in Stockholm who want to display departures from any station in Stockholm in the iPad app “Status Board” from @panic. Perhaps you’re interested in my other panel that shows you Google Analytics stats for any of your sites? Therefore, I will now switch to swedish.

Appen Status Board från Panic är en våt dröm för alla oss som älskar data, statistik och att visualisera data. Med appen följer en del standard-widgets, för t ex dina iPad-kalendrar, väder och klockan.

Den stora styrkan sitter dock i de tre “DIY” (Do it yourself) panelerna. Med de kan man anropa en webbadress och få data levererat med jämna mellanrum. Självklart finns regler för hur datat ska vara strukturerat för att appen ska förstå hur det ska visas.

För oss Stockholmare har jag tagit fram en sådan här panel som visar kommande avgångar från vilken SL-station som helst. Man kan också ställa in en “avståndstid” (minuter det tar att gå till stationen). För mig tar det t ex 10 minuter att gå från jobbet till stationen. Då är det inte så intressant för mig att se de avgångar som går inom 10 minuter, de kommer jag ändå inte att hinna.


Du styr inställningarna genom att ange parametrar i url:en. Parametern station motsvarar ett stationsID för den station du vill se avgångar för. Dessa ID:n är inte helt enkla att ha koll på, så för att få fram dessa måste man ta en liten omväg. (I framtiden planerar jag att bygga ett litet formulär för att få fram dessa här på sidan)

Gå till TrafikLabs API-konsol för SL.
Öppna “GetSite”
Skriv den station du önskar och klicka på “skicka anrop”.
Kolla i texten under “svar” och hitta den station du ville, ID:t hittar du där.

Mer info och källkoden hittar du här på GitHub. Känn dig fri att lägga detta på en egen server om du vill, eller bygg ut koden med egen kod om du vill och kan!

För att installera panelen med standardinställngarna (Station: Kista C och Avstånd: 10 min) öppna detta inlägg på din iPad och klicka på knappen nedan. Då öppnas Status Board automatiskt.


Installera panel



Posted: April 18th, 2013
Categories: Design, Stats, Status Board, Webdesign, Widgets
Comments: Comments.