Inspired by 37Better and Dustin Curtis' Dear American Airlines, I decided to re-design an interface that bothered me: the Metro-North train schedule finder. My re-design is less ambitious than its inspirations, but it has one crucial advantage: you can actually use it!

So check it out and leave me some feedback. Read on if you’re interested in what I was thinking when I made the site.

What was I thinking?

Here’s the form the MTA gives you to find a train schedule:

There are two main problems with this interface:

1. Dropdown lists for picking stations. Selecting an item from a dropdown list is a pain in the ass -- it's much harder to click and scroll for the station you want than it is to just type the station's name. This is compounded by the fact that the first few letters are often enough to uniquely identify the station you're looking for.

   BMTA makes this easier by using autocompleting textboxes:

   

   This interface isn't perfect though -- what if you don't know the name of the station you're looking for? The ideal UI would be a combination of a dropdown and an autocomplete (a combo box). The user should be able to either choose from a list or start typing to make his selection (unfortunately implementing a combo box in the browser is tricky).

2. Selecting departure time is painful. A calendar is a good interface for scheduling something. It helps you see where a new appointment would fit relative to others you've already planned. A calendar is not a good interface for communicating a fixed date you know in advance.

   Why? Well, if you know the exact date (say 9/1/2009) you don't need a calendar; you can just type it in. A calendar only comes into play when, instead of knowing the exact date of your trip, you have a description of how that date relates to today. So, for example, you might know that you're traveling this saturday, or two weeks from monday, and armed with a calendar you can translate this description into a fixed date.

   But why should you have to do this translation yourself? I.e., why not just tell the application that you want to see a schedule for "this saturday", or "two weeks from monday"?

   This is what BMTA tries to do. You can describe the day you want to leave in English (e.g., "wednesday") and BMTA will try to figure out what date you meant. Since parsing English is hard, I also provided a (more modern) calendar widget just in case.

After you pick a starting & destination station and a date, the MTA’s site shows you the train schedule in a table that looks like this:

Nitpicks

1. It shows travel time in minutes. Everyone is going to convert “80” into “1 hour 20 mins” in his head anyway, so why not display this format in the first place?

2. It prints “THROUGH TRAIN” every time there’s no transfer. This isn’t necessary; show transfers if there are any, otherwise leave this blank.

Big Issue

The big issue with this table table is its treatment of fares.

It shows you whether each train requires purchasing a peak fare ticket, but it doesn’t show you the fare itself. If want to see the fare, you have to click away from the schedule to this rather painful table:

Is this from the MTA's site or the movie Brazil?

The problem with this table is that, by making all rows and columns look the same, it assumes you’re equally likely to look up each kind of fare. The table should be optimized so that prices of frequently-purchased tickets (e.g., a one way peak ticket purchased in the station) are easier to find than those of infrequently-purchased tickets (e.g,. a ten trip senior ticket purchased via webticket).

BMTA, on the other hand, shows you the fare information you’re mostly likely to need along with your train schedule: whether a given fare is peak (because you need to specify this when you buy your ticket) and the price of a one-way ticket:

Conclusion

It has some other niceties, but these are the main ideas behind BetterMetroNorth.com.

Is BMTA the perfect way to look up and display train schedules? Of course not.

Here’s one problem with BMTA (I’m sure there are others): It’s not immediately clear from the table of train departures how soon a given train leaves after the one before it.

I.e., trains that leave 2 hours apart appear as consecutive rows just like trains that leave 15 minutes apart. Ideally the table rows would be spaced according to how close the corresponding departure times are. Trains that leave 15 minutes apart would be represented as consecutive rows, whereas trains that leave 2 hours apart would have several blank rows between them. This would make it much easier to determine at a glance how costly it is to miss a given train.

So yeah, let me know if you can think of any other improvements. Alternatively, feel free to create your own schedule site and write a blog post bashing mine (at the time of writing BetterBetterMetroNorth.com is available, so go nuts).