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:
- A screen
- A slot for dipping charge cards
- A keyboard for entering ATM card code
- A slot for inserting and retrieving metrocards
- A slot for inserting dollar bills
- A slot for inserting coins
- A slot for receiving receipt and change
- A scrolling display at the top displaying irrelevant messages
- 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!
32 responses so far ↓
1 Ogilbe Nunez,Rev. // Jan 01, 2002 at 07:36 AM
2 Brian Mindlin // Apr 22, 2002 at 08:19 PM
3 Andrew Montgomery // Sep 14, 2002 at 06:40 AM
4 Jeremai Smith // Sep 24, 2002 at 05:28 PM
5 Angelo Young // Jan 04, 2003 at 03:43 AM
6 Wunkels T. Zehausaphat // Jan 04, 2003 at 04:53 AM
" * Avoid gratuitous steps like the wake-up call."
Subway stations are open 24 hours per day, 7 days per week. They make you hit start to let the machine know to get out of 'screen saver' mode, so there isn't instant screen burn-in. Yes, you can get screens where this isn't a problem. But they cost a lot more. Do you want to pay higher fares for better screens? I don't. Also, the inert screen can be used for advertising, and ......public announcements, like service changes. That's useful. Haven't you ever noticed the changing displays on the machine?
"* If 90% of the population is likely to be okay with a choice (lanuage [sic], 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."
But English is not the primary language for 90% of NYC's population. Spanish is the primary language for 40-50% of the people here. No joke. Here's a known user issue- people will walk away from the machines if they see the 'wrong' language displayed first or feel that it won't work in 'their' language. Hispanophones are unlikely to use what appear to be English-only machines. The language menu is also DIFFERENT depending on neighborhood, just like ATMs....which all function in the same way, so it's going to be a familiar user experience for most people.
" * Don't ask the user to choose between things when he doesn't know the difference or the consequences of his choice."
You don't know what the ExBus pass is (here's a crazy idea- ask the Token Clerk). But everyone who rides the express bus does. Therefore, you don't need to know what it is to get to your destination. Since you live here, you are unlikely to need the One-Day FunPass, designed for tourists. You seemed to be able to figure out how to buy what you need. Guess what? The city does not revolve around you or your needs. There will be options you will be unfamiliar with since you do not need them.
" * 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."
I always buy my (Monthly) cards one day ahead of time. Therefore, I do NOT want to ride the train. If I pick up a card for someone else, I do NOT want to ride the train. If I buy the card on my way home, exiting the station, I do NOT want to ride the train. These are not esoteric situations.
Also, like an ATM, it's important to cancel after an impossble request- it's a big clue to the user that he/she need not worry- THEIR CREDIT CARD HAS NOT BEEN CHARGED, (or, alternatively, their current card has not been devalued/eaten) since the transaction is not complete. What you are suggesting is much more ambiguous. Haven't you ever noticed the machines function almost exactly like ATMs (for good or ill)?
Again: the MTA does not revolve around you or your needs. Do not assume that your usage is the majority's usage of the system.
However, I did like your revised screen design. It does look like it will save time.
7 Brendon Macaraeg // Jan 06, 2003 at 04:30 AM
8 jeni // Jan 06, 2003 at 05:09 AM
9 Jon Meyer // Jan 06, 2003 at 08:46 AM
I consider myself an "expert" user of these machines. I do freelance work and my subway needs vary a lot - sometimes I get a day pass, sometimes a single ride, sometimes a week pass, sometimes a $15 card. I've been riding the subway for years. I use the machines frequently. I understand the options.
Yet I -still- find frequent occassions when I have to cancel out my transaction and start over from the beginning (even restating my language choice) because I was mislead by the menus and went down the wrong path. I have to re-read and re-learn the steps each time. I still use the human ticket sellers whenever there's a choice and a train is approaching - buying from a person is simply much faster.
As a frequent user who understands the fares, it drives me crazy that it takes seven steps (which I have to read carefully to avoid screwing up) to do what feels should be a three step process - select type of card, pay, get card. For a frequent user, a denser UI would be much more suitable - e.g. a list showing showing all the ticket options, with associated prices would be better than a series of badly worded questions.
For infrequent users, the current UI design wisdom is that you should offer a task-based "inductive" UI with plenty of explanations and a nice big Back button to backtrack if you go wrong. The subway kiosk fails to do this too. In an effort to make it look simple, they oversimplified, and produced a UI with terse jargon-laden language and no explanations. I've all too often had to explain to the person in front of me how to use the machine. Infrequent/new users find that the options are too terse and lacking in help.
I think they should support two modes of interaction - one for frequent users, and a different one for infrequent users. You can do this by using one style as the default, and offering a button at the bottom of the page for switching to the other (e.g. an "Advanced" button or a "Please help me choose" button).
[I think language choice should be integrated into the "Start" step, and not be a separate step. (e.g. the word Start could be shown in several languages) or offered as an optional choice on the botton of the screen.]
Jon
10 Jon Meyer // Jan 06, 2003 at 08:46 AM
I consider myself an "expert" user of these machines. I do freelance work and my subway needs vary a lot - sometimes I get a day pass, sometimes a single ride, sometimes a week pass, sometimes a $15 card. I've been riding the subway for years. I use the machines frequently. I understand the options.
Yet I -still- find frequent occassions when I have to cancel out my transaction and start over from the beginning (even restating my language choice) because I was mislead by the menus and went down the wrong path. I have to re-read and re-learn the steps each time. I still use the human ticket sellers whenever there's a choice and a train is approaching - buying from a person is simply much faster.
As a frequent user who understands the fares, it drives me crazy that it takes seven steps (which I have to read carefully to avoid screwing up) to do what feels should be a three step process - select type of card, pay, get card. For a frequent user, a denser UI would be much more suitable - e.g. a list showing showing all the ticket options, with associated prices would be better than a series of badly worded questions.
For infrequent users, the current UI design wisdom is that you should offer a task-based "inductive" UI with plenty of explanations and a nice big Back button to backtrack if you go wrong. The subway kiosk fails to do this too. In an effort to make it look simple, they oversimplified, and produced a UI with terse jargon-laden language and no explanations. I've all too often had to explain to the person in front of me how to use the machine. Infrequent/new users find that the options are too terse and lacking in help.
I think they should support two modes of interaction - one for frequent users, and a different one for infrequent users. You can do this by using one style as the default, and offering a button at the bottom of the page for switching to the other (e.g. an "Advanced" button or a "Please help me choose" button).
[I think language choice should be integrated into the "Start" step, and not be a separate step. (e.g. the word Start could be shown in several languages) or offered as an optional choice on the botton of the screen.]
Jon
11 lee s // Jan 07, 2003 at 06:51 PM
the first time i used these machines, i paused for a few seconds between steps to figure out what to do, but the bottom line is i figured out what to do with a minimum of trouble. this works because:
that said, i do have a few gripes, some of which jibe with your concerns:
12 Michael Greer // Jan 07, 2003 at 07:19 PM
NYC is a very confusing place to live. The main reason is that, since so many people live here, everything is designed as an expert system. It is intended to be fast and obvious for those who live and work here first and foremost (because this is not DisnayWorld). Just try and get a cup of coffee in midtown at 9AM or a bagel at 10AM on a Sunday in Brooklyn and see what I mean. The systems are fast and useful, but you have to know them. They are not intuitive, since they are not meant for passerby but for the 9M who are experts.
So, the criteria of UI are not those you suggested (intuitive), but those of speed, ease, and exactness for expert users. I happen to LOVE the machines. I know what I want, and can get it in 10 seconds or less (just like my bagel or coffee).
However, your gripe about the entry systems is accurate, and the comment about the # key for entering your ATM code is absolutely right. I do hate that thing.
13 Jordan Erenrich // Jan 08, 2003 at 02:59 AM
14 lars pindick // Jan 08, 2003 at 03:55 AM
So there are a few extra steps along the way. So there are some system constraints that influenced the UI. Well, if you had ever worked on a publicly funded project in NYC you'd understand just how amazing it is that they work as well as they do.
But the most irksome part of your critique is the snivelling tone. It allowed me to dimiss your opinion in a NY minute.
Welcome (back) to København!
15 Owen P // Jan 08, 2003 at 10:08 AM
16 wow wowie // Jan 09, 2003 at 02:27 AM
Has anyone any idea what exactly Reven2002 is asking?
---------------------------
How to resolve.
On Wed. Nov.21/2001 I bought a $63.00 unlimite Metro Card to the vending machine at Dyckman Station. Serie #0544285103. I Sent back on 12-07-01 to New York,City Transit,370 Jay Street,Brooklyn,NY 11201 and to this date I have any answer to this matter. The following two week and waiting for, I acquired two $17.00 unlimited and finally I bought the last one per $63.00 dollar on Sunday December 23rd.2001. This one ending on January 21st according with the bus display. I love this system and always I use to,since the implementation two year ago but, How more time I have to wait or how to contact the person in charge. I thing It is enough time to waiting for. Have a nive New Year 2002. Reven2002@aol.com
17 Monica Lynn // Jan 27, 2003 at 06:22 PM
18 eric paul // Feb 04, 2003 at 02:47 AM
A couple of comments. First, I'm just dashing off a note of reply, not working a dissertation, so if there are any typos, give me a break and don't wrongly assume I am dumb.
I have been using the MTA daily for six years. I remember when it was all token based, and I remember being cold, wet, irritable, hot, anxious to get home, late for a meeting while waiting in a line for people to buy tokens.
Point One: The MTA UI isn't perfect, but in this case it is better than the human interface, a.k.a. the toll both people and the others in line. You get stuck in the back of a line in NYC, and you have slow people, drunk people, incoherent people, people dropping change, people asking questions ... all in front of you, screwing up the interaction. It was hell.
Zippity-Do-Dah: The MTA Machines arrive. First experience required attention on my part. The second required less so. By the third time, I knew exactly what I needed and how to get in before even stepping into the station.
As a visual experience, working the machine is a bit like driving a car. You go up to the beast, take control, and drive it through a transaction. You touch the screen here, you put in the money there, you hold your hand here and wait for the card to pop out. Credit card in other hand on standby waiting to dip at prompt.
It's a bit of a symphony of fast hands and quick decisions. It's kind of like a video game.
There is something about the mammoth size of these machines ... the feel (and are) extremely stable. Reliable. Substantial.
Lastly, the Start screen. I believe it's sole purpose is to clearly communicate to a customer that they are without question at the beginning of the process. I don't think it has much to do with the machine sleeping (if so, wake-up is instant). Also, since the start screen is mostly static, I doubt 'burn-in' has anything to do with it either.
Final point: Love 'em, hate 'em. They're so incredibly faster than the human interaction, that to call them anything less than a great success would be a crime. Plus: They always say 'Hello' and 'Thank-you,' something you almost never get from the human interaction.
Sincerely,
Eric Goeres
19 Rusty Campbell // Feb 09, 2003 at 02:24 PM
20 Alan Holl // Feb 10, 2003 at 10:27 PM
21 Fred Bloggs // Feb 20, 2003 at 04:13 PM
22 Patrick Cheung // Feb 25, 2003 at 01:08 PM
23 William Lam // Apr 10, 2003 at 06:22 AM
The machines in a way are designed for those who are used to the system and/or live in the city. Tourists have the option of getting their metrocards from a live human being, which can be more helpful than having a huge line of disgruntled late commuters waiting for some tourists to read all the help pages.
Finally, it was pretty stupid in the first place to run the machines on Windows. Yes, I've seen a couple of them frozen and with BSODs.
24 Jannie Buys // Sep 12, 2003 at 12:21 PM
25 CORNELIUS SEON // Mar 10, 2004 at 06:42 PM
26 alfred alame // Aug 26, 2004 at 01:57 AM
I think tickets dispensed with sticker vending machines like these are excellent for metro stations...
thanks :) from the Vending machine guys...
27 daen // Nov 14, 2005 at 04:39 PM
28 yon // Jun 14, 2006 at 01:18 AM
29 Derek Van Oss // Jul 02, 2006 at 05:39 AM
30 Hershele Ostropoler // Aug 24, 2006 at 07:07 PM
31 Used Machinery // Mar 23, 2007 at 05:16 PM
32 Lars Pind // Mar 23, 2007 at 09:52 PM