What a week of transiting by train in Tokyo has taught me about UX
As UI/UX designers, we are often so invested in user experiences (UX) from a digital standpoint that we often forget that the UX that plays the biggest role in our day to day lives are in fact physical user experiences. From buying a cup of coffee from your local cafe, to finding your way through the aisles of a grocery store, all of these user experiences has been meticulously designed for better or worse.
Physical user experiences in our surroundings are often invisible to us until it causes us frustration or dismay. We rarely tend to give much thought to it and really reflect deeply on how it’s shaped and designed. However I found that one great way to begin paying more attention to our environments is by travelling ! It helps reset our mindset and gives us a new and fresh perspective on what makes a user experience memorable.
This past Christmas, I had the opportunity to visit my girlfriend and her family in Tokyo. Though I’ve been to Japan a few times, it was the first time I’ve been back since I became an UI/UX designer. Throughout the trip, I would often catch myself stopping and admiring the simple yet elegant user experiences of mundane items that surrounded me. However a user experience that particularly stood out to me was one that I had the opportunity to experience everyday of my weeklong trip — the Tokyo Train Network.
Famous for its reliability, the Tokyo Metro transports over 5 million passengers everyday. Late trains are such a rarity that when one does occur, station employees often board the trains to personally apologize and hand out special certificate for workers to show their superiors as an excuse for their tardiness.
Here is the full railway map of Tokyo with all of its suburbs. Isn’t it beautiful ? Throughout my week long trip, not once did I ever felt lost or confused. The entire user experience was absolutely seamless. Within a few days, I was transiting like a local. I would be changing lines multiple times a journey, tactically waiting for the next train knowing it’s an express train, and even boarding on specific carriages knowing my exit would be closer when I disembark, this all while only having a very limited working proficiency of Japanese.
What’s the secret ? Progressive disclosure. Progressive disclosure is an interaction pattern that sequences information and actions within time, so that user’s don’t feel overwhelmed with all the information all at once. By disclosing information progressively, in context, it helps users manage the complexity of a product. By receiving each information at the right moment, I managed to reach my final destination without any worries, in fact I didn’t even noticed I was being guided. Let’s take a closer look on why I was able to experience this seamlessness and what we can learn from it as UI/UX Designers. It’s all in the details !
Japanese stations are interconnected and stations are often a connection point to many other different lines. Just like how a clear visual hierarchy guides the eye to the most important elements on the page, the signage with proper text hierarchy and unique colour coding guides the users to the correct platform amongst a busy station. Better yet, the distance to each line is also prominently displayed at the bottom.
When a design keeps the users informed of the current system status and in this case location, users are able to self-evaluate and determine their next steps accordingly. Open and continuous communication is absolutely critical in fostering confidence and trust in the product.
As soon as you enter the station, scattered all over the floor are yellow tactile paving and arrows. As a service for the masses, the paving serves to assist the visually impaired by helping them navigate to important areas within the station while arrows ensure proper movement of human traffic.
When designing, we should follow Web Content Accessibility Guidelines (WCAG) to ensure our solutions are inclusive and accessible as possible to users of all backgrounds and abilities. Additionally, aim to have clear and concise directions across a user journey to help users reach their end goals. Provide relevant help and documentation when necessary during the early stages when users are developing proficiency in the system.
Recycling is taken very seriously in Japan. Take these recycle bins for example. The input slot of these bins varies in shape, large rounded rectangles for burnable items and plastics, circles for plastic bottles and cans, and a thin rounded rectangle for papers and magazines. These shape provides clear connotations and affordances to users on what they should be throwing in each bin from just a quick glance.
Help users make better decisions by presenting Call To Action (CTA) buttons and options clearly and concisely. A clear UX copy lets users fully understand the outcome of each option, allowing them to make informed decisions swiftly and confidently.
To accommodate for high amounts of human traffic, ticket machines accepts coins and paper bills in bulk, and ticket gates can be accessed from either sides. In Japan, edge cases are often well thought of and incorporated into the design rather than taken out of it.
By considering edge cases, this makes products and user experiences incredibly flexible, efficiently catering to both experience and inexperienced users. For the experienced user, functionalities are present to accelerate user flow, meanwhile for the inexperienced users, the base product remains intuitive. Flexible processes allow users to make selections about how they want the product to work, thus user experiences are personalized for each individual user.
Here’s a fun one, when you need help at a ticketing machine, simply press the help button and a station staff will magically appear from the wall to assist you. Perfect example of providing help in context the moment user requires it.
PASMO and Suica are reloadable transportation cards used for train and bus travel throughout Japan. Both cards can be added onto the Wallet App on most phones saving you the inconvenience of a physical card.
Better yet, the credit within PASMO and Suica cards can be used for all things within the station, from lockers, to convenience stores, to vending machines, to even food stands within the station or train platforms !
When designing, try to maintain an internal consistency within an interface. When our solutions adhere to a standard, users can build off of the knowledge within the system and know what to expect next. As a result learnability of the product and its features increases and cognitive load required from users decreases.
Once on the platform, signages begin displaying more detailed information of incoming trains. Although this information may be helpful at the concourse of the station, it is most useful on the actual platform. Signages in the concourse help users locate the platform, while signages on the platform begin presenting information about the incoming train.
Humans have limited short term memory. By promoting recognition rather than recall and utilizing progressive disclosure, we reduce the amount of cognitive effort required from users. Information is always presented one step at a time, in context, at the exact moment user requires it.
Platform signages tells users the station they are on, the station thats coming next, and the direction the train is heading. The name of the station is prominently displayed but more importantly is given an alphabet corresponding to the line and a number corresponding to the number of stops from the terminus (C01).
The Tokyo Metro System is an inclusive solution that caters to a wide range of users, from the everyday commuter to the average tourist. The use of numbers and letters is a great example of designs that speaks the users language. When information is presented in a natural, logical, and universal order that fits the mental model of users, it helps build an intuitive and inclusive user experience.
Once you board the train, you will be greeted with an interface that provides a comprehensive amount of information about the train and the route. A map of the next station and its exits are shown, along with a diagram indicating the carriage the passenger is currently on. Passengers are able to prepare to disembark left or right accordingly, ahead of the train arriving at the station.
Users strive for predicability and control. The more contextual information we can present to the users, the better users can accurately assess the system they are interacting with, and thus the better suited they are to making good decisions and attaining their user goals in an efficient manner.
