The London Underground: An Example of Perfect User Interface Design

Interface design is the art of making the user’s interaction as simple and efficient as possible with regard to accomplishing specific tasks or goals. As designers we facilitate user experience. Good design means we do so without compromising the usability of the application or information and that we include natural intuition into the design process. The more intuitive the user interface, the easier the application is to use or the information to understand.

Steve Jobs, the late and great, visionary CEO of Apple, once said, “design is not just what it looks like and feels like. Design is how it works.“ That is actually pretty basic thinking, but it is the core principle behind good interface design.

Let’s look at an example of interface design in print that changed forever the way that Londoners have viewed their city for nearly a century…the Underground logo and map.

The first line of the London Underground system opened in 1863 and ran between Paddington and Farringdon. Over the next 70 years there would be over 160 separate and independent companies simultaneously running busses and underground trains on the rapidly expanding network of station and rail lines. While each company had its own branding of sort with unique uniforms, an advisory committee suggested in 1924 to the Minister of Transportation that the current conditions were confusing to travelers and that something should be done about the “acute and wasteful competition.” In 1931 London Transport was born and with it came the challenge of demonstrating efficiency and unified purpose to London travelers.

Frank Pick, the first managing director, did something quite unheard of in his day…he created the very first unified corporate identity. He felt that a unified operating system with a new single visual identity would not only create easily recognizable stations but would come to represent consistent and reliable service as well. The visual framework that he foresaw being employed across the city would send a clear message that the rail lines and busses were now under a single managing and integrated entity. With this vision in mind, Pick solicited Edward Johnston, a Uruguay-born calligrapher and professor at London’s Royal College of Art, to design the original Underground logo and its san-serif typeface.

1930’s Logo

Today’s Logo

While the new logo accomplished exactly what Pick had intended, one might still find the map detailing the rail lines confusing and hard to visually digest. As we can see now, it failed to serve the simple function of any informational graphic since it did not communicate the complex information quickly and clearly.

Harry Beck, an electrician for London Transport, designed a map based on the layout of an electronic circuit diagram. Beck realized that since the railway ran mostly underground, the physical locations of the stations were irrelevant. Only the topology of the railway mattered and there was no need to replicate the true geographical locations of stations or lines. To further simplify, Beck only ran lines vertically, horizontally, or on 45 degree diagonals with connections differentiated between ordinary stations by tick marks and interchanges with diamonds. Because the scale of Beck’s map was not fixed, he was able to provide more space around crowded stations making information easier to understand and providing a more intuitive representation for the user.

Beck’s design and the process for arriving at it is a lesson for all designers. Antoine de Saint-Exupery, the French poet said, “a designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” This is exactly how Beck approached his map. He removed the elements that were extraneous to the information being communicated and even altered the true geographical locations to focus the user on the relevant specifics of the railway system. His depiction of London and the surrounding area became a graphical depiction of true information in an abstract way, which, in essence, takes advantage of the visual language of communication which is far more universal. Beck’s information is no less true, but far easier for our minds to grasp.

Today Beck’s design and Johnston’s Underground logo are instantly recognizable as representing London. Both are plastered on t-shirts, postcards, and other touristy stuff. In 2006, Beck’s map design came second in a televised search for the most well known British design icon.

From this we, as designers, can learn to never forget that we are responsible for making the user’s interaction as simple and efficient as possible. If we can do so, as Beck did, without compromising the information, the tasks, or goals, then we have properly facilitated user experience. We can apply this principle to every single project we undertake whether it be print, web or signage.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s