Every week I collect a bunch of recommended reads in my browser tabs, hoping for a few spare minutes to skim through them. This week, one such article was Luke Wroblewski‘s blog entry, The Apple Store’s Checkout Form Redesign.
I really enjoy how straight-forward Luke is with his analysis in this article (and everything he writes, his book being no exception). He includes fantastic examples from Apple’s previous checkout form and its new checkout form. However, having just purchased a MacBook online, I have to disagree with his positive assessment of Apple’s new credit card form.
The form is as follows (note I’m using the Canadian form here so it’s missing the Discover card):
As Luke explains, Apple no longer asks users to identify their card type (Visa, MasterCard or AmEx) up front. Because we can infer a person’s card type based on their credit card number, all we really need is that number.
This is absolutely true. We have been asking people to enter unnecessary information for years. However, the problem is exactly that: people are used to entering this information. So when we get to Apple’s form, we eagerly look for a place to identify our credit card.
My brain while using the form: “Lo! Look at those shiny images showing card types! I will click on Mastercard, for that is my card type.”
A re-enactment, in pictures:
And then:
Then, the loud sigh. I gave up and started typing my credit card number in. And then the form did this:
All other cards are greyed out, and my card type was magically highlighted.
I am sure that Apple included the card type images as a way of telling users what cards they accept, but the images seem clickable because they are a) images and b) in a place where the user would normally expect to interact.
If I were to redesign this form, I would let users interact with the images if they want to. Let them select MasterCard up front if it makes them happy, but switch to Visa in the end if that’s the type of card number they enter. Users who choose to identify their card up front will be happy, and users who don’t identify their card up front won’t know what they missed.
Anyone else have an opinion on this?
(Thanks to LukeW for the inspiration to write about this issue.)
4 Comments
I believe that asking for card type was a security issue. If someone’s card number has been stolen (from a web site database) the thief probably will have no idea which type it is. Of course someone who knows about algorithm of CCs would solve it in seconds but most couldn’t.
Now with the security code and other technologies, this may not be necessary anymore.
These are my thoughts about the card type issue, I actually have no official information about it.
About the clickable card images, you are right. That’d be a good feature. On the other hand, I personally don’t look any place to select my card type. I believe that asking for something that we don’t need at all, is unnecessary. Better solution would be having the icons in some other place just to show they accept those.
I renewed my iPhone developer certificate today and was frustrated by the placement of the submit buttons during the checkout process.
They work down the page until the very end, when you have to find the “Finalize Checkout” button up at the top right.
It’s as if they are trying to teach you to work top to bottom only to throw a curve at the end by making you find the last button in a completely different place.
I would consider moving the CC icons to below the input fields. That would give you a visual reminder of what cc’s are accepted without the incentive to click. You could still do the fade confirmation.
Very interesting take!
I don’t like being asked for information that a computer can easily figure out, but I do like getting confirmation that the system has understood my data as I type it in.
Recognizing credit card type is one good example; figuring out city and state based on ZIP is a better one.
They should make all the logos grayscale to begin with, and then colorize/highlight the proper logo when it’s detected.