Quantcast
Channel: Adobe InDesign – Cameron Booth
Viewing all articles
Browse latest Browse all 9

Quick Project: Amtrak Timetable Redesign

$
0
0

 

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).


Viewing all articles
Browse latest Browse all 9

Latest Images

Trending Articles



Latest Images