The rail system serving the Washington, DC metro area has problems. In the past three months:
- fires have affected the Red Line and the Blue, Orange, and Silver Lines
- the U.S. Department of Transportation has removed Board members and threatened to shut down the system
- the entire system did shut down for a day to do repairs (we called it #Metrogeddon), and
- there was a fire captured on video on the Blue, Orange, and Silver Lines the day before Metro’s announced how it intends to fix these problems.
It’s not hard to understand why everyone who depends on Metro expected the plan deliver pain, suffering and inconvenience. The way Metro presented the plan for which stations will be affected, how, and when gives us a great opportunity to look how the choices you make when turning data into a visual can create a good or a bad user experience.
The 28 page, landscape-oriented PDF Metro released to the public spends the first 9 pages detailing why work needs to be done and what will be done. It buries the reader in details she doesn’t care about before presenting a single page graphic illustrating what work will be done and which stations and when.
Based on the way the information is laid out visually, it’s clear Metro gave little to no thought to riders’ primary concern – when is “my” station going to be affected and for how long. They chose instead to highlight the type of work that needs to be done.
Figure out what your users want to get from data and find a way to prioritize that visually.
The designer used small, difficult to see color bars in a Gantt chart format further burying the information about affected stations. This makes the user work too hard to find information based on locality. The graphic feels crowded overall and small text reduces readability even further.
The one thing this graphic does get right: differentiating visually between the two types of closures (single tracking vs. total closure).
Contrast that with the graphic produced by The Washington Post.
This layout is skimmable. If a user is primarily concerned with how this plan will affect Green Line she need only glance down the left column to see that compared to other lines her primary mode of transit is getting off easy in the delays and closures roulette.
Once a user realizes there’s a lot of information about particular lines (I’m talking to you Blue and Orange Line riders), he need only look to the right to find out what type of work it is, when it will be going on, and a link that leads to more information.
It is possible to improve the way this information is presented by:
- letting users filter the data rather than providing a static image,
- allowing users to sort data to group stations on the same lines together.
Overall, though, this visual representation gives priority to what riders need to know first: when will this work inconvenience me and for how long.
The big takeaway here: Step back from the information you’re presenting. Figure out what your users want to get from that information and find a way to prioritize that visually.
On May 19th WMATA released the final version of their Safe Track plan. This version, like the original, public draft, included a visual representation of the planned closures and slow-downs across the rail system.
This version improves over the draft version by raising scannability of the information. It still prioritizes time information over location of work information, which is a choice that makes more sense as the window to work beginning edges over closer.
Increased use of white space and less aggressive borders on the table also increase the readability of the visual. Lack of column headings force readers to work unnecessarily hard, though, increasing the cognitive load as readers try to parse what information is in what columns.