Arriving on a new website and trying to find your way around is like being a tourist in a new city:
you haven’t come with any prior knowledge other than your preconceptions;
you are not familiar with the city’s layout; and
you have never completed a task here before.
When you arrive somewhere new, you look for signposts, labels and other familiar languages or symbols to help you out. Tourists can come from all walks of life (ages, cultural backgrounds, languages, etc) so it’s incredibly important for signposts to be universally meaningful.
The New York City Subway: Cognitive overload
The New York City subway opened in 1904, and it’s been rebuilt, revised and upgraded multiple times throughout its life. It has 36 subway lines and 472 stations, and the deepest station is 55m below the ground.
)
A map of the NYC subway appears very busy – it can be daunting to any tourist new to the area, including me. However, using some basic UX signs and signals, I can attempt to understand this complex system.
Train line identification
I have taken many trains and trams in Perth and Melbourne from my time living and working there. In those cities, the train lines were always differentiated by names:
Midland line (Perth)
Lilydale line (Melbourne)
Gawler line (Adelaide)
While the NYC subway has used a bit of this naming system, they placed a heavier emphasis on numerical and alphabetical codes. These codes were incredibly simple, such as “F” or “6”, and much easier to understand and recall, rather than “Lexington Avenue Local Pelham Bay Park Express”.
The amount of description in the name of that train line is just confusing. Are Lexington Avenue and Pelham Bay Park two different locations? What does ‘local’ mean? Does ‘express’ mean that I might miss my stop?
While locals might understand this, it was meaningless to me as a tourist who didn’t know the area. Simplifying all that cognitive overload into a single-digit code was very refreshing.
Websites should be built with the same basis in mind – never expect your visitors to know your layout and structure of your site upon landing. Minimise cognitive load by eliminating unnecessarily complicated descriptions, labels and navigation options.
Code F: I found my train line!
I knew I needed to follow the F line to get to where I wanted because I saw this next to my destination on a map. So we followed all the signs that said “F”.
This is similar to information scent – web users look for cues related to their desired outcome. Users need to be able to predict the success of a given path.
)
)
)
)
Heuristic: Aesthetic and minimalist design
“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.” – Nielsen Norman Group
By coding the subway lines into single digits, it was easy for tourists to navigate the subway without having to completely understand the full system. The code was the only information I needed to follow to complete my task; I didn’t need to know the whole system to get to my destination.
Simplicity is a work of art
I was very impressed with the way the digital display on the train was designed to show each stop and the train’s progress along the line. Its ability to communicate key information in a streamlined and concise manner was a work of UX art.
)
Sometimes it’s easy to underestimate the effort and skill that has gone into creating something simple. An end result that is simple is often incorrectly associated with being easy. However, it’s much easier and quicker to create a cluttered design and a poor user experience than to create something that is simple, easy and says more with less.
A great design is never the first version. Usually, the best versions of a product, design or idea have been developed, iterated and reviewed over many, many versions – and, really, it’s never completely ‘finished’.
I wonder how many iterations and tests that digital display went through to get it to that fantastically simple model?
Heuristic: Visibility of system status
The subway is underground, which further reduces our ability to perceive real-world status (time of day, position within the city, etc). The digital display on the inside of the subway helps travellers know which stop is next, which stops are further down the line. The display also changes from “next stop” to “this is” – a seemingly minor detail that adds an extra piece of clarification.
Getting out of the subway
Once you’re off the train, you have to figure out how to get out of the subway, especially if you are several levels down. Luckily, there are giant, bright red exit signs that are very hard to miss. Once you see these, you can follow them all the way out.
These reminded me of breadcrumbs on a website. If you had landed on a deep page in a website, you should be able to follow breadcrumbs all the way out.
)
)
)
)
We were able to easily exit the subway station despite being several levels deep and not knowing our way around. The exit signs were prominently visible which prevented us from getting lost.
Help is always available when you need it
If we had have gotten lost in the subway and were unable to find our way out, we could always have called for help and assistance via the help phones that were located around the subway.
Heuristic: Help and documentation
“Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.” – Nielsen Norman Group