comments 7

Quick Project: Amtrak Timetable Redesign

 

After complaining on Twitter about how I found information in Amtrak’s timetables difficult to decipher, I decided to put my money where my mouth is and do a quick little redesign to prove my point. The brief to myself: it had to contain all the same information, use the same typeface (Frutiger), and fit in the same space as the original. Everything else was fair game, including colours, as the timetables are printed in four-colour brochures. However, I was more interested in making small, incremental changes for the better, rather than attempting a radical redesign. I posted the result quickly on Twitter last night and got quite a positive reaction, so here’s a more in-depth look at the redesign and the rationale behind it.

What you see above is the result of around an hour’s work in InDesign, and that includes transcribing all the information from the actual timetable by hand and quickly redrawing some of the icons. I also utilised Dimitry Goloub’s excellent Cittadino Symbols font for the disabled access and bus service icons to save a little bit of time. The original Amtrak Hoosier State/Cardinal timetable is the “before”, my version of it is the “after” – use the scrubber to compare the two.

First, I worked to reduce the size of the header cells: the information there is necessary, but not so important that it needs to dominate so much of the top of the table. Reducing its height leaves more space for the rest of the rows in the table, giving everything a little more room to breathe.

Generally, I don’t like tables that are boxed in with thick black lines: they look inelegant and “Excel-like”, a rigid grid of information. An important decision for me was to remove the grid entirely when there’s no information to be shown – hence, all the white space in the Hoosier State columns until Indianapolis (where the service begins) is reached. No grid equals “nothing to look at here, move along”.  While it doesn’t make a huge difference in this particular table, for something like the Northeast Regional, this could really help readers work out all the different start and end points of the many different trains that make up this complex service. Similarly, the bold blue rule across the top of the Hoosier State’s column will be useful to help distinguish between the actual train and other connecting services in the same column, something I often have trouble with in other, more complex, Amtrak timetables. The rest of the table uses alternating row fills to make it easier to read information across the table and white cell borders, which make the whole table less visually strong.

Some minor changes in the column headings: I say “Read from Top” and “Read From Bottom” instead of “Read Down” and “Read Up”, just for a slightly different approach. I’ve also flipped the “Miles” column to the right of the directional “Arrive/Depart” column, so that the abbreviations for “Arrive” and “Depart” are right next to the actual times indicated, instead of one column apart. Also, I reference “Services” available at each station , rather than the cryptic and less user-friendly “Symbol”. As a traveller, do I want services or symbols to be available to me at the station?

Onto the information contained in the body of the table itself! For a start, all the text is now at the same size: none of this crazy GIANT CAPS TEXT labelling for major stations along the route. It’s sufficient to call a small bit of attention to these stations by using a bolder version of the font and a different cell background colour, rather than interrupting the flow of the tables so completely each time one of these stations is come across.

24-hour time makes an appearance in my version: it both saves space by not having to append “A” or “P” to the time, and also makes it instantly clearer whether a train leaves in the morning or the evening. I’ve continued the use of bold numerals for PM departures for another visual indicator of time. As I’ve had pointed out to me, Amtrak uses 12-hour time in its timetables because that’s the accepted convention expected by its customers, but I wanted to see how 24-hour times looked in comparison.

An important typesetting trick with tables that have a lot of numbers in columns — timetables, financial reports, etc. — is to make sure you use OpenType fonts and the right settings in InDesign. In InDesign’s OpenType options (set from the flyout menu of the Character palette, or — even better — via a paragraph style), you’ll have the option to make numerals be either “proportional” or “tabular”. For a table, you should always set this to “tabular”. It basically makes all the numbers in the table become monospaced, meaning they all line up perfectly underneath each other in columns, regardless of whether they’re as thin as a “1” or as wide as an “8”. It looks so much better, trust me.

Now, the littlest changes that — for me — make the biggest difference: the layout and organisation of the plethora of icons that are scattered throughout Amtrak’s timetables. For those who are interested, the official Amtrak icons are actually a typeface called “Amtrak Pi”, which I don’t have access to. This is why I had to redraw/substitute my own icons, but it was actually for the better.

Just as numbers in tables benefit from being set so that they form neat columns, so do icons. I created my icons so that they each fit into a common square — sometimes using the whole square, other times just being centred within it. This meant that they could be consistently organised into neat columns of similar icons that could be read down the table as well as across. Amtrak’s table just centres as many “Service” icons as are required within each cell, which makes it difficult to compare those services between stations, as they don’t necessarily line up with each other when reading downwards. Even worse, the order of the icons isn’t consistent: Ashland and South Portsmouth–South Shore stations have the “unstaffed station” and “accessible platform” icons reversed in order compared to all the other stations. In contrast, my icons are neatly and consistently arranged in columns: station staffing in the first column, accessibility in the second, and Quik-Track ticketing in the third column. Any gaps in the columns instantly indicate that a service is not available at that station, and comparison between the two types of staffing and the two types of accessibility at all the different stations can be achieved much more rapidly.

The icons for service on each train are treated similarly, although here the best innovation is simply introducing a small gap between the icons and the arrival/departure time, instead of butting them right up to the numbers, which makes them much harder to read, especially when there’s a “D” on one side and a “P” on the other!

That’s pretty much it! I don’t think this table is perfect by any means, but it definitely makes my point: that a few minor, incremental changes to the presentation of information can make all the difference in helping customers get the information they need to travel more efficiently.

Side note: I have to say that I find it incredibly sad that Cincinnati Union Terminal — once one of the great railway hubs of America — now only services six Amtrak trains per week, and they arrive at the ignoble times of 1:13am (northbound) and 3:17am (southbound).

7 Comments

  1. DP

    I actually preferred the original in a number of ways. Keep in mind that a train schedule is often read in less-than-ideal conditions, on a train, on a cab, on the subway or while running to the train station. Light can be poor, the schedule may be crumpled, or the reader may not have glasses on.

    The light blue background seems to weaken the contrast, making it harder to read. And the larger type on the major stations made it easy to find the major stops, which by definition would be of interest to most users, and provided a structure so that minor stops could be found between the major stops. The smaller font on the colored background doesn’t work as well.

    Cleaning up the spacing, fixing the symbols, and getting rid of the mileage all are improvements that make it look more professional. But in general, I think this is one where the better-looking option is not the most useful.

    Personally, I find the vertical lines helpful as well.

  2. The main thing I have to note is the substantial reduction in contrast of the lettering. This is especially noticeable with the light white type on light green background, which is quite difficult to read, but those who have visual impairments may well have difficulty with other areas of reduced contrast, such as the blue type on blue background for important cities.

    Having a consistent alignment of symbols might make sense for this timetable, but there are lots of other ones, and without going through them all it’s hard to tell whether consistency is possible — whether there might be some places where there are enough different symbols that a choice would have to be made between keeping them in line and keeping a reasonably narrow column. Formats like this often seem imperfect for individual timetables because they are trying to be consistent across the whole range of timetables — and Amtrak has lots, of many different types.

    I think you’re 100% right about the distraction of the grid (Tufte calls this kind of thing a “grid prison”). I’d be interested to see how your format would work with a schedule like that of the Atlantic Coast Service, where trains sometimes diverge and re-combine.

    For “symbol” versus “service”, I think you have a good point, but not everything in the column is a service — “unstaffed station” is really a lack of service, and other timetables have other things — for example, note 11 indicating VIA stations and the customs and immigration symbol on the Adirondack timetable. I notice that on some timetables (e.g., Keystone Service) they’ve put the QT symbol right-aligned but in the same column as the station name; I wonder if it’s even necessary to have a column header, or separate column, for symbol at all.

    I’ve often thought it was odd to have consistent numeric symbols on Amtrak timetables without a complete list anywhere of what they were, so you could look them up by number. Also, the move from Helvetica to Frutiger they made several years ago has never been complete, so times and note numbers are still in Helvetica. The compressed Frutiger is a bit harder to read than the normal width version, but the inconsistency is odd.

    As for times, why stop at 24 hour time? Time zones are a pain and the ratio of 1440 minutes to a day is arbitrary. I suggest using Swatch Internet Time “.beats” instead.

  3. Hal Kapell

    Cam, you left in the “on-board services” colum heading, but presumably would relegate the services listings themselves to the bottom of the page notes about the routes. Other than that, I’ve always found Amtrak’s timetables to be dysfunctional and dorky, and need serious redesign. (Incidentally, in a previous post, you mentioned you were redesigning your “Amtrak routes as a subway map” due to the elimination of the Hoosier State. It now looks like the Hoosier will hang in there for a little while longer.

  4. Jim Gilbert

    What happened to the 3 row “On board Service” symbols? Just curious if I’m missing them somewhere. Otherwise looks great and I love the way the symbols are arranged in columns.

Leave a Reply