Design a Better UI Based on The London’s Underground Map
How did we come to understand the world around us? How do we know the geographical location of places, countries, cities?
Through years, we have converted all this data into what we call a map. The history of civilisation is actually the history of maps. We have been creating them for thousands of years in order to keep important information about big or small geographical areas. They all have one goal in mind — convey complex information into a small system that is clear to understand. But one of the most famous maps works because it really isn’t a map.
The London Underground map came together in 1908. It was the year when eight different independent railways merged to create a single system. But with all this, they needed a map to represent that system so people would know which train goes where. The map they made in 1908 wasn’t the best version of it. It was complex. You can see rivers, bodies of water, trees and parks. The stations were all crammed together, and there are some that could not even fit on the map. It was a mess. It does not mean it wasn’t good at being a map. Rather it was accurate from a geographical point of view, but not so useful for an ordinary passenger.
The map showed all the important central stations, but it didn’t make it easy to find your way around. Station names crammed in with small font at odd angles. Because of that many lines have been twisted and got strange shapes. But in the end, not everything is that bad. Fast forward a couple of decades and we get a newly revamped version that is easier for the brain to digest.
Herry Beck was a 29-year-old engineering draftsman who worked for the London Underground. Even though he lost the job in the late 1920s, he kept his interest in the London’s transport system.
He had a key insight that people riding underground in trains don’t care what’s happening above ground. The main goal of a passenger is to get from a station A to station B. Every person had 2 questions in mind “Where do I get on? Where do I get off?” So the system itself is important, not the geography. And he set on a project to “clean” the tube map. He took this mess of “spaghettis” and simplified it — as he would later recall — “straightening the lines, experimenting with diagonals and evening out the distance between stations”. So the lines are going only in 3 directions: horizontal, vertical and diagonal (45 degrees). Also, he spaced the stations equally and made the colour of each station similar to the line.
In the end it became something different than a map. It became a diagram. Symbols and colours understood by everyone, no matter their knowledge. In 1933, he was encourage by his friends to send the map to UERL no matter their reply. The company agreed to buy the design for £10 — equivalent to around £600 today — and give the map a try. After one thousand of pocket test maps sold, they realised that it was a better version. They decided to print 750k more and then we got the map we have today.
Beck’s design set a standard for all other maps we see today in big cities all over the world — Paris, Tokyo, Moscow. All of them convert complex geography into clear geometry. They all use symbols that we all understand, such as circles to represent stations, colours to distinguish between them, lines to showcase a railway. I am sure Herry Beck did not know what a User Interface was. But that’s what he designed.
What designers are trying to do today is what Beck did back in his days. He took a challenge and broke it down into pieces and thrown away all the unnecessary stuff. He used three principles that, if adapted accordingly, can be used in any type of design you are working on. They are:
Focus on who you are doing this for.
What’s the shortest way to deliver the information.
Think from all perspectives
Great ideas and solutions can come from anywhere or anyone.
Whenever you are working on your product, or your next big thing remember that a great idea can come from anyone. Even if he is your intern, your spouse, children or a complete stranger. Who would have thought that an electrical engineer would design the metro maps we have today.
With years passing, the tube expanded with more lines. And the map became more complicated. Later it was redesigned by other designers who changed Beck’s design, without his consent and made it more complex. The new version did not work as good as expected. So a more modern version was brought by Paul Garbutt, keeping Beck’s original principles, look and feel. So even if years have passed and we have a newer version, we still have the same look and feel that it was in 1933. Simplicity is at its core and will never fade away.
Designing a great User Interface is not rocket science. It has to be as simple as possible for the people to perform a task at hand and understand/get the information they need fast. But we keep making them more complicated. We make them feel as a “software” rather than a “human interface”.