Looks Are Deceptive
When I bought my last car, I thought it looked slick, fresh, cool. But
then, a couple months later, a friend of mine bought a new car that
looked even slicker, fresher, cooler. I could never look at mine
with the same eyes again. It didn’t have the same freshness
anymore. I have to get a new one, now!
What does this have to do with software? Well, software’s got to look
fresh, too. You may think that you buy software on pure
rational merits, but often, the facts are against you.
Microsoft, of course, has known this for ages. They are constantly
moving the fashion in user interface design (not interaction
design, mind you) forward, with every new product release. And
everybody else has played catch-up. Excluding Apple.
Long ago, the Windows 3.1 interface was mostly black-on-white. Then
Microsoft added 3D borders on dialog boxes and buttons. Then came a
completely new look in Windows 95, including a small video clip when
you copy a file. Then came the Office 97 tool bars with buttons that
have no border until you move your mouse over them. Then, in Office
2000, came the little icons in the menus, not to mention “Clippy”, the
animated paper clip. And now, with Office XP, the look of the menus
has changed yet again.
Arguably, a lot of these changes are at least attempts at
productivity enhancements. But the productivity enhancement part of it
could easily have been achieved without an aesthetic
redesign. Microsoft, having a clue, redesigned.
Why? Well, I don’t know about you, but the first thing I do when I get
my hands on a new piece of software is to play with the user
interface. Click on things. Pull down the menus. Right-click
everywhere. Just to get a sense of what it does. Learn what’s
new. Read the “What’s new” section in the help, you say? Never! I just
want to have fun. And since at that moment, I usually don’t have a
real task at hand, say, a letter or a program to write, or a diagram
to draw, I play with the UI, just for the fun of it. Silly? Yes, I’ll
admit to that. But it gives me instant gratification. And as FedEx and
UPS well know, instant gratification is worth real money.
What Happens When You Don’t
One example of a company that did not follow Microsoft’s lead, is
Borland. At the time, I used Delphi most of my programming work, and I
upgraded diligently. And for a long time, each new version that
came out would look exactly like the old one. All the new features
would be hidden under the surface. Exception handling? Cool, but you
can’t see it or play with it. Faster compilation? Excellent, but what
does it matter if the first program I write with my new toy is Hello,
World? DCOM support? Sure, but that takes hours to get anything
useful out of. No instant gratification. I just paid over a thousand
dollars for a brand new version of Delphi, and I’ll be damned if it
doesn’t look exactly like the one I already had. Wait! Maybe
I’m still running the old version? Nope. What a waste!
Of course, later, I’d realize that there was actually good bang for
the buck in that upgrade. But Borland lost their opportunity to
up-front give me that warm and fuzzy feeling. Microsoft would
never blow that chance. They know that first impressions last.
Borland’s software may be technically superior, but it
looks like it’s last year’s model. And every review there is
will always include screen shots. If you can’t see immediately from
the screen shots that there’s something new and cool, why buy it?
Well, yes, of couse, for boring, rational reasons, but that’s just not
as much fun. And after all, if the vendor couldn’t even afford to
give it a new look, is there any reaosn to believe they spent the
effort to make it better under the hood? We all know that, despite
meticulous cost-benefit analysis, the tech CEO usually ends up buying
the software that looks coolest. Or the industrial robot. Or the
car. Or the beard trimmer. Or whatever.
Hence, Microsoft always do something fresh with the menus and the
toolbars, which happens to be the first thing you see when you start
the program. Microsoft, of course, is uniquely positioned to
introduce fashion just there. Windows already includes basic
menus, toolbars, and buttons. But the latest, trendy menu design isn’t
released to the general public. If you want to follow suit, you have
to implement it yourself, and you’ll find yourself playing
catch-up. And since Microsoft dominates your desktop, anyway,
eventually everybody will follow suit. And by then, Microsoft will be
on their way to something new.
Interesting Side Notes
The splash screens that pass by as you install the software is yet
another testament to the value of instant gratification: Gotta let
the guy know he bought the coolest software on the planet, while
he’s waiting impatiently to get it installed. God, computer users are
impatient and ungrateful beasts!
An interesting example of a company that has been successful in
not following Microsoft’s visual appearance lead, is Adobe,
most notably their Photoshop product. Photoshop has its own unique
look and feel, partly because of their Mac background, partly just
because Adobe is stubborn, and rightly so. But Photoshop arguably has
a different audience than most other software: Hard-core graphic
professionals that use it every day. Photoshop already has a
considerable learning curve, but the learning curve is equally
rewarded in productivity-enhancing short-cuts. The point is that
Photoshop’s audience will be inclined to look much deeper before being
disappointed. But Adobe still knows better than to not provide
something visibly new with every release.
Another, related thing, that Microsoft does well, is always include
some obscure feature, that is clearly useless, but fun to show to
your friends. Word’s “Text Effects” (a tab in the Font format
dialog) is an example of this. When has anyone ever had the need to
surround a text by marching red ants? Yet it’s there, and it’s fun to
say “Did you know that Word could do this?”. Likeways with
Auto-summary. It’s utterly useless in practice, but when you take your
friend’s doctoral thesis and ask for a 5-line summary, amusing
nonsense ensue. Or the dockable toolbars. Lots of fun to play around
with, but not a single person that I know actually ended up having
them any other place than right below the menu. And I won’t even
mention “Clippy”. The point is that you tend to show it to your
friends, and that they tend to want to have that, too, so they can
show it to their friends. So the next Monday, they go beg their boss
to buy the latest version of Microsoft’s software. And eventually, he
will.
Is It Worth It?
So is it worth it to invest in a new, snazzy look for the latest
version? Microsoft obviously seems to believe that it is. Not to
mention the car industry. And, of course, the fashion industry.
And, not surprisingly, I believe so, too. Especially if you’re
operating in web software and not desktop software, it doesn’t really
cost that much to hire a graphic designer and tell him: Redesign
this, so it looks like next year’s model. You might as well. Where
you’re going to find the money? How about using the money that you
gained by doing your interaction design.
New subway cars were recently put in service in New York city. I had
my first ride with one of them today, on the 6 line from Astor Place
to 59th st. And I don’t like them. It’s not that I generally hate the
MTA. In fact, I love New
York’s subways. It’s just that I use them every day, so when the
MTA does something stupid, I feel compelled to comment on it.
The new cars have many usability problems: The light’s terrible, the
materials used are sterile and unfriendly to humans, the colors are
ugly. But those problems are not what urged me to write.
What did urge me to write is the recorded voice. The new subway cars
have a recorded voice that announces the stations, as well as
the all too familiar "Stand clear of the closing doors". The
usability of the recorded voices is, at one level, clearly superior to
that of the live train operator, which, as you’ll know if you’ve ever
taken the subway in New York city, are pretty much inaudible. But why
does the recordings have to sound that unnatural?
Something magical seems to happen inside people’s head when their
voices are recorded for these purposes. A complete transformation
takes place. People start to talk funny. They exaggerate
the pronunciation to the extreme.
Think about it for a second. Somewhere at the MTA headquarters, sits
the person responsible for overseeing the recordings of these
announcements. Let’s say his name is Chris. Chris is a person, a real
human being. And Chris has actually, consciously decided that this
was the way the recorded voices for his subway cars should
sound. Was Chris not thinking? What ears was he using when he
heard these dreadful recordings?
Alan Cooper has
trick for intuitively assessing the usability of software systems:
Pretend the software is a human being. How would we react to a
human that acted the way the software does? Very often, we’d be
outraged. I’d like to apply the same technique here.
If I was a journalist, I’d find Chris, and ask him out for an
interview over lunch. And from the moment we met, and through the
whole conversation, I’d speak to him using the same voice as
these recordings, the same inhuman pronunciation. I bet, by the end of
the meal, he’d have gone crazy. In fact, I think Chris would walk out
on me way before the lunch was even over.
Thank you, Chris, for forcing us to listen to this every day!
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!
