MetroCard Mess

Metrocard Vending Machines. If you’ve been on a subway station in New York during the last year or two, you know what I’m talking about: The humongous boxes that people use to buy the MetroCards you need to ride the subway.

The Good News

One school of thought recommends that you start out with saying something positive, when what you really want to get at is a critique. I’ll honor that principle here: They’re actually not that heinous to use. If you’ve ever used the subway in Washington DC, you’ll know that DC is much, much worse off. It helps, too, that the fare system in New York’s subway is a lot simpler to understand than it’s DC cousin. Another difference from DC is that there are usually manned booths next to them, so you can actually avoid using them altogether, if you want to. The human being is usually much superior to a machine as a user interface (although, sadly, that’s very often not the case in New York in particular). And finally, the New York ones get bonus points for using a touch-screen, which, when the technology actually works, works very well.

The Hopeless Hierarchy

Now that we’ve gotten the positives out of the way, let’s look at some mistakes that could’ve been avoided. The user interface is designed as a hierarchical menu of mutually exclusive choices, a typical programmer-directed, as opposed to goal-directed, design strategy. I’ll walk you through it, so you can get an idea of how it is:

First, in order to get started at all, you have to touch a “start” button on the screen. Instead of just being ready to serve, the giant machine has decided to go to sleep, so it must be woken up before it’ll start taking your orders. That is simply gratuitous.

The second step is to choose a language. A more sensible approach would have been to assume English (except, perhaps, in parts of Brooklyn, Bronx, Queens, or in Chinatown, where you might want to default to Spanish or Chinese), and then present options for changing the language at the bottom of the screen, out of the normal flow. Especially given that the vocabulary necessary to buy a MetroCard is very limited. These buttons could possibly stay on the screen during the whole transaction, so users could change the language later, if they wanted. This is assuming they don’t clutter the screen.

The third step is to choose between a MetroCard and a SingleRide card. I have lived in New York for about a year and a half now, and I still get tricked by this from time to time. How is the user supposed to know the difference between these terms? There’s no other explanation, just the two buttons: MetroCard, SingleRide. It turns out that a SingleRide card is just that: A card that’s only good for a single ride, akin to the token that’s being phased out. What confuses matters for me, though, is that there are two types of MetroCards: The “Unlimited Ride” variant, where you can ride as much as you want within a certain time period (1 day, 7 days or 30 days), and the “Regular MetroCard” variant, where you have a dollar amount on the card and it subtracts $1.50 each time you ride. If you accidentally confuse the SingleRide slang for the Regular MetroCard slang, you have to start all over. As a side note, since this is a “MetroCard Vending Machine”, I’m assuming that a SingleRide card stricly speaking is also a type of MetroCard. But who knows the lingua franca at MTA?

The fourth choice, if you selected the MetroCard option, is to choose between refilling an existing card or getting a new card. Being the green consumer that I am, I select Refill, to minimize plastic waste. It then asks me to insert my old, expired MetroCard in a slot, which I dutifully do, only to be told that “this card cannot be refilled”. The logical thing to do here, would be to assume that the user then wants a new card instead. But not to this machine. It cancels the whole operation, forcing the user has to start all over again (touch start, select language, choose between MetroCard and SingleRide, and remember to not select Refill).

The fifth step is a choice between Unlimited Ride or Regular MetroCard. I already explained the difference between these two. There’s plenty of space on the screen to include some explanation here, but they chose not to, probably because they were lazy and liked their slick only-white-buttons-on-a-black-screen visual design.

The sixth step, if you chose Unlimited Ride, is to select the time period. The options are 1 day ($4, called a Fun Pass for no obvious reason), 7 day ($17), 30 day ($63) or the 30 day ExBus ($120) variant. Again, we’re not told the difference between the 30 day and the 30 day ExBus, but we are told that the latter is about twice as expensive as the former. I still don’t know what the difference is. I’m probably not the only person in the world who doesn’t, so maybe some explanation would be appropriate.

As the seventh step, you have to choose how to pay. You can choose between ATM/Debit card, Credit card, or Cash. If you select ATM/Debit card, you’re asked to dip your card, which you do. If it couldn’t read your card, e.g., because you dipped it too quickly or too slowly, it’ll ask you to dip your card again. But the machine is so insecure that it has to ask you first, whether you really want to dip again or no. So if you just naively go ahead and dip your card again when you see that it wasn’t read correctly, it won’t look at it. First you have to hit the “Yes” button on the screen, then it’ll take a look at your card again.

All Over the Place

This is where the machine goes crazy, neurotically moving the interaction all over the face of the box. The ninth step is to enter your secret ATM card code (if you’re using an ATM card) on a miniature keyboard below the screen, next to where you dipped your card. The tenth step is to approve the charge by hitting a button on the screen (“Your card will be charged $63. OK/Cancel”). The eleventh step is to pull out the newly issued MetroCard from a slot to the right of the screen. The twelfth step is to choose on the screen whether or not you want a receipt. If you said yes, the thirteenth step is to pick up your receipt in yet another slot.

This last round is worth pausing at. The machine has nine different means of interaction:

1. A screen
2. A slot for dipping charge cards
3. A keyboard for entering ATM card code
4. A slot for inserting and retrieving metrocards
5. A slot for inserting dollar bills
6. A slot for inserting coins
7. A slot for receiving receipt and change
8. A scrolling display at the top displaying irrelevant messages
9. Printed instructions and other text on the box

As a user, you have to continually move your eye focus around, trying to guess where the machine wants to talk to you now. I can’t see any easy way of lowering the number of these means of interaction, but at least they could have arranged things so they were neatly packed with the screen (the main focus of interaction) in the middle, and the six others on each side of the screen, and then have given visual hints on the screen (read: arrows) as to where the interaction was to take place next, so the poor user doesn’t have to go hunt-and-seek all the time.

If they also made sure they arranged all the slots so that the normal case would be a straight-forward sequence from the upper-left to the lower-right, chances are it would be easier to anticipate where the next interaction would take place.

A Goal-Directed Design

What would a goal-directed design look like?

Without spending too much time pondering, it seems safe to assume that the user’s goal is to ride the train. More specifically, it is to get a MetroCard of some sort, and pay for it.

A bunch of disclaimers: I haven’t spent more than 10 mintues thinking this over, and I don’t plan to (unless the MTA offers to pay me for it). I’ll probably overlook some features, and may run into some issues with cluttered screens that are hard to solve unless you actually sit down and fiddle with the graphic presentation, which I won’t do either. And finally, whatever I come up with would have to be subjected to usability testing.

All that said, I’d go for basically the same three-step process: Select what you want; pay for it; get it. That seems to be generally accepted in kiosk design. Since there aren’t really that many options to choose from, we can present the user with a simple list:

Welcome!      Please pick a card: One ride $1.50   Value card $3 - $100   1 day unlimited $5   7 day unlimited $17   30 day unlimited $63   30 day unlimited ExBus $120   <th bgcolor=”#ffffff”>Espanol Chinese Francais

The screen says “Welcome!”, so the user will know that the machine is readu for a new user, and not left somewhere in the middle of a transaction broken off by a previous user. It’s ready to serve, and offers the user the full menu of cards that it has, complete with their prices.

Instead of SingleRide, it says “One ride”. Plain English, no jargon. The Value card has a price range of $3 to $100, making it clear that you get to choose how much value to put into it.

Then there is a little whitespace, making it clear, that the options now coming are somehow qualitatively different from the ones before it. After the whitespace, we list the three normal types of unlimited ride cards, making it clear that the only difference is the time period and the price.

Then another whitespace before we list the ExBus card (which I still don’t know what is, otherwise I’d’ve called it something other than ExBus jargon). The price is in red, to make it obvious that you should be aware that this is quite expensive, and should only be chosen if you know what you’re doing.

The next screen would be the pay screen, simply saying something like “Please dip your ATM, Debit or Credit card <—OR insert bills or coins—>” with arrows to the respective slots. Once the user starts inserting a card or cash, we can switch to a display specific for the chosen means of payment. Of course, it should still have an option to switch payment type, say, if the user discovers that he doesn’t have enough cash, or that his card can’t be used in this machine. Note that there are arrows to the credit card/cash slots.

Screen three would be something like “Want to refill an existing card? Please insert it now in the slot on the right—>” with a button saying “New Card”. If the user dips a card that cannot be refilled, he can either try again or hit “New Card”.

The interface outlined above is by no means revolutionary. If I was charged with the task I’d spend slightly more than 10 minutes brainstorming the options available. But it’s a starting point, and, I’d claim, much better than the current interface. I dare you to implement it and do the usability tests, and we can see.

Heuristic Lessons

What lessons can we draw from this? Here’s a list of heuristics that have been violated in the interaction design of the MetroCard vending machine:

• Avoid hierarchical menus.
• Avoid gratuitous steps like the wake-up call.
• If 90% of the population is likely to be okay with a choice (lanuage, in this case), then see if you can get away with assuming this choice, and only have the 10% actively choose something else. This is especially true if the choice doesn’t have very grave consequences.
• Don’t ask the user to choose between things when he doesn’t know the difference or the consequences of his choice.
• If there are two options, and one of them turns out to be impossible, let the user try the other one. Don’t cancel. The user probably still wants to ride the train, even though his current card couldn’t be refilled for some technical reason unknown to the user.

Welcome to New York!