Here’s a rare opportunity to see what we’re working on in the design department, when we’re not beating the sales team to a bloody pulp in Wii Tennis.

(Warning, long post, but you can scroll down to the pretty pictures if you only have a sec before Paradise Hotel is on).

This is an idea I came up with when browsing historic tube maps of the London Underground. What weirdo browses tube maps you may ask. You just use tube maps to figure out how to get from Piccadilly Circus to Camden market and that’s it, right?

That’s exactly why they’re interesting. Tube maps are remarkable examples of good information graphics.

Here’s an example:
Think of the last time you used a tube map. Try to think of a specific design detail that you either hated or thought was cool…

Nothing specific pops into mind right?

Now try to recall a time where you couldn’t figure out which tube stops on what stations…

Again, nothing.

That’s because tube maps are so well designed. They’re visually pleasing, but still nothing steals your attention away from the actual task. That’s in essence how every interface should be.

Now on to the funnel chart concept.
In a way funnel charts is like tube maps. They show something “traveling” from A to B and every stop in between. In this case A is the entry into the funnel, B is the final step in the funnel a.k.a. the conversion point, and all the stops in between is the various web pages in the funnel.

Below is an illustration where I’ve tried to visualize the idea.

Of course the end result should require no explanations, but since this concept is in it’s very early stages, here’s a quick description of what you see.

1. On the left, you see all the entries into the funnel. It could be directly from a specific marketing activity, another page, or another site etc.
2. Behind the colored lines in the middle is some boxes representing the pages in the funnel.
3. To the left you see where all the people went, who didn’t continue down the funnel.
4. Each colored line represent a source that led people into a specific page in the funnel.

The idea is that you are able to follow the source (A) all the way to either conversion (B) or where they exit from the funnel (the stops in between).

Here’s an idea for interaction that would help to home in on the path from a specific source.

That’s it. A hundred years old information graphics design is inspiration for cutting edge software of tomorrow. Actually it is exactly hundred years ago in 1908 that one of the first London tube maps with separate colored lines was created. So let’s call this post a tribute to the great tube maps of yesterday.

(source: A History of the London Tube Maps)